浅谈情怀类H5-动效剖析以及实现

结束了一段三年的旅程，终于有时间可以简单分享一下自己的一些工作项目以及心得。

今天想跟大家浅谈情怀类H5-动效剖析以及实现。

部分情怀类H5的项目（我负责动效）

动效展示视频：

https://www.zcool.com.cn/work/ZNTM0MzkxODg=.html

| 情怀类H5的定义及设计要素

定义：在H5移动广告设计中,利用插画等视觉表现形式与动态化的信息传递、动画化的叙事表达以及互动等元素的融合传达给用户：温暖、高冷、喜欢、悲伤、怀旧等情感。

设计要素：

·泪点设计：通过温情的画面和富有情感的文案表现出来，引起用户的泪点以及共鸣。

·故事线的设计：画面、角色和元素都是具有生命力的，随着时间的变化而发生变化，让故事变得更加生动立体，也可增强用户的代入感。

·触点的设计：通过某一元素，让用户想起了曾经的一些事情，从而触动用户的情绪。

·痛点的设计：用开门见山的方式，或者是使用反思温情的方式，给用户带来的温暖和包容。

| 动效在情怀类H5的作用

动效对情怀类H5的作用主要体现在两个方面：

·功能性：引导用户进行点击、滑动、翻页等操作，吸引用户并让其长时间的视觉停留。

·体验性：页面中的场景和人物需要配合相应的动效，可让整个H5更有温度；每一个动作行为传递给用户的情绪要和整体视觉氛围保持一致，这些动效能让体验更加升华。

| 举例说明动效思考

以部分场景简单分享下制作过程中动效设计的思考。

·《温州农行-端午节领取端午粽礼》的第三幕赛龙舟：初期看到视觉的动效构想：赛龙舟比赛中队员们整齐划一的化着船桨激烈竞争，丈夫搂住妻子（手臂微动），女儿很兴奋的看着赛龙舟比赛（小手指指点点），柳树等前景动效微弱晃动做以点缀。

最后将整个赛龙舟的过程时间大概处理成10s-15s左右为一个循环让用户沉浸其中感受到赛龙舟的比赛氛围，水波纹波动让整体效果栩栩如生。

·《苏州银行-穿越姑苏小食光》的开始页：一开始动效的构想：一个年轻小伙站在商场楼下转竹蜻蜓，点击【开启穿越之旅】后画面透明度转场到下个场景，较常规的做法，但苏州银行客户觉得这个比较普通，就提出了是否可以有更艺术、电影化的转场形式。最后采取了我们提供的一个方案：用户点击按钮前，小人一直在转竹蜻蜓；点击按钮后，竹蜻蜓高速的上升至天空（并伴随着人往上看）后场景变白然后消失并切换到下个场景。

我也是抱着半信半疑的态度去尝试了下，毕竟即使动效实现了，前端也不好实现，心里也没有底，只好硬着头皮做了下去。

这个动效的难点有三：

1. 点击按钮前，转竹蜻蜓是有三维透视，二维的旋转难以达到拟真的效果

2. 点击按钮后，竹蜻蜓如何展示高速旋转的效果

3. 竹蜻蜓需要在空中飞行一段时间，原来的天空（一屏）就显得不够长

解决方式：

1. 画一个正面的竹蜻蜓，用AE摄像头进行3D旋转

2. 原本也打算用1的解决方式，后发现效果不佳，画三张高速旋转的序列帧进行切换

3. 跟视觉沟通补充延伸完整的天空

最后在跟前端的对接中，提供了动效文档+svga（后面会有介绍）的方式得以实现了电影级别的转场方式。

该项目视觉的介绍，是由优秀的一达同学完成，大家有兴趣可点击链接查看https://www.zcool.com.cn/work/ZNDMxMDU3MzI=.html

| 动效落地的介绍

大家也可以看到情感类H5中的动效虽较为优美，但如不知道如何落地也是空中楼阁。在实际的落地过程中推动困难，原因可能是我们对信息处理、逻辑梳理不对等的理解以及对Web、iOS、Android等不同平台的实现方式或支持的差异，也不够了解适合的落地方式。下面简单介绍下一些动效的落地方式以及影响落地的因素。

影响落地的因素有：尺寸、时间、动画复杂度等。

一、动画尺寸

动画尺寸越大 ，占用系统空间越大 ，占用系统性能也越大。例如 gif / 视频等。

另一方面，大尺寸的静态图在预览过程中也需要耗费更多的设备计算。例如：电脑上预览一张 800*800 的图和一张 2000*2000 的图，电脑打开它所需要的时间是不同的，且所占用的资源也是不同。

