Lottie的使用

版权声明:本文为博主原创文章,转载时请著名出处:http://blog.csdn.net/dg_summer https://blog.csdn.net/DG_summer/article/details/78871397

Lottie支持API 16以上版本使用,android 官方地址Lottie

1.项目配置

dependencies {
    compile 'com.airbnb.android:lottie:2.2.5'
}

2.布局文件使用

  • 直接使用json
    lottile_fileName=”hello-world.json”,这里就是引用的json文件,此文件直接放在assets目录下。json文件可以再上面给的网站下载,然后放在文件下,修改名字即可
<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="hello-world.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />
  • 如果需要用到带图片的json,lottie_imageAssetsFolder这个设置为图片文件夹,当然文件夹是放在assets下面的。
<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_imageAssetsFolder="counttime"
            app:lottie_fileName="hello-world.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

3.代码中使用

        LottieAnimationView animation= (LottieAnimationView) findViewById(R.id.animation_view);
        animation.setImageAssetsFolder("counttime/");
        animation.setAnimation("321go.json");
        animation.loop(true);
        animation.playAnimation();

4.动画的监听


Animator.AnimatorListener animatorListener = new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
            //TODO
            }
            @Override
            public void onAnimationEnd(Animator animator) {
                     //TODO
            }
            @Override
            public void onAnimationCancel(Animator animator) {
            }
            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        };
        animation.addAnimatorListener(animatorListener);
        animation.playAnimation();
    }

5.开发过程中遇到的问题

  • 设置json文件,播放崩溃
    库版本过低导致,我刚开始使用1.0.1版本会遇到这个问题,更新到1.5.1就播放正常
  • 带图片的动画,图片播发重叠的问题
    刚开始我用1.5.0版本的库,播放图片,会出现这种状况,改成最新版本就没有了
  • 所以建议使用最新的库,目前最新版本2.2.5

猜你喜欢

转载自blog.csdn.net/DG_summer/article/details/78871397
今日推荐