Lottie——强大的动画渲染框架

概述

Airbnb开源的强大的动画框架,适用于Android,IOS,React Native和Web。可以使用AE导出的JSON格式的动画,并解析为原生动画效果。

特点:
跨平台 —— 一份动画效果,多平台通用。
多种方式导入动画效果 —— 可从assets,sdcard,网络加载动画资源,支持动态更新。

原生实现
之前在Android中要实现相对复杂的动画效果一般有三种方式:
1.帧动画,在程序中添加N张动画图片,通过帧动画实现动画效果,缺点是图片太多导致apk过大。
2.Gif,使用动画gif实现动画效果,但是android原生对gif支持不好,而且比较占用系统资源,在低性能设备上效果较差。
3.通过自定义控件和图片实现,通过复杂的动画实现逻辑,实现效果。缺点实现方式繁琐,代码封装性通常不好,动画效果稍微变更,就需要大量的修改实现逻辑。

优势
Lottie相对于原生的动画实现方式的优势:
1.需要很少的图片资源就可以实现复杂的动画效果,甚至不需要图片资源。
2.平台兼容性好,不需要做平台和分辨率的适配工作。
3.可以很方便的加载动画文件,甚至可以实现动态更新。
4.只需要从AE导出动画Json文件即可实现动画效果,极大的减少了开发的工作量。

Lottie在Android的使用

GitHub和官方文档

GitHub:https://github.com/airbnb/lottie-android
官方文档:http://airbnb.io/lottie/#/android
动画广场:https://lottiefiles.com/marketplace/animators?page=1
众多动画师开源了大量的动画效果。

添加依赖

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

lottieVersion版本以官网和GitHub上发布的版本为准,需要注意的是:

Lottie 2.8.0 and above only supports projects that have been migrated to androidx. For more information, read Google's migration guide.

2.8.0及更高版本只支持配合androidx使用。

核心类

  • LottieAnimationView extends ImageView and is the default and simplest way to load a Lottie animation.
  • LottieDrawable has most of the same APIs as LottieAnimationView but you can use it on any View you want.
  • LottieComposition is the stateless model repesentation of an animation. You can create one with LottieCompositionFactory and set it on a LottieDrawable or LottieAnimationView.

简单总结一下就是:
LottieAnimationView 继承ImageView封装了一下播放Lottie动画的方法,可以简便的实现Lottie动画效果。
LottieDrawable Lottie动画的Drawable封装类,可以在需要播放动画的View上使用。
LottieComposition 可以简单理解为Lottie Json文件对应的实体类。
LottieCompositionFactory Lottie对象的工厂类,用于构建Lottie对象。可以从assets、sdcard和网络加载json文件、json zip和json String等数据构建Lottie对象。

使用

XML

    

Lottie中针对从网络链接获取动画文件做了封装,可以很方便的从网络加载动画效果。

代码

LottieAnimationView的使用:

//设置assets文件目录
lottieAnimationView.setImageAssetsFolder("lottie");
//设置assets下的动画文件
lottieAnimationView.setAnimation("test.json");
//设置网络url
lottieAnimationView.setAnimationFromUrl("https://assets7.lottiefiles.com/packages/lf20_Hy2FuX.json");
//开始播放
lottieAnimationView.playAnimation();

设置动画监听:

lottieAnimationView.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) {

    }
});

lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        
    }
});

LottieCompositionFactory和LottieDrawable就不展开讲了使用都比较简单,看API文档基本都能理解。
详细使用看官方介绍:http://airbnb.io/lottie/#/android

你可能感兴趣的:(Lottie——强大的动画渲染框架)