JavaScript 動畫：為網頁注入活力

大家好，有志成為程序員的各位！今天，我們要一起進入令人興奮的 JavaScript 動畫世界。作為你們親切友善的電腦老師，我會一步步引導你們走過這個旅程。到了這個教學的結尾，你將能夠創建有機會讓你的網頁跳起舞來的動畫！那麼，我們就開始吧！

JavaScript - Animation

了解 JavaScript 中的動畫

在我們投入代碼之前，讓我們先了解在網頁開發的背景下動畫到底是什麼。動畫簡單來說就是通過快速改變網頁上元素的屬性來創造運動的幻覺。這就像創造一本翻頁書，每一頁都與前一頁略有不同，當你快速翻閱它們時，看起來就像圖像在移動。

在 JavaScript 中，我們可以通過隨著時間改變 HTML 元素的屬性來創造動畫。這可能包括改變元素的位置、大小、顏色，甚至它的可見性。

手動動畫

讓我們從最簡單形式的動畫開始：手動動畫。在這種方法中，我們定期手動改變元素的屬性。

範例 1：移動一個方塊

以下是一個簡單的範例，將一個方塊在螢幕上移動：

<div id="myBox" style="position: absolute; left: 0; width: 50px; height: 50px; background-color: red;"></div>

<script>
let box = document.getElementById("myBox");
let position = 0;

function moveBox() {
position += 1;
box.style.left = position + "px";
if (position < 350) {
requestAnimationFrame(moveBox);
}
}

moveBox();
</script>

讓我們分解一下：

我們使用一個 <div> 元素創造一個紅色方塊。
我們使用 JavaScript 透過 getElementById() 獲取這個方塊的引用。
我們定義一個 moveBox() 函數，它：

將 position 變量增加 1。
將方塊的 left 样式屬性設定為這個新位置。
如果位置小於 350，則使用 requestAnimationFrame() 再次調用自身。

我們調用 moveBox() 來啟動動畫。

在這裡，requestAnimationFrame() 方法非常關鍵。它告訴瀏覽器我們希望執行動畫，並請求瀏覽器在下次重繪之前調用指定的函數來更新動畫。這個方法有助於創造平滑的動畫。

自動動畫

雖然手動動畫給我們提供了對動畫的細粒度控制，但它可能對更複雜的動畫來說很麻煩。這就是自動動畫派上用場的地方。JavaScript 提供了多種方法來自動化動畫，其中最流行的一種是使用 setInterval() 函數。

範例 2：跳動的圓形

讓我們創造一個自動改變大小的圓形：

<div id="myCircle" style="width: 100px; height: 100px; background-color: blue; border-radius: 50%;"></div>

<script>
let circle = document.getElementById("myCircle");
let size = 100;
let growing = true;

setInterval(function() {
if (growing) {
size += 2;
if (size >= 200) growing = false;
} else {
size -= 2;
if (size <= 100) growing = true;
}
circle.style.width = size + "px";
circle.style.height = size + "px";
}, 20);
</script>

在這個範例中：

我們使用一個 <div> 元素創造一個藍色圓形，並將其 border-radius 設為 50%。
我們使用 setInterval() 每隔 20 毫秒執行一次函數。
這個函數會增加或減少圓形的尺寸，創造出一個跳動的效果。

setInterval() 函數對於需要以固定速率持續運行的動畫來說非常適合。

使用鼠標事件進行滾動

現在，讓我們使動畫更具互動性！我們可以使用鼠標事件在用戶與元素交互時觸發動畫。

範例 3：滑鼠悬停時改變顏色的按鈕

以下是一個當你將滑鼠悬停在上方時會改變顏色的按鈕範例：

<button id="myButton" style="padding: 10px 20px; background-color: green; color: white; border: none; cursor: pointer;">將滑鼠移至此處!</button>

<script>
let button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
this.style.backgroundColor = "blue";
});

button.addEventListener("mouseout", function() {
this.style.backgroundColor = "green";
});
</script>

在這個範例中：

我們創造了一個按鈕元素。
我們為按鈕添加了兩個事件监聽器：

mouseover：當滑鼠指針進入按鈕區域時會觸發此事件。
mouseout：當滑鼠指針離開按鈕區域時會觸發此事件。

當這些事件發生時，我們會改變按鈕的 backgroundColor。

這創造了一個簡單但有效的動畫，它會對用戶的交互作出反應。

動畫方法表

以下是我們討論過的動畫方法的總結：

方法	描述	使用案例
`requestAnimationFrame()`	告訴瀏覽器你希望執行動畫，並請求瀏覽器在下次重繪之前調用指定的函數來更新動畫。	平滑、高效的動畫，需要盡可能多地運行。
`setInterval()`	在指定的毫秒數之間調用函數或計算表達式。	需要以固定速率持續運行的動畫。
事件监聽器	讓你可以將事件处理器附加到元素上，這可以觸發動畫。	對用戶動作作出反應的互動動畫。

結論

好了，各位！我們已經一起走過了 JavaScript 動畫的基本知識，從手動移動到自動效果，再到交互式元素。記住，掌握動畫的關鍵是練習和嘗試。不要害怕這些概念，並創造你自己的獨特動畫。

當我們結束時，我會想起我曾經有一個學生，她起初對動畫感到害怕。她從移動一個方塊開始，到了學期末，她已經創造了一個具有複雜動畫的完整互動遊戲。這正是告訴我們，只要我們有耐心和毅力，我們就能創造出令人驚奇的事物！

所以，勇往直前，我的動畫新手們，讓我們的網頁活起來！開心地編程吧！

Credits: Image by storyset