不要在手写过度动画了，用上GSAP！（一）初步介绍

在 Vue 项目中使用 GSAP 动画

GSAP（GreenSock Animation Platform）是一个强大的 JavaScript 动画库，广泛用于实现复杂的动画效果。在 Vue 项目中结合 GSAP，可以轻松地创建高性能、灵活的动画效果。本文将介绍如何在 Vue 中使用 GSAP，并通过一个简单的示例展示其基本用法。

---

安装 GSAP

首先，需要在 Vue 项目中安装 GSAP。使用以下命令通过 npm 或 yarn 安装：

npm install gsap
# 或者
yarn add gsap

---

基本使用

在 Vue 组件中使用 GSAP，可以通过以下步骤实现：

1. 导入 GSAP：在组件中引入 gsap。
2. 引用 DOM 元素：使用 ref 或原生 DOM 选择器来定位需要动画的元素。
3. 调用 GSAP 的方法：使用 gsap.to、gsap.from 等方法应用动画。

下面是一个简单示例：

<template>
  <div class="app">
    <button @click="startAnimation">开始动画</button>
    <div class="box" ref="boxRef"></div>
    <div class="box1" ref="boxRef1"></div>
  </div>
</template>

<script>
import { ref } from 'vue';
import gsap from 'gsap';

export default {
  setup() {
    const boxRef = ref(null);

    const startAnimation = () => {
      //boxRef.value 或者 '.box', 甚至可以写多个选择器['.box', '.box1']
      gsap.to(boxRef.value, {
        duration: 2,
        x: 300,
        rotation: 360,
        scale: 1.5,
        ease: 'power2.inOut',
      });
    };

    return {
      boxRef,
      startAnimation,
    };
  },
};
</script>

<style>
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin-top: 20px;
}
</style>

---

分析示例

1. 绑定 ref：通过 ref 引用动画目标元素，便于使用。
2. 动画方法：调用 gsap.to 方法设置目标动画，包括位置（x）、旋转（rotation）、缩放（scale）等属性。
3. 时间和缓动效果：设置动画时长（duration）和缓动效果（ease）来控制动画的流畅性。

---

高级用法

GSAP 提供了丰富的功能，例如时间轴（Timeline）、滚动触发动画（ScrollTrigger）等。

时间轴动画

使用 gsap.timeline 可以串联多个动画：

const timeline = gsap.timeline();

timeline
  .to(boxRef.value, { x: 300, duration: 1 })
  .to(boxRef.value, { rotation: 360, duration: 1 })
  .to(boxRef.value, { scale: 1.5, duration: 1 });

滚动触发动画

结合 ScrollTrigger 插件，可以实现滚动触发的动画效果：

import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

gsap.to(boxRef.value, {
  x: 300,
  scrollTrigger: {
    trigger: boxRef.value,
    start: 'top center',
    end: 'bottom center',
    scrub: true,
  },
});

复杂用法

let tl = gsap.timeline({
    // 我们可以将 ScrollTrigger 添加到整个时间轴中！
    scrollTrigger: {
        trigger: '.container', // 触发的元素是 .container
        pin: true, // 在 ScrollTrigger 激活时固定触发元素
        start: 'top top', // 当触发元素的顶部到达视口的顶部时开始
        end: '+=500', // 在开始位置之后滚动 500px 后结束
        scrub: 1, // 平滑滚动过渡，需要 1 秒跟上滚动条
        snap: {
            snapTo: 'labels', // 将滚动定位到时间轴中的最近标签
            duration: { min: 0.2, max: 3 }, // 滚动动画的持续时间至少为 0.2 秒，最多为 3 秒（根据速度决定）
            delay: 0.2, // 从最后一次滚动事件开始，等待 0.2 秒再执行滚动动画
            ease: 'power1.inOut' // 滚动动画的缓动效果（默认为 "power3"）
        }
    }
});

// 向时间轴添加动画和标签
tl.addLabel('start') // 添加标签 'start'
    .from('.box p', { scale: 0.3, rotation: 45, autoAlpha: 0 }) // 从缩放 0.3、旋转 45 度和透明度为 0 开始动画
    .addLabel('color') // 添加标签 'color'
    .from('.box', { backgroundColor: '#28a92b' }) // 从背景色为绿色 (#28a92b) 开始动画
    .addLabel('spin') // 添加标签 'spin'
    .to('.box', { rotation: 360 }) // 将元素旋转 360 度
    .addLabel('end'); // 添加标签 'end'

---

注意事项

性能优化：GSAP 性能非常高，但在大量动画时，仍需注意优化，例如使用 GPU 加速属性（如 transform），尽量避免使用无GPU加速属性。

生命周期钩子：在 Vue 中使用 GSAP 时，需确保动画操作发生在 DOM 元素挂载后（如 onMounted 钩子中）。

---

最后

GSAP 提供了强大的动画能力，与 Vue 的结合非常简单。本文只是简单介绍。通过GSAP，您应该可以在 Vue 项目中轻松地实现复杂的动画效果。如果需要更高级的动画，建议参考 GSAP 官方文档 以获取更多信息。