一.什么是动效设计

聚焦于产品中的动效，我们常说的动效设计可以分为3类：

1.交互动效

交互动效承载了产品流程、交互行为的串联，不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互动效设计，交互动效最基础的的形态就是原型流程图的串联交互稿。交互动效又可以细分为转场动效和微交互，分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系，后者可以使用户减少操作成本。

2.情感类动效/mg动画

情感化动效偏向于感性的层面，主要目的是增加我们产品的气质和传达情绪，增加产品的魅力值，在一些小的细节上我们加入一些情感化的元素也可以以彩蛋的形式给用户惊喜。比较常见的有 app 中的 loading 动画，H5项目，品牌动画等。

3.复合型动效

复合型动效不局限于感性层面的情绪传达，也不局限于交互行为的串联，往往真实场景当中更多的也是这一类动效，在与开发人员对接阶段也更容易存在各种各样的不稳定因素，对于设计师而言也存在更多层面的挑战性。

二.动效设计如何输出

情感化动效(MG动画)一般情况下会受到三个方面的属性影响他的输出选择，分别是尺寸、时间、动画复杂度。

1.动画尺寸

对于一些不需要输出代码资源的格式，例如GIF/视频/webp/apng等，动画尺寸越大对内存和性能占用也越大。因为他去产出一个动画的逻辑一般都是不同的静态图像的堆栈通过给定的次序和时间逐个播放。这里边的每一个静态构成图尺寸越大，整个动画的占用内存相应的也就越大，同时大尺寸的静态图在预览过程中也需要耗费更多的设备计算，相应的动画格式多个大尺寸静态图做预览时耗费的系统性能是成倍数增长的。

2.时间

时间与尺寸类似，当图片堆栈的时间变长时，堆栈当中的图片数量也会增加，动画的占用内存相应的也就变得更大。所以，当我们的动画时间过长时也不适合使用这些格式类型。

需要注意的一点是，动画的时长对性能的影响会相对的小很多。

3.动画复杂度

动画复杂度对在以上提到的输出格式当中不存在任何问题，更多的是在一些近几年比较时髦的输出工具上出现问题。对于复杂动画，我们要尽可能选择去输出不需要代码资源的格式。当选择了其他的格式时也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节。

接下来我们来看一下几个常用的输出格式

1.GIF

GIF 图格式可谓是作为设计师接触过的最多的动态格式了，GIF格式自 1987 年由 CompuServe 公司引入后，因其体积小而成像相对清晰，特别适合于初期慢速的互联网，而从此大受欢迎。

利：因为时代背景使得他有非常强的兼容性，基本上可以在目前大多数的智能设备上直接预览。不论动效落地还是在各个平台上的兼容性也都是非常优秀的。省事，不需代码的资源格式，给到开发就能用。

弊：GIF 的很多特性已经跟不上时代，比如落后的压缩算法导致想要保留高清画质图片体积会很大，而它的取色范围只有 2 的 8 次方 也就是 256 色，作为对比 PNG、JPG 格式最大可以用到 2 的 24 次方也就是 1600 万种颜色。最明显的例子就是彩色渐变在 GIF 里都是分层的，因为它没有足够的颜色来过度。另外就是如果需要导出透明底的 GIF 其边缘会有「毛边」，这也是无奈却无解的。其次就是GIF对电脑的内存和性能占用非常大，但是我们的产品包的容量始终有限，不能允许太大内存的动效存在。

常规的 GIF 输出(After effects)会有二种选择(输出质量低的不做推荐)：

1：首先 AE 输出视频格式，然后分通过 PS 输出 GIF 格式。这种方式是目前市面上最常见的输出方式，内存占用一般，输出质量一般。

2：在原有的基础上做部分优化，首先AE 输出序列帧格式，然后通过 PS 选择针对图片的优化方式输出。这是目前为止所有输出方式中内存最小失真最低的方式。内存占用低，输出质量高。但是存在问题是无法输出 500fps 以上的动画(PhotoShop限制 自身限制)。

当我们输出图 GIF 图内存无法达到理想大小时可以使用 https://ezgif.com 来压缩。

2.视频格式

利：视频格式在大多数的产品上也都可以直接兼容，相比 GIF 格式他的内存在一些派生出的制式下可以更小，我们的智能设备也可以在更小的系统性能下读取视频格式。

弊：对透明通道的支持很差，并且视频格式也是一种有损的输出格式。所以在动画输出时我们也会尽可能的减少对视频格式的使用。

3.APNG/WEBP

APNG/WEBP是志在取代 GIF 的格式。APNG 格式是 Mozilla 代码社区出来的一个格式，WEBP 是由 Google 推出。

利：两方基本都兼容所有的主流浏览器，图像质量相对比较高，占用内存小。

弊：APNG在移动设备上需要通过一些代码框架才能支持，WEBP支持安卓设备但对ios设备兼容性不足。并且有案例表明，对于透明底的图片，相对于 GIF 画质提升的同时，体积也变大不少。

可以帮助我们导出APNG、WEBP 格式的工具：iSparta

https://github.com/bigxixi/webp_apng_exporter_for_AE (文件可以在浏览器预览)

4.序列帧/精灵图

