随着技术革新，市场上产品日益成熟，并且趋于同质化，同时用户对于产品细节的感知度和挑剔程度也日益剧增，越来越多的产品都在尝试通过不同的手段来打造产品的差异化，故而动效设计越来越重要，从「锦上添花」慢慢变成了「必不可少」，变成了APP端和PC端标配。
产品中的动效分三类
1. 情感化动效
情感化动效偏向于感性的层面，主要目的是增加我们产品的气质、传达情绪，提升产品魅力，在一些小细节上加入情感化的元素也可以给用户惊喜。比较常见的有应用中的 loading 动画、点赞动画、运营营销动画等。
2. 交互动效
展示的动效过场都可以算作交互动效设计。交互动效又可以细分为转场动效和微交互，分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系，后者可以使用户减少操作成本。
3. 复合型动效
复合型动效不局限于感性层面的情绪传达，也不局限于交互行为的串联，真实场景当中最常用一类动效，对于设计师存在更多层面的挑战性。
影响输出方式的因素
一般情况下我们会根据动效的类型把输出方式分为两类：
所见即所得格式：输出之后即可预览的格式，比如 GIF 图/视频这类格式。
所见非所得格式：需要开发进行还原才可以看到动画效果的格式，比如lottie文件、标注等格式。
常规动效会受到三个方面的影响，分别是尺寸、时间、动画复杂度。
1. 动画尺寸
对于常见所见即所得格式， 如gif/视频/webp/apng ，动画尺寸越大，占用系统空间越大，占用的系统性能也越大。另外，大尺寸的静态图在预览过程中也需要耗费更多的CPU。
2. 动画时长
影响原因与尺寸的影响原因类似，当图片堆栈的时间变长时，堆栈当中的图片数量也会增加，动画的占用内存相应的也就变得更大。所以，当我们的动画时间过长时也不适合使用这些所见即所得的格式类型。
但是，动画的时长对性能的影响会相对的小很多。
3. 动画复杂度
动画复杂度对所见即所得格式的输出格式当中不存在任何问题，对所见非所得格式会增加开发成本。对于复杂动画，我们要尽可能选择输出所见即所得的格式。当选择了所见非所得格式时也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节。
情感化动效输出选择
GIF 格式：1、对电脑的内存和性能占用非常大；2、是有损的文件格式，不论是色彩还是画面质感都会有一定程度的压缩；3、对透明通道的支持非常有限，输出结果会非常差，时常会有锯齿或白边的情况。
视频格式：视频格式在大多数的产品上也都可以直接兼容，相比 GIF 格式它占用的内存可以更小。它的问题是对透明通道的支持很差，并且也是一种有损的输出格式。
APNG/WEBP：非常老的格式，也是最不容易出错的两种格式，但是已经无法满足我们现在的动效需求。
GIF最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感/不支持 Alpha 透明通道，边缘有杂边
APNG支持 24 位真彩色图片/支持 8 位 Alpha 透明通道/向下兼容 PNG
WebP比gif压缩率和失真率都好，。但是现在制作WebP的工具寥寥无几，更不用说动态WebP了，只能靠Google提供的命令行工具，但是对于批量图片转换，命令太长，着实不方便。
序列帧/精灵图：
序列帧：是一个无损且低内存的格式，但是他只能在客户端环境中使用，不建议在 Web 环境中使用，因为序列帧一般都是随着 App 程序包一起下载下来的，但是 Web 中每次进入一个新的网页都需要重新下载。当我们把所有序列合并在一张图片上往往还是不够的，我们还需要提供给开发具体哪个时间显示哪一部分的具体参数。
精灵图：将几张较小的图片放在一张大图上。最早的时候网速十分有限，为了提升用户体验，我们会将一张大图分解成多张小图来提高页面打开速度，但是网速得到了提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张较小的图片放在一张大图上，从而减轻服务器的压力。而将多张小图放到一张大图上的操作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprit。我们可以直接通过 AE 插件 CSS Sprite Exporter（By Bigxixi）直接快速地输出开发所需的代码和精灵图。
应用案例：网易云音乐2017年终盘点
这个 H5 案例主要是用 CSS 动画来实现的，其中有很多小人的动画，以及水波、沙漏等小元素是用精灵图实现
Lottie ：Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。它的原理是把我们的各种矢量元素、位图图层以及他们的效果关键节点打包的形式行成一个 json 格式的文件。开发人员拿到 json 格式是无法直接使用的，他需要在代码中加入 Airbnb 提供的 Lottie 第三方库来读取播放，相当于 lottie文件在各个端口设备上的播放器的作用，它会占用一定的系统空间，但是一般情况下也不会很大，从产品长远发展的角度来说肯定是可以给我们 App节省非常多空间的。总结来说，它不使用大量图片，甚至零图片，不占空间，不占内存，不需要适配，且易于维护，简单而且方便。
但是它有一些自问题，首先他对缓动曲线的解析会占用非常多的内存，并且各平台效果的支持都不是很稳定，很多时候容易出 Bug。
AE2CSS（By Bigxixi）：AE 插件 CSS Sprite Exporter（By Bigxixi）可以帮助我们从 AE 当中导出 CSS 格式，理论上这个插件可以支持我们所有的 AE 动画，并且在大多数情况下动画的质量无损且占用内存比所见即所得格式要小。
第三方动效库：Lottie 目前在网上有非常多的开源动画资源可以下载使用，可以让我们以最低的成本获得一些动画效果。犸亮动画平台、lottie-editor、lottiefiles等网站都提供开源动画资源。
交互动效&特殊效果输出选择
贝塞尔曲线：我们需要提供动画的前后两个状态给到开发人员,每一个路径的 svg 信息我们可以直接输出给开发人员，像 Sketch/Zeplin 这样的工具我们可以直接输出 Web端所用的格式。事实上，往往设计者给到研发的动效预览视频，是不能让研发准确知道动画中元素的运动曲线规则的，而且由于动画引擎不同的缘故，导致同样的设计效果不同。不过，其中的贝塞尔插值和函数在开发过程中具有相当的借鉴意义。也能很好的兼容Android/iOS/Web多平台动效的实现。设计师做好动效之后，只需要把在制作动画时使用的贝塞尔插值曲线参数值交给研发就可以，标注动效的不同元素在不同时间所对应的动画运动曲线参数。
这里还推荐另一款软件──PaintCode 3。PaintCode 3 是一款专门为设计师准备的简单的矢量图形绘图软件，通过 PaintCode3，即使没有编程经验，设计师也可以输出适量图形的 iOS/Web/Android 相应的代码。并且他跟 sketch之间有非常强的关联性，可以直接复制 sketch 当中的矢量形状，也可以直接在软件里编辑和新建矢量图形，非常强大。（我还没有尝试，网上看到的）
缓动贝塞尔曲线：即我们在设计动效时使用的缓动曲线，他可以控制我们动效的速度缓急，可以直接控制我们动效的整体节奏感。他与我们的贝塞尔曲线非常类似，区别在于缓动贝塞尔曲线的两个端点是固定的，而贝塞尔曲线的端点是动态的。也就是说当我们与开发人员对接缓动曲线时，可以只提供两个控制杆的位置。
为了获得我们在 AE 当中的缓动曲线的参数，我们可以以图表左下角作为出发点，根据两个控制杆的位置创建两个矩形，以左侧控制杆为基础的矩形宽高（在整个区域宽高中的比例值作为数值）作为缓动曲线的前两个数值，以右侧控制杆为基础的矩形宽高作为缓动曲线的后两个数值。
虽然以上的方式可以使我们更方便地获得 AE 缓动参数的具体数值，但是因为操作繁琐只适用于我们已经完成了动画需要去落地的情况。更多的情况下我们需要在动画设计之前就使用参数的方式去使用缓动曲线。Flow 插件可以帮助我们完成这件事，它可以帮助我们使用一般的缓动曲线的方式设计动画，并且提供了几十种在开发环境当中常用的缓动类型。
正常情况建议还是使用一些默认的缓动类型，原因有两个方面，一方面是这样默认的曲线在算法上更容易计算，对系统性能的占用默认也可以低一些，另一方面很多非系统默认的缓动差值需要开发再去写一遍，无形中也会增加我们的对接成本和后期的代码维护成本。
推荐两个网站，分别是 easings.net 和cubic-bezier.com，前者包含了最常见的曲线的列表，你可以将他们复制到你的原型工具中，第二个网站为你提供了不同曲线的参数，你可以直接在其中查看各种对象的移动效果。
插值器Interpolator
贝塞尔插值器CSS3 Bezier Curve Tester
贝塞尔曲线有它的公式，被写在插值器里面。使用这种方法，设计师可以通过调节两个把手就能得到丰富的细节表现。输出给开发落地的标注文档也只需要提供这两个把手的参数。
手动标注：基于我们对贝塞尔曲线的理解和缓动曲线的理解，可以帮助我们在手动输出标注时有更丰富的选择。手动标注的情况下我们需要把动效中每一个具体元素的参数都参数化。一般情况下我们会把动画的基础单元分为以下几个部分：
元素（在发生变化的元素）
属性（元素发生变化的属性）
参数（属性发生的具体数值变化）
时间（变化的起始时间/持续时间）
差值（动画的缓动曲线）
触发事件
备注（其他说明）
有了这些基本的参数之后，我们可以参照下图中的方式完整的表述我们的动画过程给开发人员。
动效落地拓展──代码
设计师在输出动画时更多的时间精力在于对动画细节（缓动、时间等）的调整，而对于开发者来说有非常多的外部因素影响最终的输出，一般情况下会有以下几点：
1、开发者自身的水平
2、时间排期的影响
3、框架结构、代码语言限制
4、其他影响
推荐大家使用 html/css/js 的方式去构建我们的动画体系，或者直接从实际项目的代码入手，可以通过一些简单的代码，去绘制一些基础组件的动效，我们称这种东西为脚手架，可以给我们所有的一些基础元素做一些小动画。
目前市面上也有一些针对设计师的代码动效输出工具，像 Origami / Framer，都是目前比较火热的开发思维实现动效的产品，非常建议大家去尝试使用。
曲线与时长
一、为某个特定项目整理部分细则
①划定几条默认曲线：例如：show_curve_magnetic: 磁力感觉，模拟磁铁吸附；show_curve_resistance: 斥力，模拟磁铁靠近时相互排斥，并且减速停下；hide_curve: 加速离开
②划定几个时间梯度：150ms/240ms/360ms/540ms/700ms/1500ms/3000ms
③给出一些搭配方法：
icon、文字渐隐渐现：ease，150ms；
强弹出：show_curve_magnetic，根据对象的体积选择时间梯度，推荐240ms；
弱弹出：show_curve_resistance，根据对象的体积选择时间梯度，推荐 240ms；
屏幕范围内的位移：ease，根据对象的体积选择时间梯度，推荐240ms；
移出屏幕外：hide_curve，根据对象的体积选择时间梯度，推荐150ms（表示「抛弃」的动画需要抛快一点，同时用户对回退之后的页面一般是有心理准备的）；
黑色遮罩层出现：ease，时间长度配合界面其他元素；
黑色遮罩层消失：ease-out，时间长度配合界面其他元素；
呼吸循环类：ease-in-out，1500ms 或 3000ms；
二、观看和使用存在区别
如果用 AE 这种输出视频的形式去调节曲线和时间，落地到软件的实际体验很可能会显得太拖沓。因为人被动观看一个动态视频的时候，注意力是相对涣散的。人可以容忍更多的延迟和过程展现。但是一旦人主动产生交互行为，注意力会相对集中。人变得很容易察觉到延迟的存在，也无法再忍受过多的、反复的过程展现。
三、系统本身存在的处理延迟
用户对系统延迟的忍耐极限是非常短的。PC 上的忍耐极限可能是10秒以上，超过极限的话用户大有可能会关闭这个应用（或者网页）而离开。而在智能手机上，这个极限大概就是4、5秒（反正我是这样）。因为手机上的界面几乎都是独占姿态。页面停在这里，用户没法干其他事情，根本等不了太久。所以手机上延迟超过2秒的地方都建议使用 loading。
对于由用户操作 直接触发 的反馈，理想的响应时间应该控制在 100毫秒内。
对于由用户操作 间接触发 的反馈，响应时长可允许达到 1秒左右，不可 超过2秒 无反馈。
当 超过2秒 才能获取反馈结果时，须设计加载动效（loading）。
当反馈时间为 2-9秒 时，可使用循环的加载样式（如常见的菊花转）。
当反馈时间 超过10秒 时，须使用带有进度指示的加载样式（如已加载了60%，还剩30秒）。
动效注意事项
1、UI动效中元素的运动过程应该是清晰的
2、列表项所使用的动效元素之间的延迟应该控制在20~25毫秒之间
3、为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样
4、均匀的变化通常只会用在色彩的改变或者透明的改变上
5、编排有两种不同的方式，一种是均等交互，另一种是从属交互
均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。
6、如果几个不同的元素的运动轨迹相交，那么他们不能彼此穿越
7、就目前来说，交互动效选择 60帧/秒
APP动效与PC动效的区别
1、动效的持续时长和速度
大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。
手机APP动效：动效时长应该控制在200~300毫秒之间
平板电脑动效：比手机端延长大概30%，时长应该在400~450毫秒之间。
PC端网页端动效：相比于移动端中的动效速度，PC中的速度会快上一倍。动效的持续时长应该在150~200毫秒之间。
PC端常用IM应用动效分析
飞书
设置内容滚动与日期滑动有加速效果
三角旋转属于微交互，基础组件的交互反馈可以使用户减少操作成本。
新手引号——有微弱活动和弹性震动（我没有截到图）
侧栏左滑，转场动效，具有弹性
tab切换有弹性
新建弹窗从右上角从小到大滑出放大，有弹性
点赞效果是情感化动效，运用缓动曲线，有弹性
钉钉
钉钉的动效非常多，几乎所有的操作都有反馈，所有的动效都弹性，有出处。文章只截取几个具有代表性的动效。
由于篇幅限制，动效只上传了PC端的飞书和钉钉。钉钉的动效运用非常广泛，几乎所有的操作，都给予反馈，不同模块设计了不同形式的loading，一些小的弹窗 浮条都给了大小、位移、弹性的动效，给用户很多惊喜。相比钉钉，飞书的动效较为克制，只在必要的场景下，帮助用户理解转场，安慰用户等待的情况下，才出现动效，但是所有的动效也精心设计了缓动曲线，时常恰到好处。
参考文献
历时2个月，整理了这篇动效落地输出指南！https://www.uisdc.com/dynamic-design-landing
动效输出：用APNG代替GIF完美输出动态效果https://www.zcool.com.cn/work/ZMjgyNjA2NjQ=.html
介绍一个导出CSS精灵图动画的AE脚本https://zhuanlan.zhihu.com/p/34731896
动效干货——曲线和时长的一些控制思路https://www.zhihu.com/search?type=content&q=%E5%8A%A8%E6%95%88%E6%9B%B2%E7%BA%BF
动效的设计与实现-贝塞尔曲线动画的插值法http://www.ui.cn/detail/277229.html
超全面！UI动效基本规则终极指南！https://mp.weixin.qq.com/s?__biz=MjM5MTg2NDA3MQ==&mid=2651891990&idx=1&sn=0450bd3dddb736a9adeb57da98d9b4d4&chksm=bd4b0d7e8a3c8468d2b60ee93d4a8abb3eb1ebd95d324d266ab255e95d5d170ac62b96da1a8c
动效干货https://zhuanlan.zhihu.com/InteractiveAnimationRealshit
超全面！腾讯出品的交互微动效设计指南https://www.uisdc.com/guidelines-for-functional-animation