gsap的简单用法

gsap

gsap.from()

想像gsap.from()一个向后补间，您定义值应该从哪里开始，然后它动画到当前状态，这非常适合将对象动画到屏幕上，因为您可以按照您希望它们在结尾处看到的方式设置它们并且然后从其他地方动画。例如：

let tween = gsap.from(".box", {
  opacity: 0, 
  y: 100, // 从y=100运动到当前位置(y=0)
  duration: 1,
  yoyo: true,
  repeat: -1,
  ease: "power2", // 设置运动曲线,速度由快到慢
  // 事件
  onRepeat: () => {  
    console.log('onRepeat'); // 动画重复(repeat)的时候会触发该事件,
  },
});

//我们可以控制他
tween.seek(2); // 寻找
tween.progress(0.5); // 进度

tween.play(); // 开始
tween.pause(); // 暂停
tween.resume(); // 取消暂停
tween.reverse(); // 反过来运动
tween.restart(); // 重新重头开始

可以控制的项可以查看文档
ease:可调节曲线,查看运动轨迹

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

globalTimeline:时间线

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）。

案例

var target = {x:1,y:1}
 gsap.to(target ,{
   x: 10,
   y: 20,
   duration:1,
})


gsap.from("h1", { y: 100, duration: 1,yoyo: true, repeat: -1,})


gsap.fromTo(
     `.page h1`,
     { x: -300 },
     { x: 0, rotate: "+=360", duration: 1 }
   );