移动端点赞“蓄力弹性缩放”效果需分down、hold、up三阶段精准控制缩放节奏：down瞬时缩至0.87倍并加缓动，hold持续微调scale与位移模拟压紧，up触发超调回弹动画；须用touch事件绑定、状态锁防误触，并适配ios的触摸延迟与transform-origin。
移动端点赞前的“蓄力弹性缩放”效果，核心是模拟手指按压→积蓄能量→释放爆裂的物理反馈。它不是简单放大，而是带缓动、回弹、微抖动的阶段性变形，让用户明确感知“即将触发”。实现关键不在画爱心，而在精准控制缩放节奏与触控状态绑定。
触控阶段划分：down → hold → up
必须用 touchstart / touchend（非 click）捕获真实按压行为，并区分三个阶段：
-
Down 瞬时响应：立即缩小至 0.85–0.9 倍，加
transform: scale(0.87)+transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94)，给人“陷下去”的扎实感 -
Hold 持续蓄力：启动定时器（如 150ms 后），每 30ms 微调 scale 值，例如从 0.87 → 0.82 → 0.78 → 0.75，配合轻微上下位移（
translateY(-2px)），形成“压紧”错觉 -
Up 触发回弹：清除定时器，立刻执行弹性动画：
transform: scale(1.3) translateY(-10px)，再接一段cubic-bezier(0.34, 1.56, 0.64, 1)的超调回弹，最后归零并触发爆裂
弹性缩放的 CSS 关键帧写法
避免用纯 transition，需用 @keyframes 控制多段节奏。例如回弹阶段可这样定义：
@keyframes scale-spring {
0% { transform: scale(0.75) translateY(-2px); }
40% { transform: scale(1.35) translateY(-12px); } /* 超调峰值 */
70% { transform: scale(0.95) translateY(-4px); } /* 回弹缓冲 */
100% { transform: scale(1) translateY(0); }
}
播放时加 animation: scale-spring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards，forwards 确保结束态保持 scale(1)。
防误触与状态隔离
单个按钮要防止连点打断蓄力，需加状态锁：
- touchstart 时设
isHolding = true，同时el.classList.add('is-pressing') - touchend 或 touchcancel 时检查
isHolding，仅当持续 >120ms 才视为有效蓄力，否则还原为普通点击 - 同一时刻只允许一个按钮处于 pressing 状态，其他按钮 touchstart 需先
resetAll()
适配 iOS Safari 的触摸延迟与缩放禁用
必须在 <meta> 中关闭双击缩放：user-scalable=no，并在按钮上加 touch-action: manipulation。否则 iOS 会插入约 300ms 延迟，破坏蓄力节奏。另外，iOS 上 transform-origin 默认是左上角，务必显式设为 center center，否则缩放中心偏移。
