大屏动画效果-----Lottie

半糖11222024-08-14 21:05

ui：突然给前端扔了一个文件，说是大屏的动画效果

菜鸟（前端）：？？？，这动画文件怎么弄？？

下面来解决这个问题

这种方式，是需要使用一个插件Lottie

Web端使用Lottie渲染AE导出的json动画-lottie-web-demo

安装

javascript 复制代码

npm i lottie-web

使用

javascript 复制代码

import lottie from 'lottie-web'
import ammNoticeData from '@/assets/demo/data.json'

mounted() {
    this.initLottieAnimation()
  },
methods:{
    initLottieAnimation(){
      lottie.loadAnimation({
        container: document.getElementById('id'),
        animationData: ammNoticeData, // 动画 JSON 数据
        renderer: 'svg', // 使用 SVG 渲染器
        loop: true, // 循环播放
        autoplay: true, // 自动播放
      });
    }
}

注意：

看下ui给的动画文件都有什么

这个文件中，需要将images文件拷贝到public文件夹下面（例如，public/demo/images），然后修改data.json里面的内容，将data.json里面图片的路径修改成/demo/images