Vue 3 + GSAP：解锁高性能动画的神奇组合

在一个偶然的场景使用了 GSAP（GreenSock Animation Platform），感觉挺好玩的，在此浅浅记录一下。

GSAP 是一个功能强大的 JS 动画库，常用于创建高性能、流畅的动画。它不仅支持基本的动画，还提供了时间轴控制、缓动效果等高级功能。将其与 Vue 3 结合，可以轻松给 Vue 组件添加复杂的动画效果。

1. 安装 GSAP

首先，需要在 Vue 3 项目中安装 GSAP。

npm install gsap

注意📢，在 VSCode 中安装，如果当前项目的终端下载失败的话，那就使用全局终端下载执行。  

2. 在 Vue 3 中使用 GSAP

2.1 基本动画

在 Vue 3 组件中，可以通过 onMounted 钩子进行元素的动画初始化。

举个 🌰：对一个简单的方块元素，应用移动和缩放动画。

<template>
  <div ref="box" class="box"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      gsap.to(box.value, { x: 300, scale: 1.5, duration: 5 });
    });
    return { box };
  },
};
</script>
<style>
.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  border-radius: 4px;
}
</style>

在这个例子中，gsap.to 方法将 box 元素移动 300px 并放大了1.5 倍，动画持续 5 秒。

2.2 结合 Vue 的生命周期

在 Vue 3 中，GSAP 可以与组件的生命周期钩子紧密结合。

举个 🌰：在 onMounted 钩子中初始化动画，在 onBeforeUnmount 钩子中清理动画。

<template>
  <div ref="box" class="box"></div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    let animation = null;
    onMounted(() => {
      animation = gsap.to(box.value, { x: 300, rotation: 360, duration: 2 });
    });
    onBeforeUnmount(() => {
      if (animation) {
        animation.kill(); // 在组件销毁前终止动画
      }
    });
    return { box };
  },
};
</script>

效果如下：小方块向右移动的同时旋转 360 度，整个过程持续 2 秒。 

 2.3 使用时间轴动画

GSAP 的时间轴功能，允许我们将多个动画组合在一起，并精确控制它们的执行顺序。时间轴是动画的一个容器，可以更加有条理的组织动画。

举个 🌰

<template>
  <div class="container">
    <div ref="box1" class="box"></div>
    <div ref="box2" class="box"></div>
    <div ref="box3" class="box"></div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';

export default {
  setup() {
    const box1 = ref(null);
    const box2 = ref(null);
    const box3 = ref(null);
    onMounted(() => {
      const timeline = gsap.timeline({ repeat: -1, yoyo: true });
      timeline
        .to(box1.value, { x: 300, duration: 1 })
        .to(box2.value, { x: 300, duration: 1 })
        .to(box3.value, { x: 300, duration: 1 });
    });
    return { box1, box2, box3 };
  },
};
</script>

解释一下属性：

1、repeat：-1，表示时间线将无限循环执行。如果设置 repeat：2，表示动画将重复 2 次（注意📢：重复 2 次，一共执行 3 次）。

2、yoyo：true：表示动画完成一遍后会反向播放（从结束状态回到初始状态），再继续循环。这种效果通常用于实现来回摆动或反复变化的动画。

在这个例子中，三个小方块会依次向右移动 300px，动画完成后，会反向移动到初始位置，并且该过程无限循环。

也可以让某一个小方块额外进行某一个操作，比如说，第一个方块移动完成后，旋转 360 度，第二个小方块再继续执行。

import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';

export default {
  setup() {
    const box1 = ref(null);
    const box2 = ref(null);
    const box3 = ref(null);
    onMounted(() => {
      const timeline = gsap.timeline({ repeat: -1, yoyo: true });
      timeline
        .to(box1.value, { x: 300, duration: 1 })
        .to(box1.value, { rotation: 360, duration: 1 })
        .to(box2.value, { x: 300, duration: 1 })
        .to(box3.value, { x: 300, duration: 1 });
    });
    return { box1, box2, box3 };
  },
};

2.4 动态控制动画

GSAP 允许我们在运行时，动态控制动画，比如暂停、恢复、反转等。可以通过引用动画实例进行控制。

举个 🌰

<template>
  <div ref="box" class="box"></div>
  <button @click="toggleAnimation" class="btn">Toggle Animation</button>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    let animation = null;
    let isPaused = false;
    onMounted(() => {
      animation = gsap.to(box.value, { x: 300, rotation: 360, duration: 2 });
    });
    const toggleAnimation = () => {
      if (isPaused) {
        animation.resume();
      } else {
        animation.pause();
      }
      isPaused = !isPaused;
    };
    return { box, toggleAnimation };
  },
};
</script>

点击按钮可以暂停和恢复动画，这个功能对于用户交互时控制动画非常有帮助。

3. 结合 Vue 3 的 Transition 组件

Vue 3 自带的 Transition 组件可以与 GSAP 结合使用，它能够在元素进入和离开时应用动画效果。

举个 🌰

<template>
  <button @click="show = !show">Toggle Box</button>
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
import { ref } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const show = ref(false);
    // 在元素进入动画开始之前执行
    const beforeEnter = (el) => {
      // 设置元素的初始状态，透明度为 0，y 轴位置上移 100px，这样在动画开始前，元素是不可见并且在最终位置的上方
      gsap.set(el, { opacity: 0, y: -100 });
    };
    // 在元素进入时执行
    const enter = (el, done) => {
      // onComplete: done，表示动画已经结束
      gsap.to(el, { opacity: 1, y: 0, duration: 0.5, onComplete: done });
    };
    // 在元素离开时执行
    const leave = (el, done) => {
      gsap.to(el, { opacity: 0, y: 100, duration: 0.5, onComplete: done });
    };
    return { show, beforeEnter, enter, leave };
  },
};
</script>

在这个示例中，beforeEnter、enter 和 leave 钩子用于在元素进入和离开时应用 GSAP 动画，Vue 3 的 Transition 组件用于包裹需要动画效果的元素。

4. 总结

GSAP 在 Vue 3 中的使用非常灵活且强大。通过与 Vue 3 的组合，可以在实际应用中实现复杂且高效的动画效果。

若是大家感兴趣的话，可以动手复制代码随意改动尝试一下，非常好玩！