跳至主要內容

基础知识

望间2025年1月23日代码GSAP动画大约 7 分钟

创建动画

让 class 为 'box' 的 HTML 元素移动到 x 为 200 的位置（transform: translateX(200px)）。

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

Tween

Tween 其实是一种动画的类型，中文一般翻译叫做补间动画，就是我们常见的两个状态之间的变化的动画方式，中间的变化过程都是计算机计算出来的，比如我们常见的匀速、缓入缓出动画就是这类动画。

See the Pen by GreenSock on CodePen.

分析下面的语法

to-syntax
to-syntax
  • method: gsap 的方法，这里为 to;
  • target: 目标，这里为 .box;
  • variables: 对象数据，这里为 {x: 200}。

方法(method)

GSAP 有四种 Tween 的动画方式:

  • to(): 让元素从初始状态变化到目标状态；
  • from(): 让元素从目标状态变化到初始状态；
  • fromTo(): 需要自己定义两个状态的数据，然后从前一个变化到后一个；
  • set(): 直接设置成想要的状态，没有任何过度与动画效果。本质上就是 duration: 0 的 .to() 方法。
See the Pen by GreenSock on CodePen.

目标(target)

目标就是告诉 GSAP 要对哪个元素进行动画。

目标可以是 HTML 元素，也可以是 CSS 选择器，也可以是 DOM 对象，也可以是数组。

// 使用 class 或 id
gsap.to(".box", { x: 200 });

// css 选择器
gsap.to("section > .box", { x: 200 });

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

// DOM 对象数组
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");

gsap.to([square, circle], { x: 200 });

对象数据(variables)

这个对象包含着所有动画变化相关的信息。

可以设置任意的想要发生变化的属性和值，或者一些特殊的会影响动画过程的一些属性。

比如下面的例子:

gsap.to(target, {
  x: 200,
  rotation: 360,
  duration: 2,
});

GSAP 基本上可以说是什么都能变，这包括 CSS 属性、自定义对象属性，甚至 CSS 变量和复杂字符串。

最常见的动画属性是 transforms 和 opacity。

提示

如果可能，尽可能使用 transforms 和 opacity，而不是 top、left 或 margin 等布局属性。
因为它们不会影响布局，可以节约浏览器性能。

Transform 简化

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

GSAP 提供了转换的简写，上面的 transform 属性可以简化为下面的对象数据。

{ rotation: 360, x: 10, yPercent: 50 }

以下是速记转换和一些常用属性的列表:

GSAP 属性CSS作用
x: 100transform: translateX(100px)水平移动
y: 100transform: translateY(100px)垂直移动
xPercent: 50transform: translateX(50%)横向移动（元素宽度的百分比）
yPercent: 50transform: translateY(50%)垂直移动（元素高度的百分比）
scale: 2transform: scale(2)元素整体放大或缩小
scaleX: 2transform: scaleX(2)元素横向放大或缩小
scaleY: 2transform: scaleY(2)元素纵向放大或缩小
rotation: 90transform: rotate(90deg)旋转多少度
rotation: "1.25rad"transform: rotate(1.25rad)旋转多少弧度
skew: 30transform: skew(30deg)斜切变形
skewX: 30transform: skewX(30deg)横向斜切变形
skewY: "1.23rad"transform: skewY(1.23rad)纵向斜切变形
transformOrigin: "center 40%"transform-origin: center 40%设置变换的原点
opacity: 0opacity: 0调整元素的透明度
autoAlpha: 0opacity: 0; visibility: hidden同时调整透明度和可见性
duration: 1animation-duration: 1s动画持续时间
repeat: -1animation-iteration-count: infinite动画无限次重复
repeat: 2animation-iteration-count: 2动画重复次数
delay: 2animation-delay: 2s动画延迟开始时间
yoyo: trueanimation-direction: alternate动画来回播放
See the Pen by GreenSock on CodePen.

提示

默认情况下，GSAP 使用 px 和 deg 作为变化的默认单位，但是你也可以使用其他的单位，比如 vm，rad 或者通过 js 来计算的值以及一些相对的单位。

x: 200, // 直接传入数字的话默认就是 px 单位
x: "+=200" // 在元素当前基础上再移动 200px
x: '40vw', // 传入其他的 CSS 中的单位
x: () => window.innerWidth / 2, // 也可以使用函数值来进行计算

rotation: 360, // 直接传入数字的话默认就是 deg 单位
rotation: "1.25rad", // 也可以使用 rad 单位

CSS 属性

除了上面提到的 transform 属性外，GSAP 也支持大部分的 CSS 属性，比如 color、backgroundColor、borderRadius 等。

