AfterEffectsのパストリミング機能を使って、シンプルなフラッシュエフェクトを再現してみた✍Lottie Viewerでも◎

After Effectsの勉強をする週末。

こんな感じの集中線のアニメーションを、「パスのトリミング機能」を使って作っていた。

AEのペンツールを使って集中線を一本だけ描き、コンテンツを追加->パスのトリミングを選ぶ。

よくわかんないオプションに悩まされるが、開始点50%進んだところから、終了点までをトリムする、ということらしいぞ。

アニメーションする棒ができたら、回転したり複製したりしていい感じに配置。（ここ、もっと効率のいい方法があるはずなので誰か教えてほしい。）

トラックマットが非対応のLottie。パスのトリミングによるアニメーションなら、Lottie Viewerでも問題なく再生。

トリミングの範囲をアニメーションさせることで、こういう感じの集中線アニメーションが、アプリでも表示されるようになる。

トラックマットを使う方が簡単にそれっぽいものができちゃうんだけど、それだとLottieライブラリを使ったアプリでちゃんと表示されなかったりするため、代替案としてこのようなパスのトリミングがおすすめである。(2020年8月現在)

トリミング機能を使って他にも色々作ってみた

上に向かって飛び出すときの表現、とか

チカラが体のそこからみなぎってきた表現

などなど。

シンプルな点や線のみを使って軌道を示すだけで、非常に雄弁に情報発信をしてくれてる。アニメーション制作に携わる機会は年に数回程度だが、そのたびにアニメーションはグラフィックに比べて本当に雄弁で便利な存在であることに気付かされる。

シンプルなUIを目指すなら、ちゃんとコードフレンドリーなアニメーションの知見もストックしておかなくては！と思ったのでした。