首页 技术设计 前端 threejs

为什么 选择 GSAP

  • GSAP 是一个老牌框架，但也在持续更新，兼容性很好
  • 与框架无关，比如 framer-motion ， react spring 只能用于 react ；这里有多个框架的 starter
  • 心智负担低，易于上手，它的核心理念就是以时间轴（ Timeline ）为维度的补间动画（ Tween ），在文章后面会聊一下，然后还有各种强大的插件，如 scrollTrigger
  • 经过时间的沉淀，在 react 中使用提供了简便的 react api，比如自带动画清理的 useGSAP

# GSAP 简介

GSAP 是一个非常流行的 js 动画库，被广泛用于创建跨浏览器和跨平台的高性能动画。它的主要特点包括：

  • 提供丰富的属性和方法，可用于创建复杂的动画效果。
  • 兼容各种浏览器和设备，确保动画在不同环境下保持一致性。
  • 提供流畅的动画效果，避免了常见的卡顿和闪烁问题。
  • 具有强大的可定制性，可以根据项目需求进行个性化的动画设计。

# GSAP 的语法

GSAP 语法由三部分组成，分别是方法、目标和变量，其调用格式为 gsap.to( “.box” ,{ x:200 }) 各部分含义如下图所示：

  • to : 方法
  • .box ：目标
  • { x:200 } ： 变量

# 一、方法

GSAP 提供了四种类型的 Tween 方法，“Tween”（补间动画）是 GSAP 的核心概念。Tween 是指在一段时间内逐渐改变元素的属性值，从而实现平滑的动画效果。

# 1.gsap.to()

这是 GSAP 中最常用的方法之一，用于从当前属性值过渡到目标属性值。可以指定动画的持续时间、延迟时间、缓动函数等参数。

gsap.to('.box', {
        x: 200,
        y: 100,
        duration: 1,
        repeat: 2,
        yoyo: true,
        delay: 0.5,
        ease: 'power1.out',
 });

# 2.gsap.from()

与 gsap.to () 类似，但是它从指定的属性值开始过渡到当前属性值。

gsap.from('.box', {
        opacity: 0,
        duration: 1,
        delay: 0.5,
        ease: 'power2.inOut',
  });

# 3.gsap.set()

用于将元素的属性值设置为指定的值，没有动画效果。

# 4. gsap.fromTo()

结合 gsap.from() 和 gsap.to() 的功能，可以同时设置起始值和目标值，实现更复杂的动画效果。

gsap.fromTo('.box',
        {
          opacity: 0,
          x: -100,
        },
        {
          opacity: 1,
          x: 100,
          duration: 1,
          delay: 0.5,
          ease: 'power3.inOut',
        }
);

# 二、目标

目标是我们想要赋予动画效果的元素，在使用 GSAP 动画库时，我们需要指定那个元素要实现动画效果；在 GSAP 的内部，它封装了 document.querySelectorAll() 方法，因此我们可以使用类似 ".class" 和 "#id" 选择器来指定目标。也可以传入一个变量，甚至是一个数组来指定目标。

# 1. 使用类或 ID 选择器指定目标

gsap.to(".box", { x: 200 });

# 2. 使用复杂的 css 选择器指定目标

gsap.to("section > .box", { x: 200 });

# 3. 使用变量指定目标

let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

# 4. 使用数组指定目标

let square = document.querySelector(".square");
let circle = document.querySelector(".circle"); 
gsap.to([square, circle], { x: 200 })

# 三、变量

变量于存储和操作动画的属性值，它是一个对象，包含了有关动画的所有信息；包括 transform 、 repeat 、 yoyo 、 delay 、 ease 、 stagger 等各种动画属性；

# 1.transform (变换)

在 CSS 中，如果我们需要实现 transform 效果，需要这样写：

transform: rotate(360deg) translateX(10px) translateY(50%);

但是，在 GSAP 中使用 transform 非常简单，上面的 CSS 代码在 GSAP 中我们只需要这样写就可以了

{ rotation: 360, x: 10, yPercent: 50 }
GSAPCSS说明
x:100transform: translateX(100px)水平移动（以像素或 SVG 单位）
y:100transform: translateY(100px)垂直移动（以像素或 SVG 单位）
xPercent: -50transform: translateX(-50%)水平移动（元素宽度的百分比）
yPercent: -50transform: translateY(-50%)垂直移动（元素宽度的百分比）
rotation: 360transform:rotate(360deg)旋转（角度）
scale: 2transform:scale(2, 2)缩放
transformOrigin: “0% 100%”transform-origin: 0% 100%;平移的中心点，这将围绕左下角旋转

示例：

gsap.to(box.value, {
      duration: 1,
      x: 200,
      y: 200,
      opacity: 0.5,
      rotation: 180, // 旋转角度 
    });

上面的代码使 box 元素在 x 方向移动 200px，y 方向移动 200px，同时改变透明度为 0.5，旋转 180 度・。

# 2. 其它属性

属性说明
duration动画的持续时间（秒）默认值：0.5
delay动画开始之前的延迟时间（秒）
repeat动画重复的次数
yoyo如果为 true，则在每次重复时，Tween 将以相反的方向运行（类似于摇摆效果）。默认值：false
stagger每个目标动画之间的时间间隔（以秒为单位）（如果提供了多个目标）
ease控制动画过程中的变化速率，默认值为 "power1.out"
onComplete当动画完成时运行的函数。

示例

gsap.to(".box", { 
  rotation: 360,
  x: '100vw',
  xPercent: -100, 
  duration: 2,  
  repeat: 2, 
  yoyo: true,
});

# vue 中使用 GSAP

# 安装 GSAP

要在 vue 中使用 GSAP，我们需要先安装 GSAP 包

npm install gsap
# 或者
yarn add gsap

# 引用 GSAP

使用 import 引入 GSAP

import { gsap } from 'gsap'

# 使用 GSAP

1. 首先在模板中定义一个 div

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

2.style 中设置样式

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

3. 在 script 中调用 GSAP 方法

gsap.to('.box', { 
      x: 200,
      y: 200,
      opacity: 0.5,
      rotation: 180, // 旋转角度 
});

运行代码，刷新浏览器，可以看到动画已经实现了