当前位置：首页 > JavaScript

js实现转动

2026-01-31 23:12:30JavaScript

使用 CSS 动画实现转动

通过 transform 和 @keyframes 实现旋转动画，适用于简单场景：

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

在 HTML 中为元素添加 class="rotate-element" 即可。

js实现转动

使用 JavaScript 控制旋转

通过 requestAnimationFrame 动态更新旋转角度，适合需要交互控制的场景：

let angle = 0;
const element = document.getElementById('target');

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

使用 GSAP 库实现平滑转动

GSAP 提供更复杂的动画控制，支持缓动效果：

js实现转动

gsap.to("#target", {
  rotation: 360,
  duration: 3,
  repeat: -1,
  ease: "power1.out"
});

通过 Canvas 绘制旋转对象

适用于自定义图形的动态旋转：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let rotation = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(100, 100);
  ctx.rotate((rotation * Math.PI) / 180);
  ctx.fillRect(-50, -50, 100, 100);
  ctx.restore();
  rotation = (rotation + 1) % 360;
  requestAnimationFrame(draw);
}
draw();

响应鼠标事件的旋转控制

结合事件监听实现交互式旋转：

const element = document.getElementById('interactive');
let isDragging = false;
let startAngle = 0, currentAngle = 0;

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startAngle = getAngle(e.clientX, e.clientY);
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const angle = getAngle(e.clientX, e.clientY);
  currentAngle += angle - startAngle;
  element.style.transform = `rotate(${currentAngle}deg)`;
  startAngle = angle;
});

function getAngle(x, y) {
  const rect = element.getBoundingClientRect();
  return Math.atan2(y - rect.top - rect.height/2, x - rect.left - rect.width/2) * 180 / Math.PI;
}

标签: js