当前位置：首页 > JavaScript

js实现箭头旋转

2026-02-02 21:00:35JavaScript

使用 CSS 动画实现箭头旋转

通过 CSS 的 transform 和 @keyframes 实现平滑旋转效果。定义一个箭头元素（如 div 或 SVG），添加 CSS 类控制旋转。

<style>
  .arrow {
    width: 20px;
    height: 20px;
    background: url('arrow-icon.svg') no-repeat; /* 替换为箭头图标 */
    transition: transform 0.3s ease;
  }
  .rotate {
    transform: rotate(180deg);
  }
</style>

<div class="arrow" id="arrow"></div>
<script>
  document.getElementById('arrow').addEventListener('click', function() {
    this.classList.toggle('rotate');
  });
</script>

使用 JavaScript 动态控制旋转角度

通过 style.transform 动态修改旋转角度，适合需要精确控制旋转的场景。

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

function rotateArrow() {
  angle += 90;
  arrow.style.transform = `rotate(${angle}deg)`;
  arrow.style.transition = 'transform 0.5s ease';
}

使用 Canvas 绘制旋转箭头

通过 Canvas API 实现动态绘制和旋转，适合复杂动画需求。

<canvas id="canvas" width="100" height="100"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  let rotation = 0;

  function drawArrow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(50, 50);
    ctx.rotate((rotation * Math.PI) / 180);

    // 绘制箭头形状
    ctx.beginPath();
    ctx.moveTo(0, -20);
    ctx.lineTo(15, 10);
    ctx.lineTo(-15, 10);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();

    ctx.restore();
  }

  setInterval(() => {
    rotation += 5;
    drawArrow();
  }, 100);
</script>

使用 GSAP 库实现高级动画

GSAP 提供更流畅的动画控制和复杂时间线管理。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<div id="arrow">→</div>
<script>
  gsap.to("#arrow", {
    rotation: 360,
    duration: 2,
    repeat: -1,
    ease: "power1.inOut"
  });
</script>