Open1
lottieでアニメーションアイコン!

Lottieのサイトでアイコンを探す
まずは、以下サイトへGo!
めっちゃ動くアイコンたくさんあるので、アプリに入れたいなぁって思えるアイコンを探そう。
https://app.lottiefiles.com/
例えば、検索窓にcorrect等と入力し検索すると、関連するアイコンが表示されます。
その中からいいなって思えるものがあれば、クリック!
画面右上のDownloadボタンをクリック。
ダウンロードが完了すると、自分のダッシュボードに反映されるので、
さらにクリック。
どの形式でファイルをダウンロードするか選択し、ダウンロード。
普通のJSONは無料だけど、他のは有料なので注意。
ダウンロードしたファイルはわかりやすい名前にリネーム。
JSONファイルの設置
ダウンロードしたJSONファイルをアプリに入れていきます。
resフォルダの直下に「raw」フォルダを新規作成し、その中に入れます。
依存関係
いつもの通り依存関係を設定していきます。
バージョンカタログ(libs.versions.toml)
[versions]
lottie = "6.6.3"
lottieCompose = "6.6.3"
[libraries]
lottie = { module = "com.airbnb.android:lottie", version.ref = "lottie" }
lottie-compose = { module = "com.airbnb.android:lottie-compose", version.ref = "lottieCompose" }
→Sync Now!!!
依存関係(build.gradle.kts)
アプリの方のgradleファイルに依存関係を設定していきます。
dependencies {
//ロッティのicon
implementation(libs.lottie)
implementation(libs.lottie.compose)
}
画面に設定
Lottieアイコンを置きたい場所に設定をしていくよー。
めっちゃ簡単です😊
res>rawフォルダに設置したJSONはcorrect.jsonファイルとした場合に、以下のように設定します。
iterations=1としているのは、アニメーションを1回だけ実行するという意味です。
ひたすらアニメーションを繰り返す場合は、iterations = Int.MAX_VALUEとしよう。
val composition = rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.correct))
LottieAnimation(composition = composition.value, iterations = 1)
アプリを動かすとこんな感じになります💗