Tweet
Tweet

Slide 1

Slide 1 text

Shibuya.apk #51 2025.01.31　Tiphaine Lottie アニメーションを カスタマイズしてみた

Slide 2

Slide 2 text

◆ Androidエンジニア ＠ DeNA (Pococha) ◆ DroidKaigiスタッフ ◆ Mobile Dev Japan運営 2 （ティフェン） Tiphaine

Slide 3

Slide 3 text

Lottie とは？ 1

Slide 4

Slide 4 text

Lottie 4 Android, iOS, React Native, Web, Windowsで アニメーションをレンダリングするための オープンソースライブラリー airbnb.io/lottie

Slide 5

Slide 5 text

LottieFiles 5 lottiefiles.com 関連リソースが見つけられるサイト： インテグレーションツールやプラグイン、その他の Lottie製品、アセット、チュートリアルなど

Slide 6

Slide 6 text

Lottie を使うメリット 6 ◆ 軽量、大画面でもスケーラブル ◆ 各プラットフォームで同じファイルが使える ◆ カスタマイズ性と実装の容易さのバランスが良い

Slide 7

Slide 7 text

7 @Composable fun MyAnimation() { val composition by rememberLottieComposition( LottieCompositionSpec.RawRes(R.raw.thanks) ) LottieAnimation(composition = composition) } 使用例

Slide 8

Slide 8 text

2 どうカスタマイズ できる？

Slide 9

Slide 9 text

何をカスタマイズできる？ 9 ◆ 基本：ループ回数、速度、進行 ◆ 動的：色、strokeの幅、不透明度、フォント、 テキストサイズ、画像など

Slide 10

Slide 10 text

Dynamic Properties 10 以下を使って実行時にアニメーションを更新する ◆ LottieProperty ◆ KeyPath 参考：Dynamic Properties

Slide 11

Slide 11 text

LottieProperty 11 ◆ 変更したいアニメーションのプロパティ ◆ 定数リストから選べる 参考：Animatable Properties list, LottieProperty.java

Slide 12

Slide 12 text

KeyPath 12 ◆ 変更したいアニメーションの部分 ◆ JSONファイルの中にその部分の情報を 持っているノードへのpath（文字列のリスト）

Slide 13

Slide 13 text

13 Free Thanks Button Animation - Shoval Ozeri （今日のアニメーション例）

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

15 “ks”の中身はこの要素が 「どう動くか」 「どう表示されるか」 を表すノード

Slide 16

Slide 16 text

16 KeyPath： 一番上のノードから、 対象のノードまでの 全てのノードの名前 （各ノードのnmの値）

Slide 17

Slide 17 text

17 JSONキーについて詳しく知りたい場合： Lottie系列二：高级属性 ＊中国語で申し訳ない 😇 （Google翻訳でなんとか...w）

Slide 18

Slide 18 text

3 試してみよう！

Slide 19

Slide 19 text

例：色を変更する 19 Fillされた時のハートを緑色にしよう ✊

Slide 20

Slide 20 text

20 参考：Animatable Properties list, LottieProperty.java Step 1: 適切なLottieProperty を選ぶ LottieProperty.COLOR

Slide 21

Slide 21 text

21 // 全てのノードと各ノードのKeyPathをリストとして返す LottieAnimationView.resolveKeyPath(KeyPath("**")) Step 2: 対象ノードのKeyPath を取得する このヘルパーメソッドを使って、 JSONファイルの構造を調べる、

Slide 22

Slide 22 text

22 ◆ Composeから呼べない 🥲 ◆ 結果をprintするために、アニメーションを AndroidViewに一次的にwrapする必要がある 参考：lottie-android issue #2080 しかし...

Slide 23

Slide 23 text

23 val context = LocalContext.current val customView = remember { LottieAnimationView(context) } AndroidView({ customView }) { view -> with(view) { setAnimation(R.raw.thanks) // これの結果をprintしたい view.resolveKeyPath(KeyPath("**")) } }

Slide 24

Slide 24 text

24 🤯

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

27

Slide 28

Slide 28 text

28 // “Heart Filled Outlines”の下にある全てのノード KeyPath("Love icon", "Heart Filled Outlines", "**") 参考：KeyPath (doc), Dynamic Lottie Animations on Android

Slide 29

Slide 29 text

29 Step 3: LottiePropertyとKeyPathを使って、 rememberLottieDynamicProperty を作成する

Slide 30

Slide 30 text

30 rememberLottieDynamicProperty( property = LottieProperty.COLOR, value = Color(0xFF00857a).toArgb(), keyPath = arrayOf( "Love icon", "Heart Filled Outlines", "**", ) )

Slide 31

Slide 31 text

31 val dynamicProperties = rememberLottieDynamicProperties( rememberLottieDynamicProperty(...), ... ) Step 4: rememberLottieDynamicPropert ies の中に DynamicPropertyをwrapする

Slide 32

Slide 32 text

32 LottieAnimation( composition = composition, iterations = LottieConstants.IterateForever, dynamicProperties = dynamicProperties, ) Step 5: LottieAnimation 引数として DynamicPropertiesを渡す

Slide 33

Slide 33 text

33 🎉 ✅ Fillされたハートの色が緑になった ✅ それ以外の色は変更無し

Slide 34

Slide 34 text

34 Thanks! tahia910 テーマ: SlidesCarnival Special Thanks: @MeilCli　@shirataki