Lottieを利用したアニメーション作成 & 実装

# アニメーションってどんなの？

こんなのです
![20181129065047_img20181129-19-b4m6se.gif](https://qiita-image-store.s3.amazonaws.com/0/82657/df19921b-83e2-5b38-7c41-0ccc0ec31499.gif)

よく使われているのは `ActivityIndicator` と呼ばれるもので、くるくると回っているように線の色が変化するアニメーション
![20181026092025_img20181026-10-1k6ofcj.png](https://qiita-image-store.s3.amazonaws.com/0/82657/71180558-4a0c-a71d-d47c-10cb389b415e.png)

# なんでアニメーションが必要なの？

- ユーザーが操作をしない時間（できない時間）の体験を退屈なものにしないため
- サービスの状態をより分かりやすくするため（読み込みなど）
- ブランド認識を持ってもらうため

# どう作っているのか

AfterEffectsで作成したアニメーションをLottie というライブラリを使用してアプリ上で動かせるようにしています。

## [Lottie](https://airbnb.design/lottie/)って？
![20180602180750.jpg](https://qiita-image-store.s3.amazonaws.com/0/82657/9b22e0d7-2b4e-7d66-92fc-8ebb0ee0f908.jpeg)

- Airbnbが作ったアニメーションのレンダラー
- アニメーションを簡単にiOS, Android, Webで簡単に再生できる

### Lottieを使うメリット
アニメーションを表示する方法としては、直接画像ファイルを表示する方法もありますが、コード上で制御がしづらかったり、画質が悪かったり、ファイルの容量がどんどん増えてしまいます。
ただ、Lottieはjsonファイルがアニメーションの情報になっているので、ファイルのサイズがかなり小さく、コード上でアニメーションの制御も可能です。


## 簡単な流れ

`Illustrator > AfterEffects > Bodymovin > 実装`
という感じで、

1. Illustrator
 アニメーションの元になるイラストを作成する

1. AfterEffects
   1 のイラストをインポートして動きを作る

1. Bodymovin
   2 で作ったアニメーションを json 化する（AE 上で）

1. 実装
   アニメーションを入れたい箇所を編集して呼び出す

というように作っています。

今から簡単なアニメーションを作ってみましょう！

# 作り方

## 必要なソフト

`簡単な流れ` では、まず Illustrator を使ってイラストの作成という手順がありましたが、今回は簡単なアニメーションを作ってもらうので、必要ありません。

- AfterEffects
- ブラウザ
  ここでは Chrome を使って紹介します

## アニメーションを作成する

まず、AfterEffects を立ち上げてください。

持ってない人はこちらの[体験版](https://www.adobe.com/jp/products/aftereffects/free-trial-download.html)をダウンロードしてください。

### コンポジションを作成する

コンポジション設定は、
`コンポジション名 loading`
`幅 400px`
`高さ 400px`
`フレームレート 30`
`解像度 フル画像`
`開始タイムコード 0:00:00:00`
`デュレーション 0:00:02:00`
<img width="700" alt="スクリーンショット_2018-12-09_1_01_22.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/427f57fb-52f2-d2cf-7603-bff55d9a3450.png">

<img width="700" alt="スクリーンショット_2018-12-09_1_01_48.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/bb19b14e-c716-b028-3df4-de36e7bb2172.png">

### パネルの配置

今回は `デフォルト` にしてください

<img width="700" alt="スクリーンショット_2018-12-09_1_02_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/c860e37d-d35c-3b7d-747b-d286e635bd8d.png">

### 円を作成

まず、左上の図形のアイコンを選択して、 `楕円ツール` を選択し、黒い部分をドラッグして円を  配置してください

<img width="700" alt="スクリーンショット_2018-12-09_1_03_48.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/2d6757ef-7ea9-9287-9cf0-ad28921f6d9c.png">

次に、コンテンツの追加で `パスのトリミング` を選択してください

<img width="700" alt="スクリーンショット_2018-12-09_1_05_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/61883ed8-0933-4aa8-b0b7-872d9a3c50a0.png">

<img width="200" alt="スクリーンショット_2018-12-09_2_41_39.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/066e3839-bf71-0b2d-c2ad-04fe75703cf4.png">

次に、塗り潰しを選択して、削除してください。
更に、線を選択して
`線幅 25.0`
`カラー #ffffff`
にしてください。
<img width="700" alt="スクリーンショット_2018-12-09_1_06_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/dfca301b-9920-c1ca-446e-23e957797a6c.png">

###  動きの追加

遂に動きの設定をしていきます。
`0:00:00:00` の時は...

- `開始点 0%`
- `終了点 0%`

`0:00:01:00` の時は...

- `開始点 100%`
- `終了点 0%`

`0:00:01:29` の時は...

- `開始点 100%`
- `終了点 100%`

にしましょう。

線の端が角張っているので、丸くするために、
`線端 丸型`
に変更しましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_09_33.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/7ff47663-da42-41ef-8fa9-48ce3ab90c9d.png">

### 動きの違和感を直す

一度 `spaceキー` を押して再生してみてください。
線が完全に消えてしまう瞬間があり、不自然なアニメーションになってしまっていると思います。

ここで、線が  完全に消えないように、
`0:00:00:00` の時は...

- `開始点 10%`
  に変更しましょう。

さらに、終了点のひし形をドラックして完全に閉じることのないようにしましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_18_40.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/a9bc94ee-9418-7e22-cf6b-6f2a864e89de.png">

今のままではループのタイミングで不自然な動きになってしまうので、
`0:00:01:29` の時は...

- `終了点 10%`
  に変更しましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_18_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/c23d7eec-da5c-bdaf-8815-7ac0633bbbcd.png">

まだループのタイミングで変な動きをしてしまうので、開始の  線の位置を調整します。

`0:00:00:00` に合わせてガイドを設定します。
`⌘ + R` で線の左端にガイドを作成しましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_19_46.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/269fd6ca-b832-236b-8f6b-f8d096d3f622.png">

次に、`0:00:01:29` に合わせてください。
先ほど作成したガイドに合うようにオフセットの値をドラックで調整しましょう。
調整した後はストップウォッチのアイコンを選択して、設定しましょう。

`0:00:00:00` の位置も変わってしまったので、この時は `0x+0.0°` にしましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_20_00.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/6ef35129-4abc-4216-8570-26ce283cd336.png">

### 動きを滑らかにする

`開始点` と `終了点` のひし形をドラックで全て選択しましょう。
（`オフセット` まで選択しないように気をつけてください）
選択した後に右クリックでイージーシーズを選択してください。
`spaceキー` を押して再生してみましょう。
動きが滑らかになったと思います。

<img width="700" alt="スクリーンショット_2018-12-09_1_20_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/d2b7c42b-ddf9-534d-598d-898c6b3a1574.png">

<img width="700" alt="スクリーンショット_2018-12-09_1_20_50.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/9a61678c-10b3-71e9-acb0-5a74a136ba7a.png">

### 微調整をする

再生すると気づいた人もいるかと思いますが、一瞬  円が  閉じてしまいそうになっているタイミングがあると思います。
これはイージーイーズの効果のせいです。詳しくはここでは説明しないので、気になる人はググってみてください。

<img width="700" alt="スクリーンショット_2018-12-09_1_21_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/683167fd-2307-9c93-9f3a-fa8b88ba585b.png">

ひし形の場所を調整して、ある程度隙間を広げられたら再生して確かめてみてください。
問題がなければ、これでアニメーションは完成です！

<img width="700" alt="スクリーンショット_2018-12-09_1_23_04.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/7218cb1b-58f4-ebd6-175f-c06051f602f7.png">

## アニメーションを json 化する

bodymovin という  サービスを使って、Lottie で使えるようにアニメーションを json 化しましょう。

### Bodymovin をダウンロードする

bobdymovin は[ここ](https://airbnb.io/lottie/after-effects/bodymovin-installation.html)からダウンロードしてください。

<img width="700" alt="スクリーンショット_2018-12-09_1_24_48.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/7b32d3d6-028e-0d8a-b201-1c70b4b2fb93.png">

### json を書き出す

bodymovin のパネルの中の右にある `...` を選択して、デスクトップに保存するよう設定しましょう。
次に、左の丸を選択して、書き出すコンポジションを設定しましょう。
最後に、緑の render ボタンをクリックして、書き出しましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_24_48-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/c0f4963f-39f1-a55d-a2d9-49a151e7b9d1.png">

デスクトップにこのような json ファイルが配置されていれば成功です。

<img width="250" alt="スクリーンショット_2018-12-09_1_35_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/01734154-fda6-6fcd-95d2-f18c5fe36560.png">

## 実装する

実際にスマホ上で動くように実装していきましょう。
せっかくなので、12/4 に  ニーザが投稿した[react native と簡単 API で作るお天気アプリ](https://qiita.com/hiteto/items/4db0b8d842ba16f95b55?fbclid=IwAR3xOZjRJS9PD1RBj-9xBrPX1VppCIY5wFlOZXrp2I3_rzpUIzchBz0hgXw)にも出てくる `react native` で実装をしましょう。

今回は  簡単に体験して貰いたいので、Expo というサービスを利用して、 ブラウザのみで実装していきましょう。

### Expo を利用する

[ここ](https://snack.expo.io/SJdIbHe4b)から Lottie のサンプルデータを開いてください。
下のような画面になったでしょうか？白っぽい色の  カラーテーマでも問題はありません。

<img width="700" alt="スクリーンショット_2018-12-09_1_36_58.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/8d0c8d44-ec83-0802-5ef9-25cf75323b9a.png">

開けたら、右上の `Run`  ボタンを選択して、QR Code を表示してください。
下のような画面になったら、スマホで読み込んでみてください。

<img width="700" alt="スクリーンショット_2018-12-09_1_37_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/fc3a621e-3f6d-acd4-3208-def34f902d49.png">

読み込む際には下のアプリをインストールしてください。

<img width="250" alt="IMG_4F5EAF6EC56F-1.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/82657/a373897b-199c-6ac5-146f-1653b467bcc8.jpeg">

下のような画面をスマホで見ることが出来たでしょうか。

<img width="250" alt="IMG_4142.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/82657/215a5531-8791-5783-4a7a-a4b04d98d294.png">

アニメーションがズレてしまっていますね。
これは Lottie の  バグなので、コードを追加して修正しましょう。

### コードを編集する

まずは、右クリックをして `Format Document` を選択して、コードの  整形をしてください。
さらに、それぞれの行にしたのコードを  書き加えてください。

20 行目

```javascript
<View
    style={{
        width: 300,
        height: 300,
    }}
>
```

39 行目

```javascript
</View>
```

<img width="700" alt="スクリーンショット_2018-12-09_2_13_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/6970b858-9c82-36d6-8a90-bea75e15713a.png">

このように中央に寄ったでしょうか？

<img width="250" alt="IMG_4143.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/82657/0bd71c66-1f5f-7c34-a3ce-9a44d5f2302d.png">

### json ファイルをアップロードする

この部分には json ファイルの置き場所が書かれています。
緑の文字の 部分をブラウザに貼り付けてみると、json ファイルがネット上に配置されているのが分かると思います。

<img width="700" alt="スクリーンショット_2018-12-09_1_41_26.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/d23188f0-ede0-a3d5-5cc7-bf790733b8c5.png">

 今回作成した json ファイルもネット上に配置しましょう。
まずは gist を開きましょう。

<img width="700" alt="スクリーンショット_2018-12-09_1_40_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/0fc79242-914c-b7e2-4003-792de8421f69.png">

[Github Gist](https://gist.github.com/) を開くとこのような画面になっているかと思います。
下の青い枠には `loading` と記入してください。

その下の広い部分はデスクトップに書き出した json ファイルを、テキストエディタ等で開き、中身をコピーして貼り付けてください。
貼り付けたら右下の `Create public gist` を選択してください。

<img width="700" alt="スクリーンショット_2018-12-09_1_40_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/3b7d811a-d8bd-2ef1-b022-1e93ef588258.png">

下のような画面になったでしょうか？
なっていれば、URL をコピーしてください。
コピーした URL を先ほどの緑のテキストの部分と置き換えます。
自分が作ったアニメーションが実機で確認できたでしょうか？

<img width="700" alt="スクリーンショット_2018-12-09_1_41_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/67f970af-1bd5-14ed-d94d-e2cc5c7d4492.png">

あとはローディングらしく、小さめのアイコンにして黒い画面の上で再生してみましょう。
`width: 400` -> `width: 100`
`height: 400` -> `height: 100`
に変更しましょう。
さらに、背景の色を `#000` にしましょう。

<img width="700" alt="スクリーンショット_2018-12-09_2_18_04.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/28b72c94-dc5b-e628-5de0-dd93c9aabb65.png">

最後に全体の背景色を黒にしましょう。

<img width="700" alt="スクリーンショット_2018-12-09_2_19_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/82657/45cbac3d-5ebd-91af-4700-7d2ba94e5faf.png">

このような画面になっていれば成功です！！！
本当にお疲れ様でした！！

<img width="250" alt="IMG_4147.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/82657/efb20d66-5de8-83ee-bac7-eb7413b09c4b.png">

# あとがき

平成最後&メンター最後の Advent Calendar カレンダーなので、書いてみました。
どうだったでしょうか？
自分は書いている途中、LiT!で教科書を製作していた時を思い出してエモくなってました。
この記事を読んでアニメーションに興味を持ってもらえたら嬉しいです。