すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】AnimatedAlignで移動アニメーションを作る

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

  • ウィジェットの位置を変化させた際に移動させるアニメーションを表示したい

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

api.flutter.dev

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


AnimatedAlign使用パターン

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

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

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

ランダムにアイコンを移動させる

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

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

Alignment( x, y )で位置を指定する

ランダムにアイコンを移動させる2

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


各プロパティ

alignment

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

curve

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

api.flutter.dev

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

ics.media

duration

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

api.flutter.dev

onEnd

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

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

アニメーション終了時にアイコンサイズを大きくする例