CSSPlugin:
GSAP 可以使用 CSSPlugin 动画化几乎所有与 DOM 元素相关的 CSS 属性，包括宽度、高度、边距、填充、顶部、左侧等常见属性，以及更有趣的属性，如变换（旋转、scaleX、scaleY、skewX、skewY、x、y、rotationX 和 rotationY）、颜色、不透明度等。 注意：一个常见的错误是忘记使用属性的驼峰表示法，所以你应该使用 "fontSize" 而不是 "font-size"，"backgroundColor" 而不是 "background-color"。
2D Transforms
gsap.to(element, {
duration: 2,
rotation: 30,
scaleX: 0.8
});
3D Transforms
先看一下CSS 3D transforms
Perspective
激活3D空间，一个元素需要Perspective。这可以通过两种方式实现。
// 第一种，使用transfrom属性perspective()是一个函数。
// 在这个例子中，元素的透视被设置为400px。这将创建一个3D空间，使得元素的变换具有深度感。
.element {
transform: perspective(400px);
}
// 第二种是使用Perspective属性。
.element {
/* perspective property */
perspective: 400px;
}
以上这两种方法产生相同的视觉效果。
以上例子是给单个元素添加3d效果，当有多个元素时，这样做透视效果就会被破坏，因为每个元素都有自己的己的透视，自己的消失点。为了解决这个问题，在父元素上使用透视属性，这样每个子元素都可以共享相同的3D空间。
.parent {
// 透视值决定了3D效果的强度。可以将其视为观察者到物体的距离。值越大，距离越远，视觉效果越不明显。
perspective: 400px;
}
.child {
transform: rotateY(45deg);
}
// 默认情况下，3D空间的消失点位于中心。可以使用perspective-origin属性更改消失点的位置。
perspective-origin: 25% 75%;
3D transform functions
和2D一样，使用transform属性，多了一个维度
translate3d( tx, ty, tz )scale3d( sx, sy, sz )rotate3d( rx, ry, rz, angle )
// 将透视应用于父元素（容器），以使透视应用于所有子元素（通常最好）
gsap.set(container, {perspective: 500});
//或者使用 "transformPerspective"将透视应用到单个元素
gsap.set(element, {transformPerspective: 500});
gsap.to(element, {
duration: 2,
scale: 1.5,
rotationY: 45,
x: 10,
y: 0,
z: -200
});
// 以上代码相当于以下css，但是这个没有动画效果，一上来就给元素设置了这个效果
.myClass {
transform: translate3d(10px, 0px, -200px) rotateY(45deg) scale(1.5, 1.5);
}
//设置 GSAP transform (set, 没有动画):
gsap.set(element, {
transformPerspective: 500,
rotation: 120,
y: 50
});
EndArrayPlugin :
它允许您将数字值的数组缓动到应用缓动的不同数字值的数组中。换句话说，该插件可用于在指定的持续时间内平滑地将数字数组从一组值过渡到另一组值。这在各种情况下都很有用，例如在游戏中动画化对象的位置或创建动态可视化。
const arr = [1, 2, 3];
gsap.to(arr, {
endArray: [5, 6, 7],
onUpdate() {
console.log(arr)
}
});
打印结果
ModifiersPlugin ： 该插件拦截GSAP每次更新时通常应用的值，并允许您在返回GSAP应用的新值之前对其运行自定义逻辑
//在此示例中，.my-element元素的x属性将被tween到100，但在每次更新之前，
//modifiers对象拦截该值并运行modifiers函数中定义的自定义逻辑，
//modifiers函数将其当前的x值作为其第一个参数，并返回GSAP应用的新值。
gsap.to(".my-element", {
x: 100,
modifiers: {
x: function(x) {
// 在x值上运行自定义逻辑
return x + 50;
}
}
});
Snap rotation :是一个函数，用于将旋转值限制为给定的角度间隔
// 下面的动画Tween将旋转360度，但是修改器函数会强制该值跳到最接近45度的整数倍。请注意，修改器函数将传递被修改属性的值，本例中为旋转角度。
var degrees = 45;
var tween = gsap.to(".arrow", {
duration: 4,
rotation: 360,
modifiers: {
rotation: gsap.utils.unitize(function(rotation) {
//snap to 45 degree increments
return Math.round(rotation / degrees) * degrees;
})
},
// in GSAP 3 you can do this instead:
// snap: {rotation: degrees},
ease: "none",
repeat: 6,
})
Clamp with Modulus：(取模限制）下面的Tween将x动画到500，但修改器函数强制该值包裹在0和100之间
var tweenedX = document.getElementById("tweenedX"),
modifiedX = document.getElementById("modifiedX")
gsap.to(".box", {
duration: 5,
x: 500,
modifiers: {
x: function(x) {
x = parseInt(x);
tweenedX.textContent = x.toFixed(2);
var newX = x % 100;
modifiedX.textContent = newX.toFixed(2) // 值在0-100之间
return newX + 'px';
}
}, ease: "none"
})
实现循环无缝的走马灯效果。下面的示例使用.to() 和一个 stagger 将每个盒子 tween 到相对 x 位置为 "+=500"。使用 stagger选项使 tweens 重复无限次，并在每个盒子之间交替播放。(具体代码看官网）
gsap.to('.box', {
duration: 1,
x: '+=500',
modifiers: {
x: gsap.utils.unitize(x => parseFloat(x) % 500) //使用模运算将x的值限制在0-500
},
stagger: {
each: 1,
repeat: -1,
yoyo: true,
},
});
SnapPlugin：
为了使Tween在给定数组或增量中“捕捉”到最接近的值，可以使用 SnapPlugin。它基本上为实现以下任一捕捉行为的任何属性添加了一个修改器(modifiers)，使每个值在补间动画(Tween)期间（实时，而不仅仅是到达最终值时）都能够捕捉到。
// 将逗号分隔列表中所有属性（在这种情况下是"x，y"）捕捉到最接近的整数：
gsap.to(".class", {
x: 1000,
y: 250,
snap: "x,y"
});
// 捕捉到某个增量
gsap.to(".class", {
x: 1000,
snap: {
x: 20 // x 捕捉到最接近20的增量 (0, 20, 40, 60, ...)
}
});
//捕捉到数组中最接近的值:
gsap.to(".class", {
x: 1000,
snap: {
x: [0, 50, 150, 500] // x 捕捉到数组中最接近的值
}
});
// 当属性接近某个数组中的数值时（在一定的距离内），则捕捉到该数值。
gsap.to(".class", {
x: 1000,
snap: {
x: {values: [0, 50, 150, 500], radius: 20} // x 捕捉到最接近的数组中的数值，但只有当其在该数值范围内 20 像素以内时才进行捕捉
}
});
