Lottie安卓开源动画库使用

碉堡的Lottie

Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.可以说,Lottie的出现,将极大地解放Android/iOS工程师于无尽的编写原生自定义动画的工作中.当我们的项目中用GIF实现一些复杂的视觉效果的时候,会遇到许多的问题.比如,GIF的文件过于庞大,并且对于不同分辨率设备的适配存在不便,并且Gif格式的色深问题是一个死穴.

比如下面这个动画效果

原始工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json

如下图所示,通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.从而达到动画文件的一次绘制、一次转换、随处可用的效果.当然,就如java一次编译,随处运行一样,lottie本身这个动画播放库并不是跨平台的.

使用Lottie库播放动画

终于说到主角了,然而关于它的使用方式却是相对简单的.Lottie的引入与使用就如其他库一样,这里以Android平台的使用为例.

把导出的json动画文件添加到assets目录下：

在项目的build.gradle文件中加入:

dependencies {    compile 'com.airbnb.android:lottie:1.0.1'}Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:
 
<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" />
或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:
123
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);
你还可以通过API控制动画,并且设置一些监听:
public class MainActivity extends AppCompatActivity {    @Override    PRotected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);        animationView.setAnimation("EmptyState.json");        animationView.loop(false);        Animator.AnimatorListener animatorListener = new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animator) {            }            @Override            public void onAnimationEnd(Animator animator) {                startActivity(new Intent(MainActivity.this,LoginActivity.class));            }            @Override            public void onAnimationCancel(Animator animator) {                startActivity(new Intent(MainActivity.this,LoginActivity.class));            }            @Override            public void onAnimationRepeat(Animator animator) {            }        };        animationView.addAnimatorListener(animatorListener);        animationView.playAnimation();    }}
补充：
想看生成json文件的看这里：http://www.trojx.me/2017/02/06/android-lottie-library/
后续补上demo