江苏龙网

  1. 首页 > 生活 > >

「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南( 二 )



步骤 2:如下图完成设置关键选项并保存
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

步骤 3.渲染并完成导出
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

3.预览与交付
导出完成后在你的目的地文件夹中将存在一个.json 文档 ， 在交付给与你对接的前端开发人员时 。 最好利用官网的预览功能再次查看(因为涉及到多平台,你得在 iOS 和 Android 下查看).上传你本地的 Json 文件就可以在线预览你的动效了 。
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

预览地址：https://lottiefiles.com/preview
03
你可能遇到的问题
1.Lottie支持的 AE 属性
效果器全都不支持T.T Airbnb官方有张表格列出了bodymovin和lottie（安卓、ios）支持AE特性的列表 ， 可以作为我们设计参考：
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

列表地址:http://airbnb.io/lottie/#/supported-features
2.如何导出带有表达式的Json文件
Lottie本身不支持表达式. 但是一些微动效果(比如抖动这类),我们用表达式做出来更方便,效果更好.表达式烘焙插件 Easy Bake可以将表达式烘焙转为关键帧,那么也就解决我们的问题了.插件的安装这里就不再赘述 。 此款插件的使用方法及其简单 ， 选中带有表达式的关键帧点击BAKE就能瞬间把表达式转为若干个关键帧 。 最厉害的是这个插件还可以Unbake,点击一下就可还原表达式 。
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

3.尽可能避免蒙版的使用
Lottie对蒙版的支持一直不是很完美 。 用蒙版导出的Lottie文件经常会出现卡顿、显示错误等问题 ， 因此在制作Lottie文件是一定要尽量避免蒙版的使用 。
4.输出Lottie文件之后一定要预览确认
Lottie做为第三方插件 ， 功能非常强大 ， 但不稳定 ， 经常会出现导出文件效果出错的问题 ， 所以在输出文件之后要在预览器预览效果确认无误之后再提交 。
从商店下载Lottie应用程序 ， 或从App Store下载Lottie Preview应用程序 。
「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
本文图片

5.不支持程序性彩色渐变图层
Lottie暂时不支持程序性彩色渐变图层 。 因为Lottie的核心原理是把动画过程转化成svg动画 ， 但是svg对彩色渐变支持较差 。 如果要用到渐变我们一般会把图层转为位图导入进来使用 。
6.怎么控制文件大小
一般从以下几个方面进行考虑：
1.能用形状图层画出的就不要用位图；
2.降低形状图层锚点数量 。 锚点数量过多会增加json文件的大小；
3.导入图层时 ， 对图片进行压缩；
4.尽量减少关键帧的数量；
5.删除不需要的层 ， 避免无用信息嵌入到json文件；
6.少用路径动画(path keyframe animations) 。 由于Lottie会记录它的每个关键帧的每个顶点的动画数据 ， 因此占用的空间最多 ， 会使得你的json文件非常大 ， 从而影响性能 ， 造成卡顿 。
7.巧用多个动效堆叠实现复杂动画效果
尽量控制单个Lottie文件大小 ， 把复杂动画拆分成多个动效文件 。 以美事勋章为例 ， 每个勋章是由四个动效文件来堆叠实现 。 底层是爆炸动效（使用PNG序列帧方式实现的） ， 第二层是勋章动效（lottie动效） ， 第三层是向上升腾的粒子（lottie动效AE模拟粒子效果并没有使用插件） ， 顶层是光线动效（lottie动效） 。 多种动效格式混合使用 。 这样就解决了Lottie支持效果不全的问题,并且还可以提高性能和动效流畅度.


推荐阅读


上一篇：『趣头条』降至30万元内 国产特斯拉Model 3将调价

下一篇：：全网首试潮流SUV“新秀” 它能否做到一鸣惊人呢？