今回は、Webサイトでよく見かける ロゴが流れて無限ループするアニメーション をFigmaのプロトタイプで再現します。
実装者にアニメーションイメージを共有する時に使ってみてください。
① ループするロゴセットを作成
まずはアニメーションの表示領域をFrame（animation_1）にします。
その中にロゴを４つ並べて、こちらもまとめてFrame（loop_1）にします。
② ロゴセットを２つ用意
先ほどつくった「loop_1」を複製して、「loop_2」をつくります。
③ ロゴセットをまとめる
「loop_1」「loop_2」をFrameでまとめて、「loop set」をつくります。
④ 最後のシーンを追加
「animation_1」を複製して、「animation_2」をつくります。
2はロゴが流れ終わった時のシーンになります。
⑤ 最後のシーンのロゴ位置を調整
「animation_2」のオブジェクト配置を右揃えにする。
⑥ インタラクションを設定
右から左へ動くインタラクションを設定します。
・トリガー：アフターディレイ
・ディレイ：1ms
・アニメーション：スマートアニメート
・イージング：線形
・所要時間：10000 ms
⑦ 反対にもインタラクションを追加
インタラクションを設定します。
アニメーションの始めと終わりを即時で繋ぐことで無限ループを実現します。
・トリガー：アフターディレイ
・ディレイ：1ms
・アニメーション：即時
⑧ 完成
動きました！
他にも色んな作り方があるので、オススメがあればぜひ教えてください🐤
最後に
最近はWebサイトにアニメーションがあることが多く、そのひとつひとつが全体のクオリティを左右するなと感じます。ただ、動きのニュアンスは静止画のデザインカンプだけではどうしてもチームメンバーに伝えづらい。
だからこそ、今回のようにプロトタイプでイメージを作ったり、参考サイトを共有したり。実装者のアイデアも取り入れながら、一緒にすり合わせて進めていけると良いなと思います /
Figmaに関する記事をまとめています。良ければご覧ください ↓