用jquery实现材料圆弧运动动画

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="arc-container"></div>

#arc-container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

$(document).ready(function() {
  // 获取容器元素
  var container = $('#arc-container');
  
  // 设置圆弧的半径、起始角度和结束角度
  var radius = 80;
  var startAngle = 0;
  var endAngle = 180;
  
  // 设置动画的持续时间和步长
  var duration = 2000;
  var steps = 100;
  
  // 计算每一步的角度增量
  var angleIncrement = (endAngle - startAngle) / steps;
  
  // 创建一个定时器，每隔一段时间更新圆弧的角度
  var timer = setInterval(function() {
    // 计算当前步数对应的角度
    var currentAngle = startAngle + angleIncrement * steps;
    
    // 计算圆弧路径上的点的坐标
    var x = radius * Math.cos(currentAngle * Math.PI / 180);
    var y = radius * Math.sin(currentAngle * Math.PI / 180);
    
    // 更新圆弧的位置
    container.css({
      'left': x + 'px',
      'top': y + 'px'
    });
    
    // 更新步数
    steps--;
    
    // 判断是否达到动画结束条件
    if (steps < 0) {
      clearInterval(timer);
    }
  }, duration / steps);
});