TweenMax 教學- Special properties

2021-01-26 15:36:52

Easing
在 TweenMax 還可以延伸做更進階的動畫效果，他們在 easing 這類設計了一些還不錯的效果，用法是類似這樣:
ease:Bounce.easeOut

要看各種 ease 效果可以參考官網的產生器，選擇一個喜歡的 easing 效果就好了。

簡單範例如下：

Callbacks
可以再以下各階段執行 callback

onComplete: 動畫完成時
onStart: 動畫開始時
onUpdate: 動畫更新時
onRepeat: 動畫重複時
onReverseComplete: 動畫倒轉完成時

view plain copy to clipboard print

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.

控制動畫
可以用以下方式控制動畫

view plain copy to clipboard print

//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.

tailwindcss 安裝教學 TweenMax 教學- 序列動畫 Timeline

你可能也會喜歡的

javascript 的 Map 與 Set

javascript ES6 的資料型別 symbol 說明與應用

Rellax.js- 功能簡單但強大的視差滾動套件

[jQuery] 使用 .on 將事件綁到動態產生的元素上

在 javascript 裡使用 set 與過濾重複的值

[jQurey] 取得觸發事件元素的 index，無論在任何網頁結構之下

課程推薦

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。