文章彙整

使用GSAP來搞定動畫與特效

By Astral Web 1 year agoNo Comments
首頁  /  網站設計與開發  /  使用GSAP來搞定動畫與特效

GSAP (1)

什麼是GSAP?GSAP為Green Sock Animation Platform的簡稱,是一套專門處理動畫與特效的JS套件。但是網路上套件資源這麼多的情況下,為何要選擇GSAP來使用呢?


GSAP不但本身套件的容量小,且能適用於各種瀏覽器,可以從簡單的效果延伸到各種複雜的特效,方便管理與更動。GSAP官方還依照了使用者的需求,提供了不同的版本如TweenMax、TweenLite、TimelineLite、TimelineMax等等,依使用者的選擇,可以在資源使用上達到效益的最大化。

 

除了套件本身,GSAP官方雖然有推出一些功能較特殊且方便的套件讓付費會員(GASP CLUB)使用,但是不用擔心,GSAP的相容性高,即使是使用其他的套件也是能達到相同的效果喔!

 

這邊就簡單的介紹他的使用方法:

 

基本的語法為下

 

TweenMax.to(target, duration, {var}):

 

最主要的組成分為目標、時間 、與變數,假如我們要移動logo我們可以用以下的code

GSAP (5)

如此以來logo就會花費3秒並移動到 X=600 的位置,接下來我們就能開始加點變化。

 

在移動的過程中加入些旋轉與縮小甚至GSAP也有ease的libary可以使用。

GSAP (1)

 

接者我們可以試著把語法中的“to“改成”from”會發現效果直接相反了,

變成花費三秒從X=600的位置移動到0(預設動作)並且從0.5放大至1(預設動作)且旋轉的效果也是相反的。

 

如果想要加入多個特效,則可以使用delay的變數來區分先後。

GSAP (7)

第二個特效就會在三秒後於第一個特效結束後接者運作。

 

只要加點變化後就能做出以下的效果囉

GSAP (6)

GSAP (1)

 

需要注意的點是,在使用變數上雖然多半的屬性都是有效的,但GSAP對clip-path是相對不支援的,以及有些變數的特效並沒有出來時,可能是當前使用的標籤需要至少加上display:block等css的屬性,還有像是background-color這類的屬性要改成backgroundColor這樣的打法。

 

之後有機會會再多介紹其他的用法以及與其它套件一起運用的方法,讓你網站的特效能夠輕鬆地變得更多采多姿。

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。