导语:在上一篇文章《交互体验动态效果的深度培养(上)》中，我们了解了动态效果设计的意义和价值、动态效果的作用以及交互效果中的设计原则。接下来作者继续和我们谈动态效果的分类和落地方案。

四.产品动态效应的分类

动态效应大致可分为四种类型:引导动态效应、过渡动态效应、反馈动态效应和品牌动态效应。

1.引导动态效果

通过视觉和动态效果关注用户的视线，从而吸引用户的注意力，帮助产品业务实现某个模块的KPI，如提示引导、活动入口、动态横幅图等。

作者:张诗钟·维诺

2.类似过渡的动态效果

过渡动作简单来说就是帮助用户了解页面之间的变化和层次关系，让用户清楚的知道自己在哪里，会跳转到哪些页面。

3.反馈动态效应

反馈动作是告诉用户系统当前的运行状态，减少用户的迷失感，给用户一定的期待。

作者:詹姆斯·g .

4.品牌动态

品牌动态效果是通过动态展示，突出产品的核心功能和特点，创造情感化的产品，给用户更深更强的记忆，达到品牌推广的目的。

作者:亚历山大·皮亚科夫

动词 （verb的缩写）动态效应持续时间

动态效果持续时间是指从动态效果开始到动态效果结束所需的总时间，对于动态效果持续时间的控制非常重要。时间太长会有明显的滞留，时间太短还没等用户察觉就结束了。所以动态效果需要快速对应，同时兼顾沉稳优雅。

伦敦城市学院神经病学创始人Davina Bristow曾指出，大多数人每分钟眨眼15次，平均持续时间为100 ~ 150 ms，iOS和Android系统的动作反馈时间在100 ~ 500 ms之间，也就是用户可以在100 ms内产生感知。

所以我们可以定义50ms为最小增减幅度，100ms为最大增减幅度，统一定义不同场景和类型的动态效果时长规格。

第六，动态着陆的N种解决方案

为了方便用户快速获取产品和加载产品资源，我们需要控制下载包的大小，以保证用户能够以较低的成本获取产品。

因此，我们需要控制动画的大小。还有一个原因是内存越大，动画占用的系统性能越大，会造成部分用户手机堵塞死机，造成用户流失。

1.非交互式动态效果着陆方案

1)GIF格式

GIF格式是由CompuServe公司在1987年创建的。由于其良好的压缩技术，即使在当时的低速网络时代，gif格式也可以无压力显示，因此受到欢迎。由于年代久远，兼容性强，市面上大部分智能设备都可以直接预览。

但是，随着互联网的不断发展，GIF格式本身的问题也逐渐显现出来:

对设备的内存和性能的占用非常大（GIF的持续时长和尺寸等都是影响因素）；在输出透明背景的GIF时，常会出现锯齿和白边的情况；是一种有损输出的文件格式，在色彩和画质上都有所体现。

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

方法一:第一种方法也是传统的输出方法，用PS导出GIF。

虽然这是传统的输出GIF的方式，但这是目前高质量输出GIF的唯一途径。

方法二:使用AE脚本GIFGUN快速导出GIF，操作简单，导出速度快。您可以自定义和设置属性，如GIF文件大小和帧速率。但是导出的GIF质量不高，掉帧会卡，色差大。

方法三:视频通过Ezgif转换成GIF，支持上传多种视频格式，包括mp4、webm、avi、mpeg、flv、mov、3gp等。支持的最大视频音量可达100MB。可以截取视频的一部分，通过参数设置变成GIF。

模式四:使用Brewery3软件导出GIF。虽然导出的内存占用很少，但是输出质量很低，在没有更高需求的时候可以选择使用。

2)视频

视频格式没有问题，一般兼容很多产品。视频格式比GIF占用内存少，但对透明通道不友好，是有损输出格式。这个工具——手刹，平时可以用来视频压缩。

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/apngexporter。

注意:不要将导出地址设置为桌面，否则数据将会丢失。请务必在导出前将导出地址更改为"/xxx.webp "或"/xxx.png "！

4)序列帧

序列帧将动画表示为逐帧图像文件，可以使用一些工具来压缩层序列以减少内存。虽然顺序帧是无损的并且内存低，但它们最好只用于客户端，不建议在网络环境中使用。

因为Web中的图片资源需要从服务器下载，如果顺序帧太多，无疑会增加资源请求的数量，如果高频请求出现错误，很容易导致动画无法正常播放。

在客户端，序列帧资源存储在APP安装包中，不会有问题。想要解决Web中的上述问题，就需要减少加载资源的请求数量，CSS Sprite——Sprite/Elf图就诞生了。

5)精灵/精灵

向导图/精灵(CSS Sprite)是为序列帧素材而产生的，以满足在网络上播放序列帧的需求。CSS Sprite是一种图像拼接技术，利用CSS背景定位来显示图片中要显示的部分，减少了加载资源的要求。

如何输出:可以使用AE的插件CSS Sprite Exporter进行输出。

6)洛蒂

