%3Cbr%3E%3Cbr%3Emicomia株式会社の畑井です。今回はFlutterFlowで作るアプリにアニメーションを入れる方法を解説します。アニメーションを入れることで少しリッチなアプリになりますのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E1.アニメーション実装%3Cbr%3Eフェードインやフェードアウトなどアニメーションを入れたいWidgetを挿入してください。%3Cbr%3E%3Cbr%3E%3Cbr%3E次に右側メニューより再生マークのようなアイコンを押すとアニメーション設定画面に移動することができます。この画面では「On Page Load」と「On Action Trigger」の2つを選ぶことができます。このページが読み込まれた瞬間にアニメーションを動かしたい場合は「On Page Load」を、特定のタイミングでアニメーションを表示させたい場合は「On Action Trigger」を選択してください。%3Cbr%3E%3Cbr%3E%3Cbr%3Eまずは、「On Page Load」からやっていきたいと思います。アニメーションの種類は下記の通りです。Fade じわじわと現れるSlide 移動するScale 大きさが変わるRotate 回転する%3Cbr%3E%3Cbr%3E%3Cbr%3Eこの画面でアニメーションを細かく調整できます。メニューに表示されている項目について解説します。%3Cbr%3ELoop Animation アニメーションを繰り返し行うReverse Animation アニメーションの動きを反転させるHide Before Animating アニメーションが始まる前はWidgetを表示させないApply same duration & delay 他のアニメーションにも同じ設定を適用させる%3Cbr%3E「Preview」を押すと設定したアニメーションがどんな動きをするのかその場で確かめることができます。%3Cbr%3E%3Cbr%3E%3Cbr%3E次に「On Action Trigger」を解説します。Action Triggerは特定のアクションを行った際にアニメーションを表示させるものとなっています。%3Cbr%3E%3Cbr%3E%3Cbr%3E「On Action Trigger」で設定した内容はActionsから設定可能です。今回はアニメーションを適用するWidgetとアクショントリガーとして利用するWidgetを同じContainerにしていますが、別のWidgetでもまったく問題ありません。%3Cbr%3EChoose Widget Animationでアニメーションを動かしたいWidgetを選択し、Animation Action Typeでアニメーションをスタートさせるかストップさせるかなどの動きの設定を行います。%3Cbr%3E%3Cbr%3E2.まとめ今回はアニメーションについてご紹介しました。アニメーションをつけすぎるとユーザーが使いにくく感じるため調整が必要ですが、飽きさせない操作を実現するためにぜひこの機能を使ってみてください。%3Cbr%3E%3Cbr%3E