当前位置：首页 > JavaScript

js实现回弹

2026-03-15 10:21:06JavaScript

实现回弹效果的 JavaScript 方法

使用 CSS 动画结合 JavaScript

通过 CSS 定义关键帧动画实现回弹效果，JavaScript 用于触发动画。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.element {
  animation: bounce 0.5s ease infinite;
}

const element = document.querySelector('.element');
element.addEventListener('click', () => {
  element.style.animation = 'none';
  setTimeout(() => {
    element.style.animation = 'bounce 0.5s ease';
  }, 10);
});

使用 GreenSock (GSAP) 库

GSAP 提供了强大的动画控制能力，包括弹性效果。

gsap.to(".element", {
  y: -20,
  duration: 0.5,
  ease: "elastic.out(1, 0.5)",
  repeat: 1,
  yoyo: true
});

使用 requestAnimationFrame 实现自定义物理效果

通过模拟物理弹簧系统实现回弹效果。

function bounce(element, distance) {
  let start = null;
  const duration = 1000;
  const initialY = 0;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = (timestamp - start) / duration;
    const currentDistance = distance * Math.sin(progress * Math.PI * 2) * Math.exp(-progress * 2);

    if (progress < 1) {
      element.style.transform = `translateY(${currentDistance}px)`;
      requestAnimationFrame(step);
    } else {
      element.style.transform = 'translateY(0)';
    }
  }

  requestAnimationFrame(step);
}

const box = document.getElementById('box');
box.addEventListener('click', () => bounce(box, 50));

使用 Web Animations API

现代浏览器原生支持的动画 API。

const element = document.querySelector('.element');
element.animate([
  { transform: 'translateY(0)' },
  { transform: 'translateY(-30px)' },
  { transform: 'translateY(0)' }
], {
  duration: 800,
  easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  iterations: 1
});

使用 CSS Transition 结合 JavaScript

通过切换类名触发 CSS 过渡效果。

js实现回弹

.element {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.element.bounce {
  transform: translateY(-20px);
}

const element = document.querySelector('.element');
element.addEventListener('click', () => {
  element.classList.add('bounce');
  setTimeout(() => {
    element.classList.remove('bounce');
  }, 300);
});

每种方法适用于不同场景，CSS 方案性能最佳但控制力较弱，GSAP 功能最丰富但需要引入库，自定义物理效果最灵活但实现复杂。根据项目需求选择合适方案。

标签: js