动效设计学习完整篇｜顺滑解决各种动效难题

动效设计学习完整篇｜顺滑解决各种动效难题-教程-UICN用户体验设计平台

一直以来咨询动效问题的人不少，但大多问题的描述来看，可以说是对动效一无所知，网上我也搜了一些动效的分享，发现只有对细节的分享没有真正帮助大家建立动效认识的内容，所以这篇将作为扫盲文，帮助你们彻底搞懂和 UI 工作相关的“动效”到底是什么。

动效是一个统称，要完整描述的话，指的就是视觉元素产生的动画效果，这是 UI 有别于平面的主要差异之一。

但随着行业的发展，产生了很多种动效的类型，它们的作用不同，使用场景不同，实现方式不同，更重要的是，制作的方式也不同，如果连动效的类型都分不出来，那么就会连应该怎么完成工作的概念都没有。

在工作语境下，动效类型可以4个大类，下面会对它们分别展开介绍：

- 交互动效

- 交互特效 / 微动效

- 视觉动画

- 交互动效

交互动效

即通过用户进行交互所产生的动画效果，是用于对用户的操作进行反馈的动画，用于提升交互可用性和体验。

如一个按钮控件被点击、悬浮，切换出了不同的样式，那么这个过程就是交互动效的应用。

再比如针对组件交互所产生的动画反馈，比如通过滚动展开或放大。

还有页面之间的跳转，从一个页面过度到另一个页面的过程，比如音乐应用中展开歌曲播放页面，花瓣瀑布流中展开图片详情页的动画。

交互动效就是用于匹配交互操作的动画效果，不管这个动画效果是简约还是酷炫，微小还是宏大。但是，这里我们要给交互动效加上一个限制，就是基础交互动效的目标是用于满足交互的反馈。

因为有相当一部分动效设计的目标，是为了品牌、运营、情感服务而不是操作反馈。比如直播中的礼物动效或者领取优惠券时的弹窗动效等。

而这类动效还会引发出下一个问题，即实现动效的方式和开发方法。常规的动效逻辑就是关键帧动画的实现逻辑，元素的属性从 A变到 B（两个关键帧），比如从左移到右，从蓝变成绿，从大变到小等等，都是在软件右侧属性栏可以操控的对象。

而特殊动效的实现则是靠一般关键帧动画难以实现的，比如出现了粒子、不规则形变、特殊路径移动、不相关图形的转换等等。所以，我们会把它划分成下面的新类型。

交互特效/微动效

交互特效也是交互动效的一种，但从上文可以了解到，它不只局限于满足交互的反馈，动画的制作和实现方式也和一般的关键帧动画不同，比如下面这些案例。

交互特效的实现可以应用任何效果形式，不管是粒子、3D、逐帧、手绘、骨骼还是液化都可以，就是把动画特效的效果应用到交互的反馈场景中来。

除了页面和组件这些感知比较明显的动画效果外，应用在一些细节的特效还有个专属的名字，叫“微动效”。最常见的比如底部导航栏上点击后产生的动画效果，或者下拉刷新中 Loding 的小动画。

导航栏动画

Loading动画

这里动效的制作和实现成本都高了很多，且不用与满足基本的操作反馈，所以可以称它们为 —— 为了做动效而做的动效，自然要在分类上做出区分。

视觉动画

视觉动画就是常规意义上的视频动画、特效动画，多数会自己进行播放和循环。严格意义上讲，视觉动画并不是动效，但之所以罗列出来，是因为在 APP 应用中结合视觉动画的交互或场景有不少。

比如启动页、H5活动页、首页节庆或福利弹窗中：

启动页动画

这类动画都是广告动画的延伸，随着国内互联网产品运营广告需求的激增，对广告展现形式多样化的要求越来越大，就催生出了对应的动画效果制作需求。在有独立运营设计团队的情况下，由运营设计师制作。如果没有的话，则由 UI 设计师自己完成（不分大小厂）。

交互原型

可交互原型，就是可以进行操作并实现对应交互事件的演示文件，通常由多个页面组成。

虽然它属于原型的分类，但因为这类原型既然可以交互，那当然有交互的动效，而很多人对于原型和动效的关系并没有搞清楚。

可交互原型的主要目标，是用于反应产品和交互的逻辑，比如相关操作怎么跳转，会获得什么结果，流程怎么操作，而不是还原视觉的效果，这个阶段中大多视觉都还没有定稿，就更不会急着输出具体动效。

所以除了基础的页面跳转外，一些需要靠动效表现的交互即便软件可以实现，也只需要做个示意，不会精确到具体的参数和细节样式。

而如果是制作了完整的动效，且软件支持交互操作的话，那么这个交互模式就叫可交互动效，在语境上要和“原型”做出区分。

以上就是在 UI 设计项目中和动效相关的 4 个分类，是设计师主要会涉及和制作的对象，每种类型的制作所使用的软件、逻辑、交付、实现方式不同，如果搞不清楚要制作的动效是什么，那么就连应该使用哪个软件，查什么资料或教学案例都不明白，后续的工作就完全无法推进。

动效相关的软件有不少，不同软件面向的动效类型不同，不是你应该学哪个动效软件好，还是动效软件之间哪个更优秀，而是你做的动效类型应该用哪个软件合适。

下面就根据动效的类型，来解释它们应该使用哪些软件来制作。

交互动效的软件

在 UI 中，交互动效有专用的软件，可以实现动效的制作和交互演示，如 Principle、Protopie、Flinto、Origami、Hype5 等等，目前主要使用 Principle 和 Protopie。

基础的交互动效自然是围绕基础关键帧动画实现的，这些软件页都是关键帧动画工具，但它们面相的对象、场景不同，所以软件在功能逻辑上有较大的差异。

Principle 主要适用相对短的交互流程和场景，比如实现一次页面跳转和返回，单个页面中的组件交互，所以它不提供基础的页面过度动画功能。

Protopie 则适用于制作相对完整的交互流程，包含多个页面的跳转和拟真的交互，比如酒店订房的流程，包括选择日期、查看酒店、选择房型、确认订单等多个页面的组合，所以包含了场景的逻辑，以及变量的条件判断、操作功能。

这些软件都很简单，都是 1-2 个晚上就可以学会的，也就能明白它们的区别是什么，可以在 B 站看我们上传过得视频教学。

它们可以实现出非常丰富、细腻的动效效果，能解决日常工作中 90% 以上的动效需求。

但随着你们对关键帧动画的理解加深，能区分基础和进阶动效之间的区别，就会发现有一半以上的动效是不需要用动效软件就能实现的，不管是 PPT 还是 UI 设计软件，都有类似的功能。

比如我们前面分享过的即时设计中的“智能动画”，就是制作关键帧动画的钥匙，足以输出丰富的动效，下面就是使用即时完成的案例：

交互动效的软件的核心价值，就在于这些动效是“可交互的”，用于检验最真实的交互反馈效果，并根据操作快速进行优化和调整。

交互特效/微动效/视觉动画

交互特效、微动效、视觉动画已经脱离了基础的关键帧动画范畴，大多都无法使用动效软件来实现，所以制作它们只有一个途径，就是使用Adobe After Effects，简称 AE。

AE 使用范围最广，功能最强大的动画、特效制作工具，它可以制作任何你能想象到的效果。但是，它并不适用于一般交互动效的制作，因为 AE 做好的动效——只能看，不能交互。

原因是基础交互动效的核心目标是服务于交互的反馈，视频的自动播放和你真实的操作感受完全是两码事，遑论 AE 需要耗费几倍的时间才能完成和一般动效软件相同的交互效果。

但为什么还要用 AE？

因为这些非常规的关键帧动画只有它能做，不是想不想用的问题，而是没的选（类似 Motion 那些小众特效工具不考虑）……

所以要不要用 AE 做动效，就是先考虑基础关键帧动画能不能是实现，做不了的话，我们才打开 AE 进行制作。而 AE 可以实现的效果和操作就无穷无尽了，需要像学习  PS 合成一样通过大量的案例教学积累。

可交互原型

最后可交互原型的应用上，会包含一些简单的交互效果，但主要判断的标准是这个可交互的精准度要到哪一级。

最简单的可交互原型就是只有页面的跳转，一些操作的步骤和效果可以直接通过设计好的界面取代，比如登录页面账号输入使用默认和输入完两个做好的页面进行跳转示意，那么直接使用 UI 设计软件制作就行了，再简单搭配一些弹窗动画、智能动画效果进去即可。

如果交互的精度高，需要真的实现输入框内容的录入，还要这些输入的内容可以影响后续的页面，比如个人设置页的用户名是你刚输入的，那么只能使用 Protopie 或 Axure 来完成。

当然，它们两者之间也有差异，Protopie 说到底还是以动效为主的工具，类似对一个表格录入大量数据，还要实现多条件筛选、排序并生成结果这种拟真操作是无能为力的，只能用 Axure 来制作。

虽然 Protopie 和 Axure 都能做出非常复杂的条件和逻辑，但是非必要都不推荐，因为完全实现出来的成本非常高昂，要耗费大量的时间但产出很少，严重拖累项目的进度，所以大多数团队都是做好前后状态切换的图例进行跳转和说明即可。

以上就是和动效相关软件的面相场景说明，掌握里面的所有软件使用都是有必要的，这样你才能真正理解动效制作上的差异，以及到底该用哪个软件制作效率最高，能为自己节省更多的时间。

动效的实现和设计稿落地类似，是一个将设计方案进行实施，转换成正式的应用/产品方案的过程。这个转换的过程存在大量的条件、限制，不是设计做出什么方案都能实现出来，或者实现成本高到完全不可接受。

所以动效方案实施前，就必须要知道动效能不能实现，属于哪种类型，我们才能进行后续的准备。

动效的实现类型可以分成三个大类：

- 基础关键帧动画

- 引用第三方库

- 一般动画播片

基础关键帧动画实现

基础关键帧动画，就是前文提过的由视觉元素在单位时间内实现的属性变更，这些属性基本都是在设计软件中右侧有的，比如下面动画从状态 A 过度到 B，就是属性栏中 X 轴、填充色、圆角、长宽的参数变化。

UI 设计软件之所以属性栏设置这么“简陋”，原因就是前端代码用来实现的视觉样式属性也就这些，如果像 PS 那么复杂用了也做不出来，放了就没有意义。

而主要的前端编程语言中，只要语言中提供了对应的样式属性，那么就可以轻松实现关键帧动画。以最简单的 CSS 样式为例，它要实现上面的动画，就可以先定义元素的状态 A 和状态 B，然后再添加一个关键帧动画的指令即可。（平台没有代码编辑模式，所以大家大致看下就好）

@keyframes keyframe_motion {  //定义关键帧对象

 from { //起始样式的定义
  left:0; //左侧间距为零，即在最左侧
  background:blue; //颜色为蓝
  border-radius:0; //圆角为 0
  witdh:100; //宽度 100
  height:100 //高度 100
  } 
 to { //结束样式的定义
  right:0; //右侧间距为零，即在最右侧
  background:green; //颜色为绿
  border-radius:20; //圆角为 20
  witdh:200; //宽度 200
  height:200 //高度 200
  } 
}

#design_resource {
 animation: keyframe_motion  2s;   //让元素激活上面的动画效果，时长 2 秒
}

有了这个命令，系统就会自动渲染出目标的动画效果。只要你在这个属性范围内设置动画，那么不管你用了多少元素，改变了多少属性值，都是可以被开发手写出来的。

所以类似 Protopie 这类专业的动效软件也只提供这些基础属性的变动，且动效的制作逻辑和开发的变成逻辑是高度契合的，方便后续的开发。

引用第三方库

基础的关键帧动画可以程序员用手写写完，因为效果简单，只要定义关键帧属性系统会自动渲染出补间动画。但是，如果动画的效果不是这种简单的补间过度怎么办？

只要视觉对象是 3D 和矢量图形，那么理论上依旧可以使用代码实现，只是用代码实现不代表程序员可以轻易自己手写还原出来。

比如 SVG 矢量图标，作为矢量格式的基础就是图形是数学的逻辑通过一定的编码记录下来的，比如下图是一个灯泡图标 SVG 的对应编码。

如果想让这个图形发生变动，比如让里面的 W 变成一个直线或上下翻转，当然是通过控制其中这些数值编码来实现。只是这个控制过程，不可能用让程序员自己手动写出来（奥赛冠军那种忽略）。

为了实现这些效果，就有第三方的团队开发了一些动效库用于矢量动画的实现。比如Airbnb 团队开发的 Lottie，或腾讯团队开发的 PAG，都是用于处理矢量动画运动的第三方库。

