GreenSock套件

前言

GreenSock 動畫平台 (GSAP)是一個可以使用JS來控制CSS、SVG、React、canvas來製作動畫,解決瀏覽器不一致的問題,甚至比JQuery快20倍(他們官網這樣寫的)

GSAP是一個屬性操控器,讓動畫每秒更改多次屬性值,看起來就像是在移動、變色、旋轉…等,他會抓一個起始跟終點值,每秒更改60次,從技術上講,我們可以將 GSAP 命名為“GreenSock Property Manipulator”(GSPM)

安裝

NPM

npm install gsap

CDN

<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

測試執行

同樣先簡單進行套件安裝的測試(CDN安裝),直接使用官網的範例,先設定三個正方形,分別為橘色、灰色、綠色,所有正方形會被右移300(x:300),標題變淡、綠色旋轉縮小

執行成功表示套件安裝成功

HTML

<head>
    <link rel="stylesheet" href="https://codepen.io/GreenSock/pen/JGaKdQ.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
</head>
<body>
    <h2 class="title">gsap.to() Basic Usage</h2>
    <div class="box orange"></div>
    <div class="box grey"></div>
    <div class="box green"></div>
</body>

CSS

body {
    margin: 10px;
}
 
.box {   
    display: block;
}

JS

gsap.to("h2.title", {duration: 1, opacity: 0.3});
gsap.to(".box", {duration: 2, x: 300});
gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5});

認識gsap.to()

使用gsao.to來控制動畫有兩個參數

  • 參數1:要控制的目標,直接使用選擇器選擇目標”.class”、”#id”
  • 參數2:加入CSS動畫,以物件的方式表示。{duration: 1, x: 100}

※CSS的部分,有一些特殊屬性要注意

例:要讓id為logo的目標,在一秒內向右移動100

gsap.to("#logo", {duration: 1, x: 100});

特殊屬性

主要是一些動畫的屬性值的設置,以及一些可選的屬性,可以參照官網的介紹,這邊先列舉一些簡單的

官網:GreenSock | Docs | GSAP | Tween | vars

duration動畫的持續時間
delay動畫幾秒後開始
ease動畫期間的變化,有點像是速率不同的概念,至於需要什麼速度,可以直接使用官網的設定GreenSock | Docs | Eases
id分配一個ID給你設定的目標,於後面tween 中,可以使用gsap.getById()捕捉到他
repeat動畫重複次數,預設0,當設定1會跑兩次
repeatDelay每次動畫間隔的”秒數”,預設0
keyframes關鍵偵動畫,可以將目標設定為不同狀態的動畫,例如keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]

上面例子改編:

我們把box改成,需要重複11次,一開始為一秒後跑一秒右100,在接3秒後跑0.5秒下100

gsap.to(".box", {repeat:10 ,keyframes: [{x:100, duration:1,delay : 1}, {y:100, duration:0.5 ,delay : 3}]});

callbacks

其實也是一種特殊屬性,只是他可以塞入一些方法在特殊時間點,像是生命週期一般

onComplete動畫完成時調用。
onStart動畫開始時調用
onUpdate每次動畫更新時調用(在動畫處於活動狀態時的每一幀)。
onRepeat每次動畫重複時調用。
onReverseComplete當動畫在反轉時再次到達其開始時調用。

以開始跟結束這兩個callback來做範例,就是在結束跟開始時顯示console,那兩種寫法都可以,看自己程式習慣

gsap.to(".box", {duration: 2, x: 300 ,onComplete:()=>{console.log('動畫完成')} ,onStart: boxStart() });
 
function boxStart(){
    console.log('動畫開始')
}

gsap.from()

基本上就是跟gsap.to()完全相反,gsap.to()從原本你設定的HTML出發,到你動畫最終跑的位置。而gsap.from()從動畫開始位置出發,到你原本設置HTML的位置

以上面例子為例把gsap.to改為gsap.from(),就會從原本的由左至右,改為由右至左

gsap.from("h2.title", {duration: 1, opacity: 0.3});
gsap.from(".box", {duration: 2, x: 300});
gsap.from(".green", {duration: 3, rotation: 360, scale: 0.5});

gsap.fromTo()

知道前面兩個,就知道fromTo()是設定起始跟終點動畫,方便用於完全控制

有三個參數,基本跟from還有To差不多:

  • 參數1:要控制的目標,直接使用選擇器選擇目標”.class”、”#id”
  • 參數2:加入CSS動畫設置”起點”動畫
  • 參數3:加入CSS動畫設置”終點”動畫

