Lottieアニメーションをカスタマイズしてみた

Shibuya.apk #51 - 31/01/2025
https://shibuya-apk.connpass.com/event/342351/

Mobile Dev Japanで話した内容の英語版：
https://speakerdeck.com/tahia910/customize-your-lottie-animations

アニメーションが動かないため、分かりにくいところはグーグルスライドでご確認ください：
https://docs.google.com/presentation/d/1PUkRMoOuc_7bWjBmGXFNVYZnBGeYHrq2C6oQABfxxsA/

Transcript

1. Shibuya.apk #51 2025.01.31　Tiphaine Lottie アニメーションを カスタマイズしてみた
2. ◆ Androidエンジニア ＠ DeNA (Pococha) ◆ DroidKaigiスタッフ ◆ Mobile Dev Japan運営 2 （ティフェン） Tiphaine
3. Lottie とは？ 1
4. Lottie 4 Android, iOS, React Native, Web, Windowsで アニメーションをレンダリングするための オープンソースライブラリー airbnb.io/lottie
5. LottieFiles 5 lottiefiles.com 関連リソースが見つけられるサイト： インテグレーションツールやプラグイン、その他の Lottie製品、アセット、チュートリアルなど
6. Lottie を使うメリット 6 ◆ 軽量、大画面でもスケーラブル ◆ 各プラットフォームで同じファイルが使える ◆ カスタマイズ性と実装の容易さのバランスが良い
7. 7 @Composable fun MyAnimation() { val composition by rememberLottieComposition( LottieCompositionSpec.RawRes(R.raw.thanks) ) LottieAnimation(composition = composition) } 使用例
8. 2 どうカスタマイズ できる？
9. 何をカスタマイズできる？ 9 ◆ 基本：ループ回数、速度、進行 ◆ 動的：色、strokeの幅、不透明度、フォント、 テキストサイズ、画像など
10. Dynamic Properties 10 以下を使って実行時にアニメーションを更新する ◆ LottieProperty ◆ KeyPath 参考：Dynamic Properties
11. LottieProperty 11 ◆ 変更したいアニメーションのプロパティ ◆ 定数リストから選べる 参考：Animatable Properties list, LottieProperty.java
12. KeyPath 12 ◆ 変更したいアニメーションの部分 ◆ JSONファイルの中にその部分の情報を 持っているノードへのpath（文字列のリスト）
13. 13 Free Thanks Button Animation - Shoval Ozeri （今日のアニメーション例）
15. 15 “ks”の中身はこの要素が 「どう動くか」 「どう表示されるか」 を表すノード
16. 16 KeyPath： 一番上のノードから、 対象のノードまでの 全てのノードの名前 （各ノードのnmの値）
17. 17 JSONキーについて詳しく知りたい場合： Lottie系列二：高级属性 ＊中国語で申し訳ない 😇 （Google翻訳でなんとか...w）
18. 3 試してみよう！
19. 例：色を変更する 19 Fillされた時のハートを緑色にしよう ✊
20. 20 参考：Animatable Properties list, LottieProperty.java Step 1: 適切なLottieProperty を選ぶ LottieProperty.COLOR
21. 21 // 全てのノードと各ノードのKeyPathをリストとして返す LottieAnimationView.resolveKeyPath(KeyPath("**")) Step 2: 対象ノードのKeyPath を取得する このヘルパーメソッドを使って、 JSONファイルの構造を調べる、
22. 22 ◆ Composeから呼べない 🥲 ◆ 結果をprintするために、アニメーションを AndroidViewに一次的にwrapする必要がある 参考：lottie-android issue #2080 しかし...
23. 23 val context = LocalContext.current val customView = remember { LottieAnimationView(context) } AndroidView({ customView }) { view -> with(view) { setAnimation(R.raw.thanks) // これの結果をprintしたい view.resolveKeyPath(KeyPath("**")) } }
24. 24 🤯
28. 28 // “Heart Filled Outlines”の下にある全てのノード KeyPath("Love icon", "Heart Filled Outlines", "**") 参考：KeyPath (doc), Dynamic Lottie Animations on Android
29. 29 Step 3: LottiePropertyとKeyPathを使って、 rememberLottieDynamicProperty を作成する
30. 30 rememberLottieDynamicProperty( property = LottieProperty.COLOR, value = Color(0xFF00857a).toArgb(), keyPath = arrayOf( "Love icon", "Heart Filled Outlines", "**", ) )
31. 31 val dynamicProperties = rememberLottieDynamicProperties( rememberLottieDynamicProperty(...), ... ) Step 4: rememberLottieDynamicPropert ies の中に DynamicPropertyをwrapする
32. 32 LottieAnimation( composition = composition, iterations = LottieConstants.IterateForever, dynamicProperties = dynamicProperties, ) Step 5: LottieAnimation 引数として DynamicPropertiesを渡す
33. 33 🎉 ✅ Fillされたハートの色が緑になった ✅ それ以外の色は変更無し
34. 34 Thanks! tahia910 テーマ: SlidesCarnival Special Thanks: @MeilCli　@shirataki