js实现漂浮

实现漂浮效果的JavaScript方法

使用CSS动画结合JavaScript控制

通过CSS定义关键帧动画，JavaScript动态调整参数实现更灵活的控制。

.float-element {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

const element = document.querySelector('.float-element');
element.addEventListener('mouseover', () => {
  element.style.animationDuration = '1.5s';
});

纯JavaScript实现

通过requestAnimationFrame实现平滑的漂浮动画，可精确控制运动轨迹。

let position = 0;
let direction = 1;
const speed = 0.5;

function floatAnimation() {
  position += speed * direction;
  if (position > 20 || position < 0) direction *= -1;

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

使用物理引擎模拟

引入简单的物理参数使漂浮更自然，适合需要真实感的场景。

let velocity = 0;
const gravity = 0.2;
const bounce = -0.7;
const element = document.getElementById('float-item');

function physicsFloat() {
  velocity += gravity;
  let topPosition = parseFloat(getComputedStyle(element).top);

  if (topPosition > 200) {
    topPosition = 200;
    velocity *= bounce;
  }

  element.style.top = (topPosition + velocity) + 'px';
  requestAnimationFrame(physicsFloat);
}

响应式漂浮控制

根据窗口大小调整漂浮参数，确保不同设备上的显示效果。

function responsiveFloat() {
  const maxHeight = window.innerHeight * 0.8;
  const amplitude = Math.min(30, maxHeight * 0.1);

  element.style.setProperty('--float-height', `${amplitude}px`);
}
window.addEventListener('resize', responsiveFloat);

交互式漂浮增强

结合用户交互创建动态漂浮效果，提升用户体验。

let isHovering = false;
const baseSpeed = 3;
const hoverSpeed = 6;

element.addEventListener('mouseenter', () => {
  isHovering = true;
  updateFloatSpeed();
});

function updateFloatSpeed() {
  const currentSpeed = isHovering ? hoverSpeed : baseSpeed;
  element.style.animationDuration = `${currentSpeed}s`;
}

性能优化技巧

对于多个漂浮元素，使用CSS变量和硬件加速提升性能。

.floater {
  will-change: transform;
  animation: float var(--float-duration) infinite alternate;
}

document.querySelectorAll('.floater').forEach((el, i) => {
  el.style.setProperty('--float-duration', `${2 + i * 0.5}s`);
});