文主要介绍了动画的原理相关概念，对其他平台的动画做了一个简要的梳理，并简要的介绍了Flutter动画的一些知识。

1. 动画介绍

动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些封装好的动画库，我们制作酷炫的效果方便了不少。当然了，这些库都是基于各平台基础的动画API实现的，笔者今天要聊的，也就是基础的动画及背后的原理。

1.1 动画的本质

动画顾名思义，就是动起来的画面。画面为什么会动起来了呢？在回答这个问题之前，我们先引入一个概念。

人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。

视觉暂留被认为是电影的最重要的一个理论基础。我们看到的动画，实际上是一连串的画面组成，只不过是以很快的速度去播放，人眼在下一个画面出来之前，还残留着上一个画面的视觉，看起来就像是在没有间隔的播放这一系列的图片，也就是我们称之为的动画。

1.2 相关概念

动画会有很多相关的概念，理解了这些概念，会对实际的使用更有帮助。

1.2.1 帧

刚才在介绍动画本质的时候，用到了画面这个词汇，只是方便读者去理解，这个画面，在学术上叫做帧。

帧就是影像动画中最小单位的单幅影像画面，一帧就是一副静止的画面。

帧里面又分为关键帧和过渡帧，这两概念是理解一些动画的基础，例如Android中的补间动画。在一些场景中，我们可能不会给出一个动画的所有帧，所以将帧分成关键帧和过渡帧。关键帧可以理解为一个动画的起始状态，而过渡帧则是系统自动完成插在关键帧之间的部分。

我们知道Android中的补间动画，基础的有四种类型，平移、缩放、旋转、透明度。而我们设置动画的时候，通常只是设置起始的状态，也就是关键帧，中间过程其实我们并不需要去考虑，如果关注动画速率的话，顶多加一个差值器去控制，但是中间生成的帧我们并没有提供。

系统为什么能够补齐过渡帧呢？我们看下这四种基本的动画类型，给定起始状态，中间状态我们其实是可以通过计算推演出来的，这也是系统为什么能够补齐的原因。

是不是只有这四种才可以通过系统填补过渡帧呢？显然不是的，例如一个跳跃前进的动画，添加一些限制条件，就可以推演出中间的状态。系统提供的只是比较常见的四种，并不是说只有这四种，而是绝大部分动画都可以通过这四种组合实现。当然了，肯定也是有实现不了的，这个时候有一个办法就是通过canvas画出来。

另外再插一嘴，Android系统提供的四种动画操作，也是变换矩阵是四维的原因，具体的就不多说了，之前文章也有介绍过。

最后一嘴，此处讲解帧的概念，拿了很多Android相关的知识去讲解，只是希望读者能够通过一些已知的概念，去理解一些未知的。动画的原理都一样，具体到某个平台，可能顶多就是实现或者叫法不一样罢了。

1.2.2 帧数与FPS

小时候很多人都玩过书角动画。在书或者本子的一角，每一页都画上一个画面，然后拨书角，不同速度拨，动画的感受不一样，拨的越快，动画越流畅。这是为什么呢？这就牵扯到帧数与FPS了。

帧数，帧的数量。FPS（Frame per Second），即每秒显示帧数。

这两个概念，主要是FPS有什么作用呢？这是因为人眼生理构造的原因。人眼残留镜像的时间是有限的，如果过了这个时间，下一帧还没有变化，就会感觉不流畅。但也不是帧数越大越好，毕竟人眼也是有极限的。

1.2.3 插值器

如果动画播放一直都是这种匀速的进行，那表现形式就太单一了。那如何实现非线性的动画效果呢，这个时候就需要用到插值器了。

插值器其实并不复杂，就是一个数学函数，设置属性值从初始值过渡到结束值的变化规律。每个平台都有自己定义好的一系列插值器，可以供开发者选择使用，也提供自定义的接口，本质上是一个贝塞尔函数。

一个匀速插值器如下：

属性值百分比=时间百分比

1.3 如何实现

动画的基本原理和一些基本概念都介绍了一下，现在来聊一下动画的实现。

先抛开系统层级的各种渲染优化，也仅仅是以补间动画为例，假设以现有的移动平台基础上，去实现一套简单的动画框架，该如何去实现呢？

以Android的为例，要实现平移、缩放、旋转、透明度这四种基础的补间动画，可以看到，这些都是基于某个属性的动画，平移是基于point、缩放是基于scale、旋转是基于angle、透明度是基于alpha。

结合插值器，提炼出一个通用的动画类，这个类的作用是根据插值器，得到视图某个时间点的属性变化的状态。

既然各个时间点的状态已经有了，剩下来的就是让各个状态渲染出来。底层的机制在此处不去讨论，这个地方就需要一个定时器，定时器的作用是每隔一段时间就把素材渲染到屏幕上。

至此，一个简易的动画框架就出来了。如果对各平台比较了解的话，就知道我说的是视图动画，真正的动画引擎不是这么简单，涉及到的技术也比较复杂，但是大体的思想不会有错，不管是哪种动画，都是跟时间相关的帧序列，只是实现方式不同。

这也是笔者为什么花这么多篇幅去介绍动画相关的概念，知道一些底层原理后，不管什么平台，怎么去实现，底层的思想肯定都差不多，只是实现上的不同。

