JavaScript可以通过改变元素的CSS属性或者使用定时器来控制动画效果。以下是几种控制动画的方法：
使用CSS动画可以通过改变元素的CSS属性来实现动画效果。CSS动画有以下几种方式：
/* 定义动画的关键帧 */
@keyframes example {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
/ 应用动画 /
div {
width: 100px;
height: 100px;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
使用JavaScript定时器可以通过改变元素的CSS属性来实现动画效果。以下是使用JavaScript定时器实现动画的示例：
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
使用canvas元素可以通过绘制图形来实现动画效果。以下是使用canvas元素绘制图形的示例：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var 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();
x += dx;
y += dy;
if(x + dx > canvas.width-10 || x + dx < 10) {
dx = -dx;
}
if(y + dy > canvas.height-10 || y + dy < 10) {
dy = -dy;
}
}
setInterval(draw, 10);
