值得一提的是, Lottie 在 Web 上是借助 Canvas 或者 SVG 来渲染动画的, 动画的关键帧在导出时已经被计算好了, 除了解析JSON之外基本没有性能损耗, 因此效率非常高!
二....预览: 动画和编辑实时预览/编辑窗口
工具: 各种工具的集合, 如文字工具、图形工具等
属性: 在这里编辑元素的属性
首先, 选择我们新建的合成, 点击工具栏的圆角矩形按钮, 同时按住shift, 在预览区域绘制一个矩形...在我们开始之前, 先分析一下动画效果, 可以分成三部分:
位移动画: Y 轴方向的往复运动
形状动画: 矩形和圆形之间的往复变换
颜色动画: 蓝色和品红色的突变
OK, 让我们先来完成位移动画: 首先...这么做的意思是: 让图层的Y轴坐标属性, 在0帧到20帧的过程中, 从150动画到380, 是不是很容易理解? 现在按下空格键, 预览效果!...重复之前的步骤编辑剩下的几个关键帧曲线, 最后, 编辑完的曲线如图:
?
按空格键预览, 如图:
?
Yooooo! 比刚刚自然多了!
让我们进行下一步, 添加形状变换的关键帧。