トランジションとアニメーション

スタイルの変化は .Transition(...) でアニメーションします。コンポーネントはフレームごとに再実行されません。

#ホバーのトランジション

トランジションはベーススタイルに置き、ポインターが入ったときと出たときの両方に効くようにします。

func HoverAction() *ui.Element {
	return ui.Button().Child("Continue").
		Padding(12).
		BorderRadius(8).
		BackgroundColor("#334155").
		TextColor("white").
		Opacity(0.85).
		Transition("background-color 160ms ease-out, opacity 160ms ease-out").
		Hover(func(s ui.StyleBuilder) ui.StyleBuilder { return s.BackgroundColor("#2563eb").Opacity(1) })
}

同じ宣言は Active、Focus、Expanded、DragOver でも使えます。

#状態によるアニメーション

目標値はシグナルまたは .When で変えます。アニメーション中はノードをマウントしたままにします。

func AnimatedSelection() *ui.Element {
	selected, setSelected := ui.CreateSignal(false)
	return ui.View().FlexCol().Gap(12).Children(
		ui.Button().Child("Toggle emphasis").OnClick(func() { setSelected(!selected()) }),
		ui.View().Child("Your selection").
			Padding(20).
			BorderRadius(12).
			BackgroundColor("#334155").
			TextColor("white").
			Opacity(0.6).
			Transition("background-color 180ms ease-out, opacity 180ms ease-out").
			When(selected, ui.Style().BackgroundColor("#2563eb"), ui.Style().Opacity(1)),
	)
}

トランジションの途中で逆方向にすると、いま見えている値から続きます。

#時間とフレームレート

複数のプロパティが同じタイミングを共有するときは ui.TransitionDeclaration を使います。

func CappedTransition() *ui.Element {
	return ui.Button().Child("Hover me").Padding(12).BackgroundColor("#334155").TextColor("white").Opacity(0.8).
		Transition(ui.TransitionDeclaration{
			Properties: []string{"background-color", "opacity"},
			Duration:   180 * time.Millisecond,
			Easing:     "ease-out",
			MaxFps:     30,
		}).
		Hover(func(s ui.StyleBuilder) ui.StyleBuilder { return s.BackgroundColor("#2563eb").Opacity(1) })
}

フィールド	使い方
`.TransitionProperty(...)`	プロパティ名。カンマ区切りの文字列または `[]string`。
`.TransitionDuration(...)`	ミリ秒数、`time.Duration`、または `"180ms"` / `"0.18s"`。時間は 0–10 秒に制限されます。
`.TransitionEasing(...)`	`"linear"`、`"ease"`、`"ease-in"`、`"ease-out"`、または `"ease-in-out"`。
`.TransitionMaxFps(...)`	任意のフレームレート上限。省略するとディスプレイに従います。

ノードは、選んだすべてのプロパティに対して 1 つの時間、イージング、フレームレート上限を持ちます。遅延、cubic-bezier()、プロパティごとのタイミングはサポートされていません。

ui.Style().Transition(180 * time.Millisecond) は背景、ボーダー、テキストの色をアニメーションします。"all" は対応するすべての描画プロパティを含みます。"none" はそのショートハンドを外します。

#対応するプロパティ

トランジション名	スタイルメソッド
`background-color` または `background`	`.BackgroundColor(...)` または単色の `.Background(...)`
`border-color`	`.BorderColor(...)`
`border-width`	`.BorderWidth(...)`
`border-radius`	`.BorderRadius(...)`
`color`	`.TextColor(...)`
`opacity`	`.Opacity(...)`
`transform`	`.Transform(...)`
`box-shadow`	`.BoxShadow(...)`

幅、高さ、パディング、グラデーションのストップは補間されません。スライドするスイッチのつまみには、.Transform("translateX(20px)") と .Transition("transform 160ms ease-out") を使います。

#マウントと視差効果の抑制

トランジションは、既存ノード上の変化をアニメーションします。ui.Show は子をすぐに外し、フェードアウトを待ちません。透明度ゼロでもレイアウトと入力は受け取ります。

ダイアログでは、EnterDuration と ExitDuration が閉じる内容をマウントしたままにする時間を制御します。Dialog を参照してください。

トランジションはシステムの Reduce Motion 設定に従います。1 つのウィンドウで上書きするには native.WindowOptions.ReduceMotion を設定します。

#アニメーション画像

GIF または WebP のパスを ui.Image に渡します。再生はファイルに従い、タイマーは不要です。

func AnimatedImage(path string) *ui.Element {
	return ui.Image().Value(path).
		Width(96).Height(96).ObjectFit("contain")
}

ファイルは CLI の resources オプションでパッケージします。バンドルするリソースと Image を参照してください。