动画帧

  在项目中遇到ui给的json文件实现动画效果的时候,需要前端去处理这些json文件,没有接触过的我此时已经一头雾水,直接百度,百般研究,看到了希望-- lottie-web

  1.安装lottie-web

    npm i lottie-web -D

  2.在用到的文件夹中引入插件

    import lottie from "lottie-web"
  3.引入ui给的动画,(直接使用json文件没生效,换一个方式实现)
   import {animation1,animation2} from  @/assets/animtion.js
把json放到一个js文件中,然后使用export 导出  

export const animationData1 = {ui给的json文件粘过来}

  4.直接开用

  lottie.loadAnimation( {
          container: el,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData:animation1
    })

  5.看官网

  http://airbnb.io/lottie/#/web

posted @ 2023-04-18 09:57  苑超  阅读(18)  评论(0编辑  收藏  举报