本文针对设计师和技术同学，在动效落地时提供了一种更高效的思路
文/饼饼ZWIN
“为什么动画外面会有一圈白边？”
“嗯…这个还原的和设计稿不一样啊？”
“不太好写，还要适配，再设计个简单点的吧”
在动效还原的过程中，设计师和技术同学发出了以上感叹。是的，很多设计师辛苦制作的动效，会在落地时遇到各种各样的问题。有时设计师不得不修改设计方案，亦或是开发同学在还原过程中费时费力，造成了很多不必要的劳动损失。那么在动效导出时有没有较好的方法呢？接下来我们就来聊一聊。
GIF格式拥有非常强的兼容性，可以在大部分智能设备上直接预览，在各个平台上的兼容性也都很强。所以GIF成为设计师做概念展示时最受欢迎的格式。
但GIF的缺点也是显而易见的，首先GIF对设备的性能占用很大，有时候满屏的GIF就会让页面卡顿；其次GIF作为一种有损格式，多少会对画面的色彩、质感有些影响；第三，GIF对于透明通道的支持有限，导出会出现白边。
所以我们说，GIF很好，但它更强调展示，对于产品中体现交互、体验等方面的动效，还有更好的选择。在文末，针对GIF做展示动画方面，我会分享一些减小它自身缺陷的方法。现在，我们先来说说今天的主角：Lottie
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画。
使用简单，还能实现很多设计师设计的动画效果。目前已经成为普遍常用的方法。他在 AE 中的插件叫 Bodymovin，可以把动效设计师在AE里做好的动画导出为json格式，然后以Android/iOS原生动画的形式在移动设备上渲染播放。
接下来，我们用实例说明一下Bodymovin插件的使用。
设计师在用AE做动效时，有时会用到位图素材，这是无法避免的，不过我的建议是尽可能用矢量绘制的图形，可以用sketch或者AI画好素材后导入AE。下面是我用位图素材做的小动画案例：
1.使用到位图素材的情况这里的盾牌和小金币都是位图素材，下面是AE截图：
检查无误后使用Bodymovin导出（后面会详细介绍方法），完成导出后，除了json文件外，还导出了一个包含素材的文件夹image
所以，这就会多占用设备的性能，所以我们尽可能的用矢量绘制的素材代替位图素材。
下面我以ADD团队内部产品的loading动画做演示，这个动画只用到了矢量图形我打了组，其实所有的素材都是形状层，如下图AE截图：
OK，动画制作完，就可以用Bodymovin导出啦～由于没有用外部素材，所以导出的只有json文件，再附上动效预览视频或者GIF，方便开发同学校验实现效果～
准备工具：
3.ZXP Installer软件（安装Bodymovin时使用）
为了让大家能尽快使用，我已经将Bodymovin和ZXP Installer软件打包好了，在文末有获取方式～
安装方法：
1.装好AE（不细说了哈哈！）
2.安装ZXP Installer（双击安装即可，贼简单）
到这里就是安装成功了
Win:Edit（编辑）——preferences（首选项）——general（常规），勾选“Allow Scripts to Write Files and Access Network（允许脚本写入文件和访问网络）
Mac:After Effect——preferences（首选项）——general（常规），勾选“Allow Scripts to Write Files and Access Network（允许脚本写入文件和访问网络）
5.点击window（窗口）-- extensions（扩展）-- Bodymovin，就可以使用了
先找到你要导出的合成，接着选择导出路径，最后点击渲染。即可得到json文件。
1.不能存在相同命名的层
无论是素材还是我们自己创建的层，亦或者是打组时的命名，都要不一样，否则会出错。比如下面的车部分颜色丢失
3.Lottie/Bodymovin支持效果表
我们再来回顾一下GIF的自身缺陷：
3.透明导出有白边
现在有很多直接从AE导出GIF的插件，但是我试了几个觉得插件不稳定，而且画质没有PS导出的高，所以我们这里只讲一种基本导出方法，接下来我们逐一解决：
1-缩小体积，节约性能
首先，影响GIF体积的3个因素：
尺寸+动画复杂度+动画时长
尺寸、动画时长越小，输出GIF的体积也就越小，这里不做过多说明了。我们就来说说动画复杂度。影响动画复杂度的因素主要是：颜色和运动方式
相同条件下，色彩越丰富，GIF体积越大
全彩色-大小4.2M
部分灰色-大小2.1M
所以，在做展示GIF时，我们不妨将重点内容突出，将不重要的部分置灰，可以适当减小体积
相同条件下，运动方式越复杂，GIF体积越大
直线运动方式-2.5秒-4M
曲线运动方式-2.5秒-6.2M
由此可见，如果不是必须，尽可能保持运动方式的简单，这样有助于减小GIF体积
很多设计师在AE转GIF时会先输出MOV的视频，再利用PS--文件--导入--视频帧到图层--导出为web格式--GIF，但MOV经过2次转换，画质丢失比较严重。
这里我们要在AE导出时选择“PNG序列”，再利用PS将序列帧导出为GIF，这样画质可以提高。具体方法如下：
AE渲染设置，选择Lossless（无损），在Format里选择png sequence（png序列），点击完成，渲染即可。
打开PS--文件--打开，选择刚刚导出的PNG序列的第一个文件，然后点击左下角的“选项”，勾选“图像序列”，点击“打开”。
在PS可以看到动画时间轴
什么都不需要做，直接点击“导出为web所用格式”，在GIF格式设置里把“扩散”改为“图案”（这个算法可以进一步提高画质），导出即可。
本文我们了解了动效转Lottie思路和Bodymovin插件的用法，虽然很多特效和属性不支持，但总体来说已经为设计和开发同学提供了很多方便，毕竟在体验和交互的提升上也不需要特别复杂的动效，而且这些不足一定会随着版本的优化得到解决～
在GIF的导出和使用方面，我们了解到了如何导出更好的GIF，和如何为GIF瘦身～
在工作中积极沟通，不断发现和解决问题，相信我们都能超越昨天的自己！
【获取Bodymovin和ZXP Installer素材包】见下方网盘地址。提取码：st76
Powered by Froala Editor
探索更愉悦的用户体验
2
作品
8
粉丝
0
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册