美文网首页
vue中加载AE动画

vue中加载AE动画

作者: 初见_JS | 来源:发表于2020-03-13 16:10 被阅读0次

首屏页面显示中,经常会引入炫酷的动态效果,实现的方法是基于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中-->
});

相关文章

  • vue中加载AE动画

    首屏页面显示中,经常会引入炫酷的动态效果,实现的方法是基于PS引入AE导出的lottie.js,结合data.js...

  • 2019-05-10

    vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画 当打包构建应用时,Javascript...

  • Vue第三方插件使用

    1.加载数据loading组件 vue-infinite-loading2.loading动画组件 vue-spi...

  • (三)Vue中同时使用过渡和动画

    本节知识点 Vue中同时使用过渡和动画 实现 (1) 要是想刚加载就实现动画必须加入appear-active-c...

  • AE动画の加载小球的动画

    今天学习的是利用"表达式链接"制作加载小球的动画,效果如下: 操作步骤: 1 / 新建合成,时间2秒 2 / 圆形...

  • AE入门教程-ae制作加载动画

    Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,适用于从事设计和视频...

  • vue的动画特效

    一、Vue中的CSS动画原理transition标签 二、Vue中的JS动画与velocity.js 三、Vue中...

  • loading 文档

    小程序显示加载中 vue 组件显示加载中

  • 加载小动画

    在我们app开发中,经常要用到加载动画,写了个加载动画,封装在AXLoadingAnimationView类中,主...

  • 【七】loading组件

    关于专题【vue开发音乐App】 页面成功加载数据之前给用户展示一个loading动画(提示正在加载)可以增强用户...

网友评论

      本文标题:vue中加载AE动画

      本文链接:https://www.haomeiwen.com/subject/ckvlshtx.html