针动效输出选择变越来越多，然而作为设计师仅仅动效输出有所了解，往往出结是不尽如意。了解动效落地背的原理，以帮助我们在设计的前期阶段，就应该何做设计才能更容易的对接和落地。
随着技术革新，用户于品细节感知度和挑剔程度正在日益剧增，越来越多品都在尝试过不手段来打造品异化，而动效设计为近年来大火的设计趋势之一也被越来越的产品所睐。动效渐从「锦上添花」慢慢变成「必不少」的优产品的构成元素。但是当我们去观察身边很的上产品，对动效落地把控的现结果往往并不尽人意，很优的概念在想法阶段到最终落地几乎被打磨得无完肤。以往的经验告诉我们，以通简单的方式输出我们的设计品，并且加以跟进就以使上的结果达到很高的完成度。但是当我们面临动效输出的时现，输出的选择在渐变，但是输出的结果还是很难达到理想的状态。
目前市上针动效输出与落地主要是围绕着基础几输出，输出选择困扰着很多设计师，而作为设计师我们要做不仅是了解在什么情境下应该选择什么样输出，更应该了解这些流程化输出原理，以及围绕这些原理我们可以在个品设计流程能做到更多事情。
在了解动效落地选择前，我们需要明白第件事是互联网品动效分类与般意义上动效有很大区。广义我们把 UI 动效分为三类。
1. 情感化动效
情感化动效偏于感性层，主要目是增加我们品质和传情绪，增加品魅力值，在些小细节上我们加入些情感化元素也可以以蛋形用户惊喜。比较常见有 app loading 动画，赞动画等。
2. 互动效
产品流程、互行为的串联，不论际操的互原型，还是纯做 demo 展示的动效场以互动效设计。互动效最基础的形态就是原型流程图的串联互稿。互动效又以细分为转场动效和微互，分别应用页面衔接和基础组件的互反馈。前者以传达给用户产品的次结构和空间关系，者以使用户减少操成。
3. 复合型动效
复合型动效不局限于感性层面的绪传达，也不局限于交互行的联，往往真实场景当中多的也这一类动效，与发人员对接阶段也易存各种各样的不稳因素，对于设师言也存多层面的挑战性。
情化动效一情况下会受三个方面的属性响的输出选择，别是尺寸、间、动画复杂度。
1. 画尺寸
画尺寸越大，占系统空间越大，占的系统性越大，但是这个等式仅仅成立于我们见的一些见即得的格式上，例如 gif/视频/webp/apng 等。
类似这的一些格式，是的备所能受的最简最直的格式。产出一个动画的逻辑，一都是不同的静图像的堆栈，通过给定的次序和间逐个播放。这的每一个静构成图，尺寸越大，整个动画的占用内存相应的也就越大。但是产品包的容量始终有限，不能允许大内存的动效存在。
另一方面，大尺寸的静图在预览过程中也需要耗费更多的备计算。举一个简的例，当在脑上预览一张 800*600 的图和一张 2400*1800 的图，脑开它所需要的间是不同的。相应的，动画格式多个大尺寸静图做预览耗费的系统性能是成倍数增长的。
2. 动画长
响因尺寸的响因类似，当图片堆栈的间变长，堆栈当中的图片数量也会增加，动画的占用内存相应的也就变得更大。所以，当的动画间过长也不适使用这些所见即所得的格式类型。
需要注的一点是，动画的长对性能的响会相对的多。
3. 动画复杂度
动画复杂度对在以上提的输出格式当中不存在任何问题，更多的是在近年比较髦的输出工上出现问题。对于复杂动画，要尽可能选择输出所见即所得的格式。当选择了其的格式也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节。
一般情况我们会根据效的类把输方式分为两类：
- 所见即所格
- 见非得格式
所谓「所见即所」是输出后即可预览格，比如 GIF 图/视频这格，也是动效输出最基础格。
1. GIF图格式
GIF 图格，可谓是作为设计师接触最多动态格了，GIF 格自 1987 年由 CompuServe 公司引入后，其体积小而成像相晰，特适合于初期慢速互联网，而从此大受欢迎。为时代背景使他有常强兼容性，基本上可以在目前大多数智能设备上接预览。不论动效落地是在各个平台上兼容性也都是常优秀，尤其在些设计平台上，也是选择最多概念展示格。也为他在不平台设备兼容，他传播性也是常强。
当然除了他自身带的这么多优点之外，GIF 格式因为他的应年代技术限制，会有很多他的缺陷。前面到的很多优点往往是因为诞生早给他自身带来的福利，他会有很多可逆的问题。=第一点是对电脑的存和性占非大（根据 GIF 的时间尺寸等情况会有同程的影响）。第二点他是一个有损的件格式，论是色彩还是画面质感都会有一定程的压缩。第点是对透明通道的支持非有限，输结果会非差，时会有锯齿或白边的情况。上是我们在输 GIF 格式之前，需要前思考是否可接受的问题。
另外输 GIF 图的过程经困扰着很多的设计师，我为此录制了一篇于 GIF 输的经验分享：
常规的 GIF 输出（After effects）会有三种选择。
第一种：首先 AE 输出视频格式，然后通过 PS 输出 GIF 格式。这种方式目市面常见的输出方式，内存占用一般，输出质一般。
第二种：原的基础部分优化，首先 AE 输出序列帧格式，然后通过 PS 选择针对图片的优化方式输出。这目止所输出方式中，内存小、失真低的方式。内存占用低，输出质高。但存问题无法输出 500fps 以的动画（PhotoShop自身限制）。
第三种：直接通过 GIF Brewery3 输出。内存占用一般，输出质低。一般针对两种方式无法输出时的选择， 优点比较稳，基本不会出任何问题。
下图不同输出方式输出结果对比：
另外还第四种选择通过 AE 插件 GIFGUN 直接导出，GIFGUN 插件一非常方便、操作简单的插件，但这里不推荐使用的原因 GIFGUN 一限制只能输出低的 30FPS 的动画，很多时候输出的结果会存掉帧的况。
EZGIF 压缩 GIF 图，当我们输出 GIF 图，内存无法达到理小时可以使用 https://ezgif.com 压缩。
2. 视频格式
视频格式多数的产品也都可以直接兼，相比 GIF 格式他的内存一些派出的制式下可以小，我们的智能设备也可以小的系统性能下读取视频格式。他的问题对透明通道的支持很差，并且他也一种损的输出格式。所以动画输出时我们也会尽可能减少对视频格式的使用。
Handbrake
我们可以通过 Handbrake 软件直接压缩视频格式，可以保证我们输出视频格式时以低的内存占用呈。
3. APNG/WEBP
前面提的种格式是所触最古老，也最不容易出错的种格式，但是随着术进步这些格式显然已经无法足现在的动效。针对情化动效也衍生出了多新的格式，像 APNG、WEBP 之类的格式。这些格式是基于现有的像 JPEG、PNG、GIF 格式所衍生出来的。
APNG 格式 Mozilla 码社区出的一格式，对 png 图格式的动画扩展，但目还得到 png 格式官方的认可，他目主流的所浏览器都可以完支持，移动的设备通过一些码框架也可以完支持，他相比 GIF 支持的色彩范围广，清晰，并且占用低的内存，支持透明通道，非常多的优势。
WEBP 由 Google 推出，他目也基本兼所的主流浏览器，相同的效果，webp 格式比 png 格式小出概一半的小，同时他也兼所的安卓设备，一些 iOS 设备需通过一的方式可以支持，不过相比各方面的表都非常优秀的。
里推荐一款工具 iSparta ，款工具以帮助我们导出 APNG、WEBP 式，也以帮助我们导出带有透明通道的 GIF，但是以我的经验来说导出 GIF 并不是很理想。像两种式我们以根据我们的设备不同，分开导出，以在证我们内容质量不被压缩的情况下证更小的积和能占用。式我们也以直接拖到浏览器当中查看。
种新型的式虽以弥补 GIF 或视频带来的负面影响，但是他们身也面临的问题是硬件需要各种辅助支持才能使用，很时在开节就不能很的支持，种时就需要我们引出另一种式──序列帧/精灵图。
4. 序列帧/精灵图
序列帧
客户端，我们可以把我们的动画导出单独的图层序列输出，并且可以通过一些具压缩单独的图层序列以达到低的内存占用。
序列帧一无损且低内存的格式，但他只能客户端环境中使用，不建议 Web 环境中使用。原因序列帧一般都随 App 程序包一起下载下的，但 Web 中每次入一新的网页都需重新下载。举例子如果一 60 帧的动画就得重复向服务器请求 60 次，这种高频次的请求下很易因一小的问题导致整动画无法常播，了避免这种错误我们一般会把这 60 张图合并一，并且通过码指时间内显示某一区块，所以这里我们引出另一种格式──精灵图/雪碧图。
灵图/雪碧图（Sprite）
当把所有序列并在一张图片上往往还是不够的，还需要提供给开发体哪个间显示哪一部的体参数。可以直通过 AE 插件 CSS Sprite Exporter（By Bigxixi）直快速地输出开发所需的代码和灵图。
5. Lottie
Lottie 可说是两年在画输方面得的一个格式，它由 Airbnb 推，并且迅速在国外各种大小厂快速推广开来，目前已经是一个非普遍的格式，他在 AE 中的插件叫 Bodymovin，他的原是把我们的各种矢量元素、位图图层及他们的效果键节点打包的形式行成一个 json 格式的件。
我们开发员拿到 Bodymovin 输出 json 格是法接使用，他需要在代码加入 Airbnb 提供 Lottie 第三库来读取播放，相于 lottie 文件在我们各个端口设备上播放作用，它会占用定系统空，是般情况下也不会很大，从品长远发展度来说肯定是可以我们 App 节省常多空，这也正是 Lottie 可以在这么短时内被这么多公司所认可原。
Lottie 是个常强大输出工具，它可以满足很多类矢量动画和图片动画。是他也有些自身问题，首先他缓动曲线解析会占用常多内存，这后会展开解释；第是各平台效支持都不是很稳定，很多时候容易出 Bug。
图为 Lottie 官方供的对于 AE 特性的支持：
△ By Bigxixi
6. SVGA
针对 Lottie 对缓曲线解析差带来的性问题和稳定性问题，我们会有第二种备方案是 SVGA，管是导之后的存占，还是在各个端的表现稳定性都会好很多。但是他的存占会 Lottie 稍，并且支持的特性会 Lottie 一些。
SVGA 与 Lottie 最本质的区别在于代码对画过程记录的方式， Lottie 基本上是按照我们在 AE 当中的键帧及缓的结合形式记录画。而 SVGA 则是通过记录我们每一个图层每一个时间上的画状态，从而省对缓值的计算。跟序列帧的逻辑非相似，但是因为他的素材可复，会序列帧占更低的存。
基于实现方式，他会 Lottie 稳定很多，相应的，他支持的特性要 Lottie 很多。
SVGA 格式可组合 lottie 使，还有像很多效果在 Android 设备上 svga 的解析效果要 iOS 好很多，很多卓设备会经使。
所见非所得格式前种最大的别在于输出之后无法第一间输出的结果，因为是更垂直于的智能备的格式。但是好在也提供了一些在面端和移动端可以直预览的软件，可以帮助在开发完全落地之前排除一部错误问题，以及提前预知效果的可行性。
- Lottie预览（区分卓/iOS/Web）：https://airbnb.io/lottie/#/
- SVGA 在线预览：http://svga.io/svga-preview.html
7. AE2CSS（By Bigxixi）
他可以帮助我们从 AE 导出 CSS 格，理论上这个插件可以支持我们所有 AE 动画，并在大多数情况下动画质量损占用内存比所见即所格要小。
他原理常简单，他把所有动画分为两类型，基本动画属性记录状态信息，复杂效变化属性接导出为精灵图，并把他们效结合在起打，输出套文件。它可以忽略我们前各情况会遇到所有问题，是有个限制是目前能用在 web 和 h5 页上。
8. 第三方动效库
要道种三方的导出方式其是非常的，但是目前市面上大家比认的并不，Lottie 之类的输出方式很大一个优势是他自身的区生态，尤其 Lottie 目前在网上有非常的开源动画资源以下载使用，以让我们以最低的成获得一动画效果。
所谓交互动画，顾名思义动画的内容跟的交互操作相关，根据的操作反馈相应的动效，因此的实现理也更多更复杂。
1. 贝塞尔曲线
前文中提大量的贝塞尔缓动曲线会带来系统运算压力上的问题，想要了解这点首先需要了解贝塞尔曲线是如何构成。并且在交互动画交的候会涉及多的写缓动曲线，在这之前也需要简地去了解的理。
以下视频一塞尔曲线智能设备构的原理讲解：
在开境中我们向开人提供一个贝塞尔曲需要提供以下几个参数：
- 锚点1（P0）
- 锚点2（P3）
- 操纵杆1（P1）
- 操纵杆2（P2）
在数情况下我们完以按照前面提供的式，直接对接我们的矢量形状。在少数情况下，尤其在一互类动效的情况下，很就需要我们手动的去提供每一个曲的参数。但是我们不能每个点的参数挨个去测量去输出，是非常不现的。目前在市面上大数的设计软件和输出软件上提供一简单的代码参数给我们。
但是只是基静态页面的情况，在动效页面的接中我们何去对接呢？以下图为例子：
像样一个例子，我们需要提供动画的前两个状态给到开人，即 icon 搜索框的形式和输光标的竖形式。每一个路径的 svg 信息我们以直接输出给开人，像 Sketch/Zeplin 样的工具我们以直接输出 Web 端所用的式，但是他们只是局 CSS 式，但是在 Android 和 iOS 下就无法提供相应的代码。为决个问题，里推荐另一款软件──PaintCode 3。
PaintCode 3 是一款门为设计师准备的简单的矢量图形绘图软件，通 PaintCode 3，即使没有编程经验，设计师也以输出适量图形的 iOS/Web/Android 相应的代码。并且他跟 sketch 之间有非常强的关联，以直接复 sketch 当中的矢量形状，也以直接在软件里编辑和新建矢量图形，非常强大。
2. 缓动贝塞尔曲
缓动贝塞尔曲，即我们在设计动效时使用的缓动曲，他以控我们动效的速度缓急，以直接控我们动效的整节奏感。在大数情况下我们看到的缓动贝塞尔曲是下图，他与我们的贝塞尔曲非常类似，区别在缓动贝塞尔曲的两个端点是固定的，而贝塞尔曲的端点是动态的。也就是说当我们与开人对接缓动曲时，以只提供两个控杆的位置。像在下图中我们的缓动曲的参数，两个端点的坐标位置，即（ 0.17，0.67，0.83，0.67 ）。
AE 当中我们如何获得我们相应的缓动曲线的参数呢？我们 AE 当中把缓动曲线图表的显示类型选择「编辑图表」即可调整我们常见的缓动曲线的类型。
了获得我们 AE 当中的缓动曲线的参数，我们可以以图表左下角作出发点，根据两控制杆的置创建两矩形，以左侧控制杆基础的矩形宽高（整区域宽高中的比例作数）作缓动曲线的两数，以右侧控制杆基础的矩形宽高作缓动曲线的后两数。
虽然以上的方式可以使更方便地获得 AE 缓动参数的体数值，但是因为操作繁琐只适用于已经完成了动画需要去落地的情况。更多的情况下需要在动画计之前就使用参数的方式去使用缓动曲线。Flow 插件可以帮助完成这件事。
可以帮助使用一的缓动曲线的方式计动画，并且提供了 25 种在开发环当中常用的缓动类型，也可以定义一些缓动类型，可以备成文件传输在队内部当成一规范来使用，也可以导入外部的一些缓动参数的文件。当然在正常情况建议还是使用一些默认的缓动类型，因有个方面，一方面是这默认的曲线在算法上更容易计算，对系统性能的占用默认也可以低一些，另一方面多非系统默认的缓动差值需要开发再去写一遍，无形中也会增加的对成本和后期的代码维护成本。
3. 动标注
基于对贝塞尔曲线的理解和缓动曲线的理解，可以帮助在动输出标注有更丰的选择。动标注的情况下需要把动效中每一个体素的参数都参数化。一情况下会把动画的基础为以下个部：
- 元素（在发生变的元素）
- 属性（素发生变化的属性）
- 参数（属性发的具体数变化）
- 时间（变化的始时间/持续时间）
- 值（动画缓动曲线）
- 备注（他说明）
有了这些基本参数后，我们可以参照下图完表述我们动画过程开发员。
另我们也可以过更加可视化去标注，并把这些样做成组件形在团队内作为共识广开后也能大大提高动效标注交接效率。
当我们通上述手动标注的方式接给开人时，站在设计的立场上似乎已经做到尽善尽美，但是我们回头时，往往输出的结果在大数情况下还是不么尽人意。其中有非常综合的因素，站在开者的角度来看，往往我们对结果输出所做的情非常有。造成种输出与落地巨大差异的最大原因也是来自设计师与开者之间理产品构成的巨大差异。
设计师在输出动画时更多时精力在于动画细节（缓动、时等）调，而于开发者来说有常多部素影响最终输出，般情况下会有以下几：
- 开者自身的水平
- 时排期影响
- 框架结构、代码语言限制
- 其响
在大多数画中有非多的图层细节，挨个实现需要大量的时间，方说制作图中这样一个画，只需要使 CSS 设置一最外层面的宽，并且一个过渡画。但是对于大多数的产开发者来说，你需要同时设置外和有元素的画。
第二个更麻烦的事情是你在 sketch 当中的图层与 html 当中的图层匹配。即使你在效标注当中，标识某个矩形从 0 向右移 10 像素，设计上非容易。但是代码会有非多非复杂的框架层，开发人员需要把设计调整到他们的代码当中，每一个元素都需要单独相同或同的方式实现。这是一个非容易错的过程，全取决于如何清楚地档描述你的画，及开发人员如何仔细地查看并实现你的容。
第三点是修改动画的效果非常麻烦，计和产品开发是一个迭代的过程。但是当你对一个动画效果进行调整的候，不管是计还是开发都需要大量的间去对之前的文件和代码进行重新了解，每个人都会根据的理解会有不同的实现方式，从重新熟识早期版本的实现逻辑，调整，再开发落地需要非常复杂的一套流程。
了让这过程不那么痛苦，我们意识到需跳出自己的舒区，去用另外一种不同的逻辑去构建动画，这也意不建议家使用所见即所得的设具。相反的，我推荐家使用 html/css/js 的方式去构建我们的动画体系，需一些时间应他，但过几动画之后，很多过程就会变得特别易，其实也并不需知道太多关于码的知识，就可以发人员创建一些基本的动画。
一方面我们真控制了动画的微小细节，对于发人员，这种方式易使我的码应他们的码库，不多数标注软件自的 css 属性那么单薄，虽然各平台都会不同的码语言差异，但他们之间的跨度相比设到码的跨度可以微不足道了。
我只需要将输出的代码放在 codepen上，开人就以轻松看到我做什么，也以复粘贴我的代码部分来一效果。
当么做也有一问题，首先，我需要在开始设置动画之前用 html 重构我的设计，不因为我们只是去针对动画生的部分去做设计，所以不因为框架和代码逻辑对我们产生影响，相比之下就容易很，另外我们也以在 sketch 中直接复 css 代码，只需要很少的步骤就以重构我们的设计，甚至一根没动画的部分以截个图，贴图进去也没有问题。
另是我们接从实项目代码入手，是会比我们自己去写 demo 要复杂很多，为实品代码框架更复杂，需要新梳理。
虽然这种工作方式要是使代码做一些画，但是大多数情况还是需要先在一些画软件上做想法的探索，同的想法可会需要较久的代码时间。因此，如果我太清除自己想要么样的画，我还是会付一分时间在 demo 的制作上。
另一种可能性是在可以通过一些简的代码，去绘制一些基础组件的动效，称这种西为脚架，可以给所有的一些基础素做一些动画，比方说开关，checkbox，按钮点击效果之类的。因为这些是大多数间都会去反复使用的一些组件，做一个动画相当于对整个系统动画的贯穿。这种方向不管是去写代码还是通过开发人员去写代码都是非常容易的一个过程，并且带来的效果其实是非常可观的。
目前市面上也有一些针对计的代码动效输出工，像 Origami / Framer，都是目前比较火热的开发思维实现动效的产品，非常建议大家去尝使用。
效输的手目前虽然非多样，而且随着技术手进步择会越来越多。但是目前来说没有任何一种方案，可全解决我们落地效当中的有问题。并且目前面上供的任何一款工具无法真正解决设计思维带来的限性。作为设计师我们需要始终保持敏锐的观察，并且持续的更自身的知识树，才应对多种多样需求输的效效果的落地。另一方面我们需要在更长远的角了解一个效需求从产逻辑到开发逻辑之间的鸿沟，并试着通过更多元的手跨越鸿沟。
浙公网安备33011002017549号