2. 其他平台的动画

Flutter动画，与Android、iOS等平台对比，其实本身并没有什么特别之处。基本的原理是一样的，只是提供的种类以及实现的方式不同罢了。

2.1 Android动画

Android的动画，大的分类有两种：

• 视图动画（View Animation）
• 属性动画（Property Animation）

视图动画又可以分为两类：

• 补间动画（Tween Animation）
• 逐帧动画（Frame Animation）

这之间的差别是什么呢？它们只有实现上的差别

• 补间动画是根据初始状态，系统自动补充中间状态；
• 逐帧动画则是需要我们提供每一帧；
• 视图动画只是作用于视图上，而不会改变控件的属性；
• 属性动画则是会实实在在的更改控件的属性。

可以看出Android的动画分类还是比较明晰的。

2.2 iOS动画

iOS很久没弄了，在这里也简单说下，不对的话还请各位指正。

• 隐式动画
• 显式动画

显式动画又可以分为两类：

• 基础动画
• 关键帧动画

这些动画类别之间的差别是什么呢？

• 隐式动画，顾名思义是不指定动画类型，更改某个属性，Core Animation来决定如何且何时去做动画；
• 基础动画，根据起始值来做动画；
• 关键帧动画，则是定义一系列关键帧，系统自动补齐中间的过渡帧。

通过动画这一块儿，可以看出iOS的分类其实是比较的模糊的，有一些历史包袱。

2.3 css动画

css动画大体上有两种：

• Transition
• Animation

web中的动画分类简单的多了

• Transition动画，给定起始值，可以结合插值器做动画；
• Animation动画，则是定义一系列关键帧，系统补齐中间的过渡帧。

击右上方红色按钮关注“web秀”，让你真正秀起来

犸良是什么？

“犸良” 是一款基于 Lottie 的动效设计平台。能够快速生成设计师想要的动态效果，并交付给开发，极大地提高了设计效率和设计还原度。作为一站式动效制作平台，通过海量的动效素材以及可视化编辑能力，帮助零基础的用户轻松完成动效制作。

上面说到了 Lottie ，那 Lottie 你了解嘛？

什么是Lottie ？

能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件 (1)、数据源多样性—可从assets,sdcard,网络加载动画资源，动态更新 (2)、跨平台—设计稿导出一份动画描述文件，android,ios,react native通用

Lottie动画Json结构 分为4层：

1. 结构层：可以读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等
2. asset:图片资源信息集合，这里放置的是 制作动画时引用的图片资源
3. layers:图层集合，这里可以获取到多少图层，每个图层的开始帧 结束帧等
4. shapes：元素集合，可以获取到每个图层都包含多个动画元素。通过这样的层级去读取文件信息 然后映射成JavaBean对象，然后通过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去

ok，回归正题。

犸良的应用场景

有了 Lottie 的支撑，犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台，一站式完成动效创意制作和投放。

“我”就是这么强大！！！

相信大家一定急于知道，犸良 如何使用？其实也简单。

犸良怎么用？

我们来到犸良 首页，有很多个按钮“创建动画”，可以点击，我们只需要登录支付宝账号即可。

基于模版直接制作

1、选择模版

2、从动画仓库选择动画进行当前动画的替换

3、通过替换图片或修改颜色来自定义动画

4、自定义模板文字内容

5、选择模板背景图片

6、完成编辑选择是否带背景（banner模版默认带背景）

7、导出成功下载 json

有了这个JSON文件，我们如果使用？下面主要讲讲web前端如何使用，给出简单示例。

Lottie 使用

我们在需要的页面引用lottie.js文件。

<script src="js/lottie.js" type="text/javascript"></script>

<script> 
lottie.loadAnimation({
 container: element, // 动画的dom元素
 renderer: 'svg', // 设置渲染器(svg/canvas/html)
 loop: true, // 是否循环播放
 autoplay: true, // 是否自动播放
 path: 'data.json' // 动画json文件路径
});
</script>

lottie.loadAnimation还提供，播放、暂停、停止等事件。

然后对Vue钟情的小伙伴，也可以来试试vue中如果使用lottie？

如上代码事件可以控制动画。

npm install --save vue-lottie

<template>
 <div id="app">
 <lottie 
 :options="defaultOptions" 
 :height="400" :width="400" 
 v-on:animCreated="handleAnimation"
 />
 </div>
</template>

<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/pinjump.json';

export default {
 name: 'app',
 components: {
 'lottie': Lottie
 },
 data() {
 return {
 defaultOptions: {
 animationData: animationData
 },
 animationSpeed: 1
 }
 },
 methods: {
 handleAnimation: function (anim) {
 this.anim=anim;
 },
 stop: function () {
 this.anim.stop();
 },
 play: function () {
 this.anim.play();
 },
 pause: function () {
 this.anim.pause();
 },
 onSpeedChange: function () {
 this.anim.setSpeed(this.animationSpeed);
 }
 }
}
</script>

如上代码事件可以控制动画。

总结

有了lottie，前端再复杂的动画只需要有设计师也是可以搞定的，而且不用费时费力的写CSS了。设计师小伙伴们可以去好好学习一下，相信这也是未来的方向，毕竟阿里在做，前途应该还可以的。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！