GSAP入門
要學就學最強的～
SlimWeb 本身已經有載入 GSAP 的相關檔案，所以不管在區塊、頁面、或是部落格文章，你都可以輕鬆地寫出想要的動畫效果，網路上有許多 GSAP 的教學，但有些地方對初學者不太友善，如果找到的教學比較偏向某種特定效果的話，可能會看得霧煞煞，簡單來講先掌握 GSAP 的三種基本方法，你就可以做出不錯的動畫～
首先在建立新的部落格或是頁面，進入原始碼後，按下方的 ＋JS 按鈕，為這個頁面建立一個JS文件(不用打副檔名)
jQuery(document).ready(function($) { //元素載入後做什麼事寫在這裡～ });
接著讓我們建立要用於動畫的元素，這裡我使用一張可愛蜘蛛人的 png 圖片，進入原始碼為我們的圖片加上 id 與 class 屬性。
<img id="spider1" class="spider" src="/images/spman.png" alt="蜘蛛人">
元素有了 id 之後，我們就可以用 GSAP 來針對這個 id 做動畫，GSAP 有三種動畫處理模式，分別是To, From, 以及 FromTo，讓我們一種一種來看～
To
希望目標從目前位置移動到何處
jQuery(document).ready(function($) { gsap.to('#spider1', { x: '100%', //沿著x軸往右移動 opacity: 0, //到達移動地點後，透明度為 0 duration: 2, //移動時間為 2 秒 repeat: -1 //一直重複這段動畫 }) });
儲存檔案後開新視窗看看～如果像上面一樣動起來了，恭喜你～完成了第一個動畫～
現在讓我們使用同一張圖片，但使用 From 來做動畫
From
希望目標從什麼位置回到目前的位置
jQuery(document).ready(function($) { gsap.from('#spider1', { x: '-100%', //沿著x軸往右移動 opacity: 0, //到達移動地點後，透明度為 0 duration: 2, //移動時間為 2 秒 repeat: -1 //一直重複這段動畫 }) });
看出 from 跟 to 的差異了嗎～？ to 就是從目前的狀態到另一種狀態，from 則是從另一種狀態回到目前狀態，知道這兩種模式後 FromTo 就很好理解了，就是從一種狀態到另一種狀態，而兩種狀態都不是目前的狀態，蜘蛛人目前的位置是在中間，但我希望的動畫是，他從左邊出來，一直移動到右邊，這時我們就可以用 FromTo 做這段動畫
fromTo
目前狀態不適合 to 或是 from 時，就使用 fromTo
我希望蜘蛛人從左邊出現，然後移動到右邊，整個移動過程花費4秒
jQuery(document).ready(function($) { gsap.fromTo('#spider1', { x: '-100%', //第一種狀態在左邊的位置 opacity: 0 //第一種狀態的透明度 },{ x: '100%', //沿著x軸往右移動 opacity: 1, //到達移動地點後，透明度為 1 duration: 4, //移動時間為 4 秒 repeat: -1 //一直重複這段動畫 }) });
看到這裡你可能會有個疑問，我們如果一開始就把圖片放在最左邊或是最右邊，就可以單獨使用 from 或是 to 來完成動畫，那為什麼還要有 fromTo 呢～？
這是為了保持版面的完整性，原本的版面設計圖片放在中間很好看，但為了動畫將他放到右邊，用戶若是不允許執行 JavaScript, 或是用戶手機/電腦效能太低落，動畫被延遲了，導致圖片沒有跑回中間或是沒有出現～這樣對版面就造成了破壞～
滑順的重複動畫
讓一直重複的動畫產生倒放的滑順效果
jQuery(document).ready(function($) { gsap.fromTo('#spider1', { x: '-100%', //第一種狀態在左邊的位置 opacity: 0 //第一種狀態的透明度 },{ x: '100%', //沿著x軸往右移動 opacity: 1, //到達移動地點後，透明度為 1 duration: 4, //移動時間為 2 秒 repeat: -1, //一直重複這段動畫 yoyo: true //產生絲滑的倒放效果 }) });
動畫的靈魂設定～ease
讓你的動畫看起來生動自然，展現GSAP的強悍
gsap.fromTo('#spider1', { x: '-100%', //第一種狀態在左邊的位置 opacity: 0, //第一種狀態的透明度 rotate: -45, //第一種狀態呈現-45度 }, { x: '100%', //沿著x軸往右移動 opacity: 1, //到達移動地點後，透明度為 1 duration: 4, //移動時間為 2 秒 repeat: -1, //一直重複這段動畫 ease: 'bounce.out', //彈跳效果 rotate: 45, //第二種狀態轉45度 yoyo: true //產生絲滑的倒放效果 })
根據 GSAP 官方的建議，將動畫放入 function 內是比較好的做法，也方便後續的調用，所以我們寫一個 play_animation 的 function，並將我們的動畫放入這個 function 內，並在 Document Ready 事件發生時播放動畫
jQuery(document).ready(function($) { play_animation(); }); function play_animate(){ gsap.fromTo('#spider1', { x: '-100%', //第一種狀態在左邊的位置 rotate: -45,//第一種狀態我左旋轉45度 opacity: 0 //第一種狀態的透明度 }, { x: '100%', //沿著x軸往右移動 opacity: 1, //到達移動地點後，透明度為 1 rotate: 45,//往右旋轉45度 duration: 4, //移動時間為 2 秒 repeat: -1, //一直重複這段動畫 ease: 'bounce.out', //彈跳效果 yoyo: true }) }
TinyMCE 的內容是在 iFrame 元素內，所以我們無法直接在編輯器內看到動畫，因為 GSAP 無法穿透 iFrame 找到 #spider1 元素，如果想要在編輯器內看到動畫，就必須對 play_animate() 函數做一些加工
function play_animate(){ let body = $('body'); //建立一個變數並指向目前HTML的body元素 //檢查是否在編輯模式下 if ($('#tine').length > 0) { body = tinymce.activeEditor.getBody(); //在編輯模式下，將 body 變數指向編輯器內的 body } let spider1 = $('#spider1, body); //定義一個變數 spider 並指向 body 內的 #spider1 gsap.fromTo(spider1, { //將變數放入gsap x: '-100%', //第一種狀態在左邊的位置 rotate: -45,//第一種狀態我左旋轉45度 opacity: 0 //第一種狀態的透明度 }, { x: '100%', //沿著x軸往右移動 opacity: 1, //到達移動地點後，透明度為 1 rotate: 45,//往右旋轉45度 duration: 4, //移動時間為 2 秒 repeat: -1, //一直重複這段動畫 ease: 'bounce.out', //彈跳效果 yoyo: true }) }
經過這段修改後，你就能在編輯器內看到動畫效果，同時也不影響儲存為正常網頁的結果，要注意的是當你進入原始碼視窗又離開後，動畫會被停止，你可以從 console 內執行 play_animation 函數
最後～讓我們養成一個好習慣，為我們的動畫元素做好 CSS 優化的設定，進入原始碼視窗，點選 ＋CSS, 輸入檔案名稱後編輯器就會打開一份新的 CSS 文件，在這份文件內貼上
這段 CSS 告訴瀏覽器，擁有 spider 類別的元素，其透明度以及左邊的位置將會發生改變，請在這些元素上給予更好的效能喔～
以這個頁面來說，總共有5個小蜘蛛人，id 分別是 spider1 - spider5，但這5個蜘蛛人都有共同的類別 spider, 所以在 CSS 內我們只需要打上 .spider 就行。
以上是 GSAP 的基本使用方式，更多的資訊請參考 GSAP 文件，以後在頁面上想做些小巧的動畫～就不需要再去找CSS, 或是 JS 庫來使用了～當然 GSAP 的強大遠不止於此，許多網頁特效甚至遊戲都是利用 GSAP 開發的喔，之後我會再寫一篇 GSAP ScrollTrigger 的介紹（配合滑鼠滾輪或手機滑動的動畫效果）
Last update on 2025-02-03 14:10:00Publish on 2025-01-12 14:10:00.spider { will-change: opacity, left; }
這段 CSS 告訴瀏覽器，擁有 spider 類別的元素，其透明度以及左邊的位置將會發生改變，請在這些元素上給予更好的效能喔～
以這個頁面來說，總共有5個小蜘蛛人，id 分別是 spider1 - spider5，但這5個蜘蛛人都有共同的類別 spider, 所以在 CSS 內我們只需要打上 .spider 就行。
以上是 GSAP 的基本使用方式，更多的資訊請參考 GSAP 文件，以後在頁面上想做些小巧的動畫～就不需要再去找CSS, 或是 JS 庫來使用了～當然 GSAP 的強大遠不止於此，許多網頁特效甚至遊戲都是利用 GSAP 開發的喔，之後我會再寫一篇 GSAP ScrollTrigger 的介紹（配合滑鼠滾輪或手機滑動的動畫效果）
一個在五濁亂世中
不願靠話術生存的工程師
More Related...
TinyMCE/AI 編輯器介紹ChatGPT的資料庫應用由 SlimWeb 打造的創業春天為什麼不用WordPress來架設網站？
-
$1
-
$29,999
$39,999
