笔记：可能是最绿的js动画库 Getting Start with GSAP

单机游戏等 3 个话题下的优秀答主

前段时间在不同的人的内容里看到这个绿色壮汉，经过一些简单研究之后发现是类似unity中的DoTween一样的插件，并且其中有很多很方便的设计。本文主要内容是来自其基本介绍的文章/视频

CDN

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js

这边有提到和Pixi.js的demo的实例 https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js 以及说明 https://greensock.com/docs/v2/Plugins/PixiPlugin

GSAP非常的灵活，几乎可以处理所有页面上可以通过JS进行改变的元素，例如：

CSS：2D和3D变换，颜色，width，opacity，border-radius，margin，和几乎所有CSS值。
SVG属性：viewBox，width，height，fill，stroke，cx，r，opacity，等插件，像MorphSVG和DrawSVG可用于高级特效。
任何数值，例如，呈现为的对象<canvas>。对3D场景中的相机位置进行动画处理或过滤值。GSAP通常与Three.js和Pixi.js一起使用。

gsap.to(targets,vars)：从开始的位置到结束的位置。

targets - 你需要添加动画的对象，可以是object,array和选择器".myClass"。
vars - 一个对象，里面包含你想要改变的属性，延时，已经回调函数等。

Getting Started

基本函数与缓动Ease

基本的函数使用，第一个参数是目标id，后面的都是可修改的属性，以及 ease 缓动类型

gasp.to("_logo",{
	duration: 2, 
	x:300, 
	backgroundColor:"#560563", 
	borderRadius:"20%", 
	border:"5px solod white"
	ease:"elastic" //可以设置各种各样的内容了“back” / "bounce"
})

其中的不同Ease缓动类型 https://greensock.com/ease-visualizer/

Callback以及多对象中心

gsap.set(".logo, .astronaut", {transformOrigin: "50% 50%"});

gsap.to(".logo, .astronaut", {duration:2, rotation:360});

var myObject = {rotaion:0};
gsap.to(myObject,{duration:2, rotation:360, onUpdate: function(){
	console.log(myObject.rotation);
}})

在gasp.to的过程中有的callback方法有

onComplete：动画完成时调用。
onStart：动画开始时调用
onUpdate：每次动画更新时调用（在动画处于活动状态时每帧调用）。
onRepeat：每次动画重复时调用一次。
onReverseComplete：动画反转后再次到达其起点时调用。

From 反向

将开始作为结束点，反过来

gasp.from(".logo", {duration:1.5, opacity:0, scale:0.3, ease:"back"});

Stagger

可以直接调用一系列 class="circle"

gsap.form(".circle", {duration:1, opacity:0, y:150, stagger:0.25});

并且使用stagger来进行带有offset效果的ease，更多可以参考链接 Advanced staggers https://codepen.io/GreenSock/pen/vYBRPbO

并且可以在出发点上引入随机数，使用“random(-200,200)”来进行，更多这类地函数可以参考 UtilityMethod https://greensock.com/docs/v3/GSAP/UtilityMethods

gsap.from(".circle", {duration:1, opacity:0, y:() =>Math.random()*400-200, stagger:0.25});
gsap.from(".circle", {duration:1, opacity:0, y:"random(-200,200)", stagger:0.25});

Control

document.querySelector()

var tween = gsap.to("#app", {
    duration: 1,
    x: 100,
    onComplete: tweenComplete,
    onCompleteParams: ["done!"]
});

document.querySelector("#pause").onclick = ()=> tween.pause();

=> {tween.seek(2); sequenceUpdateDragger();};
=> {tween.progress(0.2); sequenceUpdateDragger();};
=> tween.reverse();
=> tween.timeScale(4);

tween.pause(); 暂停
tween.resume(); 恢复
tween.reverse(); 反向播放
tween.seek(0.5); 跳到0.5s
tween.progress(0.25); 跳到4分之1处
tween.timeScale(0.5); 速度减慢
tween.timeScale(2); 速度翻倍
tween.kill(); 删除动画

Sequence

可以用gasp.timeline将不同的tween组合在一起，然后其中的delay关系就会是一个相对的，如果没有delay，那就会是接续进行，可以很方便地进行插入

关于Position parameter https://greensock.com/position-parameter/

var tl = gasp.timeline({repeat:2, yoyo:true}) //重复2次，第二次反向yoyo
tl.from(".logo", {duration:1.5, opacity:0, scale:0.3, ease:"back"});
tl.from(".circle", {duration:1, opacity:0, delay:1.5, y:150, stagger:0.25});
tl.from(".logo", {duration:1.5, opacity:0, scale:0.3, ease:"back"},"+=1");
//通过在后面增加position parameter来进行相对化地增加