点赞 + 关注 + 收藏 = 学会了
本文简介
本文可在公众号「德育处主任」免费阅读
有时候在网页上看到一些很炫酷的小动画，比如loading特效，还能控制这个动画的状态，真的觉得很神奇。
大部分做后端的不想碰前端，做前端的不想碰动画特效。
其实啊，很多时候不需要自己写炫酷的特效，会调用第三方库已经挺厉害的了。比如今天要介绍的 Lottie。
Lottie 是什么？
🔗Lottie官网 https://airbnb.io/lottie/
Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它可以解析使用 Bodymovin 导出为 JSON 的 Adobe After Effects 动画，并在移动设备和 Web 上本地渲染它们！
After Effects 是什么？Bodymovin 又是什么？
别怕，这些我也不会。作为前端，我会拿别人做好的东西来用😁
简单来说，Lottie 是 Airbnb 开发的动画库，特别适合前端开发人员。它可以轻松实现复杂的动画效果，不需要手写大量代码，只需引入现成的 JSON 文件即可。
今天不讲iOS，不讲Android，只讲如何在前端使用 Lottie。
安装 Lottie Web
要在前端项目中使用 Lottie，要么用 CDN 的方式引入，要么通过 NPM 下载。
CDN
在这个网址可以找到 Lottie 的各个版本的JS文件： https://cdnjs.com/libraries/bodymovin
我使用的是 5.12.2 这个版本
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>#lottie{
width: 200px;height: 200px;}</style></head><body><divid="lottie"></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script><script>var animation = lottie.loadAnimation({
container: document.getElementById('lottie'),// 渲染动画的容器
renderer:'svg',// 渲染方式
loop:true,// 是否循环
autoplay:true,// 是否自动播放
path:'./Animation_1.json'// 动画 JSON 文件的路径});</script></body></html>
Animation_1.json
是我下载的一个动画文件，这个文件我放在同级目录里。这个动画文件在哪可以下载我接下来会介绍。这里先了解一下 CDN 的方式怎么引入 Lottie 即可。
NPM
用下面这个命令将 Lottie 下载到你的项目里。
npm install lottie-web
动画资源下载
前面介绍到，动画是用 AE 做好，然后用 Bodymovin 插件将动画转换成一个 JSON 文件，前端就可以使用 lottie-web 将这个 JSON 文件的内容转换成图像渲染到浏览器页面上。
如果想要现成的动画资源可以在这些地方找找
- lottiefiles：https://lottiefiles.com/
- iconfont的lottie模块：https://www.iconfont.cn/lotties/index?spm=a313x.activity_lists.i3.11.50913a81XAlei7
- Creattie：https://creattie.com/
- Lottielab（自己编辑、下载）：https://www.lottielab.com/
我这里也给大家准备了一个动画文件，大家可以拿它来练手。
- 【百度网盘】链接: https://pan.baidu.com/s/1Qnp3BAAT7r7ja7_gzYcXSw 提取码: d7gt
- 【阿里云盘】链接：https://www.alipan.com/s/sfMVak2XhBf 提取码：35kw
实现第一个 Lottie 动画
我通过
React
脚手架创建了一个
React
项目来举例说明如何使用 Lottie，在
Vue
里的用法也是一样的。
import React, { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import animationData from './assets/animations/Animation.json';
function App() {
const containerRef = useRef(null);
useEffect(() => {
const anim = lottie.loadAnimation({
container: containerRef.current,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
});
}, []);
return <div ref={containerRef} style={
{width: "300px", height: "300px"}}></div>;
}
export default App;
在 HTML 文件中，创建一个容器，用于放置 Lottie 动画。在这个例子中我创建了一个宽和高都是
300px
的
div
元素。
然后引入
lottie-web
以及放在前端项目里的
Animation.json
动画文件。
最后调用
lottie.loadAnimation()
来启动动画。它将一个对象作为唯一参数。
container：动画容器，这个例子通过React提供的语法获取到DOM元素。renderer：渲染方式，可选svg、canvas和html。loop：是否循环播放。autoplay：是否自动播放。animationData：本地的动画数据的对象。
这里需要注意，
animationData
接收的动画对象是存放在前端项目的
JSON
文件，如果你的动画文件是存在别的服务器，需要通过一个
URL
引入的话就不能用
animationData
来接收了，而是要改成
path
。
版权归原作者 德育处主任Pro 所有， 如有侵权，请联系我们删除。