使用lottie动画（第三方库lottie-web）

最新推荐文章于 2025-06-23 17:33:00 发布

柳职贾克斯

最新推荐文章于 2025-06-23 17:33:00 发布

阅读量520

点赞数 2

CC 4.0 BY-SA版权

文章标签：动画前端

本文链接：https://blog.csdn.net/qq_45083152/article/details/144825624

npm链接

1.安装第三方库 lottie-web (使用构建工具)

npm i lottie-web

使用vue导入lottie对象

import lottie from 'lottie-web'

HTML直接引入js即可

<script src="js/lottie.js" type="text/javascript"></script>

2.使用 lottie.loadAnimation() 它将一个对象作为一个唯一的参数

lottie.loadAnimation({
  container: element, //播放动画的HTMLElement
  renderer: 'svg',
  loop: true, // 持续
  autoplay: true, // 自动播放
  path: 'data.json' // 动画json文件路径
});

这里只有VUE3的例子，实际原生JavaScript也差不多

<template>
<div
     ref="lottieContainer"
     style="width: 307px; height: 70px; position: absolute; bottom: -35px; z-index: -1"></div>
</template>


<script setup lang="ts">
import {onMounted,ref} from 'vue'
import lottie from 'lottie-web'

const lottieContainer = ref<HTMLElement | null>(null)

onMounted(()=>{

 //lottie配置对象
  const animationInstance = lottie.loadAnimation({
    container: lottieContainer.value as HTMLElement,
    renderer: 'svg',
    loop: true,
    autoplay: false,
    animationData: animationData, // 使用加载的动画数据
  })

lottie实例化对象有stop, play、pause等方法

})
</script>