【日本語版】【Flutter】Widget of the Week – #50 AnimatedOpacity【要約】

動画

要約

  • 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 一覧