アプリを開発していると以下の機能を実装したい時がある。

このような場合AnimatedAlignを用いると簡単にアニメーションが作成できる。

本エントリでは以下の流れでAnimatedAlignを用いたアニメーションの作り方を説明する。

AnimatedAlign使用パターン

主な使用パターン別に動作画像とコードを示す。

使用しているプロパティは「各プロパティ」のセクションで説明する。

Alignmentクラスのプロパティで位置を指定する

上のサンプルアプリでは「move」ボタンをタップするとランダムでアイコンの位置を変化させている。アイコンの位置はAlignmentクラスのプロパティで指定している。

より詳細な位置を指定したい場合、次に示すAlignment( x, y )を使用すれば良い。

Alignment( x, y )を使用することでより詳細に位置を指定できる様になった。 xとyが0の場合ウィジェットの中心になるので、Random().newBool()で正負のランダムネスも生成している。

childに指定されたウィジェットの表示位置を指定する。この値が変わった際にアニメーションでウィジェットの移動を表現する。

アニメーションのイージングを指定する。渡す値はCurveクラスのインスタンス。

イージングについては以下の記事などを参照。

アニメーションを表示させる時間を指定する。渡す値はDurationクラスのインスタンス。

移動アニメーションが終了した際にコールされるイベントハンドラ。本エントリのコードでは記述していないが、使用頻度がまあまああると思われるプロパティ。

例えば次の動作画像のように移動アニメーションが終了したらアイコンのサイズを大きくしたりできる。（ただしこの場合onEndで行う必然性はあまり無いが...）