当前位置：首页 > JavaScript

js实现回弹

2026-02-02 10:19:48JavaScript

实现回弹效果的JavaScript方法

在JavaScript中实现回弹效果通常涉及动画和物理模拟。以下是几种常见的方法：

使用CSS动画结合JavaScript

const element = document.getElementById('bounceElement');
element.classList.add('bounce-animation');

// CSS部分
.bounce-animation {
  animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

使用requestAnimationFrame实现物理回弹

let position = 0;
let velocity = 0;
const gravity = 0.5;
const damping = 0.8;
const element = document.getElementById('bounceElement');

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

  if (position > 0) {
    position = 0;
    velocity = -velocity * damping;
  }

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

  if (Math.abs(velocity) > 0.1 || position < 0) {
    requestAnimationFrame(animate);
  }
}

// 触发回弹
element.addEventListener('click', () => {
  velocity = -15;
  animate();
});

使用GreenSock动画库(GSAP)

gsap.to("#bounceElement", {
  y: -50,
  duration: 0.5,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

实现弹性拖拽效果

let startY, currentY;
const element = document.getElementById('dragElement');
const spring = 0.1;
const friction = 0.8;
let velocity = 0;

element.addEventListener('mousedown', (e) => {
  startY = e.clientY;
  document.addEventListener('mousemove', move);
  document.addEventListener('mouseup', up);
});

function move(e) {
  currentY = e.clientY - startY;
  element.style.transform = `translateY(${currentY}px)`;
}

function up() {
  document.removeEventListener('mousemove', move);
  document.removeEventListener('mouseup', up);

  function animate() {
    velocity += (-currentY * spring);
    velocity *= friction;
    currentY += velocity;

    if (Math.abs(velocity) > 0.1) {
      element.style.transform = `translateY(${currentY}px)`;
      requestAnimationFrame(animate);
    } else {
      element.style.transform = 'translateY(0)';
    }
  }

  animate();
}