当前位置：首页 > JavaScript

js实现旋转按钮

2026-04-07 09:38:59JavaScript

使用CSS动画实现旋转按钮

通过CSS的@keyframes和transform属性实现平滑旋转效果，JavaScript仅用于触发动画。

HTML结构：

<button id="rotateBtn">点击旋转</button>

CSS样式：

#rotateBtn {
  transition: transform 0.5s ease;
}
.rotate {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

JavaScript控制：

const btn = document.getElementById('rotateBtn');
btn.addEventListener('click', () => {
  btn.classList.toggle('rotate');
});

使用Canvas绘制动态旋转按钮

通过Canvas的rotate()方法实现更复杂的旋转效果，适合需要自定义绘制的情况。

HTML结构：

js实现旋转按钮

<canvas id="canvasBtn" width="100" height="100"></canvas>

JavaScript实现：

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

function drawButton() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(angle * Math.PI / 180);

  // 绘制按钮
  ctx.fillStyle = '#3498db';
  ctx.beginPath();
  ctx.arc(0, 0, 40, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = 'white';
  ctx.font = '16px Arial';
  ctx.fillText('旋转', -20, 5);

  ctx.restore();
  angle = (angle + 2) % 360;
  requestAnimationFrame(drawButton);
}

canvas.addEventListener('click', () => {
  angle = (angle + 45) % 360; // 点击时增加旋转角度
});

drawButton();

使用GSAP动画库实现高级旋转

引入GSAP库实现更复杂的缓动效果和精细控制。

HTML结构：

<button id="gsapBtn">GSAP旋转</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

JavaScript实现：

js实现旋转按钮

const gsapBtn = document.getElementById('gsapBtn');
let isRotating = false;

gsapBtn.addEventListener('click', () => {
  if (!isRotating) {
    gsap.to(gsapBtn, {
      rotation: 360,
      duration: 1,
      repeat: -1,
      ease: "power1.out"
    });
    isRotating = true;
  } else {
    gsap.killTweensOf(gsapBtn);
    isRotating = false;
  }
});

响应式旋转按钮实现

结合鼠标移动或触摸事件实现交互式旋转效果。

HTML结构：

<div id="interactiveBtn" class="btn">拖拽旋转</div>

CSS样式：

.btn {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: grab;
}

JavaScript实现：

const btn = document.getElementById('interactiveBtn');
let isDragging = false;
let startAngle = 0;
let currentAngle = 0;

btn.addEventListener('mousedown', (e) => {
  isDragging = true;
  const rect = btn.getBoundingClientRect();
  const centerX = rect.left + rect.width/2;
  const centerY = rect.top + rect.height/2;
  startAngle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const rect = btn.getBoundingClientRect();
  const centerX = rect.left + rect.width/2;
  const centerY = rect.top + rect.height/2;
  const newAngle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

  currentAngle += newAngle - startAngle;
  btn.style.transform = `rotate(${currentAngle}deg)`;
  startAngle = newAngle;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});