vue中引入json动画

·  阅读 92

ps:我们经常会碰到复杂的动画,运用纯css3制作动画效果不理想,因为图片太多,canvas动画比较复杂,而且会失真,所以想起运用json文件进行动画;

1.安装lottie-web

lottie是一个跨平台的动画库,通过AE导出动画Json文件,然后用lottie解析这个Json文件,还原动画

npm install lottie-web
复制代码

2.引入lottie

可以在main.js里面引用,也可以在单独需要这个动画的界面引用;我是因为只有一个界面需要引入,所以就直接在当前页面引入的lottie-web;

import lottie from 'lottie-web' 
复制代码

3.制作动画

html,id为imgwrapper是承载json的容器;

 <div class="lottieMain">
      <div id="imgWrapper"></div>
 </div> 
复制代码

json文件,这里的p是图片位置;

"assets": [{
    "id": "image_0",
    "w": 26,
    "h": 26,
    "u": "",
    "p": "img_0.png",
    "e": 0
},
{
    "id": "image_1",
    "w": 472,
    "h": 299,
    "u": "",
    "p": "img_1.png",
    "e": 0
}]
复制代码

js文件,可以在mouted中写入这个动画;

let AstronautDefalut = require('./lottie/blindBox/tc1/data.json'); 
let AstronautJSON = reactive(JSON.parse(JSON.stringify(AstronautDefalut)));   //深拷贝json
AstronautJSON.assets.forEach(item=>{ //更改json里面的图片路径
  item.u="";
  if(item.w && item.h && !item.p.startsWith('data:image')){
    item.p = require(`./lottie/blindBox/tc1/${item.p}`);  //这里是因为图片如果不是放在根目录下,就要把图片单独引入;
  }
  return item;
})       
 let amin = lottie.loadAnimation({
    container: document.getElementById('imgWrapper'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    animationData: AstronautJSON
  })
  amin.addEventListener('complete', () => {
    //结束动画
    console.log("动画结束")
  })  
复制代码

lottie.loadAnimation属性:
container:需要渲染的DOM元素;
renderer:渲染方式,默认是svg,还有html和canvas
loop:是否循环
autoplay:是否自动播放
animationData:json动画,这个是必填;

分类:
前端
收藏成功!
已添加到「」, 点击更改