js实现弹跳
实现弹跳动画的JavaScript方法
使用requestAnimationFrame实现平滑的弹跳动画效果。以下是一个基础示例，模拟小球自由落体后弹跳的物理效果：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let y = 0;
let velocity = 0;
const gravity = 0.5;
const damping = 0.8; // 弹力系数
const ballRadius = 20;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(canvas.width/2, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = 'red';
ctx.fill();
velocity += gravity;
y += velocity;
// 碰撞检测
if (y + ballRadius > canvas.height) {
y = canvas.height - ballRadius;
velocity *= -damping; // 反弹时速度衰减
}
requestAnimationFrame(animate);
}
animate();CSS结合JavaScript的弹跳效果
通过CSS动画与JavaScript控制结合实现弹性效果：
const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.style.animation = 'bounce 0.5s ease';
setTimeout(() => {
box.style.animation = '';
}, 500);
});配套CSS：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-30px); }
50% { transform: translateY(0); }
75% { transform: translateY(-15px); }
}使用第三方库实现高级弹跳
GSAP库提供更强大的弹性动画控制：
gsap.to(".object", {
y: 100,
duration: 1,
ease: "bounce.out" // 内置弹跳缓动函数
});物理参数调整建议
- 重力系数：
gravity值越大下落越快 - 弹性系数：
damping介于0-1之间，值越大弹跳高度衰减越慢 - 初始速度：可通过修改
velocity初始值实现不同高度的下落
性能优化注意事项
- 使用
transform属性进行位移比修改top/left性能更好 - 避免在动画过程中触发重排操作
- 复杂场景建议使用WebGL或专门的物理引擎
