After Effectsで動かしたイラストをWeb上で閲覧できるようにしてみた

# はじめに
初めまして！7月からデザイナーとして入社した者です！
アドベントカレンダーという事でクリスマスに関連付けて、AfterEffectでWeb上で閲覧できるオリジナルのクリスマスカード（カードなのか...？）を作っていきたいと思います！
Illustratorで書いたイラストを、SVGで書き出し、AffterEffectでつけた動きを
WEB上で閲覧できるように書き出すところまでやってみたいと思います。

今回必要となるツールは下記になりますので、実際に作る方はあらかじめ用意してください。
（Adobeのソフトは初回ですと1ヶ月無料で体験できるのでまだインストールしたことのない人は是非試してみてください）

- Illustrator
- After Effects
- texteditor
- bodymovin（インストールの流れは後ほど説明します）

それでは、作業を進めていきましょう！

# Illustratorで描いたイラストを用意する
svgで書き出すため、素材はIllustratorで作る必要があります。
今回は、サンタペンちゃんを用意しました！
![penchan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/56f914cc-caaf-013b-61e0-53a9312738e7.png)

Illustratorでweb用に使う素材を作成する際は、カラーモードをRGBに設定することを忘れないようにしましょう。
カラーモードの設定は、
`メニューバーのファイル>ドキュメントのカラーモード>RGBカラー`で設定できます。

# After Effectsでイラストを動かしてみる
いよいよイラストを動かす作業に入ります。
ちょっと作業工程が長めなので、見たいところだけ見てください。
## 動かしたい画像を挿入する
After Effectsを立ち上げると、添付の画像のような画面になります。
`新規コンポジション`を選択し、サイズを任意に指定します。（ここでいうコンポジションはアートボードのようなものです）
<img width="1586" alt="aftereffect_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/4e2259b1-af27-eb26-e593-aa4cec1202e6.png">

コンポジションを作成すると、コンポ１という名称で画面が出てきます。
そこにペンちゃんを挿入していきます。
`メニューバーのファイル>読み込み>ファイル>aiデータを選択`
すると、画面の左側にaiデータが読み込まれます。
<img width="1198" alt="aftereffect_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/5e96ee46-3cdf-2e90-cdcb-eee2df23e66a.png">
左側に入ったaiデータを下の画面にドラッグします。
<img width="1573" alt="aftereffect_03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/7cc21aa6-9de2-fd66-497c-08fb1d0fc6b4.png">
次に、このaiデータをパスに変換します。現状のままだと、拡大縮小した際、画像がぼやけてしまいます。
パスに変換する方法は、`aiデータを右クリック>作成>ベクトルレイヤーからシェイプを作成`です。
そうするとaiのレイヤー以外にもう一つレイヤーが増えています。
レイヤーの中身を広げると、シェイプごとにさらにレイヤーが分かれているので確認してみてください！
これでこのイラストをいい感じに動かせるようになります。
![aftereffect_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/6905862c-9141-74eb-ab8d-13a1761e4df2.png)

## イラストに動きをつけていく
イラストに動きをつけるためには、レイヤーの中の`トランスフォーム`の要素の数値を調整していきます。
例えば、`スケール`を調整すると、このようになります。
![2019-12-18 12.18.07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/90cda354-e337-59c9-d0b1-bd661bcca04d.gif)

下記画像のように、タイムラインに変更したサイズを打っていくと、再生された時にぬるぬる動きます！
この、タイムラインに打たれた「◆」マークは、**キーフレーム**と言います。
キーフレームをどんどん追加していくほど、複雑な動きが表現できるということですね！
<img width="1035" alt="aftereffect_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/943f1dbd-6673-a8c9-3aab-bb09b40d2039.png">

