技術記事

micomia株式会社の畑井です。
今回はFlutterFlowで作るアプリにアニメーションを入れる方法を解説します。
アニメーションを入れることで少しリッチなアプリになりますのでぜひご一読ください。

1.アニメーション実装

フェードインやフェードアウトなどアニメーションを入れたいWidgetを挿入してください。

次に右側メニューより再生マークのようなアイコンを押すとアニメーション設定画面に移動することができます。

この画面では「On Page Load」と「On Action Trigger」の2つを選ぶことができます。
このページが読み込まれた瞬間にアニメーションを動かしたい場合は「On Page Load」を、特定のタイミングでアニメーションを表示させたい場合は「On Action Trigger」を選択してください。

まずは、「On Page Load」からやっていきたいと思います。
アニメーションの種類は下記の通りです。

• Fade じわじわと現れる

• Slide 移動する

• Scale 大きさが変わる

• Rotate 回転する

この画面でアニメーションを細かく調整できます。
メニューに表示されている項目について解説します。

• Loop Animation アニメーションを繰り返し行う

• Reverse Animation アニメーションの動きを反転させる

• Hide Before Animating アニメーションが始まる前はWidgetを表示させない

• Apply same duration & delay 他のアニメーションにも同じ設定を適用させる

「Preview」を押すと設定したアニメーションがどんな動きをするのかその場で確かめることができます。

次に「On Action Trigger」を解説します。
Action Triggerは特定のアクションを行った際にアニメーションを表示させるものとなっています。

「On Action Trigger」で設定した内容はActionsから設定可能です。
今回はアニメーションを適用するWidgetとアクショントリガーとして利用するWidgetを同じContainerにしていますが、別のWidgetでもまったく問題ありません。

Choose Widget Animationでアニメーションを動かしたいWidgetを選択し、Animation Action Typeでアニメーションをスタートさせるかストップさせるかなどの動きの設定を行います。

2.まとめ

今回はアニメーションについてご紹介しました。
アニメーションをつけすぎるとユーザーが使いにくく感じるため調整が必要ですが、飽きさせない操作を実現するためにぜひこの機能を使ってみてください。

動画でもっと知りたい方はこちら