恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
lottie 动画设计(二)
0.0°
2018-09-27 原创文章 教程 举报 3166 16 9 5

接上篇《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】下载~




更新:2018-09-27

下载
收藏

16人已收藏

沐影Tainny

锦字回时

  • 8

    作品

  • 32

    粉丝

  • 8

    关注

  • 日系音乐游戏UI
  • 健康管理项目APP
  • lottie 动画设计(三)完结篇
  • 信息图设计

    猜你喜欢

      2018-09-27 原创文章 教程 举报 3166 16 9 5

      lottie 动画设计(二)

      0.0°

      你确定要举报lottie 动画设计(二)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年09月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      16
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录