ぬるぬる動いていい感じのアニメーションが簡単にできるらしいから触ってみた

Lottieという、おもしろそうな物を見つけたので色々やってみようと試行錯誤した記録です。
調べると自分が知らなかっただけなのか、結構記事があったので、あまり詳しいことは書かないと思います。

## Lottieとはなんぞや

- iOS、Android、Webと幅広くつかえる
- お手軽にいい感じのアニメーションがつけられる
- Apache License 2.0
- 色んな人のアニメーションが公開されているので[探すとたくさんでてくる](https://lottiefiles.com/featured)
- 自作する場合はAdobeのAfter Effectsとbodymovinという拡張機能が必要


# とりあえずクリスマスも近いことだし、アニメーションでカップルを爆発させてみようかと考える午前三時

### テンションでひらめいて、勢い任せにみんな大好きいらすとやで画像を集めてアニメーション作っていく(しっぱいする)

1.お好きな画像を用意してIllustratorでレイヤーを分けて保存する

<img width="1247" alt="スクリーンショット 2019-12-14 9.09.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/ad6fc570-cac7-e576-28b2-84d199c23a6d.png">


2.After Effectsで保存したファイルを読みこんでアニメーションを付ける

<img width="1055" alt="スクリーンショット 2019-12-14 10.54.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/ffd4fc62-a8b7-1dbc-0a8e-bc1b50d684b7.png">

3.bodymovinでアニメーションをjson形式で出力する

bodymovinが導入できていれば、メニューのエクステンションにbodymovinがあります
<img width="679" alt="スクリーンショット 2019-12-14 10.56.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/934682b2-69f3-00c0-f2b1-e3433ca8b217.png">

Renderを選択するとjsonが出力される。

<img width="642" alt="スクリーンショット 2019-12-14 10.58.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/cd993314-e1bc-903d-ac76-6b403c0b7efe.png">

### Androidに導入していく

1. gradleに追加していく

``` build.gradle
dependencies {
   //・・・
    implementation 'com.airbnb.android:lottie:3.3.1'
   //・・・
}
```

2.先程作成したjsonをリソースへいれる
<img width="235" alt="スクリーンショット 2019-12-14 11.04.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/3819f257-0ac4-3c38-26d8-2415299222ab.png">

3.LottieAnimationViewを配置する

```activity_main.xml
<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/couple"/>
```

### いよいよ実行だ！！！！！

![Screenshot_20191214-130054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/116a74c9-ed73-4057-e9ef-5f5e71e511f2.png)

アニメーションが動かず、いろいろ調べてみると、画像を含めたjsonファイルはアニメーションしてくれないような情報を発見したところで、これ以上は時間的に諦めることに。。。


## 諦めてクリスマスっぽいアニメーション探して入れてみる

1.公式でいい感じのアニメーションを探してjsonファイルをダウンロードする
 -> [こちら](https://lottiefiles.com/12064-christmas-snowman) をお借りしました。

<img width="1347" alt="スクリーンショット 2019-12-14 13.10.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/04bd50aa-e0ea-9dff-e064-e50e1207dcfc.png">

2.自分で作成したjsonファイルと同じようにファイルを追加する

<img width="235" alt="スクリーンショット 2019-12-14 11.04.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/dfd9c7d7-ed8d-c674-30f7-cee74bb1c334.png">

```activity_main.xml
<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/snowman"/>
```

## 実行してみると

うごいた！カワイイヤッター!!!!!!!

![ssaaaaaa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193857/2b25987c-3f64-ff29-d507-a496a4904231.gif)

## 使ってみての感想

すごい高いクオリティのアニメーションがとってもお手軽に導入することができたので、今度はきちんとアニメーションから作ってみたいと思いました。
また、AndroidやiOSもwebでも同じアニメーションが使えるため、使い回せて便利だなと思いました。
現在は、まだ使えないアニメーションなどがありますが、今後どう進化していくのか注目して行きたいです。