Lottie动画详解

Posted xiaoqiang_0719

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Lottie动画详解相关的知识，希望对你有一定的参考价值。

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: ")
            
        )

注意事项

  1. LottieAnimationView的loop方法已过时（也可使用），推荐使用如下方式替换：
    repeatMode = LottieDrawable.REVERSE;//设置播放模式
    repeatCount = LottieDrawable.INFINITE;//设置重复次数
  2. app:lottie_rawRes="@raw/android_wave"
    app:lottie_fileName=“android_wave.json”
    两种加载方式都可以加载动画，建议使用 app:lottie_rawRes的方式，此方式会使用R文件引用的方式找到android_wave，而app:lottie_fileName只是输入字符串容易出错
  3. 动画使用完成之后一定要及时取消掉cancelAnimation()
  4. 可以使用setMinFrame, setMaxFrame,setMinAndMaxFrame或setMinAndMaxProgress来指定循环动画的特定部分，进度(0.0到1.0)
    lottie_view_code.setMinAndMaxProgress(0.5f, 0.9f)

参考文献

lottie官方文档
Lottie for Android 实战使用总结
Lottie- 让Android动画实现更简单

Demo实现

https://github.com/WuMaoQiang/nobo_lottie

以上是关于Lottie动画详解的主要内容，如果未能解决你的问题，请参考以下文章

Lottie动画详解

[UWP]缓存Lottie动画帧

Lottie 动画在项目中的使用总结

Lottie 动画在项目中的使用总结

Lottie 动画

React Native 实现Lottie动画