gsap

gsap.to()

同gsap.from()动画相反

let tween = gsap.to(".box", {
  opacity: 0, 
  y: 100,  // 从当前位置(y=0)运动到y=100
  duration: 1,
  yoyo: true,
  repeat: -1,
});

fromTo()

gsap.fromTo()补间允许您定义动画的开始和结束值（与使用当前状态作为开始或结束的from()和to()补间相反）。这对于完全控制动画非常有用，尤其是当它与其他动画链接时

//将“.box”从不透明度 0 设置为不透明度 0.5 
gsap.fromTo(".box", {opacity: 0}, {opacity: 0.5, duration: 1});

// example
<h2>欢迎来到我的世界</h2>
<button onclick="pause()">pause</button>
<button onclick="seek()">seek</button>
<button onclick="progress()">progress</button>
<button onclick="play()">play</button>
// 透明度从0到0.9
let tween1 = gsap.fromTo("h2", { opacity: 0 }, { opacity: 0.9, duration: 4 });

const pause = () => {tween1.pause();}
const seek = () => {tween1.seek(2);}
const progress = () => {tween1.progress(0.5);}
const play = () => {tween1.play();}

effects:注册动画

// 以下是自定义的一个动画.调用myfade即可
gsap.registerEffect({
  name: "myfade", // 自定义命名
  effect: (targets, config) => {
    return gsap.to(targets, { duration: config.duration, opacity: 0 });
  },
  defaults: { duration: 2 }, // 默认值应用于传递给效果的任何“config”对象
  extendTimeline: true, //  extendTimeline设置为true,可以直接在任何GSAP时间线上调用效果
});

gsap.effects.fade("myfade");

let tl = gsap.timeline(); // 想要调用timeline,extendTimeline必须为true,否则报错
tl.myfade("h3", { duration: 3 })
.myfade("h4", { duration: 1 }, "+=2")
.to("h5", { x: 100 });

getById()

创建补间或时间线时，您可以为其分配一个id，以便以后可以引用它。这在使用框架和构建工具（如 React）时非常有用，因为它们很难跟踪变量。

gsap.to(obj, {id: "myTween", duration: 1, x: 100});

//later
gsap.getById("myTween"); //returns the tween

gsap.globalTimeline是驱动 GSAP 中所有内容的根 Timeline 实例, 会影响所有的动画.
有用的方法
gsap.globalTimeline.pause() - 暂停影响所有动画的全局时间线。返回自身。
gsap.globalTimeline.play() - 恢复影响所有动画的全局时间线。返回自身。
gsap.globalTimeline.paused() -true如果全局时间线暂停则返回。false如果全局时间线正在播放，则返回。
gsap.globalTimeline.timeScale() - 获取或设置全局时间刻度，它是影响所有动画的乘数。这实际上

<h1>welecome</h1>
<h2>欢迎来到我的世界</h2>
<h3>欢迎来到我的世界</h3>
<button onclick="pauseAll()">暂停所有动画</button>

gsap.from("h1", { y: 100, duration: 1,yoyo: true, repeat: -1,})
gsap.from("h2", { x: 100, duration: 2,yoyo: true, repeat: -1,})
gsap.from("h3", { rotate: 100, duration: 3,yoyo: true, repeat: -1,})

const pauseAll = () => { gsap.globalTimeline.pause() }

注意:
由于全局时间线用于运行所有其他补间和时间线，因此无论当前是否有任何补间或时间线处于活动状态，gsap.globalTimeline.isActive()都将始终返回。true

ticker

gsap.ticker就像 GSAP 引擎的心跳 -
它在每个事件上更新globalTimelinerequestAnimationFrame，因此它与浏览器的渲染周期完美同步。您可以添加自己的侦听器以在每次更新后运行自定义逻辑（非常适合游戏开发人员）。根据需要添加任意数量的侦听器。
回调参数
time : Number - 自代码开始以来的总时间（以秒为单位）。代码的开始时间可能会被 lagSmoothing 提前。
deltaTime : Number - 自上次滴答以来经过的毫秒数。注意：您可以使用gsap.ticker.deltaRatio()来获取基于某个目标 FPS 的比率。
frame : Number - 在每个刻度上递增的帧（刻度）编号

add()
您可以在中使用两个可选参数gsap.ticker.add()：
once : Boolean - 回调只会触发一次然后自动删除
priority : Boolean - 回调将被添加到队列的顶部而不是底部，这意味着它将在当前队列中的任何侦听器之前触发。如果您希望回调在 GSAP 的全局时间线之前触发，这非常适合。

隐藏选项卡时节流

gsap.ticker.fps()
要将代码限制为特定的帧速率，您可以使用如下fps()方法： gsap.ticker.fps(30);

<button onclick="removeTicker()">点击按钮,移除事件</button>

