動画
要約
- AnimatedOpacityを使うことで簡単にOpacityのアニメーションを実現できる。
- 使い方は簡単でwidgetをAnimatedOpacityでラップして、アニメーションの長さをdurationに指定するだけ
内容
widgetの透過性、見え方を変えたいときは、AnimatedOpacity widgetを使いましょう。
AnimatedOpacityを使うことで、例えば、選択されていないContainerを薄く目立たないようにして、選択されているwidgetを強調するすることができます。
使い方は簡単です。
まず、アニメートしたいwidgetをAnimatedOpacityでラップします。
その後、アニメーションにかける時間をdurationに設定します。
最後に、透明度の初期値をopacityに設定したら完成です。
setState等でopacityの値を変更すると、アニメーション付きで透明度が変化します。
Opacityの値は0が完全に透明な状態を表し、1が完全に表示された状態を表します。
0から1の間の数値を設定することで、透明度を自由に制御することができます。
アニメーションのタイプ（Animation curve）を指定したい場合は、curveパラメータを設定しましょう。
例えば、curveにCurves.elasticOutを指定すると点滅しながら、透明度が変化するようになります。
AnimatedOpacityは暗黙的にアニメーションを追加できるwidgetです。
あなたはアニメーションの管理はほとんどする必要なく、Opacityに関するアニメートを実現できます。
もし、あなたがアニメーションを明示的に管理したい場合はFadeTransitionを使って下さい。
いろいろなアニメーションを組み合わせて実装することも可能です。
まとめ
Widget of the Weekの#50 AnimatedOpacityの日本語翻訳版でした。
Opacityはお手軽に視覚効果を実現できる方法です。
AnimatedOpacityを使うことで開発者はシンプルな実装だけで自然なOpacityの変化を実現することができます。
■ 次の記事はこちら
作成中
■Widget of the Week まとめ
Widget of the Week 一覧