二、动画时长

当图片堆栈的时间变长时，堆栈当中的图片数量也会增加，动画的占用内存相应的也就变得更大。不过，动画的时长对性能的影响会相对的小很多。

三、动画复杂度

动画复杂度对一般输出格式没有问题，更多的是在一些近几年比较常用的输出工具上出现问题。当选择了其他的格式时也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节。

接下来介绍市面上常见的几种动效落地方式。

·GIF：它是⼀种位图图形文件格式，以8位色(256种颜色)重现真彩色的图像。是互联网早期网络传输图像格式之一。

它的兼容性很高，但输出的质量较差且占用内存存储空间较大，现今互联网中已较少使用。输出方式：AE插件（gifgun）、ps。

·视频：视频格式在大多数的产品上也都可以直接兼容，相比 GIF 格式它所占用的内存可以更小。视频对透明通道的支持很差，且它也是一种有损的输出格式。输出方式：AE，输出动画后用Handbrake压缩。

·精灵图/序列帧：可实现多张相同尺寸图片连续播放的组图，可以⽤一帧一帧的图像⽂文件来模拟连续的活动视频，常使用编好数字顺序的png图⽚。可支持透明通道，但也会因资源过大导致H5卡顿。输出方式：AE插件CSS-Sprite-Exporter。

·Lottie(推荐，淘宝平台常用)：Airbnb开源的⼀个⽀持 Android、iOS、Web，利⽤json文件的方式快速实现动画效果的库。

兼容性高，且完全由设计师设计动画交付前端，但需在写的过程中引入第三方库。输出方式：AE插件Bodymovin。

·Svga（推荐，全平台都可用）：⼀种跨平台的动画格式，同时兼容 iOS、Android 、Web。使用简单，性能 卓越。动画设计师专注动画设计，通过⼯具输出svga动画文件，提供给前端使用即可。

复杂的粒子效果需要通过序列帧图层实现，大大增加文件体积，且通用性不如Lottie。输出方式：AE插件SVGAConverter_AE。

| svga的使用方法以及注意点

平常工作中，svga的使用频率较高，所以我这里简单介绍下它的使用方法以及注意点。

svga的导出分为简单动效（位移、旋转、缩放、透明度以及父子级）的导出、复杂动效导出（粒子或插件效果）。在这里因为篇幅的原因不介绍复杂动效导出，如有兴趣后期可再做介绍。

步骤一、AE动效制作前的准备：动效所需的ps图层需要全部栅格化处理，以及有图层样式的图层也需栅格化图层样式，特别需要注意不要遗漏ps中的矢量图形。

知识点：ps图层中的矢量图形在AE的识别下就是一张带有蒙版路径的纯色图，导出SVGA时该图层会正常显示，但会占用整个画布的大小，占用较大的内存。

步骤二、图层导入AE选项设置：图层以psd形式导入AE里，导入类型选择：合成-保持图层大小，图层选项：合并图层样式到素材。

知识点：若psd导出AE时仅勾选合成，所有图层的实际大小都跟画布大小保持一致，这种方式导出SVGA,也会占用较大的内存。

步骤三、AE制作动效的注意：动效过程中不能使用AE里制作的形状图层，且不能进行矢量变换，如需使用形状，可在ps制作成图后再倒入AE作为素材。

知识点：AE自带的形状图层，导出SVGA时该图层会正常显示，但会占用整个画布的大小，占用较大的内存。

步骤四：导出svga后的检查：导出后，看svga内存占用情况，一般简单动效导出内存占1M左右，如复杂动效内存超过8M（会有相应提示），需检查是否有大图等情况导致占用内存大，然后再进行调整输出。

知识点：导出复杂动效时（粒子或插件效果），因需要导入序列帧制作svga，序列帧的图片大小以及数量会影响svga导出的占用内存大小。

| 总结

情怀类H5往往都有高质量的视觉效果以及丰富的动效设计，让用户产生共鸣，达到裂变传播的目标。

动效输出的手段目前虽然非常多样，而且随着技术手段进步选择会越来越多。但是目前来说没有任何一种方案可以完全解决我们落地动效当中的所有问题。

作为设计师我们需要始终保持敏锐的观察力并且持续的更新自身的知识树，才能应对多种多样需求下输出的动效效果的落地。另一方面我们也需要站在更长远的角度去了解一个动效需求从产品逻辑到开发逻辑之间的鸿沟，并试着去通过更多元的手段去跨越鸿沟。