如何使用 SVG 和 Canvas 来创建动画？

使用 SVG 创建动画

CSS 动画

• 定义 SVG 图形：首先创建一个基本的 SVG 图形元素，例如一个圆形：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
  </svg>
  

• 添加 CSS 动画：通过 CSS 为 SVG 图形添加动画效果。例如，让圆形在 5 秒钟内从左到右移动：

@keyframes moveCircle {
   
  from {
   
    cx: 0;
  }
  to {
   
    cx: 100;
  }
}

#myCircle {
   
  animation: moveCircle 5s linear infinite;
}

在上述代码中，定义了一个名为 moveCircle 的关键帧动画，从 cx: 0 到 cx: 100，表示圆形的圆心横坐标从 0 移动到 100。然后将这个动画应用到 id 为 myCircle 的圆形元素上，设置动画持续时间为 5 秒，线性运动，并且无限循环。

JavaScript 动画

• 获取 SVG 元素：使用 JavaScript 获取 SVG 图形元素，例如对于上述的圆形：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
  </svg>
  <script>
  var circle = document.getElementById('myCircle');
  </script>
  

• 创建动画函数：编写一个函数来更新圆形的属性以实现动画效果。例如，让圆形的半径在每次点击按钮时增大 10：

<button onclick="enlargeCircle()">增大圆形半径</button>
<script>
  var circle = document.getElementById('myCircle');
  var radius = 40;

  function enlargeCircle() {
    
    radius += 10;
    circle.setAttribute('r', radius);
  }
</script>

在这个例子中，定义了一个 enlargeCircle 函数，每次点击按钮时，半径 radius 的值增加 10，并通过 setAttribute 方法更新圆形的半径属性，从而实现了圆形逐渐增大的动画效果。

使用 Canvas 创建动画

• 创建 Canvas 元素：在 HTML 中添加一个 Canvas 元素：

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

• 获取 Canvas 上下文：使用 JavaScript 获取 Canvas 的 2D 上下文：

  <script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  </script>
  

• 绘制初始图形：在 Canvas 上绘制一个初始的图形，例如一个矩形：

  <script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  
  ctx.beginPath();
  ctx.rect(50, 50, 100, 100);
  ctx.fillStyle = 'blue';
  ctx.fill();
  </script>
  

  这段代码使用 Canvas 的 API 绘制了一个左上角坐标为 (50, 50)，宽高为 100 的蓝色矩形。

• 创建动画循环：使用 requestAnimationFrame 函数来创建动画循环，不断更新图形的状态以实现动画效果。例如，让矩形在 Canvas 上左右移动：

<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var x = 50;
  var speed = 2;

  function animate() {
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.rect(x, 50, 100, 100);
    ctx.fillStyle = 'blue';
    ctx.fill();

    x += speed;
    if (x > canvas.width || x < 0) {
    
      speed = -speed;
    }

    requestAnimationFrame(animate);
  }

  animate();
</script>

在这个例子中，定义了一个 animate 函数，在函数内部首先使用 clearRect 方法清除整个 Canvas 画布，然后重新绘制矩形，并更新矩形的横坐标 x。当矩形超出 Canvas 的边界时，改变移动速度 speed 的方向，使矩形反弹。通过不断调用 requestAnimationFrame 函数来循环执行 animate 函数，从而实现了矩形左右移动的动画效果。

使用 SVG 和 Canvas 创建动画都有各自的特点和优势，SVG 更适合基于 XML 和 CSS 的简单动画，而 Canvas 则更适合通过 JavaScript 实现复杂的、高性能的动画效果。在实际应用中，可以根据具体的需求和场景选择合适的技术来创建动画。