在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},">");