【FlutterFlow】動く!震える!大きくなる!アニメーションを追加しよう
こんにちは~。今回からアニメーションに取り組みたいと思います。
アニメーションこそ、もっともスマホアプリの振舞いとして面白そうなところですよね~。オブジェクトが回ったり、移動したり、大きくなったり、といくつかのパターンがあります。
これをやっていきましょう!できるだけ、GIFアニメで動きが見えるように紹介しますよ~。参考にするのは、こちらの公式資料です。
では、行ってみよ~。
選べる8種類!充実したアニメーション
まずは、どんなアニメーションがあるか、確認しましょう。
合計8つもありまっせ。アニメーションの説明でアニメーションが見られなくてすみません。これから作りますから。
Fade:ゆっくり現れたり消えたりします。
Slide:左右にスライドします
Scale:サイズが大きく、または小さくなります。
Rotate:回転します。いぇい!
Shake:震えます。注目して!みたいな
Blur:ぼけたり、クリアになったりします。どういうとき使います?
Saturate:いろの彩度を変化させます。
Tilt:文字通りには「傾ける」ですが、3Dにしてくれるらしい!
アニメーションのトリガー
さて、アニメーションを開始するきっかけはどう与えるのでしょう。それには、2つあります。
ページ読み込みと同時に開始する
ユーザーのアクションと同時に開始する
なるほどね~。これは両方とも試さないといけませんね。まずはページ読み込みの場合からやりますか。
ページ読み込みと同時に開始
とうことで実験しよう!
空のページにCircleImageを一つ追加して、位置を調整します。カラム直下に置きました。RowやContainerでWrapした方がいいのか、よく分かりませんが。
こんな感じです。
では、CircleImageのプロパティに移動して、アニメーションを選択します。デフォルトでは、アニメ開始のきっかけは、On Page Load(読み込み時)になっています。そのままでいいや。
アニメーションの追加を押しましょう!
すると、アニメーションを選ぶメニューが表示されます。ここで皆さま、下の画像にご注目ください。動くんですよ、カーソルをかざすと、メニューにある小さい正方形が!
開発者のユーザー体験もいいのが、FlutterFlowの素晴らしいところですね。分かりやすい!
では、アニメーションをお見せしよう、、、と思ったのですが、CircleImageだとアニメがうまくプレビューされませんでした。なぜかしから?
コンテナに差し替えます。すみません。行き当たりばったりで。下の図のとおりです。これにFadeのアクションをつけます。
Fadeを選ぶと、いろいろ設定メニューが現れますが、ここではデフォルトにしておきましょう。プレビューします。
はい、動きましたよ~。無事プレビューできました。
プレビューできたところ、本日はここまで~。今回は、アニメ―ションの種類をご紹介して、一つ実際にプレビューしてみました~。
次回は、もう少しアニメーションの設定を見てみましょう!
この記事が気に入ったらサポートをしてみませんか?