Help us understand the problem. What is going on with this article?

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

はじめに

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

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

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

自己紹介

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

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

Lottieって?

lottie-animation.gif

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
参考サイトの方にはそれぞれのリンクや画像も貼っているので、是非アクセスしてみてください。

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

手順

本当に最低限で流しっぱなしにするだけなら数分で作業が終わるほどに、簡単になっています。
こちらが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という風に保存しました。
スクリーンショット 2019-12-12 21.30.47.png

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に変換するときにとてもスローになりましたが、本当なもっとスムーズに動いています……!)
bell.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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした