交互体验之动效深耕

交互体验之动效深耕-UI中国用户体验设计平台

引言

随着科技的进步，用户对于产品细节的感知度和挑剔程度日益俱增，而如今产品的同质化愈发严重，此时，如何能够让产品存在差异化并脱颖而出成了当下至关重要的话题。而动效设计作为近些年来十分火热的设计趋势之一被众多产品所青睐。动效从最初的不被认可到如今的必不可少，经历了诸多的讨论和验证。动效设计不仅能够增加用户操作的舒适度，还能引导用户关注重要的信息，而这些都只是动效诸多作用当中的一小部分，一个优秀的动效设计能够赋能产品价值，带给用户更高质量的用户体验。那么如何才能做好动效设计？如何选择动效的落地方案？

以下是全文的大纲：

· 动效设计的意义与价值

· 动效的作用

· 交互动效的设计原则

· 产品中的动效分类

· 动效时长

· 动效落地的N种解决方案

一、动效设计的意义与价值

动效设计（Motion design）是通过动态手段，提升产品用户体验的过程。好的动效设计能够清晰的表达产品层级之间的关系、提升易用性与可用性、减少用户的认知成本，也能够彰显产品品牌特性与差异化。在有些时候，动效很容易被想象成某种为了增加愉悦性质的内容，其本身并不具备什么价值，因此常常被当做可有可无的部分。而实际上，动效则是一种更为高级的设计展现形式，通过模拟真实世界的运动，建立起手机这个虚拟世界与用户之间的认知关联，从而创造出符合用户认知习惯的操作体验，与此同时，不同品牌之间独有的品牌特性也大不相同，对应表现的行为与动作也有所不同，所以，动效设计在品牌特性的影响下，差异化也会非常明显，这为塑造产品特色和品质感奠定了重要的基础。

二、动效的作用

动效设计在产品中可以起到缓解用户因为等待而产生的负面情绪，吸引用户眼球以达到提升对某个功能或者活动的转化效果。对于初次使用某个产品的新用户来说，可以更快速的告诉用户如何完成复杂功能的操作等等。

2.1、缓解负面情绪

在页面加载过程中，长时间的等待，会让用户感到焦虑和烦躁，例如：系统的报错提醒和空状态呆板的文字展示等，都会让用户感到一种莫名的挫败感和无趣。这时加入趣味的动效设计就可以在一定程度上缓解用户焦虑烦躁的情绪，并且还能够提示用户对产品的好感。

作者：Zhenya Karapetyan

作者：Gleb Kuznetsov

2.2、吸睛

在产品设计当中，动效设计能够让功能入口或者按钮最大程度吸引用户注意力。但如果整个页面存在大量的动态元素时，也会造成用户的视觉混乱，影响用户获取信息的速度造成不好的体验，所以动效设计一定要适度。

2.3、降低认知成本

好的动效设计能够辅助用户理解产品信息，并且可以利用动效与动画的叙事属性共同点，解决静态图片和文字无法叙述清晰的事情。同时，动效与互动相结合，能够给用户更强烈的代入感，让用户愿意花费精力去理解信息。相比枯燥的文字和无趣的图片，动效的融入能更好的降低用户的认知成本。

作者：Shakuro

2.4、高效引导

引导用户完成复杂且必要的操作步骤。在游戏化设计当中“流程体验式引导”尤为强调，例如：游戏中的新手训练，会有语音以及闪烁的光标等作为傻瓜式的引导，只有当你按照提示完成指定的步骤，才能够继续往下进行。还有奖励的领取，也是只有领取后，提示才会消失。

2.5、用户行为转化

良好的用户体验促进用户跑通了产品，并建立起用户对产品的基本认识。同时，也完成了对新用户到老用户的转变。此时产品需要使用更多的手段，去引导用户完成对产品更深层次的探索。此时动效的目的就是制造诱惑点，让用户产生主动探索产品的欲望，从而完成用户转化。

2.6、交互串联

动效可以将不同级别的页面相互关联，避免用户在频繁的页面切换中迷失，也能够让用户快速理解页面之间的层级关系和跳转逻辑。

三、交互动效的设计原则

说到动效的设计原则，大家可能首先想到的都是《迪士尼动画十二原则》，但它并不完全适用于交互动效的设计。既然《迪士尼动画十二原则》不适用于UI领域，那交互动效应该遵循怎样的设计原则呢？下面就给大家介绍一下交互动效的十二个设计原则

3.1、缓动

当用户触发某个元素致使产生交互事件时，对象元素的行为需要与用户期望相一致。

在动效设计中，无论什么样的运动都需要缓动。缓动能够让运动效果变得更加自然流畅，并且能够使动效有更强的连续性，更能满足用户的期望。

图A当中的运动可以理解为匀速运动（线性运动），而这种运动是非常机械和生硬的。而图B当中的运动增加了适度的弹性效果，这样就使整体的运动看起来更加和谐。

在交互动效的设计中，要避免使用线性运动，因为线性运动会让交互效果过于生硬和明显，并且更容易分散用户的注意力。而缓动则能够让交互动效与用户的行为接近无缝衔接自然的过渡。但是要注意对时间的把控，时间太慢或太快，都会打破用户预期造成注意力的分散，同样如果缓动效果与产品整体的体验不一致，也会产生负面影响。也就是说，缓动在不同的场景下会产生不同的视觉效果，给用户带来不同的体验。

3.2、偏移和延迟

定义对象元素之间的关系和层次结构，多用于元素的入场离场或场景切换。

这个原则能够通过自然的方式让用户感知接下来将要发生的事情和界面元素之间的关系，上图中的例子可以告诉用户他们之间的层次关系，即：上面两条与下面的一条是分开的。上面可能是文本信息，也可能是单纯图片或者图文结构的内容，而下面则可能是一个按钮。

他能够在用户使用之前，告诉用户对象元素之间的层级关系，可以理解为降低了用户的学习成本，提升了产品的用户体验。

3.3、父子级关系

父子级关系是将界面中相关联的元素连接起来，以增强可用性的一种原则。

图中，顶部元素的尺寸和位置都会随着底部元素运动而产生变化。父子级关系就是将界面中的不同元素属性建立关联性，产生彼此之间的关联和继承关系。界面中的很多属性都可以相互关联，例如：位置、旋转、透明度、缩放、形状和颜色等等。

作者：IVYJHZH

3.4、形变

当界面中的某一个元素状态发生改变时，要创建一个连续的过渡效果来表示状态的变化。

形变是很容易被用户捕捉并识别到的一种效果。如下图所示，用户可以轻松的注意到“订阅”按钮形态变化的全过程。这种形态变换非常容易吸引用户的注意力，而且能够有效的传递整个事件的完整信息。

作者：Peter Arumugam

这种变换是将3种不同的状态无缝衔接在一起，将原本分散的状态完美的融合，达到超预期的目的。也就是说，变换原则能够把不同时刻的信息状态无缝衔接，来完成一个完整的事件流程的传递，这样连贯性的效果更容易被用户所接受。

3.5、变焦

使用变换焦距的形式，建立起界面元素与空间过渡之间的桥梁。

焦距这个概念在摄像领域更为常见，影像的大小以及远近是由相机和物体的相对距离来决定的。有时候，我们是无法判断元素变化趋势的。

例如下图中的效果就可以分为三种情况：

交互动效原则中的变焦是指在相机与元素都不做空间移动的前提下，元素本身或视角进行缩放，而产生的一种空间变化效果。这一原则在苹果设备中最为常见。

3.6、空间维度

通过在空间中变化的方式来表现元素的入场与离场。

空间纬度能够有效的改善平面化的体验，具有空间感的入场和离场能够增强用户的心理预期。此外，空间维度还能够改善平面视觉中无法分层的情况，能够让处于同一平面的元素产生折叠的效果。空间维度的呈现方式大致可以分为三种：折叠翻转、浮动翻转、整体翻转。

折叠翻转：可以理解成元素在三维空间中的折叠或旋转效果

作者：Divan raj

类似于“折纸”的效果，将元素隐藏起来，虽然在空间上不可见但是实际上他依然是存在的。巧妙的将原本平面化

交互事件转变为连续性更强的空间交互事件，这时无论是即时交互还是非即时交互，用户都能轻松感受到事件的发生。

浮动翻转：让界面中的元素在入场和离场时更具空间感和神秘感。

作者：Hoàng Thảo

整体翻转：让界面中的元素更具真实感和深度。

作者：LYY

3.7、视差

当用户滑动界面时，视差能够在二维空间中创造出层次感。

视差，是指不同的对象元素以不同的速度进行运动。在保持原有设计完整性的前提下，让用户聚焦于主要操作的内容上，并且弱化用户对背景元素的感知。

这种视差的效果让用户在操作期间，能够明确区分出各个元素之间的层级关系。相比移动慢的元素，移动更快的元素会让用户感觉更近，而移动慢的元素用户则感觉更远。

3.8、克隆

当新元素从主体元素中分离出来时，可以清晰的阐述两者之间的内在联系。当新的对象元素被创造出来时，对这个对象元素的形态描述是十分重要的。像单纯的透明度或者颜色属性的变化往往是不够的，还需要融入一些仪式感。

作者：Mariusz Onichowski

在上述案例中，当用户把注意力全部集中在主体元素上时，新的元素从主体元素上出现，此时用户会自然的将注意力转向新元素。

3.9、遮盖

当分层对象元素堆叠在一起时，可以用相对位置的变化来描述他们之间的空间关系。遮盖通过堆叠的形式来弥补扁平空间缺乏层次感的问题，通俗的讲就是在一个二维空间里，通过排列元素之间的上下关系来传递它们的相对位置变化。

作者：Daniel Tan

对于设计师来说，“层”的概念是非常清楚的，而对于用户来说，“层”的概念就会有些含糊不清了。遮盖原则就是通过层级之间的Z轴位置关系，向用户传达对象元素之间的空间关系。

3.10、蒙层

允许用户看到非当前主视觉的对象或场景，营造出空间感。

蒙层原则，可以把它想像成两种状态之间的过渡。把他想像成是一个变化的过程，而非静止的状态。静态设计只能表现出元素变朦胧的状态，而加上时间的变化就成了对象元素变朦胧的行为。当行为发生时，非主视觉元素变模糊，达到突出主视觉的效果。

从上述案例中可以看出，蒙层原则是次要元素被模糊化或被半透明图层遮盖的一种即时交互。蒙层原则经常利用模糊和叠加透明度的手法，让用户感受主次元素在空间上的层次关系。

3.11、遮罩

当界面中的某个元素以不同的展示形式同时存在于相关联的不同页面时，该原则能够让对象元素的展示变化过程具有连续性。

遮罩原则可以理解为对象元素形状与功能之间的关系。在交互动效原则中遮罩是随着时间发生变化的，而我们平时在做界面设计时所用到的遮罩是静止的，他和交互动效原则中的遮罩是有所区别的。遮罩原则的这种无缝衔接显示或隐藏元素区域的方式，能够创造出连续性的过度效果。

在上述案例中，顶部图片通过形状和位置的变化转换成为新页面中的唱片。在不改变元素内容的情况下，通过遮罩来改变元素本身，在创造连续性的同时也降低了用户的认知成本。动效是基于时间而产生的，并通过连续性、叙述性、关联性和可预期来提高可用性。在这个案例中，尽管对象元素前后的的内容没有变化，但是位置和形状的变化，足够让用户辨别出他是什么。

3.12、数据变化

如果对象元素的值在发生变化时，使用动态连续变换的方式可以获得更好的用户体验。

虽然在界面当中文本和数字元素本身可以改变，但似乎他们的改变并没有那么显而易见，因此也不会被用户轻易的察觉到，如果我们为数字和文本元素添加动态的变化则能够让用户轻而易举的察觉。

总结：数据的变化能够向用户表达数字背后的含义、建立起与用户沟通的桥梁以及数据变化的动态属性。

如果在界面加载动效当中，数字或者文本没有发生任何变化，用户肯定会认为当前页面是静止的，如图A当中的效果，这样也就违背了用户体验设计原则当中的“系统可见性原则”，用户不知道发生了什么。如果使用动态的形式呈现数字或者文本发生的变化，则能够让用户直观的感受到这些信息的变化过程，同时也建立起了数据与用户之间沟通的桥梁。例如：健身数据、股票数据等都是动态变化的数据，

四、产品中的动效分类

动效大致可以分为：引导类动效、转场类动效、反馈类动效和品牌类动效四种。

4.1、引导类动效

通过视觉和动效聚焦用户视线，以此来达到吸引用户注意力的目的，帮助产品业务达成某个模块的KPI。例如：提示引导、活动入口、动态Banner图等等。

作者：Johny vino™

4.2、转场类动效

转场类动效，简单的说就是帮助用户理解页面间的变化和层级关系，让用户清楚的知道自己当前所在的位置以及将要跳转的页面。

作者：Nicholas

4.3、反馈类动效

反馈类动效是告诉用户当前系统的运行状态，降低用户迷失感，给予用户一定的心里预期。

作者：James G.

4.4、品牌类动效

品牌类动效就是通过动态展示的手法，突出产品核心功能和特点，打造产品情感化，给予用户更深更强烈的记忆，起到品牌宣传的目的。

作者：Alexander Pyatkov

五、动效时长

动效时长是指从动效开始到动效结束总共所需要的时间，对于动效时长的把控至关重要，时间过长会有明显的滞留感，时间过短用户还没来得及感知就结束了。所以动效需要保证快速相应的同时还要兼顾从容优雅。一位伦敦城市学院神经学创立者 Davina Bristow 曾经提出，大多数人每分钟的眨眼次数为15次，而平均的持续时长为100～150ms。iOS和Android系统的动作反馈时间位于100～500ms之间，也就是100ms用户就能够产生感知了。所以我们可以定义50ms为最小增减幅度，100ms为最大的增减幅度，统一定义不同场景及类型的动效时长规范。

六、动效落地的N种解决方案

为了能够方便用户快速获取产品和加载产品资源，我们需要控制下载包的体积大小，以保证用户能够在较低的成本下获取产品。所以我们要控制动画的体积大小，还有一个原因就是占用内存越大的动画对系统性能的占用会相应变大，从而导致部分用户手机出现卡顿，死机等情况，从而造成用户流失。

6.1、非交互类动效落地方案

1、GIF格式

GIF格式是1987年由 CompuServe 公司创造，由于压缩技术好，即便是在当时的低速网络时代也能够无压力的显示，从而备受欢迎。由于年代久远的原因也让他拥有非常强的兼容性，目前市面上的大多数智能设备都能够对其直接预览。

但随着互联网的不断发展GIF格式本身所存在的问题也逐渐显现：

1、对设备的内存和性能的占用非常大（GIF的持续时长和尺寸等都是影响因素）

2、在输出透明背景的GIF时，常会出现锯齿和白边的情况

3、是一种有损输出的文件格式，在色彩和画质上都有所体现

虽然GIF格式存在以上的问题，但由于在不同设备之间具有良好的兼容性，所以很多平台都会选择GIF作为预览动画的方式。那该如何输出GIF呢？

方式一：

第一种方式也是比较传统的一种输出方式，利用PS导出GIF

虽然这是一种较为传统的输出方式，但是就目前来说这是唯一一种能够高质量输出GIF的方法。

方式二：

利用AE脚本GIFGUN快速导出GIF，好处就是操作简单，导出速度快。能够自定义设置GIF文件的大小、帧数率等属性。但导出GIF的质量不高，会出现掉帧卡顿的情况，色差也比较大。

方式三：

通过Ezgif将视频转换成GIF，Ezgif支持上传多种视频格式，包含mp4、webm、avi、mpeg、flv、mov和3gp等，支持的最大视频体积可达到100MB。可以通过参数设置，截取视频中的一部分转化成为GIF。

方式四：

使用Brewery3软件导出GIF，虽然导出的内存占用不大，但是输出的质量却很低，无较高要求时可选择使用。

2、视频

视频格式无可厚非肯定是普遍被众多产品所兼容的，视频格式要比GIF的内存占用更小，但对透明通道的支持却不太友好，并且他是一种有损的输出格式。平时对视频的压缩可以使用这个工具-Handbrake。

3、Apng/Webp

两者都是由目前的GIF、PNG、JPG等衍生而来的，其中Apng是一个基于PNG位图动画格式的图片，是PNG的位图动画扩展，能够实现PNG格式的动态图片效果，它的出现是为了代替旧版的GIF格式，但目前还尚未得到官方的认可。而Webp是Google在 2010 年开发的一种全部通吃的图片格式，因为他不仅可以有损(替代JPG)也可以无损(替代PNG)，还可以动(替代GIF)，并且在压缩率上全面超越了这三种常用的格式。目前在所有的主流浏览器上都可以完美支持，但是在移动设备上需要通过代码框架才可以完美支持。

Apng优点：相比 GIF 支持的色彩范围更广，也更加清晰，占用的内存更低，并且支持透明通道