在移动端上，我们可以把我们的动画导出单独的图层序列输出(JavaScript代码控制播放，)并且可以通过一些工具来压缩单独的图层序列以达到最低的内存占用。

利：序列帧是一个无损且低内存的格式，画质就取决于图片画质。

弊：首先序列帧只能在客户端环境中使用，不建议在 Web 环境中使用。原因是序列帧一般都是随着 App 程序包一起下载下来的，但是 Web 中每次进入一个新的网页都需要重新下载。举个例子如果一个 60 帧的动画就得重复向服务器请求 60 次，在这种高频次的请求下很容易因为一个小的问题导致整个动画无法正常播放。其次少量、小体积的情况下还可以，图多了对性能不太好。

后来为提高性能，发展出雪碧图(精灵图)，将所有帧动画合并在一张大图上，通过位移实现动画帧切换。我们可以直接通过 AE 插件 CSS Sprite Exporter(By Bigxixi)( 点这里下载压缩包)直接快速的输出开发所需的代码和精灵图。它可以读取 AE 里图层的位移、旋转、缩放、透明度动画信息，以及做好标记的图层导出为精灵图动画，最后生成一个 HTML 文件来预览。导出的产物只有图片和 CSS + HTML 代码，没有 JS，没有第三方库。这样在完美还原动画的同时可以无缝插入 H5 页面，之后如果有小的修改(替换图片等)也十分方便简单。

跨平台解决方案

5.LOTTIE

Lottie 库和插件是 Airbnb 于2017年前后发布的一款跨平台的动画解决方案，设计师通过 bodymovin 从 AE 中将动画导出 json 文件，开发只需将将其导入资源文件夹直接引用即可。

利：对研发来说播放 Lottie 动画需要在代码中加入 Airbnb 提供的 Lottie 第三方库来读取播放，但是一般情况下也不会很大，从产品长远发展的角度来说肯定是可以给我们 App 节省非常多空间的。同时不仅 H5，更重要的是安卓、iOS 平台都能用。

弊：Lottie 是一个非常强大的输出工具，它可以满足很多种类的矢量动画和图片动画。但是他也有一些自身的缺点：首先第一点是他对缓动曲线的解析会占用非常多的内存，；第二点是各平台效果的支持都不是很稳定，很多时候都容易出 Bug。有时候需要仔细排查出问题的图层，并对照官方文档 https://airbnb.io/lottie/#/supported-features，灵活调整动画替代方案。

如果你对 Lottie 开发感兴趣，这里有一段 Lottie 安卓开发工程师 Gabriel Peal 的访谈: https://fragmentedpodcast.com/episodes/82/

6.PAG

PAG https://pag.im/ 是腾讯开发者推出的一款面向原生开发的动画解决方案，为设计师提供 AE 导出插件和桌面预览工具，支持 AE 一切特效。

利：PAG 将动画渲染成图片序列帧，无论是表达式、粒子动画还是 3D插件，只要 AE 做的出，PAG 都支持。另外，PAG 还完美支持透明通道，动画体积非常小。

弊：PAG 出现的比较晚，目前仅限 MAC 电脑从 AE 导出，系统只兼容到 Android 4.4 以上，低版本需要有兜底方案。另外，PAG 对 Web 的开发还未完成， 当前也没有正式开源，目前优先腾讯系业务接入，预计明年将正式对外开源。

7.SVGA

SVGA 是 YY 直播的开发工程师 2017 年发布的一套跨平台动画解决方案。SVGA 不支持复杂矢量图形动画，对位图动画的支持超过 Lottie。SVGA 最初的目标是弥补和改善 Lottie。

利：与lottie相比svga不管是导出之后的内存占用，还是在各个端的表现稳定性都会好很多。

弊：但是他的内存占用会比 Lottie 稍高，并且支持的特性也会比 Lottie 少一些。比如

SVGA 不支持特效类动画。

三.交互动效

要了解交互动效首先需要理解贝塞尔曲线，什么是贝塞尔曲线：贝塞尔曲线的本质是通过数学计算公式，通过很少的控制点去生成复杂的平滑曲线。

缓动贝塞尔曲线：在我们设计动效时使用的缓动曲线，一般包括AE曲线和CSS曲线。

那么我们如何输出AE曲线到开发落地呢，这边推荐一款插件Flow。

这款脚本提供了代码中默认的25种缓动曲线提供快速复用，提供动效代码中自定义缓动曲线所需要的数值，适用于团队协作。

CSS曲线，很多设计工具例如sketch/zeplin等工具可以直接输出css格式的代码。

动效标注

当我们标注动效的时候我们需要把动效中每一个具体元素的运动都参数化。一般情况下会分为以下6个部分：

· 元素(在发生变化的元素)
· 属性(元素发生变化的属性)
· 参数(属性发生的具体数值变化)
· 时间(变化的起始时间/持续时间)
· 差值(动画的缓动曲线)
· 备注(其他说明)

PS. 目前市面上也有一些针对设计师的代码动效输出工具，像 Origami / Framer 目前 都是目前比较火热的开发思维实现动效的产品。

当然我们最终还是要结合实际需求和条件选择最优方案才能跨越设计到落地的鸿沟。

点个在看支持我吧，转发就更好了