第三方库可以理解成是程序员的“插件”，把本来要编写的大量代码和逻辑提前准备好，程序员只要根据库提供的接口或方法进行操作，就可以很轻松的实现相应的功能。类似图表的复杂动效也基本由应用第三方库来实现。

除了矢量图形动画外，3D 元素的效果、动画也可以通过第三方库来实现，比如大家耳熟能详的虚幻引擎和 Unity。

意思就是用做游戏的方式来实现对应的动效效果，比如制作复杂的 3D 可视化大屏大多会用这类方案，在移动端中还有 QQ 使用虚幻 4 来实现 QQ 秀效果和交互的骚操作……

当然，这类效果的实现成本是非常高昂的，只会应用在绝对有必要的场景。除了上面提到的以外，不同系统、语言类型还有其它大大小小各种动画库，就要大家各自摸索了。

一般动画播片

前面两种动画类型，动画过程都是通过代码实现的，而这里要解释的一般动画播片，则是由传统的动画播放方式来实现动效/动画效果。

先用游戏应用做类比，我们都知道游戏可以是 2D 也可以是 3D 的，往往在游玩过程中会出现过场动画，这个动画如果由当前游戏场景内容生成的，叫即时演算，而如播放的和场景完全无关且风格都不同了，那就真的只是播放一段视频，简称播片。

比如下面菜鸟发现页面的背景动画、支付宝会员页的 3D 图标等，都是典型的播片应用案例。

总结起来，不就是放视频嘛？

是也不是，之所以不用视频播放是因为看着像视频但它不一定是用视频格式放映的，还可以使用最古老的逐帧动画，以及所有人都嫌弃的 GIF 动图格式……

所以一般动画播片，就是动画的内容、效果都是通过其它影音软件制作完成后导出相关的格式，程序员再把它们置入到界面进行播放的方式。

虽然动画的内容程序员不可控，但是动画的 “进度” 是可以控制的，所以可以通过交互和进度做捆绑，实现各类看上去非常酷炫、花哨的效果。

以上三个大类，就是程序开发中实现动效的主要做法，我们要实现动效必然要先确定实现的方式，然后再开始进行后续的操作。

动效落地是一个过程，而不是一次性的操作，需要和前端开发做大量的沟通和交流才能完成的工作。所以任何动效想要落地之前，都要先和开发沟通方案的可行性，时间成本，技术要求，必要的情况下还要修改设计方案，才能获得最佳的收益。

而协作那一套不是我们今天讨论的重点，假设已经评审通过要进入交付阶段，那么设计师就要根据不同的实现方法完成不同的交付工作，下面会逐一进行介绍。

基础关键帧动画交付

基础关键帧动画的开发思路在上面已经介绍过，应用的属性值、动画参数要和我们制作保持一致的话，那么程序员就肯定要获得这些精确的数值。

光导出个动画让程序员自己实现，等于对着视频效果临摹一遍，效率低成本高，参数全靠猜的话是绝对做不好动效还原的。

所以设计师要除了可交互文件、视频外，还要提供对应的动效文档，用来解释其中包含的具体参数。以上面的动效为例，如果要输出文档的话就可以用表格这么表现：

文档输出就是对动效参数的拆解，一个交互只填写一个表格，案例中虽然动画元素只有一个，但实际场景中会包含很多个。而复杂的动效中，不同属性的动画参数不一定是一致的，可能有不同的延迟、时长、缓东，所以都要全部分开进行解释。

这就是为什么做这类复杂动效最建议使用 Protopie ，因为我它的时间线样式最符合我们后续的导出逻辑，就是把图例上每一行的参数抄进表格里。

这个表格的逻辑很容易理解，自己实践一两回就明白了。而更进一步的数值联动、条件触发等交互参数同样可以记录到表格内，就靠大家自己去研究怎么做合适了。

矢量动画的交付

矢量动画只能通过 AE 来完成，而这类动画程序直接写不出来，所以要用第三方插件和库来辅助，主要选项只有 Lottie 和 PAG 两个。

它们的使用原理，就是在 AE 上安装对应的插件，然后使用该插件导出在 AE 中制作的矢量动画，并生成对应的 Jason 或 dotLottie 等格式文件，这个文件只有它们自己才能解析，所以程序员也要在前端下载并引用官方的库才能在本地使用它们。