Webp优点：与Apng特点相似，但ios设备需要借助Google 发布的函数库才能够支持。

如何输出Apng/Webp？

方式一：

第一种方式可以选择工具：iSparta ，将生成的PNG序列导入 iSparta 当中，调整参数导出即可。但如果序列帧较多的时候导出速度会变得非常慢，而且偶尔还会出现卡死、闪退和图片尺寸不统一等问题。

方式二：

使用AE插件：BX-Webp/Apng Exporter

4、序列帧

序列帧是把动画用一帧一帧的图像文件来表示，可以通过一些工具对图层序列进行压缩处理以达到降低内存的目的。虽然序列帧是无损低内存的，但是最好只在客户端当中使用，不建议在Web环境中使用。因为Web中的图片资源是需要向服务器请求下载的，如果序列帧过多无疑会增加资源请求的次数，并且在高频次的请求中如果出现错误就很容易造成动画无法正常播放的情况。而在客户端当中序列帧资源是存储在APP安装包当中的，所以不会出现问题。在Web中如果想要解决上述问题，就需要减少加载资源的请求次数，也就诞生了CSS Sprite—雪碧图/精灵图。

5、精灵图/雪碧图

精灵图/雪碧图（CSS Sprite）是针对序列帧素材应运而生的，是为了满足Web端播放序列帧的诉求，CSS Sprite 是一种图像拼合技术，这种方法是将元素拼合在一张图片上，然后利用CSS的背景定位来显示需要展示的图片部分，以这种形式来减少加载资源的请求。

如何输出：

可以使用AE的插件 CSS Sprite Exporter 来输出 

6、Lottie

lottie是由Airbnb推出，是用于解析使用Bodymovin导出为JSON的AE动画的第三方库，支持ios、windows和web端。他的工作原理是把我们的各种矢量元素、位图以及他们的效果关键节点以打包的形式行成一个JSON 格式的文件。

但是当我们使用AE插件Bodymovin导出JSON后，开发并不能直接使用导出的JSON文件，开发人员还需要在代码中引入Airbnb 提供的 Lottie 第三方库来读取播放JSON动画。实现原理其实就是把动画中的元素进行拆分，并且描述每个元素的动画执行路径和执行时间。其次为了保证交付给开发的JSON文件没有任何问题，我们需要在制作动画的时候格外注意Lottie不支持的属性。此外，虽然Lottie是一个非常强大的第三方动画库，但是还是会存在很多不确定性和兼容性的问题，例如他对缓动曲线的解析会占用非常多的内存，在不同设备和平台上的支持效果也非常的不稳定。

关于JSON的导出除了我们熟知的Bodymovin插件，还有一个Lottie平台推出的LottieFile插件，他与Bodymovin类似，只是功能更加丰富，理论上是能够实时预览AE动画的，但由于网络原因很难做到实时更新和同步。

Lottie/Bodymovin支持的AE属性列表

lottie官网：https://lottiefiles.com/

使用Lottie的注意事项：

1、lottie不支持任何形式的表达式

2、mask/轨道遮罩 会很大程度上影响lottie在安卓上的性能

3、AE本身不支持内外描边，所以lottie只能导出中心描边

4、mask-反转遮罩，这个功能在最终输出并不支持

5、如果动画中涉及到大量位图，会影响最终的性能

6、不支持图层效果以及各类AE效果和滤镜

7、在不影响动画的前提下，尽量减少图层的数量

8、Bodymovin自带的预览功能很多时候并不是实际效果，实际测试一下（可以利用Framer进行实际测试），可以减少很多与工程师后期的沟通

9、lottie更新特别频繁，高版本对android版本有较高的要求

10、输出json的时候尽量把合成大小裁剪到与你的动画刚好适应的大小，这样对开发人员有利

11、如果必须需要用到位图，在输出位图之后，图片最好压缩处理一下

12、轨道遮罩和蒙版虽然效果上是类似的，但是在Lottie的导出上是不一样的，所以选用轨道遮罩

13、关于3D旋转和Z轴的位置，Lottie Web支持3D旋转，但在Android上这个动画是完全不生效的，而Z轴的设置是在两个平台是不生效的

14、尽可能的减少关键帧，可以多使用父子级的方式而不是在每一个图层上都添加一遍关键帧

