アプリを開発していると以下の機能を実装したい時がある。
- ウィジェットのサイズの変化をアニメーションで表現したい
このような場合AnimatedSizeを用いると簡単にアニメーションが作成できる。
本エントリでは以下の流れでAnimatedSizeを用いたアニメーションの作り方を説明する。
AnimatedSize使用パターン
主な使用パターン別に動作画像とコードを示す。
使用しているプロパティは「各プロパティ」のセクションで説明する。
何かしらのボタンが押された際にサイズを変化させる
タップでサイズを10増やし、ダブルタップでサイズを100に戻している。
AnimatedSizeは基本的にこの様に何かトリガー操作をユーザーが行い、それに反応する形でサイズを変更するパターンが多い。
各プロパティ
duration
必須のプロパティ。アニメーションを表示させる時間を指定する。渡す値はDurationクラスのインスタンス。
curve
アニメーションのイージングを指定する。渡す値はCurveクラスのインスタンス。
イージングについては以下の記事などを参照。
