JPFlutterの基本アニメーションAnimatedContainerAnimatedContainerAnimatedContainer「AnimatedContainer」は指定した期間に対して徐々に値を変更するコンテナです。対象の値を変更した時に自動で、そのプロパティの新旧の値間でアニメーションをしてくれます。コンテナに備わっている値を変えるだけで様々なアニメーションを作れるのでとても便利なウィジェットです。実際のアニメーションを作る前に押さえておきたい2つのことに関して先に説明します。Duration「AnimatedContainer」には時間を制御するdurationが設定できます。これは、アニメーションが変化するのにかかる時間を指定します。1)と設定することで時間を設定できます。「Duration」は以下のように、日付から~マイクロ秒までを設定できます。0})Curve「AnimatedContainer」にはアニメーションの仕方を制御するcurveが設定できます。curveには「Curves」のプロパティをcurve:Curves.linearのように設定します。この「Curves」は多岐に渡り様々なアニメーションを作成することが可能です。公式のページにて詳細な動きについて説明がされているので、参照してみてください。色の変更は以下のように行います。}}colorは色を設定します。「AnimatedContainer」のcolorを動的に変更することで、色が変化するアニメーションを作成できます。画面右下の「FloatingActionButton」を押すと、_onTapが動作し、色を100から900へ変更しています。floatingActionButtonについてはこちらサイズの変更サイズの変更は以下のように行います。}}widthは横幅のサイズを設定します。heightは縦幅のサイズを設定します。「AnimatedContainer」のwidthやheightを動的に変更することで、大きさを変えるアニメーションを作成できます。画面右下の「FloatingActionButton」を押すと、_onTapが動作し、横幅を100から200へ変更しています。これは高さでも同じで、高さの数値を動的に変更することでアニメーションさせることが可能です。配置の変更は以下のように行います。}}alignmentは画面内の配置位置を設定します。「AnimatedContainer」のalignmentを動的に変更することで、「AnimatedContainer」内のウィジェットの配置を変えるアニメーションを作成できます。画面右下の「FloatingActionButton」を押すと、_onTapが動作し、子要素をAlignment.topLeftからAlignment.topRightへ変更しています。PaddingPaddingの変更は以下のように行います。}}paddingは子要素に対するPaddingを設定します。「AnimatedContainer」のpaddingを動的に変更することで、Paddingを領域を変更するアニメーションを作成できます。画面右下の「FloatingActionButton」を押すと、_onTapが動作し、Paddingのサイズが20から50に代わり子要素が小さくなった変更されたのがわかると思います。MarginMarginの変更は以下のように行います。}}marginはMarginを設定します。「AnimatedContainer」のmarginを動的に変更することで、Margin領域を変更アニメーションを作成できます画面右下の「FloatingActionButton」を押すと、_onTapが動作し、Marginのサイズが20から50に代わり「AnimatedContainer」の位置が変更されたのがわかると思います。軸の回転(rotation)回転は以下のように行います。}}transformは変形を意味しておりいくつかの変形方法を提供しています。今回は回転をみていきましょう。Matrix4.rotationを使って制御していきます。「AnimatedContainer」のtransformに対して以下いずれかを動的に変更することで、要素を回転させるアニメーションを作成できます。Matrix4.rotationXMatrix4.rotationYMatrix4.rotationZ画面右下の「FloatingActionButton」を押すと、_onTapが動作し、X軸に対してが0から45に変えることで。X軸方向へ回転しています。rotationのX,Y,Zは以下のようなイメージとなります。移動(translation)移動は以下のように行います。}}transformは変形を意味しておりいくつかの変形方法を提供しています。今回は移動をみていきましょう。Matrix4.translationValuesを使って制御していきます。「AnimatedContainer」のtransformに対してMatrix4.translationValuesを動的に変更することで、要素を移動させるアニメーションを作成できます。translationValuesは引数としてX,Y,Z座標を受け取れるので、それぞれ移動したい位置へ動的に変更して利用します。拡大縮小(Scale)拡大縮小は以下のように行います。}}transformは変形を意味しておりいくつかの変形方法を提供しています。今回は拡大縮小をみていきましょう。Matrix4.diagonal3Valuesを使って制御していきます。「AnimatedContainer」のtransformに対してMatrix4.diagonal3Valuesを動的に変更することで、要素を拡大または縮小させるアニメーションを作成できます。diagonal3Valuesは引数としてX,Y,Z軸の比率を受け取れるので、それぞれ拡大、または縮小したい比率を動的に変更して利用します。