範例

把box改為,開始為透明,Y100,X0,動畫結束是,五秒後,不透明,往右300:往上100

gsap.fromTo(".box", {autoAlpha: 0,y: 100,x: 0}, {autoAlpha: 1, duration: 5,x: 300,y:0});

gsap.set()

立即修改CSS屬性,在動畫開始前就會改變

參數1:要控制的目標,直接使用選擇器選擇目標”.class”、”#id”

參數2:加入CSS設置

控制動畫

前面都是讓動畫單純的跑完,現在加入一些簡單控制的方法,先把動畫實例給儲存,接下來就可以控制了

var tween = gsap.to("#logo", {duration: 1, x: 100});
tween.pause()

pause()暫停
resume()恢復
restart()重新,並撥放
seek(0.5)跳到 0.5 秒
progress(0.25)跳轉進度的 1/4
timeScale(0.5)變為半速
timeScale(2)變為雙倍速度
kill()刪除動畫
play()正常走
reverse();反轉走

timeline時間線

開始進入相對複雜的階段,以上範例都是一個動畫一次撥完,如果要同時控制多個動畫為一組

使用時機為

  • 一組動畫做為一整個整體控制
  • 建構一個序列,(前面動畫時間可以接續後續動畫)
  • 模組化動畫程式碼
  • 可以做很複雜的排程

直接看範例,將上面的範例修改為由時間線控制,重複30次,相隔一秒,並由綠色>橘色>灰色相繼產生動畫,做完一個才會進行下一個

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
 
//add 3 tweens that will play in direct succession.
tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

timeline設定

先創造一個 gsap.timeline()實例後,並儲存起來,參數可以設定一些初始的特殊屬性

var tl = gsap.timeline();

也可以調用.to、.from()跟fromTo()的方法,只要使用add就好。

範例中,可以看到to的寫法有沒有加add都是一樣的m。如果要使用到from或是fromTo就要使用add

var tl = gsap.timeline();
//下面兩種寫法相同
tl.add( gsap.to("#id", {duration: 2, x: 100}) );
tl.to("#id", {duration: 2, x: 100}); 
//from跟fromTo就要使用add
tl.add( gsap.from("#id", {duration: 2, x: 100}) );

方法鏈

根據上面範例,就看你要寫成一條,還是分行都可以

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
 
//一條
tl.to(".green", {duration: 1, x: 200}).to(".green", {duration: 1, x: 200}).to(".orange", {duration: 1, x: 200, scale: 0.2})
 
//多行
tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

Timeline Defaults(默認值)

如果你接下來動畫有相同屬性的東西,可以直接用defaults來讓所有的時間線內的動畫都有這個屬性,比如,動畫時序時間都要一秒

這樣默認時間線內的三個動畫都為一秒,如果要覆蓋掉,直接在該行的屬性內修改即可覆蓋,比如就orange自己是三秒

var tl = gsap.timeline({defaults: {duration: 1}});
 
tl.to(".green", {x: 200})
  .to(".orange", {x: 200, scale: 0.2,duration: 3})
  .to(".grey", {x: 200, scale: 2, y: 20});

時間線特殊屬性

可以控制一整組動畫的屬性,像是次數、相隔時間…等

repeat動畫重複次數
repeatDelay(一整組)動畫之間的相隔時間
yoyo向前向後交替
delay在開始之前的時間
onComplete撥完之後調用的函數
var tl = gsap.timeline({defaults: {duration: 5},repeat:10 ,yoyo:true });

時間線的方法

有點像是電視遙控器的概念,控制整組動畫的快慢、撥放進度,播放位置

restart()從頭播放
time()到指定時間(以秒為單位)
progress()把整組動畫分為0~1,0.5代表動畫一半,0開頭,1結束
duration()修改整組動畫的持續時間
delay()在開始之前的時間
var tl = gsap.timeline({defaults: {duration: 5},repeat:10 });
 
tl.duration(1)

結論

在學習GreenSock的過程中,發現他是一個很用心的套件,內容一直都有在翻新,所以會看到很多版本的用法,越新的版本就越簡單操控,但我也沒有時間將全部都學習完,最主要的目標是要將動畫加上移動路徑,並且由下拉scroll來控制,下一部份將透過scroll magic跟GreenSock來達成這個功能(但實際後續發現GreenSock就能做到了)

By dong

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。