Lottie_lottie task

官网

链接

• lottie - player
• LottieFiles
• APK

资料

Lottie - 轻松实现复杂动画效果

依赖

implementation 'com.airbnb.android:lottie:3.0.1'
1

使用

LottieAnimationView（xml）

assets

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"        
    app:lottie_autoPlay="true"
    app:lottie_fileName="AndroidWave.json"
    app:lottie_loop="true" />
1
2
3
4
5
6

raw

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"      
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/colorline" />
1
2
3
4
5
6

LottieAnimationView（code）

assets

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationViewCodeActivityOne"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
1
2
3
4

@BindView(R.id.lottieAnimationViewCodeActivityOne)
LottieAnimationView lottieAnimationViewCodeActivityOne;

lottieAnimationViewCodeActivityOne.setAnimation("camera.json");
lottieAnimationViewCodeActivityOne.playAnimation();
lottieAnimationViewCodeActivityOne.setRepeatCount(ValueAnimator.INFINITE);
1
2
3
4
5
6

raw

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationViewCodeActivityTwo"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
1
2
3
4

@BindView(R.id.lottieAnimationViewCodeActivityTwo)
LottieAnimationView lottieAnimationViewCodeActivityTwo;

lottieAnimationViewCodeActivityTwo.setAnimation(R.raw.hamburger_arrow);
lottieAnimationViewCodeActivityTwo.playAnimation();
lottieAnimationViewCodeActivityTwo.setRepeatCount(ValueAnimator.INFINITE);
1
2
3
4
5
6

LottieComposition

assets

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieCompositionActivityOne"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
1
2
3
4

@BindView(R.id.lottieCompositionActivityOne)
LottieAnimationView lottieCompositionActivityOne;

LottieTask<LottieComposition> lottieCompositionFromAsset = LottieCompositionFactory.fromAsset(this, "emoji_wink.json");
lottieCompositionFromAsset.addListener(result -> {
    lottieCompositionActivityOne.setComposition(result);
    lottieCompositionActivityOne.playAnimation();
    lottieCompositionActivityOne.setRepeatCount(ValueAnimator.INFINITE);
 });
1
2
3
4
5
6
7
8
9

raw

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieCompositionActivityTwo"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
1
2
3
4

@BindView(R.id.lottieCompositionActivityTwo)
LottieAnimationView lottieCompositionActivityTwo;

LottieTask<LottieComposition> lottieCompositionFromRawRes = LottieCompositionFactory.fromRawRes(this, R.raw.jolly_walker);
lottieCompositionFromRawRes.addListener(result -> {
    lottieCompositionActivityTwo.setComposition(result);
    lottieCompositionActivityTwo.playAnimation();
    lottieCompositionActivityTwo.setRepeatCount(ValueAnimator.INFINITE);
});
1
2
3
4
5
6
7
8
9

资料

Lottie - android 改动画颜色

错

一

日志

java.lang.IllegalStateException: Missing values for keyframe.
1

分析解决

二

日志

java.lang.IllegalStateException: You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder
1

分析解决