使用lottie加载json动画

作者: 奔跑吧李博 | 来源:发表于2018-01-31 10:16 被阅读450次

github代码传送门

先上效果图,这个是做的一个仿抖音的点赞动画:


giphy.gif

众所周知,属性动画、补间动画通常只能做一些效果简单的,而做复杂的动画可采用gif图,帧动画,但是这样资源空间增大导致apk增大不小。而加载json文件实现动画就完美解决以上问题。

设计师AE导出Json文件,Lotti 解析Json文件后调Core Animation的API绘制渲染。所以让你们公司的UI去学一学AE吧,多们技能好防身。

Lottie开源库地址:一个集Android、Ios、React Native与Web平台于一身的女子。

https://github.com/airbnb/lottie-android

使用方式:

  1. 引入库
    compile 'com.airbnb.android:lottie:1.0.1'
  1. 创建assets文件夹,将json文件放入其中。


    image.png
  1. 引用LottieAnimationView控件
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_likeanim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="likeanim.json"
        app:lottie_loop="true"
        android:layout_centerInParent="true"/>

常用属性:

      app:lottie_fileName="likeanim.json"  加载json的文件名
      app:lottie_loop="true"  是否循环播放
      app:lottie_autoPlay="true"  是否自动播放

常用操作:

       lottieLike.playAnimation();   //播放
        lottieLike.pauseAnimation();  //暂停
        lottieLike.cancelAnimation();  //取消
        lottieLike.getDuration();   //获取动画时长
        lottieLike.addAnimatorListener(new Animator.AnimatorListener() {  //添加动画监听
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

相关文章

网友评论

本文标题:使用lottie加载json动画

本文链接:https://www.haomeiwen.com/subject/tsqoaxtx.html