Vue3优质动画库推荐

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>

选型建议

• 复杂交互动画：优先选择GSAP，适合页面过渡、滚动动画等场景
• 高质量UI动效：使用Lottie，可从获取海量现成动画
• 轻量级声明式动画：尝试Motion Vue，适合快速实现组件级动画
• 性能敏感场景：避免同时使用多个动画库，优先选择原生CSS过渡或Vue内置<Transition>组件