GSAP3 初体验

什么是 GSAP

GSAP 全称为 GreenSock Animation Platform，是 GreenSock 提供的一个制作动画的成熟的JavaScript库。

和 GSAP2 有什么区别

在 2.x 版本中，GASP 存在四个模块：

• TweenLite：是 GSAP 的主体核心。
• TweenMax：是 GSAP 集合包，包含其他的三个模块。
• TimelineLite：是时间轴，它是一个动画容器，用于控制多个 Tween 和（或）其他 Timeline。
• TimeLineMax：一个增强版的 TimelineLite。

在 3.x 版本中，把这四个核心模块合并到一个 gsap 对象中了。相比 2.x 的优点：

• 完整包的体积减小。
• api 更加简单。
• 增加了一下新的特性。
• ...

更多内容可以查询官方文档

安装及引入

安装

npm i gsap --save

引入

import { gsap } from 'gsap';

更多安装相关信息

简单使用 Tween

动画就是在一段时间内不断地更改目标的位置、大小、旋转角度等属性，最终产生的一种视觉效果。Tween 你可以把它简单的理解为一个属性设置器(property setter)，它会根据你设置的参数对目标的属性进行修改，从而产生动画效果。

如何创建一个 Tween

下面的三个方法可以快捷的创建一个 Tween ：

• gsap.to(targets, vars) 从 原本属性 变化到 vars 中定义的属性
• gsap.from(targets, vars) 从 vars 中定义的属性 变化到 原本属性
• gsap.fromTo(targets, fromVars, toVars) 从 fromVars 中定义的属性 变化到 toVars 中定义的属性

targets 可以是:

• 一个普通对象
• 一个 DOM selector 字符串，比如 '.class'
• DOM 元素本身
• 以上三项中某一项的一个数组

vars 它可以包含：

• 动画对象的属性：比如dom元素的 x、y、opacity等
• gsap内部定义的特殊属性：duration、delay、ease、onStart等

Tween 的使用方法

1. 我们来看下直接更改对象属性的例子

let obj = { myProp: 0 }
let count = 1
gsap.to(obj, { myProp: 60, duration: 1, onUpdate: () => console.log('[gsap update]', count++, obj.myProp) })

输出结果：我们可以看出来，在1s内，gsap分 61次 将 obj.myProp 更改到了目标值 60。

2. 这个是 to 方法的使用：将 #box 从初始位置在 x 轴平移 300px

// duration 指的是动画时间，delay 指的是动画延迟执行时间，单位都是秒(s)
gsap.to('#box', { duration: 2, delay: 1, x: 300 })

3. 这个是 from 方法的使用：将 #box 从 x 轴偏移 300px 的位置平移到初始位置

gsap.from('#box', { duration: 2, delay: 1, x: 300 })

4. 这个是 fromTo 方法的使用：将 #box 从 x 轴偏移 -110px 的位置平移到x 轴偏移 300px 的位置

gsap.fromTo('#box', { x: -110 }, { duration: 2, delay: 1, x: 300 })

5. 其他：

• gsap 使用 document.querySelectorAll() 做 DOM 选择。
• gsap 使用 transform 对 DOM 元素做偏移、缩放、旋转等。
• 想要在动画开始，动画运行的每一帧，动画结束时分别执行对应的事件函数，可以在 vars 定义 onStart、onUpdate、onComplete 等回调方法 。
• 更多动画属性可以参考官方文档。

控制 Tween

调用 gsap.to 等方法时，会返回一个 Tween 的实例，我们可以根据这个实例去控制动画的运行，比如暂停、继续、重新播放等

// paused 表示默认动画是暂停的
let tween = gsap.to('#box', { duration: 4, paused: true, x: 300, })

document.querySelector("#play").onclick = () => tween.play(); // 开始播放动画
document.querySelector("#pause").onclick = () => tween.pause(); // 暂停播放动画
document.querySelector("#resume").onclick = () => tween.resume(); // 继续播放动画
document.querySelector("#restart").onclick = () => tween.restart(); // 重新开始播放动画

