【Flutter Widget of the Week #4】AnimatedContainerを使ってみた
はじめに
Flutter Widget of the Week #4 AnimatedContainer についてまとめましたので、紹介します。
AnimatedContainerとは
AnimatedContainer とはその名の通りアニメーションをつけられる Container のことです。
指定した時間に対して徐々に値が変わり、色やサイズ、位置などが変化し、まるで動いているように見せることができます。
この Widget で実行できるアニメーションはいくつかあるので以下で実際に使ってみましょう。
サンプル
まずは公式ドキュメントにもあるタップするとheight, width, color および配置が変化するサンプルを実行してみます。
コードは下の「Flutter」をタップすると表示されます。
このサンプルの中身をみてみましょう。
AnimatedContainer を見ると三項演算子で色やサイズ、位置などの指定をしています。
三項演算子
class _AnimatedContainerSampleState extends State<AnimatedContainerSample> {
bool selected = false;
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: AnimatedContainer(
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
alignment:
selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: const Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: const FlutterLogo(size: 75),
),
),
);
}
}
アプリ起動時は bool型の selected が false のため、Container の width（横幅）が100.0, height（縦幅）が200.0, color（色）が青となり、 Container 内にある FlutterLogo の alignment（整列）は上部の真ん中になります。
次に Container をタップすると selected が true に変わるため、Container の width（横幅）が200.0, height（縦幅）が100.0, color（色）が赤となり、 Container 内にある FlutterLogo の alignment（整列）は真ん中に 配置されます。
もう一度タップすると selected が false に、さらにタップすると selected が true に・・・のように タップするたびに selected の値が変わり、それと一緒に Container の形や色、FlutterLogo の配置が変わるようになります。
アニメーションの動きとしては,curve に指定されている Curves.fastOutSlowIn のような変化の仕方をします。（以下参照）
他には移動や軸の回転、拡大縮小のアニメーションを作成することができます。
移動
移動アニメーションは transform プロパティに
Matrix4.translationValues(x軸の位置, y軸の位置, z軸の位置))
を入れることで作れます。
右下の FloatingActionButton をタップすることでアニメーションが開始されます。
軸の回転
軸の回転アニメーションは transform プロパティに
Matrix4.rotationZ(z軸での回転角度)
を入れることで作れます。
z軸以外にx軸とy軸の回転もできます。
Matrix4.rotationX(x軸での回転角度)
Matrix4.rotationY(y軸での回転角度)
右下の FloatingActionButton をタップすることでアニメーションが開始されます。
拡大縮小
拡大縮小アニメーションは transform プロパティに
Matrix4.diagonal3Values(x軸, y軸, z軸)
を入れることで作れます。それぞれの引数に入れた数字分倍のサイズになります。
右下の FloatingActionButton をタップすることでアニメーションが開始されます。
アニメーションの種類
アニメーションの動きには Curves.fastOutSlowIn 以外にも 40種類以上のアニメーションがあります。いくつか見てみましょう。
コードは最初のサンプルをもとに AnimatedContainer プロパティを変更したものになってます。
Curves.bounceIn
アニメーションの仕方
Curves.elasticIn
アニメーションの仕方
Curves.linear
アニメーションの仕方
Curves.easeInCirc
アニメーションの仕方
最後に
今回は AnimatedContainer を紹介しました。アニメーションを一つ入れるだけで見た目が違って見えるので、効果的に使っていきたいですね。
次は #5 Opacity です。またお会いしましょう。
参考記事
合わせて読みたい
Discussion