当前位置：首页 > JavaScript

js实现匀速旋转

2026-02-03 08:27:56JavaScript

使用CSS动画实现匀速旋转

通过CSS的animation和@keyframes可以实现简单的匀速旋转效果。这种方法性能较好，适合简单的旋转需求。

<style>
.rotate-element {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

<div class="rotate-element">旋转元素</div>

使用JavaScript的requestAnimationFrame实现

需要更精确控制旋转时，可以使用requestAnimationFrame方法。这种方式可以更好地与其他JavaScript动画结合。

let angle = 0;
const element = document.getElementById('rotateElement');
const speed = 1; // 旋转速度(度/帧)

function rotate() {
  angle += speed;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}

rotate();

使用JavaScript定时器实现

使用setInterval也可以实现旋转效果，但相比requestAnimationFrame性能稍差。

let angle = 0;
const element = document.getElementById('rotateElement');
const speed = 1; // 旋转速度(度/次)
const interval = 16; // 间隔时间(ms)

setInterval(() => {
  angle += speed;
  element.style.transform = `rotate(${angle}deg)`;
}, interval);

控制旋转速度和方向

可以通过调整参数来控制旋转速度和方向：

js实现匀速旋转

const rotation = {
  element: document.getElementById('rotateElement'),
  angle: 0,
  speed: 1.5, // 正数为顺时针，负数为逆时针
  isRunning: true
};

function updateRotation() {
  if (!rotation.isRunning) return;

  rotation.angle += rotation.speed;
  rotation.element.style.transform = `rotate(${rotation.angle}deg)`;
  requestAnimationFrame(updateRotation);
}

// 开始/停止旋转
function toggleRotation() {
  rotation.isRunning = !rotation.isRunning;
  if (rotation.isRunning) updateRotation();
}

updateRotation();