• (原创)Lottie动画使用介绍


    前言

    我们都知道,安卓里面有三种基本的播放动画方式:
    帧动画,属性动画,补间动画
    今天介绍一种新的实现方式:Lottie动画
    Lottie是爱彼迎开源的一个动画框架。可以支持iOS、Android 和 React Native ,
    可实时渲染 After Effects 动画,让应用程序使用动画就像使用静态图像一样轻松。
    这波博客主要介绍基本的使用,文末也会贴上相关的资料

    导入方式

    导入依赖的方式比较简单:

    implementation 'com.airbnb.android:lottie:5.2.0'
    
    • 1

    我这里用的是5.2.0的版本

    基本使用

    Lottie动画支持XML配置和代码配置,如果要在xml里面写,就可以像这样:

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:scaleType="centerInside"
            app:lottie_autoPlay="true"
            app:lottie_fileName="anim/item_gift_jd_new_selected/index.json"
            app:lottie_imageAssetsFolder="anim/item_gift_jd_new_selected/images"
            app:lottie_loop="true" />
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    其实LottieAnimationView继承的也就是一个AppCompatImageView
    常用的xml属性有:
    lottie_fileName :在app/src/main/assets目录下的动画,以json文件名。
    lottie_rawRes:存放在app/src/main/res/raw 目录下的json动画
    app:lottie_rawRes,app:lottie_fileName这两个属性基本相似。
    lottie_loop:动画是否循环播放,默认不循环播放。
    lottie_autoPlay:动画是否自动播放,默认不自动播放。
    lottie_imageAssetsFolder:动画所依赖的图片目录,在app/src/main/assets/目录下的子目录,该子目录存放所有图片。
    lottie_colorFilter :设置动画的着色颜色
    lottie_repeatCount :重复次数,当你设置-1的时候就代表相应的循环了!
    lottie_scale :设置动画的比例
    lottie_repeatMode: 设置动画的重复模式RESTART:重复、REVERSE:反向

    当然,更多的动态配置还是可以在代码里写的,比如这样:

            LottieAnimationView animationView1 = findViewById(R.id.animationView1);
            animationView1.setImageAssetsFolder("anim/item_gift_jd_new_selected/images");
            animationView1.setAnimation("anim/item_gift_jd_new_selected/index.json");
    
    • 1
    • 2
    • 3

    还有一些基本的API如下:
    加载网络的资源
    setAnimationFromUrl(String url)
    设置循环次数
    setRepeatCount(int count)
    设置循环模式(LottieDrawable.INFINITE,LottieDrawable.RESTART,LottieDrawable.REVERS,默认RESTART)
    setRepeatMode(int)
    是否无限循环
    loop(boolean loop)
    设置最大帧和最小帧
    (1.frame从0开始计算
    2.播放的帧范围为:[minFrame, maxFrame),不包含第maxFrame帧)
    setMinAndMaxFrame(int minFrame, int maxFrame)
    播放
    lottieAnimationView.playAnimation()
    暂停播放
    lottieAnimationView.pauseAnimation()
    取消播放
    lottieAnimationView.cancelAnimation()
    重启动画
    animationView.resumeAnimation();
    设置X轴方向上的缩放比例,0f为不可见,1f原始大小 Ps.原setScale方法在2.0.0版本后已弃用
    animationView.setScaleX(0.5f)
    设置Y轴方向上的缩放比例
    animationView.setScaleY(0.5f)
    Lottie内部有两个缓存map(强引用缓存,弱引用缓存),在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用。
    lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong) //强缓存
    lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak) //弱缓存
    LottieAnimationView.CacheStrategy.None) //默认
    设置当前进度
    lottieAnimationView.setProgress(progress)
    强制缓存绘制数据
    lottieAnimationView.buildDrawingCache()
    获取当前绘制数据
    Bitmap image = lottieAnimationView.getDrawingCache()
    Lottie动画还提供了很多监听的api,下面继续介绍

    常用监听方法

    addLottieOnCompositionLoadedListener:动画加载完成监听
    setFailureListener:动画加载失败回调
    addAnimatorUpdateListener:动画进度监听回调
    addAnimatorListener:同上,只不过上面是监听具体的值,这边是有四个回调方法(start,end,cance,repeat)
    addAnimatorPauseListener:只关注暂停和恢复的回调

    优缺点

    优点:
    1.由于将动画变成了json字符串,相比几M体积的gif图,等质量下的压缩率达到80%及以上。
    2.支持云端动画资源加载,上线新的动画效果不需要发版
    3.支持实时渲染 After Effects 动画,让 app 加载动画像加载图片一样简单。
    4.因为Lottie是利用json文件生成动画,从而避免了不同分辨率、不同设备尺寸上面动画效果存在差异的问题。
    5.拿到动画.json文件后,研发可以灵活的自行修复动画的颜色、路径等数据,自行扩展
    6.拥有完整丰富的API,除了常规的播放、控制进度、暂停控制,还可以缓存、添加额外的原生UI
    7.在未开启硬件加速的情况下,帧率、内存,CPU都比属性动画差,开启硬件加速后,性能差不多。

    缺点:
    1.Lottie尚不支持效果菜单中的表达式或任何效果。
    2.使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩,遮罩的大小会对性能产生更大的影响。
    3.Lottie还不支持阴影,颜色叠加或笔触等图层效果。

    相关资料

    乐蒂文档
    Android -Lottie加载动画喂饭指南
    Lottie动画 轻松使用

  • 相关阅读:
    Java八股文纯享版——篇②:并发编程
    网络工程师知识点4
    python实战根据excel的文件名称这一列的内容,找到电脑D盘的下所对应的文件位置,要求用程序实现
    Spring的beanName生成器AnnotationBeanNameGenerator
    YOLOv4 论文总结
    FBA海运到美国费用一般包含哪些?
    常用的Selenium WebdriverAPI
    chatgpt赋能python:Python数据处理中如何选取指定范围的数据
    emqx安装教程
    【无标题】
  • 原文地址:https://blog.csdn.net/Android_xiong_st/article/details/126350385