必须用 Math.sin 和 Math.cos，因为环形布局本质是极坐标转直角坐标，需通过角度和半径精确计算每个按钮的x、y像素位移，CSS无法动态执行三角函数，JS计算是唯一可靠路径。
环形按钮组的坐标计算为什么必须用 Math.sin 和 Math.cos
因为环形布局本质是极坐标转直角坐标：每个按钮的 x、y 位移由角度和半径唯一确定。CSS 动画本身不支持动态三角函数运算，所以必须用 JS 计算出具体像素值再应用——绕开 CSS 自身限制的唯一可靠路径。
常见错误是试图用 transform: rotate() + translate() 连续叠加实现“看起来像环形”，结果按钮旋转方向错乱、中心偏移、响应区域错位。真正环形要求每个按钮的 transform-origin 是圆心，且位移向量严格正交于当前角度。
- 角度单位必须统一为弧度（
angle * Math.PI / 180），传入Math.sin/Math.cos前不转就是错的 - 半径建议用固定像素值（如
120），避免视口缩放时环形比例失真 - 起始角度推荐从
-90度开始（即顶部），符合多数 UI 直觉；若从0度（正右）开始，第一按钮会出现在右侧
如何用 JS 动态生成环形位置并触发动画
不能靠 CSS @keyframes 预设所有按钮位置——每个按钮的终点坐标不同，必须逐个设置 style.transform。动画触发时机也很关键：得等父容器已渲染、尺寸稳定后再计算，否则半径或圆心偏移。
示例逻辑（假设按钮组容器为 .radial-menu，子按钮为 .radial-btn）：
立即学习“前端免费学习笔记（深入）”；
const container = document.querySelector('.radial-menu');
const buttons = container.querySelectorAll('.radial-btn');
const radius = 120;
const centerX = container.offsetLeft + container.offsetWidth / 2;
const centerY = container.offsetTop + container.offsetHeight / 2;
<p>buttons.forEach((btn, i) => {
const angle = -90 + (360 / buttons.length) <em> i; // 均匀分布，从顶部开始
const rad = (angle </em> Math.PI) / 180;
const x = centerX + radius <em> Math.cos(rad);
const y = centerY + radius </em> Math.sin(rad);</p><p>// 初始状态：全部收在圆心
btn.style.transition = 'transform 0.3s cubic-bezier(0.17, 0.67, 0.12, 0.99)';
btn.style.transform = <code>translate(${centerX}px, ${centerY}px)</code>;</p><p>// 点击展开时设置目标位置
container.addEventListener('click', () => {
btn.style.transform = <code>translate(${x}px, ${y}px)</code>;
});
});</p>注意：cubic-bezier(0.17, 0.67, 0.12, 0.99) 是模拟“弹出”感的关键，比 ease-out 更有张力；若用 ease-in-out，会显得呆板。
点击收起时如何避免坐标计算重复和视觉跳变
收起动画不是简单设回 translate(0, 0)——因为按钮当前 transform 是绝对像素值，直接重置会导致跳回页面左上角。必须用同一套坐标体系反向计算：收起目标仍是圆心 (centerX, centerY)，但需确保该值与展开时完全一致。
- 把
centerX/centerY提取为闭包变量或data-属性缓存，避免多次调用offsetTop导致布局抖动 - 收起前先清除展开时的
transition，设为none，再设回圆心位置，最后重置transition并触发重排（btn.offsetHeight），否则动画不触发 - 不要用
display: none收起——它会中断 transition，且再次显示时无动画
移动端点击区域小、误触多，怎么保证环形按钮可操作
环形按钮天然存在外圈大、内圈小的问题：靠近圆心的按钮热区容易过小。纯靠 padding 扩展又会破坏环形视觉节奏。实际解法是分层处理交互区域与视觉元素。
- 按钮 DOM 结构里包裹一层透明
::before伪元素，用transform: scale(1.8)扩大点击范围，不影响原按钮大小 - 给所有
.radial-btn设置pointer-events: auto，父容器设pointer-events: none，防止鼠标悬停穿透 - 在 touch 设备上监听
touchstart而非click，并加preventDefault()避免 300ms 延迟 - 半径小于
80px时，建议按钮数量不超过 5 个——再多会导致相邻按钮间距低于 44px 最低触控标准
环形动画最易被忽略的点：没有考虑容器本身的定位上下文。如果 .radial-menu 是 position: relative，那 centerX/centerY 就是对的；如果是 position: absolute 且父级有 transform，就得用 getBoundingClientRect() 替代 offsetTop/offsetLeft，否则坐标系就偏了。
