当前位置：首页 > 文章列表 > 文章 > 前端 > HTMLCanvas摇晃铃铛动画制作教程

HTMLCanvas摇晃铃铛动画制作教程

2026-03-17 09:54:42 0浏览收藏

本文手把手教你用纯 HTML Canvas 从零绘制一个物理感十足的摇晃铃铛动画——不依赖图片，不搞简单抖动，而是精准拆解为静中有动的钟体（带微旋转模拟共振）和独立摆动的舌锤（按真实弧线周期运动），通过数学控制摆幅、旋转幅度与时间节奏，实现既轻量又可信的交互式铃声视觉效果。

如何用 HTML Canvas 绘制并动画化一个摇晃的铃铛图标

本文详解如何在 HTML Canvas 中手绘铃铛轮廓，并通过分离“钟体”与“舌锤”实现逼真的摇铃动画效果，重点控制舌锤摆动与钟体微震，避免简单位移式伪动画。

本文详解如何在 HTML Canvas 中手绘铃铛轮廓，并通过分离“钟体”与“舌锤”实现逼真的摇铃动画效果，重点控制舌锤摆动与钟体微震，避免简单位移式伪动画。

要实现一个视觉可信的“摇铃”动画（而非整体平移抖动），关键在于语义化分解：铃铛并非刚性整体，而是由固定钟体（dome）与悬挂摆动的舌锤（clapper）组成。真实物理中，敲击后舌锤在钟腔内往复摆动，同时钟体因反作用力产生微小弹性形变或旋转——我们在 Canvas 中可简化为：钟体保持中心静止但叠加轻微旋转，舌锤独立沿弧线周期运动。

下面是一个轻量、可复用的纯 Canvas 实现（不依赖外部图片，提升可控性与性能）：

<canvas id="canvas" width="400" height="400"></canvas>
<style>
  #canvas { border: 1px solid #eee; background: #f9f9f9; }
</style>

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

// 铃铛核心参数（单位：像素）
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const bellRadius = 120;      // 钟体半径
const clapperLength = 70;     // 舌锤长度（从悬挂点到球心）
const clapperRadius = 12;     // 舌锤球体半径
const swingAmplitude = 0.6;   // 摆幅系数（0~1，控制左右极限角度）
let time = 0;

function drawBell() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // --- 绘制钟体（静态轮廓 + 微旋转动画）---
  const rotation = Math.sin(time * 0.3) * 0.02; // ±1.1° 微旋，模拟共振
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.rotate(rotation);

  // 钟体：上半圆 + 下方波浪形边缘（模拟钟唇）
  ctx.beginPath();
  ctx.arc(0, 0, bellRadius, Math.PI, 0, false); // 上半圆（开口向下）
  // 波浪形下边缘（3个正弦波峰）
  for (let i = 0; i <= 3; i++) {
    const x = -bellRadius + (i / 3) * 2 * bellRadius;
    const y = bellRadius + 8 * Math.sin(i * Math.PI + time * 0.5);
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.fillStyle = '#e0c58a';
  ctx.fill();
  ctx.strokeStyle = '#b89c6a';
  ctx.lineWidth = 3;
  ctx.stroke();

  // 钟顶吊环
  ctx.beginPath();
  ctx.arc(0, -bellRadius + 10, 14, 0, Math.PI * 2);
  ctx.fillStyle = '#c0a050';
  ctx.fill();

  ctx.restore();

  // --- 绘制舌锤（独立摆动）---
  const angle = Math.sin(time) * swingAmplitude; // 摆角：-amplitude ~ +amplitude（弧度）
  const clapperX = centerX + Math.sin(angle) * clapperLength;
  const clapperY = centerY + bellRadius * 0.7 + Math.cos(angle) * clapperLength;

  // 悬挂线（细长直线）
  ctx.beginPath();
  ctx.moveTo(centerX, centerY + bellRadius * 0.4);
  ctx.lineTo(clapperX, clapperY - clapperRadius * 0.8);
  ctx.strokeStyle = '#8a7a5a';
  ctx.lineWidth = 2;
  ctx.stroke();

  // 舌锤球体
  ctx.beginPath();
  ctx.arc(clapperX, clapperY, clapperRadius, 0, Math.PI * 2);
  ctx.fillStyle = '#d4af37';
  ctx.fill();
  ctx.strokeStyle = '#b89c6a';
  ctx.lineWidth = 1.5;
  ctx.stroke();
}

// 动画主循环
function animate() {
  time += 0.05;
  drawBell();
  requestAnimationFrame(animate);
}
animate();

✅ 关键设计说明：