Lottie实现app首次进入动画

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文件中导入动画数据:

1 2 3

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