Lottie:让Web动画更简单（一）

lottie简单介绍及在react中如何使用lottie.

1. lottie-web的介绍

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

2. 与css动画、gif、帧动画的比较

下表列出了lottie-web、css动画、gif和帧动画的比较。它们主要从时间成本、动画还原度、开发成本、产物大小和性能等方面进行对比。

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

可以看出，Lottie-web在动画还原度和产物大小上具有优势。Lottie动画是以矢量形式储存的，所以它们可以以较小的文件大小呈现高品质的图像。但是，Lottie动画的开发成本比CSS动画低，需要更多的时间来创建，这对于开发人员来说可能是一个缺点。

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

Lottie-web 在移动端的兼容性相对较好，支持 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 动画对硬件加速的依赖较高，如果设备不支持硬件加速，可能会导致动画性能下降。

4. Lottie-web 的使用

4.1 安装

使用 Lottie-web 首先需要安装 Lottie-web 库，可以通过 NPM 进行安装：

npm install lottie-web

4.2 基本用法

Lottie-web 的基本用法分为两步：加载动画数据和播放动画。

加载动画数据的方法是使用 Lottie.loadAnimation() 函数，该函数接受一个包含动画数据的 JavaScript 对象作为参数，以及一个用于显示动画的 HTML 元素。

下面是一个简单的例子，演示了如何加载动画数据并播放动画：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lottie Example</title>
  </head>
  <body>
    <div id="animation"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
    <script>
      var animation = bodymovin.loadAnimation({
        container: document.getElementById('animation'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
      })
    </script>
  </body>
</html>

在这个例子中，我们使用 Lottie.loadAnimation() 函数加载了一个包含动画数据的 JavaScript 对象，然后将该对象渲染到了一个具有指定 ID 的 HTML 元素中。注意，我们还指定了渲染器的类型为 'svg'，循环播放该动画，并自动开始播放动画。

4.3 API

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

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

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

5. React中如何使用Lottie-web

在React中使用Lottie-web相对简单，可以使用已有的库lottie-web，该库提供了方便的组件化封装和使用方式。下面是使用lottie-web的步骤：

5.1 安装

使用npm安装：

npm install --save lottie-web

5.2 导入

import Lottie from 'lottie-web';

5.3 使用

在React组件中使用Lottie组件，并通过props传入动画数据：

import React, { useEffect } from "react";
import lottie from 'lottie-web';
import animationData from "./animation.json";
 
const App = () => {
	useEffect(() => {
		lottie.loadAnimation({
			container: document.getElementById("lottie"),
			renderer: "svg",
			loop: true,
			autoplay: true,
			animationData: animationData,
		});
	}, []);
 
	return <div id='lottie' />;
};
 
export default App;

5.4 参数说明

options 参数包含以下属性：

参数	类型	默认值	说明
animationData	object or array	null	Lottie动画数据
path	string	null	Lottie动画的JSON文件路径
renderer	string	'svg'	Lottie动画渲染方式，支持'canvas'和'svg'
loop	bool or number	true	是否循环播放动画
autoplay	bool	false	是否自动播放动画
name	string	null	Lottie动画的名称
assetsPath	string	null	Lottie动画资源文件夹的路径
rendererSettings	object		Lottie动画渲染的一些配置

在options参数中， animationData和path必须设置其中之一。 animationData可以直接传入Lottie动画数据，而path则是Lottie动画的JSON文件路径，可以通过require或import语句导入。

5.5 lottie-react

如果想直接使用react组件的话，也可以尝试使用 lottie-react 这种npm包，传入的属性与lottie-web的属性一致，它的好处在于整个包的大小比lottie-web小了很多，缺点是不如lottie-web灵活

组件使用方式：

import React from "react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";
 
const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;
 
export default App;

hooks使用方式：

import React from "react";
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";
 
const App = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true
  };
 
  const { View } = useLottie(options);
 
  return <>{View}</>;
};
 
export default App;

6. 总结

Lottie-web是一个非常优秀的动画解决方案，既能极大的减少开发的时间，又可以高保真的还原动画效果，如果项目中有需要的话，可以进行大胆的尝试！