js实现跳跃
实现跳跃效果的 JavaScript 方法
使用 CSS 动画结合 JavaScript 触发
通过 @keyframes 定义跳跃动画，再通过 JavaScript 动态添加类名触发动画。示例代码：
.jump-animation {
animation: jump 0.5s ease;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}const element = document.getElementById('target');
element.addEventListener('click', () => {
element.classList.add('jump-animation');
setTimeout(() => element.classList.remove('jump-animation'), 500);
});使用 requestAnimationFrame 实现物理跳跃
模拟重力加速度实现更真实的跳跃效果：
let position = 0;
let velocity = 0;
const gravity = 0.5;
const jumpForce = -10;
function jump() {
velocity = jumpForce;
updatePosition();
}
function updatePosition() {
position += velocity;
velocity += gravity;
if (position > 0) {
position = 0;
return;
}
element.style.transform = `translateY(${position}px)`;
requestAnimationFrame(updatePosition);
}使用 GSAP 动画库实现高级跳跃
安装 GSAP 后可通过更简洁的代码实现复杂动画：
gsap.to("#target", {
y: -50,
duration: 0.3,
yoyo: true,
repeat: 1,
ease: "power1.out"
});注意事项
- 移动端需考虑 touch 事件兼容
- 性能敏感场景建议使用 transform 而非 top/left
- 连续跳跃需添加状态锁防止重复触发
- 可结合 sound.play() 添加音效增强体验
