首屏页面显示中,经常会引入炫酷的动态效果,实现的方法是基于
PS
引入AE
导出的lottie.js
,结合data.json
实现
- 引入动画
js
import 'img/index/map/lottie.js';
动画中的
lottie.js
中代码是一样的,可以共用一个
- 设置动画容器
<!--第二步设置好动画的容器-->
<div id="centerMap">
- 实现
let mapDemo = document.getElementById("centerMap");
lottie.loadAnimation({
//LottieJS动画技术
container: mapDemo,
renderer: "svg", //渲染出来的格式
loop: true, //循环播放
autoplay: true, //自动播放
path: "img/index/map/data.json" //路径地址,<!--第一步先引用lottieJS在主页面:indexView.vue中-->
});