如何在Vue中使用lottie加载SVG动画

时间 2020-01-31

标签如何 vue 使用 lottie 加载 svg 动画繁體版

原文原文链接

背景

最近刚搞完官网，是时候分享一波我在码官网过程当中遇到的一些小困难。固然，我会分享一些比较重点的内容。如今网页上比较复杂的动画基本都采用 SVG，像 Ant Design 全家桶的官网，首页的 Banner 基本采用 SVG 动画（太过复杂的 SVG 会消耗 CPU 性能，你电脑的散热器可能就会嗡嗡响，特别是 AntV 官网的 Banner 动画，打开久了我电脑的 CPU 会居高不下），但目前实现 SVG 动画较简便的方式有两个：Lottie 和 SVGA（两个库各有优缺点，具体对比请转至《Android 动画库对比(Lottie 和 SVGA)》），因为当时没找到 SVGA 转换器（SVGA 转换器下载：点我），因此只能采用 Lottie。接下来我会讲解如何从 After Effect 导出到 Web 去调用整个流程。javascript

舒适提醒：文章篇幅较长，想了解 Web 部分如何使用可直接转至 Web 部分。html

After Effect 部分

1.安装ZXP Installer

在安装 Bodymovin 以前须要先安装 ZXP Installer，其下载连接为：aescripts.com/learn/zxp-i…。vue

2.安装 Bodymovin

而后再下载 Bodymovin，其各版本下载连接：github.com/bigxixi/bod…。java

安装完 ZXP Installer 后打开它，将 Bodymovin 文件解压到桌面（记得是 zxp 格式），选择 ZXP Installer 菜单栏 "File" - "Open"，而后选择 Bodymovin 便可，如图：git

这里我已经安装完毕，用的版本是 5.5.0，原本用的 5.5.6 版本，可是在 AE CC 2017 版本未能正常显示。github

3.导出data.json

打开AE，记得先把全部图层预合成，而后重命名合适的名称，接着在菜单栏选择 "窗口" - "扩展" - "Bodymovin"，点击如图所示的小齿轮：web

而后选择 Glyphs 这项，也可同时勾选 Standalone 、Demo ，可是这里不必也用不上，勾选 Glyphs 便可，如图：
json

注：Standalone 可导出单独的 js 文件，里面包含 json 动画数据和库文件，无需再引用 lottie.js 库文件，而使用本方式时可直接引用 js 文件，代码以下：
segmentfault

<!-- 注意 data.js 文件与当前 html 文件同级 -->
<script src="./data.js"></script>复制代码

而后在 <body></body> 内需添加如下代码便可：
bash

<!-- 注意 id 名称不可随意更改，若要更改请先把 data.js 里面的获取 DOM 语句更改 -->
<div id="script"></div>复制代码

而 Demo 会导出单独的 html 文件，里面包含 json 数据和库文件，直接打开便可预览。可是不推荐使用 Standalone 和 Demo 这两种形式，json 数据和库文件整合在一块儿，文件会很大，影响加载速度！

点击如图所示位置可更换文件保存位置：

最后点击左上角绿色按钮 "Render" 等待渲染便可。渲染完毕后，打开保存的文件夹，你会发现文件夹里有个 data.json 文件，里面保存的就是动画数据。

为了省带宽，我已经把 data.json 上传至 Github，若是有导出 images 文件夹，须要一同上传，不然没法正常显示！或者你也能够这样作：先把 images 上的图片上传至图库并获取每一个图片的连接，记住，图片顺序不能乱。而后打开 data.json，把 "assets" 字段下的 u 集合都删除，而后 p 集合换成对应的图片连接，如图：

整理后的动画数据应该是这样子的：

而后下面就能够直接引用 data.json 文件而无需管理 images 文件夹了。

Web 部分

啰嗦几句：原本用 vue-lottie 依赖也能够实现（这个依赖有小坑，解决小坑请看这里：点我），可是后期为了优化 build 时的文件，因此没有采用该方法，毕竟看了下 vue-lottie 依赖封装的代码仍是有点多的。

1.引入 lottie.js

打开 public 文件夹下的 html 模板文件，在合适的位置引入 lottie.js，这里建议把官方的 lottie.js Fork 到本身的 Github，而后本身再引用。官方 lottie-web 具体库连接：点我，记得选 min 版本哦！如图：

代码以下（这里引用的是我 Github 的连接）：

<script src="//zpfz.github.io/Website/dist/js/lottie.min.js" crossorigin="anonymous" type="text/javascript"></script>复制代码

2.添加 SVG 舞台

在须要添加 SVG 动画的位置添上如下语句：

<div id="lottie"></div>复制代码

上述的 div 就比如是 SVG 动画的舞台，让它在 id 名为 lottie 的 div 下进行动画。

3.添加动做代码

lottie.js 提供了一些参数，好比是否自动播放，是否循环播放等等，更多方法/属性请访问：点我，官方实例请访问：点我。通常能够在生命周期函数（好比 created、mounted 等等）添加代码，这里推荐在 mounted 周期下执行代码，其代码以下：

mounted() {
	// 建立动画实例，并设置好默认属性 
	let animData = {
	    // 绑定 id 名为 lottie 的舞台
	    wrapper: document.getElementById('lottie'),
	    // 动画类型
	    animType: 'svg',
	    // 是否循环播放
	    loop: true,
	    // 是否预渲染
	    prerender: true,
	    // 是否自动播放
	    autoplay: true,
	    // json 动画数据路径
	    path: '这里替换成你的 data.json'
	};
	// 执行动画实例
	let anim = bodymovin.loadAnimation(animData);
}复制代码

弄完以上步骤就能测试下动画显示效果啦！怎么样？很简单吧！

若是文章对你有帮助，麻烦你动动手指点个赞哦！您的支持是我坚持写做的动力！若是有啥疑惑，欢迎在下面留言哦！

本文由西柚子团队 - 左撇峰子编辑，转载时请附上原文连接，谢谢合做！
西柚子官网： www.seeyoz.cn/