adobe android 动画,Lottie - Android 动画详解

Lottie 是 Airbnb 开源的火热动画库，让程序员告别痛苦的动画。对于曾经写一个大动画两三千行代码的我来说，无疑是一个巨大的福利。

接下来我将逐步介绍Lottie的使用及源码，以及 Adobe After Effects 和 Bodymovin 的安装和使用(mac)。 俗话说，不会做动画的设计不是好程序员，让我们开始吧。

相关文章

Lottie 是什么 ？

Lottie 是在 Android 和 iOS上 原生渲染 的After Effects(AE)动画,Lottie是 Airbnb 开源的支持Android 和 iOS 的动画库，它可以解析 AE 动画中用Bodymovin 导出的json文件，并在移动设备上利用原生库进行渲染 ！

本文翻译于Lottie Git 项目，项目地址：https://github.com/airbnb/lottie-android

Lottie 好处 ？

先上图 ！

image

设计师的动画可以完全的复现，无需程序员手工重新创建，并且超于设计师预期，麻麻再也不用担心实现跟设计有差距。

所有的这些动画都是在 After Effects 中创建，使用Bodymovin导出，无需额外的工作，Bodymovin 是一个AE 的插件，导出效果文件作为json和一个javascript web 播放器，在其之上，Lottie将它扩展到 Android，iOS和React Native。

Lottie 的使用

1、添加 Gradle 依赖

dependencies {

compile 'com.airbnb.android:lottie:1.5.3'

}

2、使用View

Lottie支持Jellybean(API 16)及以上。最简单的使用方法是LottieAnimationView

< 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资源：

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);

animationView.setAnimation("hello-world.json");

animationView.loop(true);

如果你想复用动画，比如在列表中的每个项目或者从网络请求加载JSONObject

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);

...

Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {

animationView.setComposition(composition);

animationView.playAnimation();

});

然后控制动画执行或者对动画添加监听

animationView.addAnimatorUpdateListener((animation) -> {

// Do something.

});

animationView.playAnimation();

...

if (animationView.isAnimating()) {

// Do something.

}

...

animationView.setProgress(0.5f);

...

// 自定义动画的速度和持续时间

ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)

.setDuration(500);

animator.addUpdateListener(animation -> {

animationView.setProgress(animation.getAnimatedValue());

});

animator.start(); // 动画开始

...

animationView.cancelAnimation(); // 关闭

支持 After Effects 的功能

关键的插值器

Linear Interpolation 线性插值器

Bezier Interpolation 贝塞尔插值器

Hold Interpolation 保持插值器

Rove Across Time

Spatial Bezier

固定变换

Transform Anchor Point 锚点变换

Transform Position 位置变换

Transform Scale 伸缩比例变换

Transform Rotation 旋转变换

Transform Opacity 透明度变换

遮罩 (碉堡了！)

Path 路径

Opacity 不透明度

Multiple Masks (additive, subtractive, inverted) 多重多样的遮罩

Track

Alpha Matte 透明度遮罩

Parenting

Multiple Parenting

Nulls

图层形状

Rectangle (All properties) 矩形

Ellipse (All properties) 椭圆

Polystar (All properties) 北极星？什么鬼

Polygon (All properties. Integer point values only.) 多边形

Path (All properties) 路径

Anchor Point 锚点

Position 位置坐标

Scale 缩放

Rotation 旋转

Opacity 不透明

Group Transforms (Anchor point, position, scale etc) 合成变换

Multiple paths in one group 多路径合成

冲程(形状层，外层)

Stroke Color 描边颜色

Stroke Opacity 不透明描边

Stroke Width 描边宽度

Line Cap 压线帽

Dashes 破折号

填充

Fill Color 填充颜色

Fill Opacity 填充不透明度

修剪路径

Trim Paths Start

Trim Paths End

Trim Paths Offset

性能和内存

1、如果组合没有用到遮罩masks或mattes，那么性能和内存开销应该相当不错。没有创建位图bitmap，大多数操作都是简单的画布操作。

2、如果组合中有遮罩masks或mattes，将在合成的地方创建2-3个bitmap，当动画师徒添加到view时，bitmap由lotti自动创建，并在View删除时被回收。所以不建议在RecyclerView中使用带有遮罩masks或mattes的动画，可能会造成溢出。(后面看到git又把这一条更新掉了，索性还是贴上来吧)！后来看到Git更新为：如果组合有遮罩或遮罩，将使用屏幕外缓冲区，画面以外的缓冲区的使用和性能会有影响了。

3、如果在list中使用，建议在LottieAnimationView.setAnimation(String，CacheStrategy)中使用CacheStrategy，因此动画不必每次都反序列化。