什么是 GSAP

官方：GreenSock 动画平台(GSAP)是一个业界著名的工具套件，在超过1100万个网站上使用，包括超过50%的获奖网站!在任何框架中，你都可以使用 GSAP 来动画任何 JavaScript 可以触及的东西。无论你想动画 CSS, SVG, Three.js 或 React 组件, GSAP 都涵盖了。

总结：一个 🐂🍺 的动画平台，支持 CSS、SVG、Three.js、Pixi.js React 组件 等等

展示一下

几个常用的补间动画(tweens)

• gsap.to(targets, vars) 起始位置 ---> 目标位置
• gsap.from(targets,vars) 目标位置 ---> 起始位置
• gsap.fromTo(targets,vars1,vars2) 目标位置1 ---> 目标位置2
• gsap.set(targets,vars) 起始位置 ---> 目标位置 该方法会立即执行 不会执行动画

解释下参数

• targets: 目标对象，即我们想对哪个对象执行动画

// 使用选择器 内部会调用 document.querySelectorAll()
gsap.to(".box", { x: 200 });
gsap.to("section > .box", { x: 200 });

// 使用 dom 
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

• vars: 想要改变的属性(宽度、位置等)和一些配置（duration、onComplete、repeat 等）

gsap.to(target, {
  // 一些基础属性
  width: 200,
  x: 200,
  rotation: 360,
  // 特殊属性、配置项
  duration: 2
})

我们试着做一些连贯的动画

开始使用一些特殊的属性

duration 整个动画需要花费多长的时间（单位：s）

delay 动画延时多久开始（单位：s）

repeat 动画重复播放的次数，无限次的话设置为 -1

yoyo 是否恢复到原来的状态（反方向动画） 像小时候的悠悠球，放下去再收上来

设置 yoyo: true 时，repeat 不能设置为 0

stagger 多个 targets 执行时中间的间隙（单位：s）

ease 动画曲线

可在 官网 查看更多曲线