编辑“︁Vue.js动画库集成”︁（章节）

= Vue.js动画库集成 =

Vue.js提供了内置的过渡与动画系统（通过`<transition>`和`<transition-group>`组件），但在实际开发中，开发者可能需要更复杂的动画效果或更简单的API。这时，集成第三方动画库（如GSAP、Anime.js、Motion One等）可以显著提升开发效率和动画表现力。本章将详细介绍如何在Vue.js项目中集成这些动画库。

== 介绍 ==
Vue.js动画库集成是指将第三方JavaScript动画库与Vue的响应式系统和组件生命周期结合使用的过程。这些库通常提供以下优势：
* 更丰富的动画效果（如物理引擎、复杂时间轴）
* 更精细的性能控制（如硬件加速、帧率优化）
* 跨浏览器一致性
* 简化的动画编排API

== 主流动画库对比 ==
以下是Vue.js生态中常用的动画库对比：

{| class="wikitable"
|+ 动画库特性对比
! 库名称 !! 特点 !! Vue集成难度 !! 适用场景
|-
| [[GSAP]] || 专业级动画、时间轴控制 || 中等 || 复杂交互、游戏
|-
| [[Anime.js]] || 轻量级、简单API || 低 || 基础动画
|-
| [[Motion One]] || 新兴库、CSS动画优化 || 低 || 现代Web应用
|-
| [[Popmotion]] || 函数式编程风格 || 高 || 创意动画
|}

== GSAP集成示例 ==
GSAP（GreenSock Animation Platform）是业界领先的动画库，以下是其在Vue组件中的基本集成方法：

<syntaxhighlight lang="javascript">
// 安装GSAP
npm install gsap

// 在Vue组件中使用
<script setup>
import { ref, onMounted } from 'vue'
import { gsap } from 'gsap'

const box = ref(null)

onMounted(() => {
  gsap.to(box.value, {
    x: 100,
    rotation: 360,
    duration: 2
  })
})
</script>

<template>
  <div ref="box" class="box"></div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
}
</style>
</syntaxhighlight>

'''输出效果'''：绿色方块将在2秒内向右移动100像素并旋转360度。

== 动画生命周期管理 ==
当集成动画库时，需要特别注意Vue组件的生命周期：

<mermaid>
graph TD
    A[组件挂载] --> B[DOM渲染完成]
    B --> C[初始化动画]
    D[组件更新] --> E[更新动画]
    F[组件卸载] --> G[清理动画]
</mermaid>

最佳实践是在`onMounted`或`onUpdated`钩子中初始化动画，在`onBeforeUnmount`中清理资源：

<syntaxhighlight lang="javascript">
import { onMounted, onBeforeUnmount } from 'vue'
import { gsap } from 'gsap'

let ctx

onMounted(() => {
  ctx = gsap.context(() => {
    // 所有动画在此创建
  }, componentRef) // componentRef是模板根元素
})

onBeforeUnmount(() => {
  ctx.revert() // 自动清理所有动画
})
</syntaxhighlight>

== 实际案例：电商产品卡片 ==
以下是一个结合Vue和GSAP实现的商品悬停动画：

<syntaxhighlight lang="javascript">
<script setup>
import { ref } from 'vue'
import { gsap } from 'gsap'

const card = ref(null)

function onHover() {
  gsap.to(card.value, {
    y: -10,
    boxShadow: '0 10px 20px rgba(0,0,0,0.1)',
    duration: 0.3
  })
}

function onLeave() {
  gsap.to(card.value, {
    y: 0,
    boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
    duration: 0.3
  })
}
</script>

<template>
  <div 
    ref="card"
    class="product-card"
    @mouseenter="onHover"
    @mouseleave="onLeave"
  >
    <!-- 产品内容 -->
  </div>
</template>
</syntaxhighlight>

== 性能优化 ==
当使用动画库时，需注意以下性能要点：
* 使用`will-change`CSS属性提示浏览器：<code>will-change: transform, opacity;</code>
* 对高频动画使用`requestAnimationFrame`
* 避免同时激活过多动画（可使用<math>n \leq 5</math>作为经验值）
* 使用GSAP的`quickTo()`代替频繁创建新动画

== 进阶技巧：自定义指令 ==
对于需要重复使用的动画，可以创建Vue自定义指令：

<syntaxhighlight lang="javascript">
// 注册全局动画指令
app.directive('bounce', {
  mounted(el) {
    el.style.transform = 'scale(1)'
    el.addEventListener('click', () => {
      gsap.to(el, {
        scale: 1.2,
        yoyo: true,
        repeat: 1,
        duration: 0.5
      })
    })
  }
})

// 使用方式
<button v-bounce>点击有反馈</button>
</syntaxhighlight>

== 总结 ==
Vue.js动画库集成可以突破内置过渡系统的限制，通过合理选择库和优化实现，开发者可以：
* 创建更专业的动画效果
* 保持代码可维护性
* 确保性能最优
建议初学者从Anime.js开始，逐步过渡到GSAP等更强大的库。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js过渡与动画]]