Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /volume1/web/param.php on line 21 Warning: Uninitialized string offset 0 in /volume1/web/param.php on line 32 Warning: Uninitialized string offset 1 in /volume1/web/param.php on line 32 SlimWeb

首頁 / 精選專題 / GSAP入門

GSAP入門

要學就學最強的～

SlimWeb 本身已經有載入 GSAP 的相關檔案，所以不管在區塊、頁面、或是部落格文章，你都可以輕鬆地寫出想要的動畫效果，網路上有許多 GSAP 的教學，但有些地方對初學者不太友善，如果找到的教學比較偏向某種特定效果的話，可能會看得霧煞煞，簡單來講先掌握 GSAP 的三種基本方法，你就可以做出不錯的動畫～

首先在建立新的部落格或是頁面，進入原始碼後，按下方的 ＋JS 按鈕，為這個頁面建立一個JS文件(不用打副檔名)

建立 JS 文件後 Tiny 會直接開啟這個 JS 文件來你編輯，輸入 ready 後按 TAB 鍵，編輯器會自動生成一段 jQuery 的原始碼，如下 


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

希望目標從目前位置移動到何處

我希望蜘蛛人從他目前的位置，往右移動到他付物件100%的位置，一邊移動一邊慢慢消失，整個移動過程設定為2秒鐘 

jQuery(document).ready(function($) {
    gsap.to('#spider1', {
        x: '100%',   //沿著x軸往右移動
        opacity: 0,  //到達移動地點後，透明度為 0
        duration: 2, //移動時間為 2 秒
        repeat: -1   //一直重複這段動畫
    })
});



儲存檔案後開新視窗看看～如果像上面一樣動起來了，恭喜你～完成了第一個動畫～
現在讓我們使用同一張圖片，但使用 From 來做動畫


From

希望目標從什麼位置回到目前的位置

我希望蜘蛛人從他左邊 -100% 的位置，回到他目前的位置，然後透明度從 0 恢復到原本的 1，整個移動過程設定為2秒鐘 

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, 或是用戶手機/電腦效能太低落，動畫被延遲了，導致圖片沒有跑回中間或是沒有出現～這樣對版面就造成了破壞～


滑順的重複動畫

讓一直重複的動畫產生倒放的滑順效果

上面那一段動畫在結束的時候會回到起始的位置再來一次，看起來就有些顛簸，我們希望動畫成為一個閉環，只要加上一個 yoyo 參數就行了 

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的強悍

ease 設定可以讓你的動畫更加生動，這也是 GSAP 強悍的地方，關於 ease 的各種設定請參考此處，這裡我使用效果性較強的 bounce.out 來做範例，你可以透過參數調整來決定想要的強度 

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 文件，在這份文件內貼上 

.spider { 
      will-change: opacity, left;
 }

這段 CSS 告訴瀏覽器，擁有 spider 類別的元素，其透明度以及左邊的位置將會發生改變，請在這些元素上給予更好的效能喔～
以這個頁面來說，總共有5個小蜘蛛人，id 分別是 spider1 - spider5，但這5個蜘蛛人都有共同的類別 spider, 所以在 CSS 內我們只需要打上 .spider 就行。

以上是 GSAP 的基本使用方式，更多的資訊請參考 GSAP 文件，以後在頁面上想做些小巧的動畫～就不需要再去找CSS, 或是 JS 庫來使用了～當然 GSAP 的強大遠不止於此，許多網頁特效甚至遊戲都是利用 GSAP 開發的喔，之後我會再寫一篇 GSAP ScrollTrigger 的介紹（配合滑鼠滾輪或手機滑動的動畫效果）

SlimWeb Developer Eric
一個在五濁亂世中
    不願靠話術生存的工程師
Eric Chen

最後更新 2025-02-03 14:10:00發表日期 2025-01-12 14:10:00

延伸閱讀...

TinyMCE 編輯器介紹ChatGPT的資料庫應用由 SlimWeb 打造的創業春天為什麼不用WordPress來架設網站？

相關商品

Related Products
229

$29,999 $29,999

SlimWeb 全功能電商系統
117

$9,999 $19,999

SlimGPT/應用型人工智能

  • SlimWeb 全功能電商系統

    SlimWeb 全功能電商系統

    $29,999 $29,999

  • SlimGPT/應用型人工智能

    SlimGPT/應用型人工智能

    $9,999 $19,999

網頁動畫

線上刷卡

智能客服

後端設計

Email登入