0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Androidで簡単にアニメーションを追加する【Lottie】

Last updated at Posted at 2021-08-16

##Lottieって何?
Android,iOS,React Nativeで、アニメーションを画像のように簡単にアプリに埋め込める!
アニメーションはGIFアニメのようなもので、人様が作成してくれたのを選んで使える!
サイズや繰り返し設定など変更可能!
宿泊関係のサービスで有名なAirbnbが作成しており無料で使える!
lottie.gif
※サンプルはローディング画面に入れてみました

##リンク集
公式トップ
https://airbnb.design/lottie/
Android GitHub
https://github.com/airbnb/lottie-android
Androidドキュメント
http://airbnb.io/lottie/#/android
サンプルアプリ
https://play.google.com/store/apps/details?id=com.airbnb.lottie
アニメーション一覧
https://lottiefiles.com/recent
自分のお気に入り
https://lottiefiles.com/likes

##実装方法

####設定

build.gradle
dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

バージョンをどれにするかはこちらを参照
https://github.com/airbnb/lottie-android#download

####アニメーションを選ぶ
最新のアニメーション一覧はこちら
https://lottiefiles.com/recent
ページが重くアニメーションを探していくのが辛いのでアカウント登録後、検索ワードで絞り込んで、少しでも気に入ったのはお気に入り登録して後からこちらから見るのが良さそう
https://lottiefiles.com/likes
使いたいアニメーションが決まったらDownloadからLottie JSONを選択してダウンロードしましょう

####アニメーションの設置
落としたファイルをリネームしないと警告が出るのでわかりやすい名前に変更します
その後src/main/resディレクトリの下にrawディレクトリを作成して、落としてきたjsonファイルを入れます

####レイアウトファイルに設定

layout.xml
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_animation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/lottie_idea_into_book_machine" />

こんな感じで画像ファイルのように設定でき、タップ処理を追加することも可能
ループさせたくない場合はlottie_loopをfalseに設定

以上で完成です
他の細かい設定はリンク集のドキュメントを参考にしてみてください
アニメーションにより余白が違ったりして使い所は工夫が必要だったりします

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?