Android中Lottie的简单使用

5,453 阅读6分钟

很久没写博客了,其实就是懒。加上项目上线,真心累啊!今天我们说点什么?最近我们美工也不知道在什么地方发现Lottie这么个东西,于是乎就自己弄了一个json文件的动画,跑过来说我要看这个动画效果,其实以前对Lottie还是有一定了解的!所以就直接给她写了个Demo展示了一下,但是对于我的一贯尿性,感觉这个东西挺好玩的,就研究了一下,所以这里给大家分享一下:

#本文知识点:

  • Lottie的介绍
  • Lottie的简单使用
  • Lottie在项目中可能用到的内容
  • Lottie的案例分析

1. Lottie的介绍

Lottie是Android和iOS的移动库,用于解析Adobe After Effects动画与Bodymovin一起导出为json 并在移动设备上呈现它们!其实在移动端就是通过一个json文件显示相应的动画,其实这样很好的解决了动态改变动画的能力,只需要动态加载相应的josn文件就能实现动画的改变!也省的移动端在进行版本的变更了!关于json文件是怎么得到的我不准备在这里去研究,什么AE、PS的我是真不会!别和我说你们美工不会,不会就让他们学,他们不学怎么办?你们可以去这个网址去找相应的动画,只能帮你们到这里了!如果你真的对AE、PS什么的感兴趣,自己找美工学就是了!没准还能套套近乎,领个媳妇回家呢!哈哈。。。

2. Lottie的简单使用

其实说到简单使用,真的就是傻瓜式操作!但是我觉得这里还是有必要说一下你可以设置的属性

  • lottie_fileName 设置相应的json文件(app/src/main/assets目录下的动画json文件名,关于这个文件的创建,后面我给你贴张图你就知道了!!!)
  • lottie_loop 设置动画是否循环,默认是不循环的(这个在新版本中已经不建议使用了!)
  • lottie_colorFilter 设置动画的着色颜色,这个就是把你的动画变成了一个颜色的了!但是有些动画太深的话会变得一片模糊!所以感觉这个东西和json文件的内容有关!!!
  • lottie_autoPlay 设置动画是否自动播放
  • lottie_repeatCount 重复次数
  • lottie_imageAssetsFolder 动画依赖的图片资源文件地址
  • lottie_scale 设置动画的比例,但是我设置了并没有什么用!!!
  • lottie_repeatMode 设置动画的重复模式RESTART:重复、REVERSE:反向

创建assets文件夹的方法,按照图片上的位置点击之后,你就一顿下一步就可以了!!!

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="biking_is_cool.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

像上面这样就能显示出相应的动画了!这里给大家看一下相应的动画效果!!!

3. Lottie在项目中可能用到的内容

在项目中使用Lottie的时候,一般都会涉及到许多内容,像取消动画,暂停动画等许多问题!这里都简单的和大家分享一下!

3.1 Lottie代码中加载动画

有的人可能不喜欢使用XML去加载动画,因为这样也确实不能从网络获取相应的动画,所以一些人采取用代码的方式去加载动画!像下面这样!

    mLottieAnimationView = findViewById(R.id.lav_animation);
    mLottieAnimationView.setAnimation("giftbox.json");
    //这个方法已经过时了
    // mLottieAnimationView.loop(true);
    //当你设置-1的时候就代表相应的循环了!
    mLottieAnimationView.setRepeatCount(-1);
    mLottieAnimationView.playAnimation();

简单的这几行代码就能实现相应的动画!是不是很简单。

3.2 Lottie从服务其获取相应的内容应注意什么

有的时候项目的需求是从服务器获取相应的json文件进行代码展示!这样既能改变动画的效果,又能动态的实时获取,避免APP进行相应的更新!

以前在做电商的项目,有的时候底部的Tab就有相应的节日Tab,这个时候你就可以采用从服务其上面获取相应的json文件进行相应的展示!但是别忘了一个问题,服务器获取json的时候,可能因为用户的网速等原因,暂时下载不下来的情况,那么问题来了?当你没有获取到json的时候怎么解决,之前我们的做法是先设置一张默认的图片(setImageResource(R.mipmap.ic_launcher)进行设置),当josn文件下载下来的时候在调用相应的代码进行加载!像下面这样

        mLottieAnimationView = findViewById(R.id.lav_animation);
        mLottieAnimationView.setImageResource(R.mipmap.ic_launcher);

        new Thread() {
            @Override
            public void run() {
                super.run();
                try {
                    sleep(5000);//模拟下载的时间
                    String json = "千万别直接复制,这里是下载下来的json字符串";
                    mLottieAnimationView.setAnimationFromJson(json);
                    //当你设置-1的时候就代表相应的循环了!
                    mLottieAnimationView.setRepeatCount(-1);
                    mLottieAnimationView.playAnimation();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }.start();

这里还有一个点需要注意,但是我试了一下,这样会存在几秒的延时!!!

3.3 Lottie的缓存机制

Lottie内部存在相应的缓存机制,也就是说我们可以在加载json的时候使用相应的缓存进行加载!!!像这样...

  • setAnimation(final String animationName, final CacheStrategy cacheStrategy)
    • LottieAnimationView.CacheStrategy.None 没有缓存
    • LottieAnimationView.CacheStrategy.Weak 弱引用缓存
    • LottieAnimationView.CacheStrategy.Strong 强引用缓存 这样就可以在加载动画的时候设置相应的缓存,是缓存在一个Map集合中,下次直接从这个Map集合中取了!!!

3.4 Lottie的一些特殊使用

如果你们的美工能研究的话,其实这个json文件中还可以放一些相关的图片,具体怎么弄我还真的不知道,等有时间我去问问,既然能放相关的图片,其实很多秀场的动画也有用Lottie来实现的,怎么实现的呢?基本上都是弄一个服务开始现在相应的json文件和图片,放到内存卡里面,等你用的时候从本地存储里面直接用流的形式取就是了!因为我以前做过相关的秀场动画,所以这里知道一点,我也特意的找到了一片相关的博客如果感兴趣的话,可以看看Lottie -- 轻松实现动态加载直播礼物动画里面写的内容!这里就不做展开说明了!


基本上在项目中Lottie的使用场景也就是这么多了,其实我感觉我分析的还不是那么透彻,有一些关于源码部分的内容我都没有仔细看,最近项目中的需求太多了!大家加油吧!入了Android的大坑什么时候能脱坑啊!!!今天就到这里拜拜!!!