Vite开发vue3.2中使用lottie动画

什么是lottie动画？

Lottie动画是一种跨平台的动画格式，可以在多种移动设备和Web浏览器中使用。它是由Airbnb开发的，旨在帮助开发人员轻松地将复杂的矢量动画添加到移动应用程序和Web页面中。

如何安装Lottie动画

npm i vue3-lottie@latest

挂载到vue实例

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App); 
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
appuse(Vue3Lottie, { name: 'Vue3Lottie' }).mount('#app')

在阿里巴巴iconfonthttps://www.iconfont.cn网站上，可以找到大量的Lottie动画素材。只需进入素材库，点击Lottie库，选择您喜欢的动画库并下载格式选择JSON格式到本地静态资源文件夹 例如：src > assets > lotties

使用Lottie动画非常简单，只需引入Lottie动画，然后在Vue组件中使用它即可。在lotties文件夹中，还需要创建一个src > assets > lotties > index.ts文件，作用是多个动画时的统一引入并输出。例如:

// index.ts
export { default as salesman } from './salesman.json'
export { default as management } from './management.json'
export { default as service } from './service.json'
export { default as programmer } from './programmer.json'

使用lottie动画：如index.vue

<template>
    <el-carousel indicator-position="none" height="500px">
                <el-carousel-item v-for="(item, index) in lottieArr" :key="item">
                    <Vue3Lottie :pauseOnHover="true" :animationData="lottieFn(index)" :height="300" :width="300" />
                </el-carousel-item>
    </el-carousel>
</template>
  
<script setup lang="ts">
import * as lotties from "@/assets/lotties/index" 

enum LottieIndex {
    Salesman,
    Service,
    Management,
    Programmer
}

const lottieArr = [lotties.salesman, lotties.service, lotties.management, lotties.programmer];

let lottieFn = (index: LottieIndex) => {
    return lottieArr[index];
};
</script>

总结

首先，我们引入从lotties文件夹中导出的Lottie动画。然后，在组件中，我们定义了一个lottieFn函数，该函数根据传递的索引值来选择Lottie动画。最后，我们在组件模板中使用Vue3Lottie组件将动画呈现出来，并将lottieFn函数作为animationData属性传递。

使用Lottie动画可以为您的移动应用程序和Web设计提供更具吸引力的体验，并且可以使应用程序或网页更加生动