h5中实现物理抛物线弹跳动画需用css贝塞尔曲线分段控制时序：下落用cubic-bezier(0.33,0.66,0.66,1)，触地压缩用(0.25,0.46,0.45,0.94)，反弹用(0.22,0.61,0.36,1)，配合translatey、scaley、translatex、rotatez及阴影变化增强真实感。
在 H5 中实现带有物理抛物线感的物体落地弹跳动画，核心不是靠“逐帧手绘关键帧”，而是用 CSS 动画 + 贝塞尔曲线时序控制 模拟重力加速度与弹性衰减，再辅以位移（transform: translateY）和缩放（scaleY）增强真实感。
用 cubic-bezier 模拟抛物线运动节奏
CSS 的 animation-timing-function 支持自定义贝塞尔曲线，能精准还原自由落体先快后慢、触地瞬间骤停、反弹渐缓的节奏：
- 下落阶段：用
cubic-bezier(0.33, 0.66, 0.66, 1)—— 开始缓慢加速，后期明显变快，接近重力加速度效果 - 触地压缩：极短时间（如 0.08s）内用
cubic-bezier(0.25, 0.46, 0.45, 0.94)实现快速压扁+回弹起始 - 反弹阶段：每次反弹高度递减，用
cubic-bezier(0.22, 0.61, 0.36, 1)模拟减速上升+自然滞空
分段动画串联，模拟多级弹跳
单个 @keyframes 难以覆盖完整物理过程，推荐拆解为多个连续动画片段，用 animation-delay 和 animation-fill-mode: forwards 无缝衔接：
- 第一段：从高处下落（0% → 100%，
translateY(0)→translateY(200px)） - 第二段：触地形变（0% 压缩 scaleY(0.7)，100% 回弹 scaleY(1.05) + 微上浮）
- 第三段：首次反弹（0% → 100%，
translateY(200px)→translateY(80px)） - 后续反弹高度按 0.6~0.7 衰减系数逐次降低（如 80px → 45px → 22px），每段持续时间也同比例缩短
加入物理细节提升真实感
纯上下位移会显得僵硬，需叠加以下微动效：
-
水平轻微晃动：在反弹最高点插入小幅度
translateX(±2px)，模拟惯性偏移 -
触地横向摩擦反馈：压缩帧中加
scaleX(1.05)，模拟地面反作用力导致的微侧向拉伸 -
旋转扰动：反弹离地瞬间加 ±3°
rotateZ，落地瞬间反向修正，增强动态重量感 -
阴影变化：配合
box-shadow的模糊半径和垂直偏移，让影子随高度压缩/拉伸
进阶：用 requestAnimationFrame 补足 CSS 不足
当需要更精确的阻尼计算（如每次反弹衰减率动态变化）、或响应用户交互中断弹跳时，CSS 动画灵活性受限。此时可用 JS 控制：
- 用
requestAnimationFrame手动更新style.transform，基于简易物理公式：y = y0 + v0 * t + 0.5 * g * t²（下落）；v = v * -damping（触地速度反转并衰减） - 将时间
t映射到 0–1 区间，结合easeOutCubic等 JS 缓动函数，比纯 CSS 更易调试参数 - 适合做「点击暂停/二次点击加速」「拖拽释放触发不同初速度」等交互增强场景
