lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式
本文主要介绍lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式。
1、在HTML5页面中的使用方式
具体使用步骤详见下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>lottie 极简Demo</title> <!-- 第一步: 引入CDN --> <script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script> </head> <body> <!-- 第二步: 创建容器 --> <div id="container"></div> <div id="status">循环播放3次后停止</div> <div id="loop"></div> </body> <script> // 第三步: 实例化 var anim = lottie.loadAnimation({ container: document.getElementById("container"), // 容器 renderer: "svg", loop: true, autoplay: true, // animationData: {}, //如果使用的是JSON path: "https://gw.alipayobjects.com/os/sage/10726a69-0e6a-484f-a784-d57a812af9a6/lottie.json" // the path to the animation json }); var loopCount = 0; anim.onLoopComplete = function() { loopCount += 1; document.getElementById("loop").textContent = `播放了${loopCount}次`; if (loopCount >= 3) { anim.stop(); } }; </script> </html>
在HBuilder.exe编译器中切换到“边改边看模式”或者直接点击
按钮在chrome浏览器，会自动显示页面动画效果：是一个跳动的红心。
但是在搜狗浏览器中会报出“跨域访问”的问题，稍后再解决。
2、在vue项目中的使用方式
2.1 按照常规的流程创建Vue项目，具体步骤省略（如在指定的目录打开命令行窗口，使用vue create 项目铭创建项目，然后用VSCode打开项目文件夹，即可进行相关编辑和开发）。
2.2 安装 Lottie
npm install lottie-web -S
2.3引入动画库
import lottie from 'lottie-web';
2.4使用动画库
this.anim = lottie.loadAnimation({
container: this.$refs[`animation${i}`][0], //渲染的容器
renderer: 'svg', // 渲染方式:svg、canvas
loop: false, //循环播放，默认：false
autoplay: true, //自动播放 ，默认true
animationData: data, //动画json
});
2.5具体的使用步骤：
1、在components目录下面创建组件loadding.vue，内部代码如下：
<template> <!-- 为容器绑定样式 --> <div :style="style" ref="lavContainer"></div> </template> <script> //引入lottie import lottie from 'lottie-web' //引入json数据 // import animationData from '../../static/bitcoin.json' export default { props: { //接收父元素传入的参数 options: { type: Object, required: true }, height: Number, width: Number }, data() { return { style: { //设置容器的样式 width: this.width ? `${this.width}px` : '40%', //如果父元素有传参则使用传参的值，没有则=40% height: this.height ? `${this.height}px` : '100%',//如果父元素有传参则使用传参的值，没有则=100% overflow: 'hidden',//超出容器隐藏 margin: '0 auto' //水平居中 } } }, mounted() { lottie.loadAnimation({ //初始化 container: this.$refs.lavContainer,//在哪个dom容器中生效 renderer: 'svg',//渲染方式svg loop: true,//this.options.loop !== false,//是否循环 如果传入的参数options.loop不为false 则一直循环 即默认循环 autoplay: true,//this.options.autoplay !== false,//是否自动播放 如果传入的参数options.autoplay不为false 则自动播放 即默认自动播放 // animationData: animationData,//动画数据，这个必须要有 path: "/packages/lf20_sF7uci.json", rendererSettings: this.options.rendererSettings }) } } </script>
2、修改home.vue组件，修改后的代码如下：
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <!-- 显示动画的容器 --> <div class="test_wrap"> <loadding :options="defaultOptions" /> </div> </div> </template> <script> // @ is an alias to /src // import lottie from 'lottie-web' //引入子组件 import loadding from '@/components/loadding.vue' export default { name: 'Home', components: { 'loadding': loadding }, data () { return { show:true, defaultOptions: { autoplay: true,//自动播放 loop: true,//循环播放 height: 512, width: 512 }, } } } </script>
3、解决跨域访问的问题。在vue项目中添加vue.config.js文件，内部代码如下：
module.exports = {
// 代理配置
devServer: {
port: 8080,
proxy: {
'/': {
target: 'https://assets7.lottiefiles.com',
changeOrigin: true,
}
}
}
};
注意：其中，https://assets7.lottiefiles.com/packages/lf20_sF7uci.json是在线json资源链接。当然了也可以用将path: "/packages/lf20_sF7uci.json"更换为animationData:animationData，以便使用本地的json动画资源。
运行结果如下：
参考链接：
