Lottie Example

## **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 进行安装： ```jsx npm install lottie-web ``` ### **4.2 基本用法** Lottie-web 的基本用法分为两步：加载动画数据和播放动画。加载动画数据的方法是使用 Lottie.loadAnimation() 函数，该函数接受一个包含动画数据的 JavaScript 对象作为参数，以及一个用于显示动画的 HTML 元素。下面是一个简单的例子，演示了如何加载动画数据并播放动画： ```jsx Lottie Example

``` 在这个例子中，我们使用 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安装： ```jsx npm install --save lottie-web ``` ### **5.2 导入** ```jsx import Lottie from 'lottie-web'; ``` ### 5.3 使用在React组件中使用Lottie组件，并通过props传入动画数据： ```jsx 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

; }; 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灵活组件使用方式： ```jsx import React from "react"; import Lottie from "lottie-react"; import groovyWalkAnimation from "./groovyWalk.json"; const App = () => ; export default App; ``` hooks使用方式： ```jsx 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是一个非常优秀的动画解决方案，既能极大的减少开发的时间，又可以高保真的还原动画效果，如果项目中有需要的话，可以进行大胆的尝试！如果只是这么简单的用法，那肯定是不够的，更高级的用法欢迎查看第二篇：[Lottie：让动画真的”动”起来（二）](https://juejin.cn/post/7329410360221728794) 也欢迎大家关注我的博客：[www.lpeakcc.com](https://link.juejin.cn/?target=https%3A%2F%2Fwww.lpeakcc.com%2F "https://www.lpeakcc.com")