深入浅出聊聊Lottie动画

在上一篇中介绍了作为个人开发者使用 AI（Adobe Illustrator）的一些场景。其实对我而言学习AI还有另一个目的，我在项目中需要使用Lottie动画提升APP的视觉，也算是面向竟品看齐。Lottie动画的json文件是由 AE（Adobe After Effects）输出的。而制作AE则需要先用AI来绘制出动画的素材，这也是为什么学习AI的原因。

`Lottie`的介绍 #

Lottie是Airbnb开发的一种轻量级的JavaScript库，它能够在Web、iOS和Android平台上呈现高质量、动态的矢量动画。Lottie使得在应用中使用复杂的矢量动画变得更加容易，并且在不同平台上能够实现更高的视觉一致性。而lottie-web是Lottie的Web版本，使用它可以在Web页面中展示高品质、流畅的动态矢量动画。

估计很多人都不知道这个动画库，但是有个APP你一定知道，在它的活动中也使用了大量的Lottie动画。 alt text

与其他动画比较 #

动画技术	时间成本	动画还原度	开发成本	产物大小	性能
Lottie	高	高	低	低	优
CSS动画	低	低	低	低	优
GIF	高	中	中	中	差
帧动画	高	高	高	高	中

可以看出，Lottie在动画还原度和大小上具有优势。Lottie是以矢量形式储存的，所以它们可以以较小的文件大小呈现高品质的图像。但是，Lottie动画的开发成本还是挺高的可能只适合一些特殊场景，这对于开发人员来说可能是一个缺点。

Lottie 比 GIF 小 600% ，且传送速度快 10 倍。由于它们是微小的文件，并且不会占用过多的磁盘空间，而且会提高下载速度，这对转换率来说会更好。但最重要的是，可以在不影响质量的情况下放大或缩小 Lottie 文件。您可以放大 Lottie 动画，无论缩放的大小或速度如何，图形都会缩放平滑。这是因为，与 GIF 不同，Lottie 动画是使用向量（与一些光栅元素混合）创建的，它更适合无限的可扩展性和帧速率。

Lottie的另一个优势是它具有更强的灵活性。如动态更新，动画控制力等。 alt text

另一个例子可以看到根据设置动态修改动画的更新速度的变化。 alt text

在 iOS、Android 手机上的兼容性介绍 #

Lottie 在移动端的兼容性相对较好，支持 iOS 9.0+、Android 4.4+，以及 React Native 和 Flutter 等跨平台框架。在 iOS 上，需要注意的是，iOS 9.0 ~ 9.2 版本的 WebView 对 SVG 的支持有所不同，可能会导致一些 SVG 转换为 Lottie 动画后无法正常播放，这个问题在后续的 iOS 版本中已经得到了修复。

在 Android 上，需要注意的是，Android 4.4 版本的 WebView 对某些 SVG 属性的支持可能不完善，可能会导致一些 SVG 转换为 Lottie 动画后无法正常播放。此外，Lottie 动画对硬件加速的依赖较高，如果设备不支持硬件加速，可能会导致动画性能下降。

API #

Lottie 提供了丰富的 API，以便我们控制动画的播放、暂停、重置、改变速度等操作。下面列出一些常用的 API：

lottie.loadAnimation：加载动画文件并返回一个动画实例。
animation.play: 播放动画。
animation.stop: 停止动画。
animation.setSpeed：设置动画的播放速度。
animation.setDirection：设置动画的播放方向。
animation.goToAndStop：跳转到指定时间点或帧，并暂停。
animation.destroy：销毁动画实例。

更多API的使用可以参考Lottie的官方文档 airbnb.io/lottie/

实战分享 #

说了这么多，不如实战一下。分享我使用Lottie动画的实战经验。

选择合适的动画素材，使用AI对素材进行加工。（素材分解分层）
通过插件导入AE, 对身体部位引进父子链接
设置帧速率我以24帧为例，即一秒24帧，设置关键帧打上标签。
通过插件生成Lottie的json文件。

以Flutter为例，引入Lottie库

dependencies:
lottie: ^3.1.2

assets:
- assets/lotties/

动画组件代码

int durationMilliseconds = ((60000 * 2) / rLogic.settings!.bpm).round();
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: durationMilliseconds));

...

child: Lottie.asset(
    'assets/lotties/w_beat.json'
    controller: _controller,
    onLoaded: (composition) {
        _controller.duration = composition.duration;
    },
    ),

为了动态地根据变化的来调整动画的时长，我使用以下公式来计算每步动画的时长： alt text 因为我的Lottie动画的时长为一秒钟24帧（其中包含了左脚抬起放下和右脚抬起放下），简单说我的意图是根据选择的每分钟的步频，来计算一秒钟2步的动画方法速率。

最后的效果如下： alt text

总结 #

Lottie是一个非常优秀的动画解决方案，项目GIF既能极大的减少文件的大小，又可以高保真的还原动画效果，同时具有极大的灵活性。它的开发时间会比较高，需要较高的综合能力，所以对于大多数个人开发者步太适合，除非这个动画是项目中的核心部分，可以进行大胆尝试！

Lottie的介绍 #