Lottie动画详解
程序员文章站
2022-05-04 20:01:48
...
Lottie动画详解
Lottie的json文件获取
主要是美工来提供需要的动效json文件
可以参考这篇文章 如何生成动画所需的json文件
Lottie动画实现
app下的build.gradle依赖lottie远程库，截止2021年6月8日10:40:21最新lottie版本为 3.7.0
dependencies {
implementation 'com.airbnb.android:lottie:3.7.0'
}
有多种使用和加载的方式：
- 加载res/raw下的.json动效文件
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view_xml"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="@raw/android_wave" />
动态加载：
lottie_view_xml.apply {
setAnimation(R.raw.android_wave)
repeatMode = LottieDrawable.REVERSE;//设置播放模式
repeatCount = LottieDrawable.INFINITE;//设置重复次数
playAnimation()
}
- 加载assets下的.json动效文件
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view_xml"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="android_wave.json" />
动态加载：
lottie_view_xml.apply {
setAnimation("android_wave.json")
repeatMode = LottieDrawable.REVERSE;//设置播放模式
repeatCount = LottieDrawable.INFINITE;//设置重复次数
playAnimation()
}
- 加载 src/main/assets.下的zip文件
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view_xml"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="lottie_zip_test.zip"
/>
动态加载：
lottie_view_code.apply {
setAnimation("lottie_zip_test.zip")
repeatMode = LottieDrawable.REVERSE;//设置播放模式
repeatCount = LottieDrawable.INFINITE;//设置重复次数
playAnimation()
}
- 加载json或者zip文件类型的url
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view_xml"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:lottie_autoPlay="true"
app:lottie_url="https://xxx.com/xxx.json"
app:lottie_loop="true"
/>
动态加载：
lottieAnimationView.setAnimationFromUrl("https://xxx.com/xxx.json");
- 加载json格式的string字符串. 此字符串资源可以是网络下载的
private fun loadLottieFromNetWork() {
val jsonString =
"{\"assets\":[],\"layers\"........,\"h\":667}"
LottieComposition.Factory.fromJsonString(
jsonString
) { composition ->
animation_view_network.progress = 0f
animation_view_network.loop(true)
animation_view_network.setComposition(compositio!!)
animation_view_network.playAnimation()
}
}
- 加载json文件或zip文件的InputStream
LottieComposition.Factory.fromInputStream(InputStream,object :OnCompositionLoadedListener{
override fun onCompositionLoaded(composition: LottieComposition?) {
TODO("Not yet implemented")
}
})
动画执行过程监听
- 方式1，关注动画执行操控，可以拿到ValueAnimator，在回调内部操控动画
lottie_view_code.addAnimatorUpdateListener {
// Log.i(TAG, " it.animatedValue: ${it.animatedValue}")
// Log.i(TAG, " it.animatedFraction: ${it.animatedFraction}")
if (it.repeatCount == 3) {
it.cancel()
}
//animatedValue 动画执行一次[0,1]的过程,假如设置重复此时5次，则会执行5次 0-1的返回结果
//animatedFraction 动画执行的全过程，假如设置重复此时5次，则执行完第一次返回的值就是0.2，第二次执行完成返回值就是0.4....
}
- 方式2，关注动画各个时段状态
lottie_view_code.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator?) {
Log.i(TAG, " onAnimationStart: ")
}
override fun onAnimationEnd(animation: Animator?) {
Log.i(TAG, " onAnimationEnd: ")
}
override fun onAnimationCancel(animation: Animator?) {
Log.i(TAG, " onAnimationCancel: ")
}
override fun onAnimationRepeat(animation: Animator?) {
Log.i(TAG, " onAnimationRepeat: ")
}
})
返回动画执行的各个时段状态：
2021-06-08 13:25:52.630 6970-6970/com.nobo.lottie I/wilfried: onAnimationStart:
2021-06-08 13:25:54.726 6970-6970/com.nobo.lottie I/wilfried: onAnimationRepeat:
2021-06-08 13:25:56.752 6970-6970/com.nobo.lottie I/wilfried: onAnimationRepeat:
2021-06-08 13:25:58.785 6970-6970/com.nobo.lottie I/wilfried: onAnimationRepeat:
2021-06-08 13:26:00.818 6970-6970/com.nobo.lottie I/wilfried: onAnimationRepeat:
2021-06-08 13:26:02.869 6970-6970/com.nobo.lottie I/wilfried: onAnimationRepeat:
2021-06-08 13:26:04.904 6970-6970/com.nobo.lottie I/wilfried: onAnimationEnd:
- 方式3，只关注动画的暂停和恢复状态
lottie_view_code.addAnimatorPauseListener(object : Animator.AnimatorPauseListener {
override fun onAnimationPause(animation: Animator?) {
Log.i(TAG, " onAnimationPause: ")
}
override fun onAnimationResume(animation: Animator?) {
Log.i(TAG, " onAnimationResume: ")
}
})
注意事项
- LottieAnimationView的loop方法已过时（也可使用），推荐使用如下方式替换：
repeatMode = LottieDrawable.REVERSE;//设置播放模式
repeatCount = LottieDrawable.INFINITE;//设置重复次数 - app:lottie_rawRes="@raw/android_wave"
app:lottie_fileName=“android_wave.json”
两种加载方式都可以加载动画，建议使用 app:lottie_rawRes的方式，此方式会使用R文件引用的方式找到android_wave，而app:lottie_fileName只是输入字符串容易出错 - 动画使用完成之后一定要及时取消掉cancelAnimation()
- 可以使用setMinFrame, setMaxFrame,setMinAndMaxFrame或setMinAndMaxProgress来指定循环动画的特定部分，进度(0.0到1.0)
lottie_view_code.setMinAndMaxProgress(0.5f, 0.9f)
参考文献
lottie官方文档
Lottie for Android 实战使用总结
Lottie- 让Android动画实现更简单