本文介绍如何使用正弦函数（sin）在 html canvas 中实现平滑的往复运动：物体在边界处减速至停止、反向加速通过中点，形成自然的“呼吸式”动画。核心是构造归一化的正弦缓动函数，并结合时间戳驱动位置计算。
本文介绍如何使用正弦函数（sin）在 html canvas 中实现平滑的往复运动：物体在边界处减速至停止、反向加速通过中点，形成自然的“呼吸式”动画。核心是构造归一化的正弦缓动函数，并结合时间戳驱动位置计算。
要让一个圆点在 Canvas 上做正弦式往复运动（即：在左右边界处速度趋近于零，经过中点时速度最快），关键在于用正弦函数映射时间到空间位置，而非简单叠加 sin() 到坐标上（如原代码中的 x * Math.sin(q) 会导致非物理、不可控的震荡）。
✅ 正确思路：时间 → 归一化缓动值 → 线性插值位置
我们采用一个标准的正弦缓动函数（ease-in-out sine）：
const easeSin = (t) => Math.sin(t - Math.PI / 2) * 0.5 + 0.5;
- t 是连续递增的时间参数（单位：毫秒）；
- Math.sin(t - Math.PI / 2) 将正弦波向右平移 π/2，使 t=0 时输出 -1，完整周期为 2π；
- * 0.5 + 0.5 将输出范围从 [-1, 1] 映射到 [0, 1] —— 这是一个平滑的 0→1→0 周期性归一化值，完美对应“起点→终点→起点”的运动节奏。
? 计算目标位置
假设画布宽度足够，我们希望圆点在水平方向于 left = radius 和 right = canvasWidth - radius 之间往复运动（避免超出边界）。则有效运动区间长度为：
const range = canvasWidth - radius * 2;
于是当前 x 坐标可直接通过线性插值得到：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
x = radius + ease * range; // ease ∈ [0, 1]
这样，当 ease = 0 → x = radius（左边界）；ease = 1 → x = canvasWidth - radius（右边界）；而 ease 按正弦规律变化，就自然实现了“慢–快–慢”的加速度曲线。
? 完整可运行示例
<canvas width="400" height="200" style="border: 2px solid #333;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const rad = 20;
const y = 100;
// 正弦缓动函数：输入时间 t（ms），输出 [0, 1] 的平滑周期值
const easeSin = (t) => Math.sin(t * 0.001 - Math.PI / 2) * 0.5 + 0.5;
function motion(time) {
const ease = easeSin(time); // 自动随时间循环
const x = rad + ease * (canvas.width - rad * 2);
// 清屏 & 绘制
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "steelblue";
ctx.arc(x, y, rad, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
requestAnimationFrame(motion);
}
requestAnimationFrame(motion);
</script>? 注意：
- 使用 requestAnimationFrame 的回调参数 time（高精度时间戳，单位毫秒）作为输入，比手动维护 q 或 x 更稳定、无累积误差；
- 时间缩放因子 0.001 控制运动速度（值越小越慢），可按需调整；
- 若需多物体独立运动，可为每个对象维护偏移时间（如 time + offset）；
- 此方法本质是参数化运动，完全脱离帧率依赖，动画更精准流畅。
通过这种基于数学函数的驱动方式，你不仅能实现正弦往复，还可轻松切换为 easeInCubic、easeOutElastic 等其他缓动效果——只需替换 easeSin 函数即可。这是现代 Canvas 动画的专业实践基础。