提示

css 属性如果要使用简写，比如 border-radius 或者 background-color，需要写成驼峰命名法，比如 borderRadius 和 backgroundColor。

注意

尽管 GSAP 几乎可以对每个 CSS 属性进行动画处理，但我们建议尽可能坚持使用 transform 和 opacity。
像 filter 和 boxShadow 这样的属性是 CPU 密集型的，浏览器渲染起来会占用大量 CPU。

SVG 属性

GSAP 也支持 SVG 属性，比如 fill、stroke、strokeWidth、opacity 等。

如果需要设置 SVG 标签属性的样式变化，需要在 attr 对象中进行修改。

See the Pen by GreenSock on CodePen.

对象属性

除了 CSS 属性外，GSAP 还支持自定义对象的属性变化。

let obj = { name: "张三", age: 18 };

gsap.to(obj, { name: "李四", age: 20, onUpdate: () => console.log(obj) });

Canves 属性

GSAP 也支持 Canvas 元素的属性变化，比如 x、y、rotation 等。

我们让保存在 position 对象中的 x 和 y 的值发生变化，然后通过动画刷新的函数来更新 Canves 中绘制的元素的数据，从而达到让这种 Canves 绘制的元素也能被 GSAP 驱动。

See the Pen by GreenSock on CodePen.

特殊属性

tween 动画还有一些特殊的属性，比如 stagger、repeat 等。

下面是一些常见的特殊属性:

属性描述
duration动画持续时间（秒），默认值：0.5
delay动画开始前的延迟时间（秒）
repeat动画应重复的次数
yoyo如果为 true，每次重复时动画将反向运行（像悠悠球一样），默认值：false
stagger如果提供了多个目标，每个目标动画开始之间的时间间隔（秒）
ease控制动画期间的变化速率，默认值："power1.out"
onComplete动画完成时执行的回调函数

重复和交替运动

GSAP 提供了两种重复和交替运动，分别是 repeat 和 yoyo。

repeat 属性可以让动画重复多次，而 yoyo 属性则可以让动画在每次重复时反向运行。

See the Pen by GreenSock on CodePen.

提示

repeat: 0：表示动画不重复。
repeat: -1：表示动画无限重复。\

延迟(delay)

可以通过 delay 让动画的开始时间延长一定的时间（秒），也可以使用 repeatDelay 来设置每次重复动画前的延迟时间（秒）。

gsap.to(".box", {
  rotation: 360,
  duration: 1,
  delay: 1,
});
See the Pen by GreenSock on CodePen.

错开时间(stagger)

简单交错

通过 stagger 属性可以让多个动画错开一定的时间，比如 stagger: 0.1 表示每个动画之间的时间间隔为 0.1 秒。

gsap.to(".box", {
  y: 100,
  stagger: 0.1, // 每个元素之间的时间间隔为0.1秒
});
See the Pen by GreenSock on CodePen.

网格交错

还可以在网格中的项目使用 stagger ，只需告诉 GSAP 您的网格有多少列和行就可以了！

gsap.to('.box', {
    y: 100,
    stagger: {
        each: 0.1,
        from: 'center',
        grid: 'auto',
        ease: 'power2.inOut',
        repeat: -1
    }
});
```

<CodePen
user="GreenSock"
slug-hash="rNVVGOa"
:default-tab="['js','result']"
theme="dark"
status="autoload"
/>
属性类型描述
amountNumber总时间（秒），该时间将在所有交错动画之间分配。
eachNumber每个子动画启动时间之间的时间（秒）
fromString | Integer | Array交错动画开始的位置。用来来指定从哪个元素开始，例如 from:4 表示从第 5 个元素开始。还可以使用以下字符串值："start"、"center"、"edges"、"random"、"end"。
默认值：0。
gridArray | "auto"如果元素在视觉上以网格形式排列，请指定行数和列数（如 grid:[9,15]）。或者使用 grid:"auto" 让 GSAP 自动计算行数和列数。
axisstring如果定义了网格，交错动画基于每个元素在 x 和 y 轴上与 "from" 值的总距离，但可以选择只关注一个轴（"x" 或 "y"）。
easeString | Function分布动画启动时间的缓动函数。默认值："none"。

函数

stagger 属性还支持使用函数来动态计算每个动画的开始时间。

gsap.to(".box", {
  y: 100,
  stagger: function (index, target, list) {
    return index * 0.1;
  },
});
  • index: [Integer] - 当前索引值。
  • target: [Object] - 当前目标对象。
  • list: [Array | NodeList] - 目标对象数组。
上次编辑于: 2025/1/24 10:14:15
贡献者: ViewRoom