当前位置：首页 > JavaScript

js实现箭头旋转

2026-04-07 14:45:58JavaScript

使用CSS动画实现箭头旋转

通过CSS的transform和animation属性实现旋转效果，JavaScript仅用于触发或控制动画。

HTML结构：

<div id="arrow" class="arrow"></div>
<button onclick="rotateArrow()">旋转箭头</button>

CSS样式：

.arrow {
  width: 40px;
  height: 40px;
  background-image: url('arrow.png');
  background-size: contain;
  transition: transform 0.5s ease;
}

.rotate {
  transform: rotate(180deg);
}

JavaScript控制：

function rotateArrow() {
  const arrow = document.getElementById('arrow');
  arrow.classList.toggle('rotate');
}

使用JavaScript直接控制旋转角度

通过JavaScript动态修改transform属性实现精确角度控制。

let angle = 0;
function rotateArrow() {
  const arrow = document.getElementById('arrow');
  angle += 90;
  arrow.style.transform = `rotate(${angle}deg)`;
}

使用Canvas绘制旋转箭头

适合需要自定义绘制箭头形状的场景。

HTML：

<canvas id="arrowCanvas" width="100" height="100"></canvas>
<button onclick="rotateCanvasArrow()">旋转</button>

JavaScript：

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

function drawArrow(angle) {
  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.beginPath();
  ctx.moveTo(20, 0);
  ctx.lineTo(-20, -15);
  ctx.lineTo(-20, 15);
  ctx.closePath();
  ctx.fillStyle = 'black';
  ctx.fill();

  ctx.restore();
}

function rotateCanvasArrow() {
  rotationAngle += 45;
  drawArrow(rotationAngle);
}

// 初始绘制
drawArrow(0);

使用GSAP库实现平滑旋转

专业动画库GSAP提供更强大的动画控制。

HTML：

<div id="gsapArrow" class="arrow"></div>
<button onclick="animateWithGSAP()">GSAP旋转</button>

JavaScript：

function animateWithGSAP() {
  gsap.to("#gsapArrow", {
    rotation: 360,
    duration: 1,
    ease: "power2.out"
  });
}

使用SVG实现旋转

SVG天然支持变换操作，适合矢量图形旋转。

HTML：

<svg width="100" height="100" viewBox="0 0 100 100">
  <polygon id="svgArrow" points="50,10 90,90 10,90" fill="blue" transform="rotate(0, 50, 50)"/>
</svg>
<button onclick="rotateSVG()">SVG旋转</button>

JavaScript：

js实现箭头旋转

let svgAngle = 0;
function rotateSVG() {
  const arrow = document.getElementById('svgArrow');
  svgAngle += 45;
  arrow.setAttribute('transform', `rotate(${svgAngle}, 50, 50)`);
}