JS Library 学习笔记：嘿！有听过 GSAP 吗？ (二)

gsap.to()、gsap.from()和gsap.fromTo()定义了基本动画架构，除此之外，gsap也提供了动画控制的函式，像是开始start()、暂停pause()、倒转播放reverse()、回到开始状态restart()，可以藉此快速建立所需的功能，增加互动性甚至是动态的丰富度。

为了让使用更方便，通常会把动画定义至一个变数中，之後针对这个变数套用这些函式：

let myTween = gsap.fromTo("#my-div", {opacity: 0}, {opacity: 1, duration: 3});
myTween.play();
myTween.pause();

可以把刚刚的play()与pause()等函式，指定至对应按钮上，进行相对应的功能控制；指定的方式可以有很多写法，这边搭配上个系列的jQuery使用：

$('#button-play').click(function(){
  myTween.play()
});
$('#button-pause').click(function(){
  myTween.pause()
});

GSAP提供的另一个kill()函式，可以达成进行中的动画暂停，但同时会整个移除动画效果，也就是说，若使用触发了这个函式，是无法与pause()相同使用play()就能让动画继续进行，需要另外安排将动画定义上去才行。

另外，.seek()函式可加入数字参数，指定动画跳至某个时间的状态，若使用.seek(0)，就能控制动画直接跳到最初状态，回到0秒的阶段。

//定义动画
let myTween = gsap.fromTo("#my-div", {opacity: 0}, {opacity: 1, duration: 3});
//指定播放按钮
$('#button-play').click(function(){
  myTween.play()
});
//指定暂停按钮
$('#button-pause').click(function(){
  myTween.pause()
});
//让动画暂停并移除动画，无法再利用play()函式继续拨放
$('#button-kill').click(function(){
  myTween.kill()
});
//让动画移至指定时间段，这边定义为0秒状态
$('#button-seek').click(function(){
  myTween.seek(0)
});