html本身不支持三角函数动画，所有正弦波等trigonometric动画必须由javascript驱动，css无法原生计算sin、cos或动态相位偏移，所谓“纯css实现”实为js更新css自定义属性的伪动画。
直接说结论：HTML 本身不支持三角函数动画，trigonometric 动画必须靠 JavaScript 驱动，CSS 无法原生计算 sin、cos 或动态相位偏移 —— 所有“CSS 实现三角函数动画”的说法，要么是误解，要么是用 CSS 自定义属性 + JS 更新的伪 CSS 动画。
为什么不能只用纯 CSS 写正弦波运动
CSS 的 transform、animation 和 @keyframes 都是静态时间轴驱动，不支持实时计算任意角度的 sin 值。你没法写 translateY(calc(50px * sin(2deg))) 这种表达式 —— 浏览器根本不认识 sin() 函数。
常见误解来源：
- 看到某个 demo 页面源码里
style="transform: translateX(...)"有规律变化，误以为是 CSS 自己算的 - 把用
calc()做线性插值（比如calc(50% + 20px * var(--phase))）当成三角函数动画 - 混淆了 SVG 的
<animatetransform></animatetransform>（仅支持预设路径，不支持实时 sin/cos）和 JS 驱动
真正能产生周期性非线性位移（如水草摇摆、指针旋转、环形菜单展开）的，底层一定调用了 Math.sin() 或 Math.cos()。
用 requestAnimationFrame + Math.sin 实现平滑振荡
这是最常用、性能最可控的方式，适合小球上下浮动、元素左右飘动等场景。
关键点：
-
angle必须随时间递增（不是固定值），否则动画卡死 - 必须用
requestAnimationFrame，不用setInterval—— 后者帧率不可控，易掉帧 -
Math.sin(angle)返回范围是[-1, 1]，要乘上振幅（amplitude）才看得见效果 - 角度单位必须是弧度，别直接传
30这种度数 —— 要么用angle *= Math.PI / 180，要么从一开始就按弧度增量（如0.02）
简短示例：
let angle = 0;
const amplitude = 60;
const speed = 0.03;
<p>function animate() {
angle += speed;
const y = Math.sin(angle) * amplitude;
ball.style.transform = <code>translateY(${y}px)</code>;
requestAnimationFrame(animate);
}
animate();</p>
用 Canvas 绘制动态正弦曲线（带横向滚动）
如果目标是画一条“流动的波”，而不是移动单个元素，Canvas 是更直接的选择。核心在于相位偏移（phase）随时间增加，而非重绘整个数学公式。
容易踩的坑：
- 忘记每次绘制前调用
ctx.clearRect()→ 波形拖影糊成一片 - x 步长太大（如
step = 10）→ 曲线锯齿明显；太小（如step = 0.5）→ 性能下降 - 直接用
Date.now()当相位但没取模 → 数值溢出导致精度丢失（尤其在长时间运行后） - 把
frequency设成整数（如1）→ 波长过短，看不出周期性；建议从0.01开始试
关键计算行（注意 phase 是独立变量）：
const x = i; const y = centerY + amplitude * Math.sin(x * frequency + phase);
环形菜单/粒子圆周定位：cos 和 sin 必须配对用
做环形布局时，常见错误是只用 sin 算 x 或只用 cos 算 y，结果所有元素挤在一条线上。
正确姿势：
- x 坐标永远用
Math.cos(angle) - y 坐标永远用
Math.sin(angle) - 角度必须是均分的弧度值：
const angle = (index / total) * Math.PI * 2 - 别漏掉圆心偏移：最终位置是
centerX + radius * cos和centerY + radius * sin
例如 6 个菜单项，第 0 个在 0 弧度（正右方），第 1 个在 Math.PI / 3（60°），依此类推 —— 这个顺序决定了展开方向，改用 sin 算 x 会整体逆时针转 90°，但不再是标准数学极坐标系。
真正难的不是写出第一个 sin，而是控制多个元素的相位差（比如让水草逐根延迟摆动）、处理 canvas 像素对齐导致的模糊、或在高 DPI 屏幕下保持波形锐利 —— 这些细节没文档可抄，只能靠反复测 devicePixelRatio 和重绘逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