この要領で、放射状に開く挙動を、下記の動画を見ながら作成してみました。
【参考にした動画】
[5分で出来る！シェイプアニメーション【リピーター】After Effects初心者講座#3](https://youtu.be/3FwZYRwWlQQ)
完成したものはこんな感じになりました。
![2019-12-18 12.21.41.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/699c54da-0be6-b8ec-a862-76969011cb91.gif)

この、放射状の動きとペンちゃんを組み合わせると、
![2019-12-18 12.25.46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/a9d1255a-ca69-758e-dcba-f27feafbd5e2.gif)

こんな感じになりました！
ちなみに、ペンちゃんと文字のバウンドする動きは、エクスプレッションを追加してつけています。
ペンちゃんレイヤーのトランスフォームの中の、`スケール`を選択した状態で
`メニューバーのアニメーション>エクスプレッションを追加`で記述が可能になります。
参考にしたコードは下記になります。


```
puts amp = .1; freq = 5; decay = 7; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){ n--; } } if (n == 0){ t = 0; }else{ t = time - key(n).time; } if (n > 0){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t); }else{ value; }
```
参照:http://oldrookie.info/category/after-effects/

コードの記述場所はこちらです。
<img width="1561" alt="aftereffect_06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/2703d976-9f3b-c1f4-f48c-1e5e8408693e.png">

# After Effectsで動かしたイラストをWeb上で閲覧できるようにする
動きをつけたイラストを書き出してみましょう。

## Bodymovinを使って書き出しする
書き出すためには、**Bodymovin**というAfter Effectsのプラグインが必要です。
下記からダウンロードができます。
[Bodymovinのダウンロードはこちら](https://exchange.adobe.com/creativecloud.details.12557.html)

インストールされたか確認するには、`メニューバーのウィンドウ>エクステンション`から確認できます。
<img width="1591" alt="aftereffect_07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/f1d53898-5bf9-87aa-e1a4-4a368b6ad00f.png">

こちらをクリックすると、このような画面になります。
<img width="1626" alt="aftereffect_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/9716afbe-1489-db67-7612-e371a7b68e32.png">

緑のボタンの`Render`を押すと、イラストがWeb用に閲覧できるファイルが生成されます。
ここで、注意するところが、After Effectsの設定で
`スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可`という項目にチェックが入っていないと、ファイルが書き出されないので注意してください。
設定場所は、`環境設定>一般設定>スクリプトとエクスプレッション`になります。

書き出されると、jsonという拡張子のファイルが生成されます。（私が書き出した時はdata.jsonになりました）
ちなみに、Renderを押す前に**Setting**を押すと添付のような画面になります。
<img width="1064" alt="aftereffect_09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/d58b2748-d2b2-79b9-0bb9-ed1c89dd9061.png">
ここで、**Demo**にチェックを入れると、デモで閲覧できるhtmlが書き出されます。
ローカル上でブラウザにドラッグすると確認ができます。

.jsonを確認するには、下記にファイルをドラッグしてください。
[プレビュー画面はこちら](https://lottiefiles.com/preview)

プレビューで問題なく動いていたら、Web上で閲覧できるようにコードを書いていきます。

## lottieを使ってイラストを表示させる
lottieは、Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリだそうです。
下記よりlottieを入手します。
[lottie-web](https://github.com/airbnb/lottie-web)

使用するjsはこちらになります。

```html:lottie
<script src="lottie.js" type="text/javascript"></script>
```

書き出したファイルと、js等を画像のように格納してみます。
<img width="197" alt="aftereffect_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535558/033de9fb-34a2-b2a2-6f50-02856c5f99b6.png">
index.htmlの中身はこうなりました。

```html:indexhtml
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="lottie"></div>
        <script src="lottie.js" type="text/javascript"></script>
        <script>
        lottie.loadAnimation({
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
        });
        </script>
    </body>
</html>
```

このデータを実際にサーバーに上げてみると、下記のようになりました！
[クリスマスカード](http://xd589145.html.xdomain.jp/)

demo用に書き出されたhtmlをこちらに添付するとこうなります。
<p class="codepen" data-height="530" data-theme-id="default" data-default-tab="result" data-user="aucfan-ohta" data-slug-hash="oNgBLwy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="penchan">
  <span>See the Pen <a href="https://codepen.io/aucfan-ohta/pen/oNgBLwy">
  penchan</a> by aucfan-ohta (<a href="https://codepen.io/aucfan-ohta">@aucfan-ohta</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これで動くイラストがWeb上で閲覧できるようになりました！！

# まとめ
ホームページにモーショングラフィックスを取り入れているところがとても多いので、デザインする時に自分でもつくってみたいと思い、
第一歩として描いたイラストを動かしてみました！
動くイラストを書き出すとき、gifにすると画質が荒くなってしまうので、このようにリッチなデータで書き出されると見栄えがとてもいいです。
デザイナーの表現の幅が広がるので、重要なコンテンツなどは、サイトにメリハリをつけるためにもっと動きのあるものを取り入れていきたいと思いました。
とはいえ、実際に今回作ったようなイラストを毎度作るのは手間なので、まずはちょっとしたアイコンの挙動などに今後活用できたらいいなと思いました（工数と相談しながら作り込めるところはもっと突き詰めたいです）

ここまで閲覧していただき、ありがとうございました！
良い年末をお過ごしくださいませ！