JavaScript 是目前最流行的網頁前端程序語言之一，它可以為網頁增加許多酷炫的動畫效果。如果你想了解如何使用 JavaScript 寫動畫，那么這篇文章就為你而寫。

要使用 JavaScript 寫動畫，你需要掌握一些基本知識。比如，你需要知道什么是 DOM（文檔對象模型）和 Canvas（畫布），因為它們是寫動畫的核心。

對于 DOM，我們可以使用 JavaScript 來修改元素的 CSS 樣式屬性來實現動畫效果。比如，我們可以寫出這樣一個代碼：

let element = document.getElementById("myElement");
function move() {
element.style.position = "absolute";
let position = 0;
setInterval(frame, 10);
function frame() {
if (position == 350) {
clearInterval(id);
} else {
position++;
element.style.top = position + "px";
element.style.left = position + "px";
}
}
}

這個代碼會移動一個 HTML 元素，也就是 id 為 "myElement" 的元素，使它沿著 x 和 y 方向上移動 350 個像素。

對于 Canvas，我們可以使用 JavaScript 里面的 Canvas API 來繪制圖形并實現動畫效果。比如，我們可以實現這樣一個代碼：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let x = canvas.width/2;
let y = canvas.height-30;
let dx = 2;
let dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if(x + dx >canvas.width-10 || x + dx< 10) {
dx = -dx;
}
if(y + dy >canvas.height-10 || y + dy< 10) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 10);

這個代碼將實現一個小球在畫布上來回移動的效果。

除了 DOM 和 Canvas，我們還可以使用一些庫來幫助我們寫動畫。比如，我們可以使用 jQuery 庫和它自帶的 animate() 函數來實現動畫效果。類似于這樣的代碼：

$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'}, 3000);
});
});

這個代碼會使一個 div 元素以動畫的方式從左側移動到右側。代碼中的 animate() 函數將接受兩個參數：一個是 CSS 屬性對象，另一個是動畫持續時間。

當然，除了上述這些方法，還有許多其他寫動畫的方式，對于具體的應用場景，不同的方法會有不同的效果。但總之，只要你掌握了 JavaScript 的基礎知識，你就可以輕松地實現自己想要的動畫效果了。