Lottie 官方提供了很多效果案例，可以自行前往官网参考和浏览：

https://lottiefiles.com/featured

Lottie、PAG 是针对矢量动效的工具，如果你的 AE 图层中使用了位图，或是使用了复杂的滤镜动画，那就不能保证这些东西被它们有效导出和还原。

它们不是万能的，都有自己的动效支持规范，需要在使用前进行了解，并在这个这个限制的框架内完成动画。

使用其它动画库同理，不是就为所欲为，而是要先去官方看文档中支持的效果。

视频动画的交付

如果选择的是播片的模式，且视频内容很丰富、时间较长，那么就应该直接使用视频格式进行导出。这个就是最容易的制作方式了，只要提前在内部评审中确认视频的时间长度、尺寸、数量，就可以开始导出。

只是导出一定要注意文件的大小，不管是在线获取，还是置入 APP 内部，它们都是 “UI界面的一部分”，不是用来慢慢加载的。

所以在一开始分辨率就不能过大，使用 1.5x 就足够了。同时要在导出设置中反复调试，导出到设备中直接查看，找出最合理的设置。

逐帧动画的交付

逐帧动画就是将动画导出成多个序列帧，按一定的速度进行播放。适合应用在一些模态场景的动画和较小的元素。

过去会使用逐帧动画的原因，主要是因为视频文件难以支持透明背景。现在虽然视频格式越来越完善，新的硬件和编码方式都能开始支持 Alpha 通道，但依旧存在大量兼容性的隐患，必须经过完善的测试才能使用带背景透明的视频文件。

回到逐帧动画上，最基础的导出就是在 AE 中制作完成后，直接通过 Adobe Encoder 导出 PNG 序列帧即可。但是PNG 本身是无损格式，体积非常大，所以要尽可能减少图像文件的体积总量。

可以通过降低播放的帧率来减少动画的总帧数，至于降到多低看实际应用的场景，比如微信表情甚至可以使用 6 帧/秒的速率，可以节省大量的空间。

同时PNG 本身可以通过其它工具进行二次压缩，减少大小，或干脆使用PS 进行批量的格式转换，将 PNG 导出成 WEBP 格式。

GIF / SVGA / APNG

序列帧要导出和交付一大堆文件，如果动效多了，会给协作造成很多麻烦。所以针对播片，还有最后一种格式类型，即导出单一的、持动效效果的、图形文件……简称动图文件。

动图和视频虽然可以实现相同的想过，但不是一种东西，感兴趣的同学可以自己研究背后的编码原理。

而动图中最熟悉的东西就是 Gif 格式，因为我们每天在社交软件上发的叼图有一大半是 Gif，它是我们快乐的重要源泉。因为Gif 本身就是个序列帧的合集，所以制作往往是在完成了上一部的序列帧导出后，再使用 PS 等软件将它们合并后导出成 Gif。

但因为 Gif 这个格式太古老了，有的文件体积非常大、难以压缩、色彩支持弱等各种问题，所以行业提供了新的解决方案，即 SVGA 和 APNG 格式，要通过专用的工具生成。

这两个动图格式解决了 Gif 的很多痛点，但付出的代价就是在内容的展示上不再为所欲为，存在了大量的导出限制，就不在这里展开了，以后额外做介绍。

以上就是实现动效方案所需的交付方式介绍，而每个交付方式对应一种开发逻辑。在一个动效很多的应用中，不同的动效可以使用不同的实现方法，同时，一个复杂的动效也可以拆分成多个子动效，再用不同的实现方法去组合，比如直播中很多动效是序列帧+SVGA 的组合，很多活动页是视频+序列帧的组合，要靠设计师和团队自己在实践过程中研究发散（没错，就是工程问题）。

结尾

任何进阶动效的实现都很麻烦，所以绝对不是做个动画剩下的就让开发自生自灭，动效这种要素要不然不做，要做那就不要怕麻烦，这就是中高端 UI 设计师和底层 UI 之间的差异。

因为动效可以碰到的问题太多了，都是只能靠自己碰到了去解决，所以这里只能给大家一个总体的扫盲，让你们起码知道应该怎么去查找解决方案，而不是一碰到动效环节就两眼发黑。