由Airbnb推出的洛蒂，是一个使用Bodymovin解析导出到JSON的AE动画的第三方库，支持ios、windows和web。他的工作原理是将各种矢量元素、位图及其关键效果节点打包成一个JSON文件。

但是当我们使用AE插件Bodymovin导出JSON时，导出的JSON文件不能直接用于开发，开发者还需要在代码中引入Airbnb提供的洛蒂第三方库来读取和播放JSON动画。

实现原理是对动画中的元素进行拆分，描述每个元素的动画执行路径和执行时间。其次，为了保证交付给开发的JSON文件没有问题，在制作动画时需要特别注意洛蒂不支持的属性。

另外，洛蒂虽然是一个非常强大的第三方动画库，但是仍然存在很多不确定性和兼容性问题。比如他对地役权曲线的分析会占用大量内存，对不同设备和平台的支持效果也很不稳定。

在JSON的导出上，除了众所周知的Bodymovin插件外，还有洛蒂平台推出的LottieFile插件，类似Bodymovin，只是功能更丰富。理论上可以实时预览AE动画，但由于网络原因，很难实时更新同步。

使用洛蒂的注意事项:

lottie不支持任何形式的表达式；mask/轨道遮罩 会很大程度上影响lottie在安卓上的性能；AE本身不支持内外描边，所以lottie只能导出中心描边；mask-反转遮罩，这个功能在最终输出并不支持；如果动画中涉及到大量位图，会影响最终的性能；不支持图层效果以及各类AE效果和滤镜；在不影响动画的前提下，尽量减少图层的数量；Bodymovin自带的预览功能很多时候并不是实际效果，实际测试一下（可以利用Framer进行实际测试），可以减少很多与工程师后期的沟通；lottie更新特别频繁，高版本对android版本有较高的要求；输出json的时候尽量把合成大小裁剪到与你的动画刚好适应的大小，这样对开发人员有利；如果必须需要用到位图，在输出位图之后，图片最好压缩处理一下；轨道遮罩和蒙版虽然效果上是类似的，但是在Lottie的导出上是不一样的，所以选用轨道遮罩；关于3D旋转和Z轴的位置，Lottie Web支持3D旋转，但在Android上这个动画是完全不生效的，而Z轴的设置是在两个平台是不生效的；尽可能的减少关键帧，可以多使用父子级的方式而不是在每一个图层上都添加一遍关键帧；避免使用路径关键帧，因为使用后会创建一个非常大的文档；空图层可以使用，但为了让它正常工作，我们需要将可见打开，并将透明度设置为0。

7)AE2CSS

这是一个AE插件，以CSS代码的形式导出AE的效果，理论上支持AE的所有效果，输出的动画质量高，占用内存很少。其实现原理是将基本属性动画直接转换成代码，将复杂效果转换成Sprite，组合在一起输出一组文件。

虽然输出质量高，内存使用量很小，但只能在Web和H5使用。

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

8)SVGA

是另一种类似洛蒂的文件输出格式，也是一种兼容iOS/Android/Flutter/Web平台的动画格式。目前是礼品动画领域的主流应用格式。我们可以使用AE插件SVGAConverter输出SVGA格式的文件。在使用SVGA时，我们还需要开发和调用第三方库。

虽然比洛蒂占用内存多，支持的属性少，但是兼容性和稳定性更强。洛蒂和洛蒂的区别在于录制动画的方式不同。洛蒂根据AE中关键帧和慢动作的组合进行记录。

所以慢曲线分析不好会产生性能问题和稳定性问题，而SVGA是逐帧记录，类似于顺序帧，但是资源可以重用，所以占用内存少。

9)VAP

VAP，全称视频动画播放器，是企鹅电竞为播放酷炫动画而开发的实现方案。相比于Webp和Apng，它有更高的压缩比，即素材体积变小，采用硬件解码，使得解码速度更快。解决了洛蒂和SVGA have支撑效果有限的问题。

充电时间:什么是硬件解码和软件解决方案？

硬件解码是硬件解码，将原本由CPU处理的一部分视频数据转移到GPU，GPU的并行计算能力远高于CPU，可以大大降低CPU的负载。而软解就是软件解码，就是用软件让CPU解码。洛蒂、GIF、Apng、Webp等等都是软件解码，MP4、VAP是硬件解码。

10)第三方动态效果库

第三方动态库有很多，但是非官方维护中有很多不确定因素，所以要想使用第三方库，需要慎重考虑。这里有一些动态的第三方库供参考:

当然，还有一些在线动态设计工具，比如马良、Rive、Flutter、Lotter-Editor等等。

11)PAG

PAG的全名是便携式动画图形，这听起来很奇怪。它是鹅厂开发的，还没有覆盖整个平台。它不仅提供AE导出插件，还提供桌面上的预览工具和各端的跨平台渲染SDK。

PAG有更快的解码速度和更高的压缩比，PAG桌面预览工具也提供了性能检测功能，可以帮助我们直观地优化性能问题。此外，PAG可以动态修改和替换文本和图片等资源。

手动标注VS自动标注