Easing
在 TweenMax 還可以延伸做更進階的動畫效果，他們在 easing 這類設計了一些還不錯的效果，用法是類似這樣:
ease:Bounce.easeOut
要看各種 ease 效果可以參考官網的產生器，選擇一個喜歡的 easing 效果就好了。
簡單範例如下：
Callbacks
可以再以下各階段執行 callback
- onComplete: 動畫完成時
- onStart: 動畫開始時
- onUpdate: 動畫更新時
- onRepeat: 動畫重複時
- onReverseComplete: 動畫倒轉完成時
- TweenMax.to("#logo", 1, {x:100, onComplete:tweenComplete, onCompleteParams:["done!"]});
- function tweenComplete(message) {
- console.log(message);
- }
參考官網範例如下：
See the Pen Callbacks and parameters by GreenSock (@GreenSock) on CodePen.
控制動畫
可以用以下方式控制動畫
- //create a reference to the animation
- var tween = TweenMax.to("#logo", 1 {x:100});
- //pause
- tween.pause();
- //resume (honors direction - reversed or not)
- tween.resume();
- //reverse (always goes back towards the beginning)
- tween.reverse();
- //jump to exactly 0.5 seconds into the tween
- tween.seek(0.5);
- //jump to exacty 1/4th into the tween's progress:
- tween.progress(0.25);
- //make the tween go half-speed
- tween.timeScale(0.5);
- //make the tween go double-speed
- tween.timeScale(2);
- //immediately kill the tween and make it eligible for garbage collection
- tween.kill();
See the Pen NMrBbE by GreenSock (@GreenSock) on CodePen.
![[jQuery] 檢查被勾選的 checkbox 的數目](/assets/upload/1588088792122_0.jpg)
