用 addEventListener 绑定点击触发动画：优先监听 touchstart（避免 iOS 300ms 延迟），配合 class 切换触发 CSS 动画；移动端需兼顾 touchstart 和 click；动画由 CSS 驱动时改 className 更可靠，禁用内联 style 操作。
怎么用 addEventListener 绑定点击触发动画
HTML5 动画本身（比如 requestAnimationFrame 或 CSS @keyframes）不带交互能力，必须靠 JS 事件驱动。最常用的是监听 click、mousemove 或 touchstart，再触发重绘或 class 切换。
关键点：别直接在 onclick 属性里写逻辑，统一用 addEventListener 管理，避免重复绑定或内存泄漏。
- 移动端要同时监听
touchstart和click，但注意click在 iOS 上有 300ms 延迟，优先用touchstart - 如果动画由 CSS
transition驱动，改className比直接操作style更可靠 - 用
event.preventDefault()防止长按唤出菜单干扰触控反馈
const box = document.getElementById('anim-box');
box.addEventListener('touchstart', () => {
box.classList.add('is-rotating');
});
box.addEventListener('touchend', () => {
box.classList.remove('is-rotating');
});
CSS 动画如何响应鼠标悬停与数据状态
CSS 自身支持 :hover、:active、:focus-within 等伪类，但无法响应 JS 动态数据（比如分数变化、加载进度）。这时得靠 JS 控制 class，再让 CSS 做视觉映射。
常见误区：用 style.animationName = 'xxx' 手动赋值，容易覆盖已有动画、丢失 timing-function；不如用 class 切换 + CSS 变量控制参数。
立即学习“前端免费学习笔记（深入）”；
-
:hover在触摸设备上行为不稳定，建议用 JS 的mouseenter/mouseleave替代 - 需要多状态动画时（如“加载中→成功→失败”），每个状态对应独立 class，CSS 里分别定义
animation和animation-play-state - 用
transition做属性渐变比animation更轻量，适合颜色、透明度、位移等简单变化
.anim-box {
transition: transform 0.3s ease, opacity 0.2s linear;
}
.anim-box.is-shaking {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
}
用 requestAnimationFrame 实现帧级交互响应
当动画需要根据鼠标位置实时计算（比如视差滚动、粒子跟随），不能只靠 CSS 过渡——得用 requestAnimationFrame 主动控制每一帧的渲染逻辑。
核心原则：所有计算放在 raf 回调里，不要在事件回调中直接修改样式（会强制同步重排，卡顿）；事件只负责更新数据，raf 负责读取并渲染。
- 用
throttle限制mousemove触发频率，避免高频触发raf队列积压 - 记得在离开页面或组件卸载时调用
cancelAnimationFrame，否则可能持续占用 CPU - 获取鼠标坐标优先用
event.clientX / clientY，而非pageX / pageY（后者受滚动影响）
let mouseX = 0, mouseY = 0; let rafId = null;document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; });
function animate() { const el = document.getElementById('parallax-layer'); el.style.transform =
translate(${(mouseX - window.innerWidth/2)/20}px, ${(mouseY - window.innerHeight/2)/20}px); rafId = requestAnimationFrame(animate); } rafId = requestAnimationFrame(animate);
Canvas 动画怎么加点击命中检测
Canvas 是位图绘制，没有 DOM 元素层级，所以 click 事件无法直接落在某个“图形”上。必须自己实现坐标映射和形状判断。
最简方案：把图形抽象成对象（含 x、y、radius 或 bounds），在 canvas 的 click 事件里遍历判断落点是否在范围内。
- 圆形用距离公式：
Math.sqrt((x - cx)**2 + (y - cy)**2) - 矩形用边界判断：
x >= left && x = top && y - 复杂路径（如贝塞尔曲线）建议用
ctx.isPointInPath(x, y)，但需在绘制前调用beginPath()并保持路径未被fill()或stroke()销毁
注意：Canvas 坐标是相对于 canvas 元素左上角，不是视口。要用 getBoundingClientRect() 换算点击位置。
const rect = canvas.getBoundingClientRect();
canvas.addEventListener('click', (e) => {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (isPointInCircle(x, y, circle.x, circle.y, circle.r)) {
circle.active = true;
}
});
交互逻辑越靠近渲染层（Canvas / requestAnimationFrame），越容易忽略坐标系转换和事件节流；这些细节不处理好，动画就会“点不准”或“一卡一卡”。
