当前位置：首页 > JavaScript

js实现转圈效果

2026-03-16 03:34:53JavaScript

使用CSS动画实现转圈效果

通过CSS的@keyframes和transform属性创建旋转动画，再通过JavaScript控制动画的启停。

<style>
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #09f;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

<div class="spinner" id="spinner"></div>

<script>
  // 控制动画
  const spinner = document.getElementById('spinner');
  spinner.style.animationPlayState = 'running'; // 启动
  // spinner.style.animationPlayState = 'paused'; // 暂停
</script>

使用Canvas绘制动态转圈

通过Canvas的requestAnimationFrame实现更灵活的绘制控制。

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

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

  function drawSpinner() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI * 2);
    ctx.strokeStyle = '#eee';
    ctx.lineWidth = 8;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, angle);
    ctx.strokeStyle = '#09f';
    ctx.lineWidth = 8;
    ctx.stroke();

    angle += 0.1;
    if (angle > Math.PI * 2) angle = 0;
    requestAnimationFrame(drawSpinner);
  }

  drawSpinner();
</script>

使用SVG实现转圈效果

SVG的<animateTransform>标签原生支持旋转动画。

<svg width="50" height="50" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#eee" stroke-width="4"/>
  <circle cx="25" cy="25" r="20" fill="none" stroke="#09f" stroke-width="4" stroke-dasharray="30 100">
    <animateTransform 
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="1s"
      repeatCount="indefinite"/>
  </circle>
</svg>

使用第三方库（如Lottie）

通过Lottie加载专业的AE动画效果。

js实现转圈效果

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<div id="lottie-spinner" style="width: 100px; height: 100px;"></div>

<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-spinner'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://assets9.lottiefiles.com/packages/lf20_p8bfn5to.json'
  });
</script>

每种方法各有特点：CSS方案最简单，Canvas可控性最强，SVG兼容性好，Lottie适合复杂动画。根据项目需求选择合适方案。