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

前两篇介绍了Tween，可以藉此建立出动态效果，但动画不单单是元件本身的动态，以整个专案的视角来看，一定会有先後顺序，有时候有微妙的时间差可以创造韵律感，或是产生更多丰富的效果。

GSAP当然也针对了时间顺序提供另一组类别的函式。

Timeline定义顺序
首先，这边将gsap.timeline()定义至一自订变数供後续使用，接下来就可以使用刚刚定义动画的to()、from()或fromTo()函式，将动画定义在这个时间轴上。第一个参数一样为指定的元件，後面则定义关键影格状态与duration动画时间，最後一个参数则可以定义Timeline上的时间段，也就是开始此动画开始的时间。

let myTimeLine = gsap.timeline();
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},2);
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},4);

若不使用Timeline、只利用delay函式一个一个安排开始时间、建立先後顺序，对於安排多网页元件的专案来说，可想而知，管理与维护会更加复杂。除此之外，gsap.timeline()也提供传入定义repeat、repeatDelay、yoyo值的Object参数，让这个时间轴上的动画效果能具有相同的规则，供需求选择使用。

• repeat：设定时间轴上所有动画重复播放的次数。
• repeatDelay：若有设定repeat，可设定重复播放开始前，与上一段动画的时间间距。
• yoyo：为boolean值，true则会在下一次改由反方向播放动画。

let myTimeLine = gsap.timeline({repeat:3,repeatDelay:3,yoyo:true});
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},2);
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},4);