这些只是一部分控制方法，还有：

• tween.reverse(); // 反转播放
• tween.seek(1); // 跳转到1s进度处开始播放
• tween.timeScale(3); // 动画变为三倍速
• ....

简单使用 TimeLine

当我们有一个动画序列要一个一个动画执行的时候，我们一般会用 delay 来控制动画的延迟，让动画在合适的时间进行播放。这样做的话会比较麻烦，动画时间有修改的话，所有的 delay 时间都需要做调整。因此，gsap 提供了 Timeline 的功能，也就是时间轴，它可以方便的控制多个动画的播放。

创建一个时间轴

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

为时间轴添加动画

时间轴也有类似的 to 、from、fromTo 这些方法，可以便捷的将动画添加到时间轴上。

这个表示 3 个动画依次执行

let tl = gsap.timeline()

tl.to('#box1', { duration: 2, x: 300, })
  .to('#box2', { duration: 2, x: 300, })
  .to('#box3', { duration: 2, x: 300, })

控制时间轴

时间轴的控制方法和 Tween 的控制方法是一致的：

let tl = gsap.timeline({paused: true})

tl.to('#box1', { duration: 2, x: 300, })
  .to('#box2', { duration: 2, x: 300, })
  .to('#box3', { duration: 2, x: 300, })
  
document.querySelector("#play").onclick = () => tl.play();
document.querySelector("#pause").onclick = () => tl.pause();
document.querySelector("#resume").onclick = () => tl.resume();
document.querySelector("#restart").onclick = () => tl.restart();

时间轴参数

时间轴提供了 defaults 参数，可以设置动画的通用属性，比如设置了 duration: 1，则时间轴上添加的动画，默认执行时间是 1s。在动画上设置了相同的参数，则会覆盖默认值。

let tl = gsap.timeline({ defaults: { duration: 1, x: 300 }});
tl.to('#box1', {}) // 使用默认值
  .to('#box2', { x: 200 }) // 覆盖默认值
  .to('#box3', {})

时间轴还可以设置一些其他的参数，比如：

• delay 时间轴开始播放延迟时间
• repeat 重复次数
• repeatDelay 重复前的延迟
• onComplete 完成回调
• ...

let tl = gsap.timeline({
  repeat: 1, 
  onComplete: onCompleteHandler
});

完整参数

动画播放时间

上面的例子，我们看到的效果是：一个执行完了，然后再执行下一个。但是在真实的场景中都是前一个还没执行完，下一个就需要开始执行了，或者执行完了，要延迟一点时间再执行下一个。这个 gsap 也提供了相应的参数 Position Parameter。

gsap 在时间轴的 to、from 等方法添加了第3个参数 position。

tl.to( target, vars, position )

1. position 为一个绝对数值，比如1，表示时间轴开始执行 1s 后，开始执行该动画

tl.to( target, vars, 1 )

2. position 为一个相对数值，比如+=1 或 -=1，表示在上一个动画结束前(-=)或后(+=) 1s 开始执行

tl.to( target, vars, '-=1' )

完整示例：

let tl = gsap.timeline()

tl.to('#box1', { duration: 2, x: 300, ease: 'none'})
  .to('#box2', { duration: 2, x: 300, ease: 'none'}, '-=1')
  .to('#box3', { duration: 2, x: 300, ease: 'none'}, '-=1')

position 还有其他的参数可以使用，这里只展示了两种基本的用法，完整内容可以参考官方文档

总结

本文只是对 gsap 做了一个简单的使用，这个动画库功能还是很强大的，可以单独使用，也可以配合 pixi.js 、three.js 等这些库一起使用，做出更加优秀的动画。

参考资料

• gsap 文档
• GSAP - 专业的 Web 动画库
• www.tweenmax.com.cn/