GSAP3入门

GSAP 是什么

GSAP是一个十分强大的动画脚本，可以实现大部分的动画需求。如果你想制作一款十分炫酷、复杂的动画，那么GSAP将是很好的选择，如果只是简单的动画，显然 animate 等可能会更适合。

官方入门教程

greensock.com/get-started…

安装

下载

npm i gsap

引用

import { gsap } from 'gsap'

也可以使用CDN引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

实现一个简单的动画

gsap.to

to(选择器，状态对象) 是指从原有状态 变化成参数里的状态对象

gsap.to(".grey",{
  duration: 3,
  x: 300
});

gsap.from

from(选择器，状态对象) 是指从参数里的状态对象表现的状态 回归成现有的状态

gsap.from('.grey', {
    duration: 3
    x: 300
})

gsap.fromTo

fromTo(选择器，状态对象A，状态对象B)是指从状态B，回归到状态A

gsap.fromTo('.grey', {
    x: 300
}, {
    x: 20,
    y: 50,
    duration: 3
})

参数

以下是我知道的一些参数，不是所有，其余的有需要可以自行查阅

选择器参数

可以是一个 CSS选择器、Element 也可以是一个 Object 对象，当然普通对象的场景可能比较少

const obj = { props: 3 }
gsap.to(obj, {
  props: 100,
  duration: 3,
  onUpdate: function (a, b, c) {
    console.log(obj.props)
  }
})

状态对象

第二个参数是个对象，接受动画的状态，为了区分类型和后续方便理解，参数分成三种类型，动画状态、运动方式、回调函数

动画状态

参数	释义
delay: 2	延时播放，单位s
duration: 3	动画持续时间，单位s
repeat: 3	动画重复播放的次数
repeatDelay： 3	重复播放间隔时间，单位s
yoyo: false	如果true，动画将在每次重复时向前和向后交替
ease: "bounce"	内置运动轨迹，具体没细研究。可以自行查阅
paused: true	true 暂停播放动画
stagger: { grid: [7,15], from: "end", axis: "x", ease: "power3.inOut", amount: 1.5 }	交错动画，这个有点高级，暂时放弃研究，需要自取codepen.io/GreenSock/f…

---

运动方式

参数	相对应的CSS
x: 100	transform: translateX(100px)
y: 100	transform: translateY(100px)
rotation: 360	transform: rotate(360deg)
rotationX: 360	transform: rotateX(360deg)
rotationY: 360	transform: rotateY(360deg)
skewX: 45	transform: skewX(45deg)
skewY: 45	transform: skewY(45deg)
scale: 2	transform: scale(2, 2)
scaleX: 2	transform: scaleX(2)
scaleY: 2	transform: scaleY(2)
xPercent: -50	transform: translateX(-50%)
yPercent: -50	transform: translateY(-50%)
width: 100	width: 100px
height: '10vh'	height: 10vh

回调函数

事件	释义
onStart	动画开始播放时触发
onComplete	所有动画播放完毕后调用的函数（如果有repeat，则等所有的循环结束后执行）
onRepeat	如果有repeat一组动画播放完的回调函数
onUpdate	动画运动过程中的回调函数
onReverseComplete	触发reverse后回到起点时触发

常见的Getter / Setter 方法

不传参是Getter 传参是Setter

gasp.to 等执行后会返回一个 tween 实例。它有一些 api 可以控制动画的进行，比如：

const tween = gsap.to('.target', {
  x: 300,
  duration: 3
})
console.log(tween.duration()) // 相当于Getter 获取当前动画总共需要执行3秒
tween.duration(1)

上述代码，原先动画的执行时间是 duration: 3 需要3秒才能完成动画的播放

但通过设置了tween.duration(1)后，动画总时长只执行了1秒

api	释义
time	从哪个时刻开始执行动画，单位是秒
progress	从哪个进度开始，参数是 0 ~ 1
duration	更改整体动画时间，参数是期望的动画的总时间
delay	延时几秒后执行动画，参数是秒
timeScale	动画播放速度，数值越大，播放速度越快修改后的播放时间 = 原播放总时长 / timeScale

控制动画

通过返回的实例控制播放

const tween = gsap.to('.green', {
  duration: 4,
  x: 750,
  rotation: 360
})
setTimeout(() => {
  tween.pause()
}, 2000)

上述动画原本会持续4秒，2秒过后，触发了 tween.pause() 动画暂停

api	释义
play	播放
pause	暂停
resume	继续播放，只能继pause之后播放
reverse	回退到起始点
restart	从头开始播放
kill	直接暂停并销毁实例，后续无法重新播放

gsap.timeline 时间轴

同to、from、fromTo不同的是，前者是控制单个元素动画，而timeline是编写一组动画，直接来一个官方示例

var tl = gsap.timeline({defaults: {duration: 1}});
//no more repitition of duration: 1!
tl.to(".green", {x: 200})
  .to(".orange", {duration: 3, x: 200, scale: 0.2})
  .to(".grey", {x: 200, scale: 2, y: 20});

timeline会返回一个实例，可以使用上述的to、from、fromTo。支持链式编程。将单个动画连贯成一组动画，动画的执行顺序就是编写的顺序。

不同的是，timeline 只接受一个Object参数，只可以使用前边说到的 动画状态 和 回调函数 。 但也有一定的区别比如对timeline设置了duration并不是设置了这个动画组的整体运动时间，而是相当于增加了一定的延时播放时间。而继续添加delay则是延时时间是两者相加之和。

defaults默认参数

因为是动画组，见上述代码提供了defaults参数，接受前边说到的 运动方式 ，相当于动画组的 默认值 。 如果单个动画本本身设置了，就会像.orange 以自身duration: 3的为准，

位置参数

timeline返回的实例，使用to、from、fromTo的时候，有第三个参数，位置参数，已知有三种形式。

1）数字 延迟几秒后执行

2）公式 '+=10' ==> duration += 10

3）位置参数：配合addLabel

const tl = gsap.timeline({ defaults: { duration: 1 } })
tl.to('.green', { x: 200 })
   .addLabel('label') // 增加位置标记
   .to('.orange', { x: 200, scale: 0.2 }, '-=1') // 提前 1s 执行
   .to('.orange', { y: 200 }, '+=1') // 延时1s
   .to('.grey', { x: 200, scale: 2, y: 20 }, 6) // 额外延时6s
   .to('.pink', { x: 200, scale: 2, y: 20 }, 'label') // 存在标记，在标记处执行

add添加动画

当然除了链式编程也可以使用add添加动画

//create a timeline instance
var tl = gsap.timeline();

//the following two lines do the SAME thing:
tl.add(gsap.to("#id", {duration: 2, x: 100}) );
tl.to("#id", {duration: 2, x: 100}); //shorter syntax!

额外补充

gsap.getProperty

获取DOM元素的已有属性

gsap.getProperty("#id", "width") // 200