Sketch - After Effects - Lottie でアニメーションを実装する流れ

Webサイトやアプリで使うアニメーションを考えて実装する…やりたいことはあるのに、実現するとなるととても面倒ですね。
プロトタイピングツールでアニメーションのイメージを作り、それを頑張ってコーディングして再現するとかそういうのつらい。

なんかもっとデザインツールでアニメーション作成→実装にあまり時間をかけずに楽にアニメーションを実装したい。
色々探してみた結果、

1. Sketchでデザイン作成
2. Adobe After Effectsでアニメーション作成
3. Lottieで実装

というのも一つのやり方として良さそうだなーと思ったのでした。
以下雑な流れ。

1. Sketch2AEでSketchからAfter Effectsへ

まずSketchでもととなるデザインを作成したら、
Sketch2AE」を使ってAfter Effectsに必要なレイヤーデータを持っていきます。

Sketch2AEはgoogle(の人)が作っているプラグインみたいですね。
先日Sketch49にも対応したみたいです。

2. After Effectsでアニメーション作成

今回AE初めてだったので公式チュートリアルでお勉強。

3. After EffectsのアニメーションをLottieで動かす

Lottie」とはAirBnBが公開しているライブラリで、After Effectsで作ったアニメーションをJSONで吐き出し、それをモバイルアプリ(React Nativeでも)やWebで読み込んで実行することができます。
Webもアプリも展開しているサービスなんかにとっては特に便利なんじゃないでしょうか。

3-1. BodymovinでJSONファイルを作成

まずAfter Effectsで作ったアニメーションをJSONに吐き出すために
「Bodymovin」のAEのプラグインをインストールします。

インストールのためのツールのインストールが必要だったりする。
インストールの手順

インストールできたらAEでBodymovinを使ってJSONを書き出すわけですが、AEの一般設定の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」を有効にしないとJSONファイルを吐き出すことができなかったのでご注意。

3-2. JSONが問題なくLottieで実行できるかチェック

コミュニティーサイトのプレビューページで、実際にJSONをアップロードしてアニメーションを確認することができます。

JSONを読み込んだ後に表示されるQRコードを「Lottie Preview」というモバイルアプリから読み込めば、各デバイスでどのように表示されるかのチェックもできるようです。

そして実装へ…

してないけどドキュメントあるからきっと問題ないですね!

補足

Lottieは他のプラットフォーム(VueやらReactやらXamarinやら…)に対応するためのサードパーティーのライブラリも紹介されていました。

コミュニティーサイトでは他の人が作ったアニメーションも公開されているので、アニメーション作成の参考にもなるかもー。

思ったこと

Invision Studioとか1つのツールでUIデザイン〜アニメーション〜コードに落とすとかできるようにならないですかね。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

アリガトゴザイマス ( ゚д゚)
41

711fumi

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
3つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。