15、避免使用路径关键帧，因为使用后会创建一个非常大的文档

16、空图层可以使用，但为了让它正常工作，我们需要将可见打开，并将透明度设置为0

7、AE2CSS

这是一款AE插件，他是将AE的效果以CSS代码的形式进行导出，理论上支持AE的所有效果，并且输出的动画质量高内存占用极小，而他的实现原理是将基础属性动画直接转换成代码，复杂效果转为雪碧图，并将两者结合在一起合并输出成一套文件。虽然输出质量高且内存占用极小，但是他只能够应用在Web和H5当中。

注意：目前只能导出纯色层和位图的位移、旋转、缩放、透明度动画，并且支持表达式和父子级

8、SVGA

是类似于lottie的另一种文件输出格式，是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。更是目前礼物动效领域的主流应用格式，我们可以使用AE插件 SVGAConverter 输出SVGA格式的文件，在使用SVGA时也是需开发调用第三方库的。虽然他比lottie占用的内存更高一些，支持的属性也更少，但是它具有更强的兼容性和稳定性。他与lottie的区别在于记录动画的方式不同，lottie是按照AE中的关键帧及缓动的结合体进行记录，所以有对缓动曲线解析差带来的性能问题和稳定性问题，而SVGA则是通过逐帧的记录方式，类似序列帧，但资源可复用，所以占用内存更小。

SVGA支持的AE属性列表

SVGA官网：http://svga.io/

9、VAP

VAP全称Video Animation Player，是由企鹅电竞开发的一种用于播放酷炫动画的实现方案。他具有比Webp和Apng更高的压缩率，也就是素材体积变得更小了，而且采用硬件解码，使解码速度更快。并且解决了Lottie和SVGA支持AE效果有限的问题。

充电时刻：什么是硬解和软解

硬解就是硬件解码，是将原来全部交由CPU来处理的视频数据的一部分交由GPU来做，而GPU的并行运算能力要远远高于CPU，这样可以大大的降低对CPU的负载。而软解就是软件解码，是指利用软件让CPU来进行解码。我们常用到的Lottie、GIF、Apng、Webp等都是软件解码，MP4和VAP则是硬件解码。

10、第三方动效库

第三方动效库有很多，但是由于非官方维护存在诸多的不确定性因素，所以如果要使用第三方库还需要慎重考虑，下面列举一些动效的第三方库供参考使用：

当然还有一些在线的动效设计工具，例如：犸良、Rive、Flutter、Lotter-Editor等等

11、PAG

PAG全称 Portable Animated Graphics 一个听起来有些陌生的格式，他是由鹅厂研发，目前还没有还没有覆盖全平台，他不仅提供AE导出插件，还有桌面端的预览工具和各端跨平台渲染SDK。PAG对文件的解码速度更快压缩率更高，而且PAG桌面端预览工具还提供了性能检测功能，能够直观的帮助我们对性能问题进行优化。不仅如此，PAG还能够动态修改替换文本和图片等资源。

6.2、交互类动效

交互动画顾名思义就是与用户存在一定的关联性，用户通过某种操作或指令使设备产生相应的反馈，这种反馈所具有的动效在实现上相比于前面所说的更加复杂和繁琐。

6.2.1、手动标注

动效是元素的变化和运动节奏的结合而产生的。手动标注就是需要我们把动效当中每一个元素的参数变化都记录下来，只有这样开发才能够知道某一个元素在某个时间节点上发什么了哪些变化，而如果我们想要得到更加丝滑流畅的动画效果，就不得不使用缓动曲线。

什么是缓动曲线？

说到缓动曲线，我们要先聊一聊贝塞尔曲线，贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。贝塞尔曲线可以分为以下几种类型：

一阶贝塞尔曲线

一阶贝塞尔曲线函数中的t会经过由P0至P1的B（t）所描述的曲线。例如当t=0.25时，B（t）即一条由点P0至P1路径的四分之一处。就像由0至1的连续t，B（t）描述一条由P0至P1的直线。

一阶贝塞尔曲线

二阶贝塞尔曲线

在二阶贝塞尔曲线中，可以得到三个恒定点（P0,P1,P2），设定在P0P1中的点为Pa，在P1P2中的点为Pb，Pt为Pa和Pb连线上的点，Pa、Pb、Pt三点在相同时间内做匀速运动，即可得到一条弧形曲线。

