Day02 - Tween 基本語法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 2

自我挑戰組

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

Day02 - Tween 基本語法

17th鐵人賽

Jae

2025-09-16 23:55:54

28 瀏覽

分享至

今天來到 GSAP 裡基礎的 3 大語法 gsap.to、gsap.from、gsap.fromTo。
自己第一眼看到，覺得最不好快速理解的是 gsap.from，因此接下來想藉由以下的小故事來分享：

在戲劇的世界裡，任何事都是可能發生的。想像我們來到劇院，布簾緩緩拉起，主角雞先生走向舞台正中央，他開始講述自己的故事：從一顆雞蛋，經歷各種奇遇，最後不小心變成了一塊雞塊...

gsap.to( 雞先生,{ 雞塊 }); // 順序法：現在 → 雞塊
gsap.from( 雞先生,{ 雞蛋 });  //「從前從前，我曾是一顆可愛的蛋...」雞先生說。
gsap.fromTo( 雞先生,{ 雞蛋 },{ 雞塊 }); // 明確起點到終點：雞蛋 → 雞塊

雖然以生物學演化的角度來說，雞不可能變回雞蛋了，但究竟是雞生蛋還是蛋生雞，也還沒有非常肯定的說法，在這裡就允許我借用一下這個故事吧。

最後，也附上自己簡單的小嘗試：

<body class="flex gap-8 justify-center items-center h-screen">
  <div id="box1" class="w-20 h-20 bg-red-300 text-center rounded-xl opacity-60">to</div>
  <div id="box2" class="w-20 h-20 bg-green-300 text-center rounded-xl opacity-60 -mb-10 ml-5">from</div>
  <div id="box3" class="w-20 h-20 bg-blue-300 text-center rounded-xl opacity-50">fromTo</div>
</body>

gsap.to("#box1", {
    x: 150,
    rotation: 360,
    duration: 2,
    ease: "power1.inOut"
});


gsap.from("#box2", {
    x: -100,
    y: 500,
    duration: 2,
    ease: "back.out(1.7)"
});

gsap.fromTo("#box3",
    { x: 600}, 
    { x: -250, y: 50, duration: 2, ease: "bounce.out" }
);