请求实现箭头沿圆形外半径旋转的启停控制动画

我来帮你搞定这个需求，下面是完整的解决方案，包含SVG结构调整、样式设置和交互逻辑：

1. 完整代码实现 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="800px">
  <!-- 环形背景 -->
  <path class="shape" fill="blue" d=" M 100, 200 m 0 -100 a 100 100 0 1 0 1 0 z m -1 25 a 75 75 0 1 1 -1 0 Z" />
  <!-- 箭头元素，初始定位在环形右侧外边缘 -->
  <path 
    class="arrow" 
    fill="red" 
    d="M 0,-5 L 15,0 L 0,5 Z" 
    transform="translate(200, 200)"
  />
</svg>
<!-- 控制按钮 -->
<button id="startBtn">start</button>
<button id="stopBtn">stop</button>

<style>
  .arrow {
    /* 设置旋转原点为环形的圆心(100,200) */
    transform-origin: 100px 200px;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
</style>

<script>
  const arrow = document.querySelector('.arrow');
  const startBtn = document.getElementById('startBtn');
  const stopBtn = document.getElementById('stopBtn');
  
  let rotation = 0;
  let isRotating = false;
  let rotationSpeed = 0;
  const maxSpeed = 3; // 最大旋转速度（度/帧）
  const acceleration = 0.1; // 加速速率
  const deceleration = 0.05; // 减速速率
  
  function animate() {
    if (!isRotating && rotationSpeed <= 0) return;
    
    // 加速或减速逻辑
    if (isRotating) {
      if (rotationSpeed < maxSpeed) {
        rotationSpeed += acceleration;
      }
    } else {
      if (rotationSpeed > 0) {
        rotationSpeed -= deceleration;
      } else {
        rotationSpeed = 0;
      }
    }
    
    // 更新旋转角度
    rotation += rotationSpeed;
    arrow.style.transform = `translate(200, 200) rotate(${rotation}deg)`;
    
    requestAnimationFrame(animate);
  }
  
  // 开始旋转
  startBtn.addEventListener('click', () => {
    isRotating = true;
    if (rotationSpeed <= 0) {
      animate();
    }
  });
  
  // 停止旋转（减速至停）
  stopBtn.addEventListener('click', () => {
    isRotating = false;
  });
</script>

2. 关键细节说明 #

• 箭头定位与旋转原点：

  • 箭头用三角形路径d="M 0,-5 L 15,0 L 0,5 Z"绘制，初始通过translate(200,200)定位到环形右侧外边缘（环形圆心是(100,200)，外半径100，所以右侧边缘坐标是100+100=200，y轴保持200）。
  • 通过CSS的transform-origin: 100px 200px把箭头的旋转原点设为环形圆心，确保箭头严格沿环形外半径环绕运动。

• 动画控制逻辑：

  • 点击start按钮时，标记isRotating为true，箭头开始加速旋转，直到达到设定的最大速度后保持匀速。
  • 点击stop按钮时，标记isRotating为false，箭头开始缓慢减速，直到旋转速度降为0后自动停止动画。
  • 用requestAnimationFrame实现流畅的帧动画，搭配CSS过渡让减速过程更自然顺滑。

• 样式与交互优化：

  • 箭头默认设为红色填充，方便和蓝色环形区分；你可以随时修改填充色、箭头大小或路径样式。
  • 减速阶段用了cubic-bezier曲线过渡，避免停止时的生硬卡顿，让动画更符合真实物理感。

内容的提问来源于stack exchange，提问作者Tom Truyen