提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
接上篇《lottie 动效设计一》~这篇主要是官方放出的目前支持的After Effect 效果合集翻译稿,和自己总结的需要注意的点~
接上篇《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】下载~
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册