GSAP 官方文件 Tween (補間) 裡有著許多的 methods (方法)，主要可用來操作 GSAP 動畫的相關控制
例中所用的動畫操作方法如下：
- play()：播放
- pause()：暫停
- reverse()：反轉
- restart()：重新開始
- timeScale()：加速 (值 2)、減速 (值 0.5)、正常動畫速度 (值 1)
- seek()：跳轉到特定秒數 (值 2 跳到二秒)
- progress()：取得當前動畫速度
- kill()：殺死動畫
使用例子如下。
See the Pen GSAP – 33 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
play()：播放
1 2 3 4 5 6 7 | play( from:Number, suppressEvents:Boolean ) : self // 從播放頭目前所在的位置開始播放 myAnimation.play(); // 從動畫的 2 秒開始播放 myAnimation.play(2); |
pause()：暫停
1 2 3 4 5 6 7 | paused( value:Boolean ) : [Boolean | self] // 指定動畫對象進行暫停 myAnimation.paused(); // 將暫停狀態設為true（就像pause()） myAnimation.paused(true); |
reverse()：反轉
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | reverse( from:*, suppressEvents:Boolean ) : self // 從目前播放開頭或任意位置反向播放，沒設定參數由目前的任意位置進行反轉，到頭或尾就停 myAnimation.reverse(); // 將回放從動畫的 2 秒處倒轉 myAnimation.reverse(2); // 直接由動畫結尾處反向播放，到頭就停 myAnimation.reverse(0); // 從動畫結束前 1 秒開始反向播放，直接跳到頭就停 myAnimation.reverse(-1) // 往反向後可重覆操作反向，直到動畫開頭或結尾停值 myAnimation.reversed(!myAnimation.reversed()) |
restart()：重新開始
1 2 | // 重新啟動，不包括任何定義的延遲 myAnimation.restart(); |
timeScale()：播放速度
用於縮放動畫時間的因子，
1 2 3 4 5 6 7 8 9 10 11 | timeScale( value:Number ) : [Number | self] // 其中 1 = 正常速度（預設值） myAnimation.timeScale(); myAnimation.timeScale(1); // -1 = 以正常速度後退 myAnimation.timeScale(-1); // 將 timeScale 設定為半速 myAnimation.timeScale(0.5); |
seek()：跳到特定時間，不影響實例是否暫停或反轉。
seek 方法語法如下，主要使用第一個參數 time 設定要前往的時間。
1 2 3 4 | seek( time:*, suppressEvents:Boolean ) : self // 跳到正好 2 秒 myAnimation.seek(2); |
progress()：取得當前動畫速度
1 2 3 4 5 6 7 | progress( value:Number, suppressEvents:Boolean ) : [Number | self] // 將進度設定為已完成四分之一 myTween.progress(0.25); // 進度 1 表示完成 100% myTween.progress(1); |
kill()：殺死動畫
1 2 3 4 | kill( target:Object, propertiesList:String ) : self // 殺死整部動畫 animation.kill(); |
若要只殺死動畫中的某個目標（或多個目標），請使用第一個參數。
若要終止動畫的特定補間屬性，請使用第二個參數，它是逗號分隔的屬性名稱清單。
1 2 3 4 5 6 7 8 9 10 11 | // 殺死與目標「myObject」相關的動畫的所有部分（如果補間有多個目標，則其他部分不會受到影響） animation.kill(myObject); // 僅殺死動畫的 “x” 和 “y” 屬性（所有目標） animation.kill(null, "x,y"); // 僅殺死目標 “myObject” 動畫的 “x” 和 “y” 屬性 animation.kill(myObject, "x,y"); // 僅終止目標「myObject1」和「myObject2」動畫的「不透明度」屬性 animation.kill([myObject1, myObject2], "opacity"); // 另外可以使用選擇器例如：".class1, .class2" |
Comments are closed.