見出し画像

XDでLottieを使って効率的にすべてのページに遷移アニメーションを入れる実験

by｜Yuhei Sasaki

Lottieをサポートしたことで、すべてのページ遷移で発火する暗転などの表現が可能になったかもしれません。

今まで再現しなかった理由

最初に書いておくと、決してできなかったわけではないです。
できたのですが、物凄い手間のかかる作業でした。

例えば、今回のようにすべてのページ遷移のときに暗転するアニメーションを作るとします。
そのとき、自動アニメーションで作成するには「現在地」「暗転」「遷移先」の3枚のアートボードが必要になります。

画像2
「現在地」「暗転」「遷移先」の3枚のアートボード

ここまでであればまったく問題ないのですが、現在のXDの仕様では下記フローのような「自動アニメーション中に条件によって遷移先を変更するリンク」はできません。

画像4
このような「自動アニメーション中に遷移先を変更するリンク」は設定できない

そこで、同じアニメーションであっても、遷移先の数だけ暗転用アートボードが必要になります。
これでは複数ページを制作するには向きません。

画像4
遷移先の数だけ必要な暗転用アートボード

対応策

ここまでの内容から最適な方法は「アニメーションのトリガーは各ページに訪れた直後」かつ「自動的に発火しなければいけない」とわかります。
つまり、遷移アニメーションを持ったページが必要です。

画像5
最適な遷移フロー

まっさきに思いついた対応策は「ステート」でしたが、ステートには時間トリガーがありませんでした。
そこでLottieを使用しました。
動画でも可能だと思いますが、実装の際はCSSなどを利用すると思いますので「少しでも近い方を……。」という判断です。

Lottieであればページ遷移後に自動でアニメーションが始まりますし「再生終了トリガー」を使ってアクションの追加もできます。

XDでの作り方

まずは暗転用のLottieを作ります。
真っ黒なオブジェクトが移動するだけのものです。
（詳細はDLデータを参照ください）

こちらをコンポーネント化して、新規ステートを追加します。
そして、追加したステートではLottieを非表示にします。

画像6
初期設定のステートではLottieを表示
追加したステートではLottieを非表示

プロトタイプの設定は「Lottieの自動再生」と「再生終了トリガーを使った非表示用ステートへの変化」を設定します。
これで、ページ遷移後すぐにアニメーションが始まり、再生終了後は非表示になります。

「Lottieの自動再生」と「再生終了トリガーを使った非表示用ステートへの変化」の設定

このコンポーネントをすべてのアートボードに配置すれば完成です。
コンポーネントなので管理も簡単です。
デザイン作成時は、レイヤーを非表示にしておけば邪魔になりません。

最後に

クリックしたときに、現在地でもアニメーションが発火できれば、より表現の幅が広がるのですが、それは今後のアップデートに期待します。

サンプル配布

このサンプルのフォントにはBarlowを使用しています。
https://fonts.google.com/specimen/Barlow

この記事が気に入ったらサポートをしてみませんか？