当前位置：首页 > JavaScript

js实现反弹

2026-01-31 20:30:04JavaScript

实现反弹效果的 JavaScript 方法

使用 CSS 动画与 JavaScript 结合

通过 CSS 定义关键帧动画实现反弹效果，JavaScript 控制动画触发。CSS 的 animation-timing-function 使用 cubic-bezier 曲线模拟物理反弹。

js实现反弹

const element = document.getElementById('bouncing-element');
element.style.animation = 'bounce 1s cubic-bezier(0.3, 0.1, 0.2, 1.5)';

// CSS 部分需在样式表中定义
<style>
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}
</style>

基于物理公式的 JavaScript 实现

利用重力加速度和弹性系数模拟真实反弹过程，通过 requestAnimationFrame 逐帧更新位置。

js实现反弹

let position = 0;
let velocity = 0;
const gravity = 0.5;
const elasticity = 0.7;
const floor = 300;

function animate() {
  velocity += gravity;
  position += velocity;

  if (position > floor) {
    position = floor;
    velocity = -velocity * elasticity;
  }

  element.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(animate);
}
animate();

使用 GreenSock (GSAP) 库

GSAP 提供现成的反弹缓动函数，简化开发流程。安装后直接调用预设的 bounce 缓动模式。

gsap.to("#ball", {
  y: 300,
  duration: 2,
  ease: "bounce.out"
});

Canvas 绘制反弹动画

在 Canvas 中通过物理计算实现多物体反弹系统，包含碰撞检测和能量衰减。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let balls = [{x:50, y:50, radius:20, vx:2, vy:0}];

function update() {
  balls.forEach(ball => {
    ball.vy += 0.2;
    ball.x += ball.vx;
    ball.y += ball.vy;

    if(ball.y + ball.radius > canvas.height) {
      ball.y = canvas.height - ball.radius;
      ball.vy *= -0.8;
    }

    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
    ctx.fill();
  });

  requestAnimationFrame(update);
}
update();