javascript中的动画,一个起点

在JavaScript中，动画是通过不断更新页面元素的样式来实现的。这可以通过使用setInterval、setTimeout、requestAnimationFrame等函数来实现。在JavaScript中，有多种方法可以实现动画，其中最常用的是使用CSS动画和Canvas动画。

1. CSS动画

CSS动画是通过在CSS样式表中定义动画来实现的。可以使用关键帧动画（@keyframes）和CSS过渡（transition）来实现动画效果。

例如，以下是一个简单的关键帧动画示例：

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: move 2s linear infinite;
}

这个示例中，我们定义了一个名为move的关键帧动画，它会在2秒内将一个元素从左移动到右。然后，我们将这个动画应用到一个名为.box的元素上。

1. Canvas动画

Canvas动画是通过在HTML页面中使用<canvas>元素来实现的。可以使用JavaScript代码来绘制图形和动画。

例如，以下是一个简单的Canvas动画示例：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();

    requestAnimationFrame(draw);
  }

  draw();
</script>

这个示例中，我们首先获取了<canvas>元素的引用，然后使用getContext方法获取了一个2D上下文对象。然后，我们定义了一个draw函数，它会在每一帧中清除画布，绘制一个红色的圆形，并使用requestAnimationFrame函数来调度下一帧的绘制。

总之，JavaScript中的动画可以通过多种方法来实现，包括使用CSS动画和Canvas动画等。