前から気になっていたLottieというアニメーション制作アプリを使ってみました。
単純な動きのものなので結構すぐできるのではと思っていたのですが、とてもうまくいかず完成までにかなりの時間を要してしまいました。本当に想定外！
Figmaのプロトタイプでアニメーションをつけるところまでは順調に進んだのですが、プラグインのLottieに出力するときに静止画のように全く動かない事態になり四苦八苦しました。（プロトタイプでは動いています）
検索したところ、グループ名などが日本語はだめ、構造を全て同じにしなければいけない、エフェクトは使えないなど、いくつか注意点があるようでした。その他にも何故動かないのか分からない時があったり、それ以前にプロトタイプの方でもずれたりして動かないことがあったりなど、何度もやり直してやっと完成しました。
良かったのはLottieの公式ページで完成したアニメーションを色々な形式で出力できることでした。私はWebサイト用にreactのコードを出力しました。After Effectsを使用した方がもっとうまくいくのでしょうか。時間がある時にAfter Effectsの方も利用してみようと思います。
ちなみにLottieに無事出力するためには私の場合、綺麗に作る。の一言でした。基本になるものをできる限り変な動かし方をせずに変化をつけていくこと。サイズや並び、位置をきちんと合わせることでうまくいったと思います。