iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 19

JS Library 學習筆記:嘿!有聽過 GSAP 嗎? (四)

  • 分享至 

  • xImage
  •  

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

上一篇
JS Library 學習筆記:嘿!有聽過 GSAP 嗎? (三)
下一篇
學習筆記:一起進入 PixiJS 的世界 (一)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言