【FlutterFlow】動く！震える！大きくなる！アニメーションを追加しよう

こんにちは～。今回からアニメーションに取り組みたいと思います。

アニメーションこそ、もっともスマホアプリの振舞いとして面白そうなところですよね～。オブジェクトが回ったり、移動したり、大きくなったり、といくつかのパターンがあります。

これをやっていきましょう！できるだけ、GIFアニメで動きが見えるように紹介しますよ～。参考にするのは、こちらの公式資料です。

では、行ってみよ～。

選べる8種類！充実したアニメーション

まずは、どんなアニメーションがあるか、確認しましょう。

合計８つもありまっせ。アニメーションの説明でアニメーションが見られなくてすみません。これから作りますから。

• Fade：ゆっくり現れたり消えたりします。

• Slide：左右にスライドします

• Scale：サイズが大きく、または小さくなります。

• Rotate：回転します。いぇい！

• Shake：震えます。注目して！みたいな

• Blur：ぼけたり、クリアになったりします。どういうとき使います？

• Saturate：いろの彩度を変化させます。

• Tilt：文字通りには「傾ける」ですが、３Dにしてくれるらしい！

アニメーションのトリガー

さて、アニメーションを開始するきっかけはどう与えるのでしょう。それには、２つあります。

• ページ読み込みと同時に開始する

• ユーザーのアクションと同時に開始する

なるほどね～。これは両方とも試さないといけませんね。まずはページ読み込みの場合からやりますか。

ページ読み込みと同時に開始

とうことで実験しよう！

空のページにCircleImageを一つ追加して、位置を調整します。カラム直下に置きました。RowやContainerでWrapした方がいいのか、よく分かりませんが。

こんな感じです。

では、CircleImageのプロパティに移動して、アニメーションを選択します。デフォルトでは、アニメ開始のきっかけは、On Page Load（読み込み時）になっています。そのままでいいや。

アニメーションの追加を押しましょう！

すると、アニメーションを選ぶメニューが表示されます。ここで皆さま、下の画像にご注目ください。動くんですよ、カーソルをかざすと、メニューにある小さい正方形が！

開発者のユーザー体験もいいのが、FlutterFlowの素晴らしいところですね。分かりやすい！

では、アニメーションをお見せしよう、、、と思ったのですが、CircleImageだとアニメがうまくプレビューされませんでした。なぜかしから？

コンテナに差し替えます。すみません。行き当たりばったりで。下の図のとおりです。これにFadeのアクションをつけます。

Fadeを選ぶと、いろいろ設定メニューが現れますが、ここではデフォルトにしておきましょう。プレビューします。

はい、動きましたよ～。無事プレビューできました。

プレビューできたところ、本日はここまで～。今回は、アニメ―ションの種類をご紹介して、一つ実際にプレビューしてみました～。

次回は、もう少しアニメーションの設定を見てみましょう！