前端啊，拿Lottie炫个动画吧
点赞 + 关注 + 收藏 = 学会了本文简介
本文可在公众号「德育处主任」免费阅读
偶尔间在网页上看到一些很炫酷的小动画，好比loading殊效，还能控制这个动画的状态，真的觉得很神奇。
大部分做后端的不想碰前端，做前端的不想碰动画殊效。
实在啊，很多时间不须要自己写炫酷的殊效，会调用第三方库已经挺厉害的了。好比今天要先容的 Lottie。
https://i-blog.csdnimg.cn/direct/d6dc5e3feb374338b8b7c0d9467b8192.gif
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
https://i-blog.csdnimg.cn/direct/166988e1784843278590b9df926367d2.png
我利用的是 5.12.2 这个版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#lottie {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="lottie"></div>
<script src="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 里的用法也是一样的。
https://i-blog.csdnimg.cn/direct/aa91627cb5fa4ea78829b4ec4f13eacd.gif
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。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]