当前位置：首页 > JavaScript

js实现摇摆

2026-02-01 08:07:54JavaScript

实现摇摆动画的方法

使用CSS的transform和animation属性可以轻松实现摇摆效果。以下是一个简单的实现方式：

.swing {
  animation: swing 1s infinite alternate;
  transform-origin: center bottom;
}

@keyframes swing {
  0% { transform: rotate(-10deg); }
  100% { transform: rotate(10deg); }
}

使用JavaScript控制摇摆

如果需要通过JavaScript动态控制摇摆效果，可以结合CSS变量：

const element = document.querySelector('.swing-element');
let angle = 0;
let direction = 1;

function swing() {
  angle += direction * 2;
  if (Math.abs(angle) >= 15) direction *= -1;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(swing);
}

swing();

物理模拟摇摆

对于更真实的物理摇摆效果，可以使用简单的谐波运动公式：

const element = document.querySelector('.physics-swing');
const amplitude = 15; // 最大摆动角度
const frequency = 0.01; // 摆动频率
let time = 0;

function physicsSwing() {
  time += 0.1;
  const angle = amplitude * Math.sin(time * frequency);
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(physicsSwing);
}

physicsSwing();

缓动函数实现

使用缓动函数可以让摇摆更自然：

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

function smoothSwing() {
  const duration = 2000; // 动画持续时间(ms)
  const start = Date.now();

  function animate() {
    const elapsed = Date.now() - start;
    const progress = (elapsed % duration) / duration;
    const eased = easeInOutQuad(progress * 2 % 1);
    const angle = eased * 30 - 15;
    element.style.transform = `rotate(${angle}deg)`;
    requestAnimationFrame(animate);
  }

  animate();
}

响应鼠标交互的摇摆

实现鼠标悬停时摇摆的效果：

js实现摇摆

const hoverElement = document.querySelector('.hover-swing');
let animationId;

hoverElement.addEventListener('mouseenter', () => {
  let angle = 0;
  let speed = 0.2;

  function hoverSwing() {
    angle += speed;
    speed *= 0.98; // 阻尼系数
    hoverElement.style.transform = `rotate(${Math.sin(angle) * 10}deg)`;

    if (Math.abs(speed) > 0.01) {
      animationId = requestAnimationFrame(hoverSwing);
    }
  }

  hoverSwing();
});

hoverElement.addEventListener('mouseleave', () => {
  cancelAnimationFrame(animationId);
  hoverElement.style.transform = 'rotate(0deg)';
});

这些方法提供了从简单到复杂的摇摆动画实现方式，可以根据具体需求选择适合的方案。CSS方法最简单，JavaScript方法提供更多控制，物理模拟则能实现更真实的效果。

标签: js