js跳跃实现

JavaScript 跳跃实现方法

在 JavaScript 中实现跳跃效果通常涉及动画或页面滚动。以下是几种常见实现方式：

使用 window.scrollTo() 方法

// 平滑滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// 滚动到指定元素
document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

使用 CSS scroll-behavior 属性

在 CSS 中添加全局平滑滚动效果：

html {
  scroll-behavior: smooth;
}

实现弹性跳跃动画

使用 requestAnimationFrame 实现自定义跳跃动画：

function jumpAnimation(element, height, duration) {
  const start = performance.now();
  const originalY = element.getBoundingClientRect().top;

  function animate(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    const y = height * Math.sin(progress * Math.PI);

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

    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      element.style.transform = '';
    }
  }

  requestAnimationFrame(animate);
}

使用第三方库

考虑使用动画库如 GSAP 实现更复杂的跳跃效果：

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

物理引擎实现

对于游戏开发，可使用物理引擎如 Matter.js：

Matter.Body.applyForce(ball, ball.position, {
  x: 0,
  y: -0.05
});

每种方法适用于不同场景，scrollTo 和 CSS 方法适合页面滚动，自定义动画和物理引擎适合游戏或特殊 UI 效果。