android初心者がLottieを使って簡単にアニメーションを追加できた話

はじめに

この記事はFUN part2 Advent Calendar 2019の22日目の記事です。
前日の記事はSCPで始めるAllenNLP ～SCPオブジェクトクラス分類～でした！
また、同日にTomokaさんが記事をあげてくださっていると思うのでそちらも是非

####本題に入る前に
今回の記事は12月に開かれたハッカソンでLottieの存在を知った僕がLottieを知らない人向けにこんなライブラリがあったよといった紹介をする記事であり、詳細な使い方やAndroid studio以外での使い方などについては他のページをご参照ください。

##Lottieとは

Easily add high-quality animation to any native app.

Lottie is an iOS, Android, and React Native >library that renders After Effects >animations in real time, allowing apps to >use animations as easily as they use static >images.
出典:Lottie - Airbnb Design

つまるところどんなプラットフォームのアプリでも簡単に高品質なアニメーションが使えるよ〜っていうライブラリですね（意訳）

このライブラリはAfter Effectsで作成されたアニメーションをjsonファイルに変換することで手軽に自分のアプリにアニメーションを追加することができるという優れものです。
これを追加するだけでアプリの見栄えが一気に良くなり、完成度が上がった感じがするからすごい。感動。頭が上がらない。

ちなみに、Lottieの詳細な概念などを理解するのにはこちらのスライド、動画がわかりやすいと思いますのでこちらも是非！
https://droidkaigi.jp/2019/timetable/70876/

Christmas is still loading...⛄️

This snowman is the perfect loader for this time of year. Lottie animation by Ucilucil 👉https://t.co/wbTbLwjwUw#lottiefiles #lottieanimation #buildwithlottie #aftereffects #animation #animations #motiondesign pic.twitter.com/Gid81Z2uYy

— LottieFiles (@LottieFiles) December 14, 2019

##使い方

###手順1
まずはLottieFilesやLottieプロジェクトのサンプルなどから自分の意図に沿ったアニメーションを探してきてjsonファイルでダウンロードします。
ちなみに、この時落としてきたファイル名にハイフンや数字が入っているとAndroid studioのビルドが通らない恐れがあるのでいい感じに変更してください

###手順2
次にAndroid studioにLottieライブラリをインポートする、もしくは下記コードをbuild.gradleのdependencies内に記述します。

build.gradle

implementation 'com.airbnb.android:lottie:$lottieVersion'　

また、手順1でダウンロードしたjsonファイルをres下にrawディレクトリを作るなどして配置します

###手順3
最後に追加したい画面のレイアウトxmlに

sample.xml

<com.airbnb.lottie.LottieAnimationView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/snowing"
        />

のような記述を行うだけでアニメーションを再生させることができます

きっとかんたんですね！！！

##最後に
lottie_loopをfalseにすると一度だけのアニメーション表示になったり、.kt内にコードを記述してアニメーションを表示させるといった方法や、ボタンが押された時にアニメーションが表示されるようにするなどと色々と設定することができるのでandroidエキスパートの方が使うとさらに凝ったものにできる非常に便利なライブラリだと思います！
当初Lottieという存在を知ってから理解するのに1時間以上かけていたため、簡単に使えるとか言っている記事を見てはよくわからない顔をしていたのですが理解してみればたしかに簡単でした。
明日はchikuwa_ITさんと穂乃夏さんです。明日も楽しみにしていたいと思います。
##参考

公式HP
https://airbnb.design/lottie/
https://lottiefiles.com/
Lottieを理解するのにありがたいスライド、動画
https://droidkaigi.jp/2019/timetable/70876/
使いこなそうとにらめっこした記事
https://qiita.com/ikemura23/items/8c5f87f98cb7fc3ceb27
https://qiita.com/wiroha/items/bc361218629ca03fbd19
https://dev.classmethod.jp/smartphone/android/lottie-getting-started/
https://motida-japan.hatenablog.com/entry/2017/02/19/145537
https://droidkaigi.jp/2019/timetable/69036/