vue中加载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中-->
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容