Lottieを使ったAndroidのアニメーション実装

6979 ワード
Lottie Android animation Design Android テキストリンク

はじめに

これはCyberAgent 20新卒 Advent Calendarの12日目の記事です！

前日はpoccariswetさんの記事になっています。
-> https://poccariswet.hatenablog.com/entry/2019/12/11/000037

同期の中からAdventCalendarをやろうなんて自発的に声が上がるなんていい会社に入ったなぁなんて思いながら、この記事を書かせてもらいます！

自己紹介

自己紹介をしますと、僕はAyumuと言います。twitterではあゆ🐟(-> https://twitter.com/airagu950) という名前でやってます。Python触ったり、java触ったり、フロント満遍なく触ったり今ではAndroidを触るためにKotlinを必死こいて勉強したりしてます。大学ではHCI分野の主にWebレイアウトについて研究をしてます。

趣味は絵を書くことで、インターネットのどこかにイラストを書いてるアカウントがあるとかないとか。今はにじさんじにハマってます。

Lottieって？

LottieはAirbnb社が開発したアニメーションライブラリのことです。（https://airbnb.design/lottie/）

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.

公式サイトには上記のように説明がある通り、今回紹介するAndroidの他にもiOSやReact Nativeにも対応したライブラリとなっています。このライブラリを使うと、AfterEffectで作成したアニメーションをjson形式でプロジェクトにいれることで簡単にアプリに挿入できます。

どんなものができるかについては公式サンプルアプリをお持ちのアンドロイド端末にインストールしてみると、すごくたくさんのサンプルアニメーションが用意されているので、是非ご覧ください。

必要なもの

Lottieを実装する上で必要なものは

  • アニメーションファイル（.json）
  • lottie.js

この2つになります。また、アニメーションを作れないけど触ってみたいという人にはサンプルのjsonファイルをダウンロードすることもできるので、このサイトをみてみてください。
-> https://lottiefiles.com/

実装するもの

今回はサンプルとしてこのアニメーションを実装してみようと思います。

もしAfterEffect側の設定を行って、自分でアニメーションをつくるところからやりたい人向け
非常に参考になるサイト -> https://motida-japan.hatenablog.com/entry/2017/02/19/145537
ここを参考に僕はAfterEffect側の設定をしました。簡単に箇条書きをすると、
1. jsonファイルにエクスポートできるようBodymovinをいれる
2. AfterEffectでアニメーションを作成する
3. メニュー＞ウィンドウ＞拡張機能＞BodymovinからプラグインのGUIを起動し、保存場所を選んでRender
参考サイトの方にはそれぞれのリンクや画像も貼っているので、是非アクセスしてみてください。

もうすぐクリスマスですし🎄通知アイコンを期間限定でこれにするとか遊び心しかないなと思います。

手順

本当に最低限で流しっぱなしにするだけなら数分で作業が終わるほどに、簡単になっています。
こちらがGithubです。 -> https://github.com/airbnb/lottie-android

1. build.gradleに登録

app>build.gradle
    implementation 'com.airbnb.android:lottie:3.3.1' //末尾は最新バージョン

2. ダウンロードしたjsonをresに保存する

僕はapp> res> raw>bell.jsonという風に保存しました。

3. xmlにコードを追加

activity_main.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/bell"
        />

4. 完成

(gifに変換するときにとてもスローになりましたが、本当なもっとスムーズに動いています……!)

おまけ

ここまでの手順でアニメーションを実装することができました。

あと宣伝です。2021年度新卒採用 エンジニアコースが開始されたようですので、よろしければご覧ください。

次回

次回はよだだよ！ さんです。是非ご覧ください~!

参考

https://qiita.com/ikemura23/items/8c5f87f98cb7fc3ceb27
https://motida-japan.hatenablog.com/entry/2017/02/19/145537
https://qiita.com/wiroha/items/bc361218629ca03fbd19
https://webdesign-trends.net/entry/10360