function myFunction(time , deltaTime , frame) { console.log(time); }

gsap.ticker.add(myFunction);
// 移除侦听器
function removeTicker() {
  gsap.ticker.remove(myFunction);
}

// gsap.ticker.add(myFunction, true, true);

delayedCall()

返回值 : Tween
在设定时间后调用函数的简单方法

// 1 秒后调用 myFunction() 并传递 2 个参数：
gsap.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
  //do stuff
}

// 要取消/终止延迟调用，请保存对它的引用，然后在需要时对其调用 .kill() ：
var delayedCall = gsap.delayedCall(1, myFunction);
// 片刻后
delayedCall.kill();

// 如果您不想保留对它的引用，则可以使用gsap.killTweensOf()方法，因为 delayCall() 只是带有 onComplete 的Tween，而函数本身是 Tween 的“目标”：
gsap.delayedCall(1, myFunction);
// 片刻后
gsap.killTweensOf(myFunction);

defaults()

更改默认值

// 应用到所有动画中ease和duration
gsap.defaults({
  ease: "power2.in",
  duration: 1
});
gsap.from("h1", { y: 100,  yoyo: true, repeat: -1, })
gsap.from("h2", { x: 100,  yoyo: true, repeat: -1, })
gsap.from("h3", { rotate: 100,yoyo: true, repeat: -1, })

gsap.config()

配置 GSAP 的非 Tween 特定设置，例如autoSleep、force3D和units,详情可以查阅文档

// 您只需定义要更改的配置设置。省略的属性不会受到影响。
gsap.config({
  autoSleep: 60,
  force3D: false,
  nullTargetWarn: false,
  trialWarn: false,
  units: {left: "%", top: "%", rotation: "rad"}
});

utils

checkPrefix() 检查前缀
clamp() 将值限制在特定范围内（例如：clamp(0, 100, -12) --> 0）。
distribute() 性或根据它们在网格中的位置在对象数组中分配一个值，可以选择应用缓动
getUnit() 获取字符串的单位（例如：getUnit(“30px”) --> “px”）。
interpolate()在几乎任何两个值（数字、颜色、字符串、数组、复杂字符串，甚至具有多个属性的对象）之间进行插值（例如：interpolate(“red”, “blue”, 0.5) --> “rgba(128,0,128,1)”）。
mapRange() 将一个范围映射到另一个范围（例如：mapRange(-10, 10, 0, 100, 5) --> 75）。
normalize()将范围内的数字映射到 0 到 1 之间的进度（例如：normalize(100, 200, 150) --> 0.5）。
pipe() 对多个函数调用进行排序，将每个函数的结果传递给下一个函数（例如：pipe(clamp(0, 100), snap(5))(8) --> 10）。
random() 根据参数生成一个随机数（例如：random(0, 100, 5) --> 65）或从提供的数组中随机选择一个元素（例如random([“red”, “green”, “blue”]) --> “red”）。
selector() 返回一个范围为特定元素（或 React ref 或 Angular ElementRef）的选择器函数。（例如selector(myElement)：）
shuffle() 就地打乱数组的内容。（例如：shuffle([1, 2, 3, 4, 5]) --> [4, 2, 1, 5, 3]）
snap() 将值捕捉到增量（例如：snap(5, 13) --> 15）或数组中最接近的值（例如：snap([0, 5, 10], 7) --> 5）。
splitColor()将任何颜色拆分为其红色、绿色、蓝色（以及可选的 alpha）分量。或者色调、饱和度和亮度。（例如：splitColor(“red”) --> [255, 0, 0]）。
toArray() 将几乎所有类似数组的对象转换为数组，包括选择器文本！（例如：toArray(“.class”) --> [element1, element2]）。
unitize() 包裹另一个实用函数，允许它接受带有"20px"或之类"50%“的单位的值，在输入包裹的实用函数时剥离单位，然后将其添加回结果（例如var wrap = gsap.utils.unitize( gsap.utils.wrap(0, 100) ); wrap(“150px”); --> “50px”）。或强制使用特定单位（例如：unitize( gsap.utils.mapRange(-10, 10, 0, 100), “%”); --> 始终返回”%"）。
wrap()将一个数字放入指定的范围内，这样当它超过最大值时，它会回到开头，如果它小于最小值，它会回到结尾（例如wrap(5, 10, 12) --> 7）。或者循环遍历一个数组，这样当提供的索引大于数组的长度时，它会返回到开头（例如：wrap([0, 10, 20], 4) --> 10）。
wrapYoyo() 将一个数字放入指定的范围内，这样当它超过最大值时，它会回到开头，如果它小于最小值，它会回到结尾（例如wrap(5, 10, 12) --> 7）。或者循环遍历一个数组，这样当提供的索引大于数组的长度时，它会返回到开头（例如：wrap([0, 10, 20], 4) --> 10）。