前端 使用GSAP

Vue3 使用GSAP制作动画

使用Timeline

---

---

前言

官网：https://gsap.com

GSAP 与框架无关，并且非常灵活 - 使用简单可以为任何对象的任何属性制作动画。提供Tween 、TimeLine等不同方法来制作不同类型动画

---

预览

简单的Demo，不同动画可以使用不同API来完成

一、安装

1.npm安装

npm install gsap

2.Yarn安装

yarn add gsap

3.CDN安装

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

二、详细代码及解释

代码如下（示例）：

<script>  
import { onMounted, onUnmounted, ref } from 'vue';  
import { gsap } from 'gsap'; // 假设这是从 GSAP 导入的正确方式，通常可能是 import gsap from 'gsap';  
  
export default {  
  setup() {  
    // 创建一个响应式引用来存储 DOM 元素  
    const main = ref(null);  
    // 声明一个变量来存储 GSAP 时间线  
    let tl;  
  
    // 定义一个函数来切换时间线的播放方向  
    function toggleTimeline() {  
      // 如果时间线存在  
      if (tl) {  
        // 切换时间线的播放方向  
        tl.reversed(!tl.reversed());  
        // 如果时间线当前不是活动的（即没有播放或暂停），则重启它  
        if (!tl.isActive()) {  
          tl.restart();  
        }  
      }  
    }  
  
    // 组件挂载时执行  
    onMounted(() => {  
      // 将具有 .box 类的 DOM 元素转换为数组  
      const boxes = gsap.utils.toArray('.box');  
      // 创建一个新的时间线  
      tl = gsap  
        .timeline()  
        // 依次对 boxes 数组中的每个元素应用动画  
        .to(boxes[0], { x: 40 }, '<') // 第一个元素向右移动 40px  
        .to(boxes[1], { x: -40 }, '<') // 第二个元素向左移动 40px  
        .to(boxes[2], { x: 40 }, '<') // 第三个元素向右移动 40px  
        .reverse(); // 立即反转时间线，但实际上由于没有调用 play()，这不会影响初始行为  
  
      // 注意：上面的 reverse() 调用实际上在没有调用 play() 的情况下不会立即产生效果  
      // 如果想要在组件挂载后立即播放动画，需要调用 tl.play()  
  
      // 假设您希望立即播放动画，可以取消下面这行代码的注释  
      // tl.play();  
    });  
  
    // 组件卸载时执行  
    onUnmounted(() => {  
      // 如果时间线存在，则停止并清理它  
      if (tl) {  
        tl.kill(); // 这会停止时间线的所有动画并清理所有相关资源  
      }  
    });  
  
    // 返回给模板的响应式数据和函数  
    return { toggleTimeline, main };  
  },  
};  
</script>  
  
<template>  
  <!-- 将 main 引用绑定到 <main> 元素上 -->  
  <main ref="main">  
    <!-- ... 其他模板内容 ... -->  
    <!-- 按钮用于触发 toggleTimeline 函数 -->  
    <button @click="toggleTimeline">Toggle Timeline</button>  
    <!-- ... 其他盒子元素，具有 .box 类 ... -->  
  </main>  
</template>

总结

想要动画更加的炫酷，需要对GSAP有更深的了解，并且GSAP是永久免费的。🤞🤞🤞🤞