vue2:引入lottie.js加载AE动画

首屏页面显示中,经常会引入炫酷的动态效果,实现的方法是基于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中-->
});
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值