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)

アプリを動かすとこんな感じになります💗