vue3通过lottie-web插件使用json动画

最新推荐文章于 2024-07-25 22:56:32 发布

直上九天揽星辰

最新推荐文章于 2024-07-25 22:56:32 发布

阅读量1.1k

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_39409541/article/details/126079790

版权

使用lottie-web插件来实现json动画

安装：yarn add lottie-web

在utils目录（自己创建的）下，创建common.ts（或者common.js），内容如下：

import lottie from 'lottie-web'

export const jsonAnimation = (dom: string = '', jsonFile: any) => {
  lottie.loadAnimation({
    container: document.querySelector(dom) as Element,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: jsonFile
  })
}

container：表示要挂载的dom元素

loop：表示循环

autoplay：字如其意，自动播放

animationData：使用的json文件

使用起来就简单了

<script setup lang="ts">
import { onMounted } from 'vue'
import btnJson from '@/assets/animation/login-btn.json'
import { jsonAnimation } from '@/utils/common'

const onLogin = () => {}

onMounted(() => {
  jsonAnimation('#login-btn', btnJson)
})
</script>

<template>
  <div class="login">
    <div id="login-btn" class="login-btn" @click="onLogin"></div>
  </div>
</template>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-btn {
    width: 228px;
    height: 50px;
    cursor: pointer;
  }
}
</style>