二阶贝塞尔曲线

三阶贝塞尔曲线

利用二阶贝塞尔曲线制作方法，我们可以知道已知四个恒定点（P0,P1,P2,P3）的曲线绘制方法。

三阶贝塞尔曲线

随着恒定点的增多可以绘制出N阶贝塞尔曲线，这里有个体验贝塞尔曲线变化的工具，你可以通过对恒定点的调节来改变曲线的运动路径，从而绘制出不同的曲线。

地址：https://www.jasondavies.com/animated-bezier/

缓动曲线虽然可以被称作缓动贝塞尔曲线，但是他与贝塞尔曲线是有所区别的。缓动贝塞尔曲线的两个端点是固定的，而贝塞尔曲线的端点是可以移动的。我们在AE中制作动效所使用的曲线大多都是缓动贝赛尔曲线，对于交互类动效来说这种曲线该怎么交付给开发呢？只需要我们提供两个操纵杆的位置坐标参数就可以。例如：

• 操纵杆1（P1）的坐标 （ 0.16，0.72 ）

• 操纵杆2（P2）的坐标（ 0.91，0.26 ）

只需给到开发（0.16，0.72， 0.91，0.26 ）这组数值即可。

那么在AE中我们应该如何获取缓动曲线的参数呢？我们可以将AE当中的缓动曲线图表切换为【编辑值图表】即可调整为我们常见的缓动曲线的类型了。

对于参数的获取，首先需要获取图表区域的曲线图，然后以曲线左侧的端点作为坐标轴的原点建立坐标轴，以曲线右侧的端点作为结束点，绘制一个正方形区域，起始点坐标为(0，0)，结束点坐标为（1，1），在从起始点出发分别绘制2个矩型至操纵杆的端点处结束，即：矩型与操纵杆接触的点的坐标就是我们需要的P1和P2的坐标值。

充电时刻：缓动参数调节太麻烦怎么办？

我们可以使用在线的缓动参数调节网站解决，值得注意的是，弹性的参数值是大于1的

1、https://cubic-bezier.com/

2、http://www.css3beziercurve.net/

3、http://inloop.github.io/interpolator/

除此之外，我们还可以通过使用AE的插件Flow来完成对曲线的调节工作，Flow提供了25种常用的缓动曲线类型，而且还可以自定义曲线类型，满足特殊场景下的需要。

虽然对于曲线的参数有便捷工具的存在，但是在使用时还是需要适度和克制，毕竟需要开发小哥哥对代码进行修改，无形中增加了维护成本。

对于手动标注，我们需要提供的内容如下：

    a.变化的元素

    b.变化的属性

    c.参数变化值

    d.变化的起始时间及持续时间时长

    e.差值（动画的缓动曲线）

    f.备注说明

有了以上的参数之后，接下来就是如何交付给开发的问题了。总之就是将元素的变换情况清晰的描述出来，可以用纯文字的形式，也可以像下图的表单形式。

6.2.2、自动标注

手动标注确实太麻烦了，像我这种懒人怎么可能妥协。于是发现了这个自动标注的神器。InspectorSpacetime 这是由谷歌开发的一个可以完成自动标注的神奇插件，它能够将AE中的关键帧参数信息转化成JSON信息并可以实现可视化预览的WEB工具。

地址：https://www.nangonghan.com/timeLine/

选中要导出参数的关键帧，可以跨图层多选，然后打开 InspectorSpacetime 插件并点击如下图所示的按钮

将弹窗中JSON栏的文本保存至本地，文件后缀名改为.json

接下来就是在它提供的官网加载即可完成标注。生成图表之后还可以对这里对描述信息进行二次修改。

总结

动效设计并不是为了动而动，而是需要融入对设计原则、时长、落地方式以及处于不同场景下的思考等诸多因素的综合考量。要时刻围绕降低用户认知负担、提升交互效率、情感化体验等方面的内容进行设计。目前动效的落地方案虽然多种多样，但目前并还没有完美落地的解决方案，相信随着技术的不断发展，这些问题都会迎刃而解。作为设计师如何选择一个适合自己产品并且怎样与工程师进行有效对接是我们要逐重了解的内容。当然如果有能力的设计师也可以选择以代码的形式输出动效，像Framer和Origami，都可以完美的还原动画效果。但是制作成本就高了许多。