lottie 动画设计（二）

接上篇《lottie 动效设计一》~这篇主要是官方放出的目前支持的After Effect 效果合集翻译稿，和自己总结的需要注意的点,有大图，建议电脑打开来看 []~(￣▽￣)~*

官网地址：http://airbnb.io/lottie/ （需要科学上网~ ε=(´ο｀*)))）。

官方文档写到的与AE动效设计有关的部分，我简单的翻译了下，

如果文中有翻译错误欢迎和我联系，谢谢指教：

其他支持属性

图层特性(Layer Features)

预合成(Precomps)

图像图层(Image Layers)

形状图层(Shape Layers)

空对象(Null Layers)

固态层(Solid Layers)

父子级关系图层Layers(Parenting Layers)

Alpha蒙板图层(Alpha Matte Layers)

支持中继器变形(Supports repeater transforms)

---

Currently Unsupported After Effects Features

目前还不支持的After Effects 特性（ ios）

· 合并形状(Merge Shapes)

· 反相蒙版(Alpha Inverted Masks)

· 裁切路径中的个别裁切形状功能(Trim Shapes Individually feature of Trim Paths)

· 表达式(Expressions)

· 3D图层(3d Layer support)

· 时间重置/ 图层反相(Time remapping / Layer Reverse )

· 图层混合模式Layer Blend Modes

· 图层效果 （粒子场）Layer Effects 

·  当前不支持偏移量 Offset currently not supported.

---

插件使用

使用bodymovin 输出的json 文件用浏览器打开是这样的一堆代码，需要在特定的网站打开预览

目前找到的在线预览json 文件的网站如下

Json test 

https://nicolasjengler.github.io/bodymovins-json-tester/dist/ 

不需要科学上网 支持效果多，但是有bug ,目前发现的是会出现动画无法循环的问题

https://svgsprite.com/demo/bm/player.php?render=canvas

不需要科学上网，非常稳定，但是支持效果有限

https://www.lottiefiles.com/preview 

官方稳定， 需要科学上网,包含移动端

但是！！！制作时会遇到的问题：

问题 1 : 虽然官方文档写了支持图像图层和固态层，但是在设计的时候把形状属性添加在这两个图层属性中，输出的json 文件会出现问题，所以个人不建议这样做。

比如：上图这个动画示例，打开后的工程文件是完全使用形状图层制作的。

并且在一个形状图层中可以使用多个路径~！

整体的移动旋转是绑定在了底部的一个空对象上的。

问题 2 ：渐变效果在软件兼容上存在问题。

在官网查询之后，发现同一个世界，同一个坑，大家都会遇到渐变之后,预览时色彩丢失的情况。

目前我自己检查发现是软件语言版本的问题：建议使用AE CC 2018 英文版 + bodymovie 5.2.0 版本

（最新为5.3.0版本，但个人测试在修剪路径和渐变填充都出现了画面图像错误~╮(╯▽╰)╭）

错误渲染结果

正常渲染结果

问题3：在设计动画的透明度变化时，在形状路径中修改参数会出现问题，在整个形状图层上修改参数，json 文件显示正常。（这个问题目前没有找到原因，所以制作的时候修改透明度单独一个图层设计比较好）

下篇会讲如何使用AI / sketch 绘制文件后导入AE,制作动画和输出json 的工作流程~~

随缘点赞~福生无量~~~

欢迎来我的公众号找我玩，上文提到的文件可以在公众号回复【AE2】下载~