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

在gsap.timeline()上使用如to()、from()或fromTo()等函式建立动画，除了能利用数字定义开始的秒数之外，也可以使用标签的方式指定，先在timeline中新增标签，之後在於设定动画的位置使用。

let myTimeLine = gsap.timeline();
//设定labels
myTimeLine.addLabel("myLabelOne", 3);
myTimeLine.addLabel("myLabelTwo", 5);
//使用於timeline上的动画中
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},"myLabelOne");
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},"myLabelTwo");

事先利用标签的方式定义开始时间，让动画的安排统一在Label定义好，可以让Timeline的动画安排更加方便。

除了标签之外，GSAP提供了两个特殊的符号">"和"<"，">"指的是接续上一个动画开始，基本上就是以定义的先後顺序为主，也就是程序码的先後顺序，而"<"则是相反，会在上一个开始之前，那如果上面的定义为">"，而接续的则定义为"<"的话，两个动画则会同时开始罗！

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