アプリを開発していると以下の機能を実装したい時がある。
このような場合AnimatedOpacity
を用いると簡単にアニメーションが作成できる。
AnimatedOpacity
使用パターン
主な使用パターン別に動作画像とコードを示す。
使用しているプロパティは「各プロパティ」のセクションで説明する。
ウィジェットをフェードインで表示する
「Fade in Flutter logo.」ボタンを押すと2秒間かけてopacity
プロパティを0から1に変化させFlutterLogo()
をフェードインするアニメーションを表示している。
ウィジェットをフェードアウトさせる
各プロパティ
opacity
必須プロパティ。child
に指定されたウィジェットの透過度を設定する。
0が完全に透明で1が完全に不透明となる。
duration
必須プロパティ。アニメーションを表示させる時間を指定する。渡す値はDuration
クラスのインスタンス。
curve
アニメーションのイージングを指定する。渡す値はCurve
クラスのインスタンス。
イージングについては以下の記事などを参照。
onEnd
移動アニメーションが終了した際にコールされるイベントハンドラ。 本エントリのコードでは記述していないが、使用頻度がまあまああると思われるプロパティ。