GSAP
GSAP 支持HTML, SVG, React, Vue, Angular, jQuery, Canvas, CSS；通过对象属性过渡修改实现动画
安装
npm i gsap -S
使用
import { gsap } from "gsap"; // gsap core
import { PixiPlugin } from "gsap/PixiPlugin";// 额外插件
gsap.registerPlugin(PixiPlugin);
核心
基础
gsap.to：当前状态作为起始状态，向定义的数值作为结束状态动画
gsap.from：自定义的数值作为起始状态，向当前状态作为结束状态动画
gsap.fromTo：自定义2个数值作为起始状态和结束状态，定义过渡动画
gsap.to('.animate-box', { opacity: 1, duration: 1 });
gsap.from('.animate-box', { x: -9999, duration: 1 }); // 入场动画
gsap.fromTo('.animate-box', { rotation: 0 }, { rotation: 360, duration: 1 }); // 入场动画
时间线
gsap.timeline：对多个动画tween排序快速实现连续多段动画，无需手动计算并设置延迟
gsap.timeline({ 配置对象 })
tl.add(tween)：添加1个tween至时间线
tl.addLabel(labelName)：添加1个label标记
tl.addPause(“>+=1”, handle)：在上一项结束时暂停，并在1秒后执行处理
tl.call(handle)：添加1个调用处理
配置对象
data：将值添加到源动画对象data引用
delay：延迟时长
duration：动画时长
ease：缓动函数，值 none power1 power2 power3 power4 bounce slow steps ……
paused：是否立即播放，默认为 false 立即播放
reversed：是否反方向过渡
repeat：重复播放次数，-1时无限播放
repeatDelay：重复间隔时长
yoyo：是否顺序播放后逆序返回
onStart onUpdate onComplete onRepeat：事件回调
onInterrupt：动画被中止（即被kill销毁）
全局方法
gsap.effects：注册动画效果
gsap.defaults()：声明tween的属性默认值
gsap.defaults({
ease: "linear",
duration: 1
});
gsap.delayedCall(n, callback)：延迟n秒后调用
-
delayedCall.kill()销毁 -
gsap.killTweensOf(callback)销毁过渡对象上所有动画 teween
gsap.killTweensOf(".class")：销毁源动画对象上所有tween
gsap.registerPlugin(pluginObject)：注册插件
gsap.registerEffect()：注册效果
控制
tween.pause()：暂停
tween.resume()：恢复播放
tween.seek(1.5)：跳至指定动画时间点状态
tween.reverse()：反转播放
tween.restart()：重启并从头开始播放
tween.kill()：销毁动画
tween.timeScale()：速度缩放
监听
事件
tween.eventCallback()
事件类型
onStart：开始
onUpdate：进行中
onRepeat：重复开始
onComplete：结束
事件回调
tween.eventCallback("onUpdate", () => tween.progress());
tween.eventCallback("onUpdate", null);
Promise
tween.then()：返回动画结束Promise
状态
tween.isActive() ：动画是否运行中且正在播放
tween.paused()：动画是否处于暂停
tween.progress()：当前进度
tween.iteration()： 动画处于第几个重复次数
插件
ScrollTrigger 滚动触发器
ScrollToPlugin 过渡滚动
ScrollSmoother 平滑滚动
MotionPathPlugin 路径动画
InertiaPlugin 惯性动量的运动
PixiPlugin pixi.js属性支持
MorphSVGPlugin svg形状平滑变换
DrawSVGPlugin svg笔画绘制动画
TextPlugin 文本内容动画
PhysicsPropsPlugin 根据速度或加速度调整对象属性动画
Physics2DPlugin 提供简单的物理功能，根据速度、角度、重力、加速度、加速度角、摩擦力的组合来调整物体xy坐标
CSSPlugin 对DOM元素的CSS属性进行动画处理
BezierPlugin 贝塞尔曲线动画化
Draggable Dom元素滚动
