当前位置：首页 > news >正文

Vue3优质动画库推荐

news 来源：原创 2025/6/20 17:03:45

1. GSAP (GreenSock Animation Platform)

特点：功能强大的专业动画库，支持复杂时间轴控制和高性能动画，适合精细交互效果。

安装：

npm install gsap

Vue3+TS使用示例：

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import gsap from 'gsap'const boxRef = ref<HTMLDivElement>(null)onMounted(() => {if (boxRef.value) {// 创建时间轴动画const tl = gsap.timeline({defaults: { duration: 1, ease: 'power2.inOut' }})tl.to(boxRef.value, {x: 200,rotation: 360,opacity: 0.8}).to(boxRef.value, {y: 100,scale: 1.5}, '-=0.5')}
})
</script><template><div ref="boxRef" class="box"></div>
</template><style scoped>
.box { width: 100px; height: 100px; background: #4A6FA5; }
</style>

2. Lottie (vue3-lottie)

特点：支持After Effects导出的高质量动画，通过JSON文件渲染，适合复杂图标和UI动效。

安装：

npm install vue3-lottie@latest --save

配置与使用：

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'createApp(App).use(Vue3Lottie).mount('#app')

<template><Vue3Lottie:animationData="animationData":width="200":height="200":loop="true"/>
</template><script setup lang="ts">
import animationData from '../assets/animations/loading.json'
</script>

3. Motion Vue

特点：专为Vue3设计的声明式动画库，支持手势驱动和状态过渡动画，API简洁直观。

安装：

npm install motion-vue

使用示例：

<template><Motion:animate="{ scale: isHovered ? 1.1 : 1, opacity: 1 }":transition="{ type: 'spring', stiffness: 300 }"@mouseenter="isHovered = true"@mouseleave="isHovered = false"><button class="btn">悬停动画</button></Motion>
</template><script setup lang="ts">
import { ref } from 'vue'
import { Motion } from 'motion-vue'const isHovered = ref(false)
</script>