lottie 动画设计(二)

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
3181 5 9 2018-09-20

接上篇《lottie 动效设计一》~这篇主要是官方放出的目前支持的After Effect 效果合集翻译稿,和自己总结的需要注意的点~

Image title

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


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

官方文档写到的与AE动效设计有关的部分,我简单的翻译了下,
如果文中有翻译错误欢迎和我联系,谢谢指教:

Image title


其他支持属性

图层特性(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 文件用浏览器打开是这样的一堆代码,需要在特定的网站打开预览
Image title

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

Json test 

Image title

https://nicolasjengler.github.io/bodymovins-json-tester/dist/ 
不需要科学上网 支持效果多,但是有bug ,目前发现的是会出现动画无法循环的问题
Image titlehttps://svgsprite.com/demo/bm/player.php?render=canvas
不需要科学上网,非常稳定,但是支持效果有限
Image title

https://www.lottiefiles.com/preview 

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


但是!!!制作时会遇到的问题:


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

Image title

比如:上图这个动画示例,打开后的工程文件是完全使用形状图层制作的。
并且在一个形状图层中可以使用多个路径~!
整体的移动旋转是绑定在了底部的一个空对象上的。

Image title

问题 2 :渐变效果在软件兼容上存在问题。
在官网查询之后,发现同一个世界,同一个坑,大家都会遇到渐变之后,预览时色彩丢失的情况。
目前我自己检查发现是软件语言版本的问题:建议使用AE CC 2018 英文版 + bodymovie 5.2.0 版本
(最新为5.3.0版本,但个人测试在修剪路径和渐变填充都出现了画面图像错误~╮(╯▽╰)╭)
Image title

错误渲染结果

Image title


正常渲染结果

Image title

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


下篇会讲如何使用AI / sketch 绘制文件后导入AE,制作动画和输出json 的工作流程~~
随缘点赞~福生无量~~~
欢迎来我的公众号【锦字回时】找我玩,上文提到的文件可以在公众号回复【AE2】下载~




全部评论:5

  • 糖小佩

    2019-03-01 09:29

    感谢分享,正在接触lottie,觉得文章非常有用

  • 沐影Tainny

    2018-09-20 21:24

    @小阿呆: http://www.ui.cn/detail/404147.html 下篇写好了~~希望多交流~~

  • 沐影Tainny

    2018-09-20 12:16

    @昭质天下: UI 视觉设计

  • 小阿呆

    2018-09-20 10:53

    之前公司用过bodymovie这个插件做动画,当时出现了很多问题,学习资料也很少,感谢分享!期待下篇~

  • 昭质天下

    2018-09-20 09:59

    用的是什么工作可以做动画呢

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票