members

members

【第2回】LottieでWebアニメーションを作る (制作編)

Tweet

第1回の導入編ではLottieアニメーションを作る際の導入手順を説明いたしました。前回の記事はこちら

この記事では実際にLottieアニメーションを作る際におすすめのAfterEffectsの機能についてなどを紹介していこうと思います。

1.はじめに

前回紹介した通り、Lottieとは、Android/iOS/Web/Windows用アニメーションライブラリで、Airbnbが開発しています。拡張プラグインBodymovinを使用すれば、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、モバイルおよびWeb上でアニメーションを表示することができます。

Lottieについてはこちら

今回はデザイナー向けにAfterEffectsで実際どのような機能を使って制作するかの紹介をしていきたいと思います。また既に導入が済んでいる前提にお話しさせていただくので、まだお済みではない方はこちらの記事を参考にお願いします。

前回の記事はこちら

2.Illustratorの素材を動かす

(1) Illustratorでパーツを分ける

Aiデータ 及び SVGデータをAftereffectsでよりリッチに動かすためにあらかじめ下準備としてパーツ分けが必要になります。
例えばこのようなイラストを動かす場合、それぞれのパーツをレイヤー分けします。

illustratorのレイヤー構造

この時にあらかじめどのような動きをつけるかを考えながらパーツを分けるとAfterEffectsでの作業がスムーズになります。今回は「口を開くアニメーション」や「瞬きをするアニメアニメーション」をつけたいので、口の中も歯や舌とレイヤーを分けています。

(2)Aftereffectsでillustratorのデータを読み込む

レイヤー分けをしたillustratorをAftereffectsで読み込むと以下のポップアップが出ます。

Aftereffectsのポップアップ

読み込みの種類を「コンポジション」フッテージのサイズを「レイヤーサイズ」で読み込むと、パーツ毎に分かれているコンポジションができます。

Illustratorのデータを読み込んだコンポジションレイヤーを全部選択し、右クリック→「作成」→「ベクトルレイヤーからシェイプを作成」を押すと全てのレイヤーがシェイプになり、アニメーションがつけやすい状態になります。

ベクトルレイヤーをシェイプレイヤーに変換した状態

(3)アニメーションをつけてjsonで書き出す

スケールや位置などをアニメーションてbodymovinでjsonを書き出します。書き出し方やプレビュー方法などはこちらを参考にお願いします。

アニメーションサンプル

3.すぐ使える!アニメーションの付け方

アニメーションをつけるにはさまざまな方法がありますが、今回は私がよく使う3つに厳選して紹介いたします。

1.拡大 / 縮小

拡大/縮小をつけたいレイヤーを選択し、「s」を押すと「スケール」のプロパティのみが表示されます。タイムラインに合わせて数値を変えることで大きくなったり小さくなったりします。

また他の機能も同様ですが、アンカーポイントの位置で「どこを基準に変化させるか」が変わってきます。用途に合わせてアンカーポイントの位置も変えてみましょう。

拡大縮小のサンプル

2.回転

回転をつけたいレイヤーを選択し、「r」を押すと「回転」のプロパティのみが表示されます。タイムラインに合わせて数値を変えることで回転します。

回転サンプルまたグラフをいじることで段々回転速度が上がるアニメーションをつけることもできます。(拡大/縮小も同じように変化のスピードをここでコントロールすることができます)

変化スピードの調整の例

  1. 速度をつけたいプロパティ(今回は回転)を選択します。
  2. 右上にあるグラフエディターを選択します。
  3. 変化をつけたい数値のところを選択します。
  4. 右下のところで、調整するための黄色いハンドルを出すなどしてグラフを調整します

3.パスのトリミング / リピーター

パスアニメーションサンプル

パスのトリミングなどを使用するとパスに沿って描画するアニメーションを作ることができます。

パスのトリミングの説明

  1. コンテンツの隣にある追加を選択し「パスのトリミング」を選択します。
  2. 開始点や終了点の数値を変えることでパスに沿って描画するアニメーションをつけることができます。

例えば、終了点を[0%]から[100%]になるようにするとパスに沿って描画するアニメーション、開始点を[100%]から[0%]になるようにするとパスに沿って消えるアニメーションができます。

また例に挙げた動画のようにリピーターを使うと「パスのトリミング」と同様「追加」から「リピーター」を選択します。数値を調整することで簡単に同じ動きをコピーして並べることができます。

リピーターの説明

4.最後に

lottieはまだまだ使えない機能があります。

例えば…

  • エフェクト
  • グラデーション
  • パスに沿った方向の変更
  • マスクの合成モード
  • パスのモード変更
  • 複雑なエクスプレッション

など機能に制限があるので少し制作しにくい部分もありますが、対応できるようになるとUIアニメーションやフラットなイラストのアニメーションなど、よりリッチで心地良いWEBサイトに近づけることができると思います。これを機にAfterEffectsを覚え、共に表現の幅を広げていきましょう!

コラム執筆

山本 愛加(やまもと あいか)

2018年4月入社。第5ビジネスユニットアカウントサービス第3ユニットに所属するデザイナー。