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 的基础知识，你就可以轻松地实现自己想要的动画效果了。