JavaScript – 动画

随着互联网的普及，动画在各种网页中越来越常见，能够为用户带来更加优美的视觉体验。而JavaScript正好可以满足这种需求，我们可以用它来制作网页中的动画。这篇文章将介绍一些JavaScript中制作动画的基本方法和技巧。

setInterval和setTimeout

setInterval和setTimeout是JavaScript中比较常用的方法，用来间隔一段时间后再执行某一操作。其中setInterval会每隔一段时间就执行一次操作，而setTimeout只会在到达设定的时间延迟后执行一次。

下面是一个简单的使用setTimeout的例子，让一个元素在5秒后隐藏：

setTimeout(function() {
  document.getElementById('myElement').style.display = 'none';
}, 5000);

上面的代码使用匿名函数作为setTimeout的参数，5秒后执行这个函数，将id为“myElement”的元素隐藏起来。我们可以通过改变延迟时间和操作函数来实现不同的效果。

为了更好地掌控setInterval或setTimeout的运行，我们可以在调用这些函数后将返回值赋给一个变量。这样就可以在需要停止操作时清除计时器。下面是一个在10秒内每秒更改元素位置的例子：

var timer = setInterval(function() {
  var elem = document.getElementById('myElement');
  elem.style.left = (parseInt(elem.style.left) + 10) + 'px';
  if (parseInt(elem.style.left) >= 200) {
    clearInterval(timer);
  }
}, 1000);

在上面的例子中，我们使用setInterval并在每次执行时将元素左移10像素，直到元素左侧达到200像素时停止。通过在if语句中调用clearInterval来停止后续的操作。

requestAnimationFrame

除了setInterval和setTimeout，JavaScript还提供了requestAnimationFrame这个API来制作动画。requestAnimationFrame会每一帧（约16ms）执行一次操作，如果浏览器需要暂停执行（例如当用户向下滚动页面时），则执行也会暂停。这样可以保证动画的流畅性，并减少浏览器中不必要的操作。

下面是一个使用requestAnimationFrame制作动画的例子，让一个元素在5秒内向右移动200像素：

var startTime = null;
function move(currentTime) {
  var elem = document.getElementById('myElement');
  if (!startTime) startTime = currentTime;
  var timeElapsed = currentTime - startTime;
  elem.style.left = Math.min(0.1 * timeElapsed, 200) + 'px';
  if (timeElapsed < 5000) {
    requestAnimationFrame(move);
  }
}
requestAnimationFrame(move);

在上面的例子中，我们首先定义一个startTime变量，在move函数中获取时间差并根据差值更新元素位置。当时间小于5秒时，我们就再次调用requestAnimationFrame来更新位置。这样就可以实现元素的缓慢移动了。

缓动函数

缓动函数是一种数学函数，用于根据时间的不同阶段以不同的速度来移动元素。这种函数可以让动画更加真实、顺畅。在JavaScript中可以通过编写对应的函数来实现这个功能。一般来说，缓动函数可以被分为线性和非线性函数两种类型。

下面是一个简单的线性缓动函数，该函数在规定时间内根据进度返回当前位置：

function linearTween(t, b, c, d) {
  return c*t/d + b;
}

其中t表示已消耗的时间，b表示起始位置，c表示起始和目标位置之间的距离，d表示运动总时长。这个函数在运动开始时由慢变快，直到结束时达到最终的速度，这种效果也叫做匀速运动。

除了线性缓动函数，在制作动画时我们还可以使用其他的非线性函数，例如Ease-In、Ease-Out、Ease-In-Out等。这些函数可以根据动画的不同阶段设置不同的速度，让动画更加真实自然。下面是一个自己编写的缓动函数，可以在规定时间内根据不同阶段返回当前位置：

function easeInOut(t, b, c, d) {
  var v = (t /= d / 2) < 1 ? c / 2 * t * t + b : -c / 2 * (--t * (t - 2) - 1) + b;
  return v;
}

这个函数可以在每个进度阶段设置不同的速度，让动画更加逼真。

CSS3动画

除了使用JavaScript来制作动画外，我们还可以利用CSS3提供的动画效果来实现一些简单的动画。利用CSS3我们可以通过transition和animation属性来实现各种动态效果。下面是一个让一个元素变形为一个圆的例子：

#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;  /* 将方形变成圆形 */
  transition: all 1s;
}

#myElement:hover {
  transform: rotate(360deg);  /* 鼠标hover时旋转360度 */
}

在上面的例子中，我们使用border-radius属性将方形变成圆形，并利用transition属性让变形动画持续1秒。同时，当鼠标在元素上悬停时，我们可以使用transform属性让元素旋转360度，从而实现旋转的动画效果。

除了transition外，我们还可以使用animation属性来实现更加复杂的动画效果。例如让元素无限旋转，或者在每个阶段显示不同的帧等。

Canvas动画

在制作比较复杂的动画时，我们还可以使用HTML5的Canvas元素来实现。Canvas元素可以让我们直接在网页中绘制图像，从而制作各种动态效果。在绘制时，我们可以通过调用Canvas API来控制绘制的样式、位置、颜色等各个方面。

下面是一个绘制弹跳球的Canvas动画，球会反弹十次：

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 100;
var y = 100;
var vx = 5;
var vy = 0;
var gravity = 0.5;
var bounce = -0.9;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x, y, 50, 0, Math.PI*2);
  context.fillStyle = 'red';
  context.fill();
  x += vx;
  y += vy;
  vy += gravity;
  if (y + 50 > canvas.height) {
    y = canvas.height - 50;
    vy *= bounce;
  }
  if (x + 50 > canvas.width) {
    x = canvas.width - 50;
    vx = -vx;
  }
  if (x - 50 < 0) {
    x = 50;
    vx = -vx;
  }
  if (Math.abs(vy) < 0.1 && y === canvas.height - 50) {
    if (--bounces === 0) return;
    vy = -Math.abs(vy) * 0.9;
    vx *= 0.9;
  }
  requestAnimationFrame(draw);
}

draw();
</script>

在上面的例子中，我们首先通过Canvas API绘制了一个半径为50的圆圈。然后我们在每一帧都更新圆圈位置，并根据重力和反弹力计算圆圈的速度和位置，并在某些条件下限制圆圈的移动。最后，我们通过调用requestAnimationFrame来让动画持续运行。

Web动画API

除了上述介绍的方法外，我们还可以使用Web动画API来制作动画。Web动画API是一组API，用于在网页中制作更加复杂的动画效果，例如3D动画等。下面是一个简单的使用Web动画API的例子：

var myElement = document.getElementById('myElement');
var animation = myElement.animate([
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  duration: 2000,
  iterations: Infinity
});

在上面的例子中，我们使用animate方法来为元素设置动画效果。该方法需要传入两个参数，第一个参数是用于描述动画的关键帧值（在这里是rotate变换的角度），第二个参数是一个可选的选项对象。在选项对象中，我们可以指定动画持续时间、重复次数等属性。

结论

本文介绍了一些JavaScript中制作动画的基本方法和技巧。通过使用setInterval和setTimeout、requestAnimationFrame、缓动函数、CSS3动画、Canvas动画以及Web动画API，我们可以制作出各种不同的动画效果，让网页更加生动有趣。除此之外，我们还可以通过结合其他HTML5和CSS3的特性来制作更加复杂的动画效果。