After Effects - Bodymovin 插件验货及感受
以下言论仅代表个人观点！在此感谢那些神一样存在的大牛！
最近在设计圈里，空降了一个叫 Lottie的项目开源库（背景就不介绍了，感兴趣的可以去调查一下）！结合AE插件-Bodymovin可以实现一些酷炫吊炸天的动画效果！最重要的是再也不用拎着刀和开发宝宝们决战紫禁之巅了！
本人设计师一枚，Lottie是代码开发宝宝们研究的，所以这里主要介绍一下Bodymovin这个NB的插件，在应用中的一些问题和解决办法！
插件安装地址：https://helpx.adobe.com/creative-cloud/kb/installingextensionsandaddons.html
这是原文地址：https://github.com/bodymovin/bodymovin
正好最近要上一版产品改版后的引导页设计，正好验验货，看看是不是如同传说中的那般神奇！于是乎：
作业流程
- 根据PM提供的方案和策略，找放大点，梳理逻辑
- 在AE中建立动画
- 利用AE中的bodymovin插件导出HTML和json文件
- 交付开发
测试
经过多轮测试，发现以下问题
测试1
问题 -- 位图无法显示，遮罩蒙版失效，包括文字！
解决 -- 尽量采取路径绘制，避免闭口路径，文字转区！
测试2
问题 -- 导出图片文件质量低
解决 -- Ps中重新导出png，同命名替换
测试3
问题 -- 高斯模糊、描边不显示、渐变(外加的图层样式都不支持)
发现 -- AI格式的icon在AE中可以转曲
通过路径的绘制！整体质量提高！
支持的 After Effects 功能
图层
- 固态图层
- 形状图层
变换
- 锚点
- 位置
- 缩放
- 旋转
- 不透明度
描边（形状层）
- 描边颜色
- 不透明度
- 描边宽度
- 线段
- 虚线
填充（形状层）
- 颜色
- 不透明度
修剪路径（形状层）
- 修剪路径开始
- 修剪路径结束
- 修剪路径偏移
- 路径
- 组变换（锚点，位置，比例等）
- 矩形（所有属性）
- 椭圆（所有属性）
- 一组中的多个路径
关键帧插值
- 线性插值
- 贝塞尔曲线
- 连续贝塞尔曲线
- 自动贝塞尔曲线
- 定格
当前不支持 After Effects 功能
- 图像层
- 文本（“可从文字创建形状”）
- 摄像机灯光图层
- 表达式
- 3d层
- 渐变（颜色滤镜）
- 多边形形状（可以转换为矢量路径）
- 形状叠加处相交无法使用（比如转曲后的“口”导出后会呈实心矩形状)
- 图层形状特效
建议
文件
如果你有任何图像或AI图层，并且没有转换为形状（我建议你转换它们，右键单击每个图层，并执行：“从矢量图层创建形状”），他们将保存到相对于目标json文件夹的图像文件夹。请小心不要覆盖同一位置上的现有文件夹。
性能
尽量不要使用巨大的形状在AE只掩盖它的一小部分
数量很多的属性会造成浏览器渲染速度下降（如将形状的段数节点增加）
总结
整体来说还是非常棒的！毕竟现在还不是很完善，有些功能点还是不支持，但是相信，不就得将来来，这些就不再是问题了！要知道，在这之前，我可是通过画动画分解图来和开发宝宝们沟通的！
适配方式是走的web页的适配方式 也就是加载的html页面 对于有的尺寸两边显示不全的问题，是通过改变背景色来解决的！（这样也就限制了一些设计元素）
iOS整体运行没有问题！流畅！
安卓 4.1.2 以下版本有问题：2.3 报了异常，白屏！4.0 比较卡！其它的还算顺畅！