Day05 - 常用 Callbacks 簡介 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 5

自我挑戰組

從 0 開始學 GSAP 馬拉松之旅系列第 5 篇

Day05 - 常用 Callbacks 簡介

17th鐵人賽

Jae

2025-09-19 23:52:26

29 瀏覽

分享至

雖然關於 Tween 的屬性與方法都還沒有詳細介紹，但透過之後的實作一邊介紹，似乎也是個可以嘗試的方向。在實作之前，今天想再分享常用的回調函數（Callback），分別是 onComplete、onUpdate、onComplete 。

常見三大 Callbacks

Callback	觸發時機
`onStart`	動畫一開始時就觸發
`onUpdate`	動畫每一幀更新時都在觸發
`onComplete`	動畫完成時才觸發

只有文字上的描述似乎顯得單薄，以下是同時用了這三個 Callbacks 進行小嘗試的進度條：
GIF動畫

<body>
 <section class="flex h-screen justify-center items-center">
  <div class="w-40 h-auto flex flex-col items-start relative">
    <div class="progress-bar w-10 h-5 bg-orange-300 rounded-lg relative overflow-hidden">
      <div class="star w-5 h-5 bg-white absolute top-1/2 -translate-y-1/2 rounded-full"></div>
    </div>
    <p class="status pt-2 text-orange-400">Welcome!</p>
  </div>
</section>  
</body>

const progressBar = document.querySelector(".progress-bar");
const star = document.querySelector(".star");
const status = document.querySelector(".status");

gsap.to(progressBar, {
  width: 160,   
  duration: 5,
  ease: "power2.inOut",
  onStart: () => { status.textContent = "Welcome!"; },
  onUpdate: function() {
    const progress = this.progress();
    const maxWidth = 160 - 25; 
    star.style.left = progress * maxWidth + "px";
    status.textContent = "Loading... " + Math.round(progress * 100) + "%";
  },
  onComplete: () => { status.textContent = "Finished!"; }
});

備註：小星星是用 CSS clip path 製作出來的，就不特別分享啦～