当前位置：首页 > JavaScript

js实现摆动

2026-04-06 16:07:17JavaScript

实现摆动动画的方法

使用JavaScript实现摆动动画可以通过CSS动画结合JavaScript控制，或者直接使用JavaScript操作DOM元素的样式。以下是几种常见的方法：

使用CSS动画和JavaScript触发

通过定义CSS关键帧动画，再利用JavaScript添加或移除动画类来实现摆动效果。

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

.swing-animation {
  animation: swing 1s ease-in-out infinite;
}

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

// 停止动画
// element.classList.remove('swing-animation');

使用JavaScript直接操作样式

通过定时器动态修改元素的transform属性，实现摆动效果。

const element = document.getElementById('swing-element');
let angle = 0;
let direction = 1;
const speed = 2;
const maxAngle = 15;

function swing() {
  angle += speed * direction;
  if (angle > maxAngle || angle < -maxAngle) {
    direction *= -1;
  }
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(swing);
}

swing();

使用GSAP库实现高级摆动

GSAP是一个强大的动画库，可以轻松实现复杂的摆动效果。

import { gsap } from "gsap";

const element = document.getElementById('swing-element');
gsap.to(element, {
  rotation: 15,
  duration: 0.5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut"
});

使用物理引擎模拟摆动

如果需要更真实的物理摆动效果，可以使用Matter.js等物理引擎。

js实现摆动

const Engine = Matter.Engine;
const Render = Matter.Render;
const Bodies = Matter.Bodies;
const Composite = Matter.Composite;

const engine = Engine.create();
const render = Render.create({
  element: document.body,
  engine: engine
});

const pendulum = Bodies.rectangle(400, 100, 50, 200, {
  chamfer: { radius: 10 }
});
const anchor = Bodies.rectangle(400, 10, 300, 20, { 
  isStatic: true 
});

Composite.add(engine.world, [pendulum, anchor]);
Engine.run(engine);
Render.run(render);