javascript - 使用 SVG 和 JS 创建 30 秒计时器显示

Question

我正在尝试使用 SVG 和少量 JS 创建一个 30 秒的倒数计时器显示。思路很简单

1. 将倒计时时钟的表面绘制为 SVG 圆圈
2. 在里面绘制一个封闭的 SVG 路径，形式为圆扇形
3. 使用 window.requestAnimationFrame 以一秒为间隔更新该扇区

我的努力如下所示。虽然它有效，但最终结果远非顺利和令人信服。

• 当花费的时间进入圆的第二象限时，该扇区似乎膨胀到圆周之外
• 当它位于第三和第四象限时，它似乎脱离了圆周。

我在这里做错了什么，如何改进？

var _hold = {tickStart:0,stopTime:30,lastDelta:0};

String.prototype.format = function (args)
{
 var newStr = this,key;
 for (key in args) {newStr = newStr.replace('{' + key + '}',args[key]);}
 return newStr;
};

Boolean.prototype.intval = function(places)
{
 places = ('undefined' == typeof(places))?0:places; 
 return (~~this) << places;
};


function adjustSpent(timeStamp)
{
 if (0 === _hold.tickStart) _hold.tickStart = timeStamp;
 var delta = Math.trunc((timeStamp - _hold.tickStart)/1000);
 if (_hold.lastDelta < delta)
 {
  _hold.lastDelta = delta;
  var angle = 2*Math.PI*(delta/_hold.stopTime),
      dAngle = 57.2958*angle,
      cx = cy = 50,
      radius = 38,
      top = 12,
      x = cx + radius*Math.sin(angle),
      y = cy - radius*Math.cos(angle),
      large = (180 < dAngle).intval();
  
   var d = (360 <= dAngle)?"M50,50 L50,12 A38,38 1 0,1 51,12 z":"M50,50 L50,12 A38,38 1 {ll},1 {xx},{yy} z".format({ll:large,xx:x,yy:y});
   var spent = document.getElementById('spent');    
   if (spent) spent.setAttribute("d",d);
 }
 if (delta < _hold.stopTime) window.requestAnimationFrame(adjustSpent);
}

window.requestAnimationFrame(adjustSpent);

timer
{
 position:absolute;
 height:20vh;
 width:20vh;
 border-radius:100%;
 background-color:orange;
 left:calc(50vw - 5vh);
 top:15vh;
}

#clockface{fill:white;}
#spent{fill:#6683C2;}

<timer>
     <svg width="20vh" height="20vh" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="38" id="clockface"></circle>
      <path d="M50,50 L50,12 A38,38 1 0,1 51,12 z" id="spent"></path>
     </svg>
    </timer>

Answer 1

一个可行的解决方案是使用像这样的笔划动画:

蓝色圆的半径为 38/2 = 19

蓝色圆圈的 stroke-width 是 38，给人一种 38 个单位圆的错觉。

请看路径:也是一个半径=19的圆

svg {
  border: 1px solid;
  height:90vh;
}
#clockface {
  fill: silver;
}
#spent {
  fill:none;
  stroke: #6683c2;
  stroke-width: 38px;
  stroke-dasharray: 119.397px;
  stroke-dashoffset: 119.397px;
  animation: dash 5s linear infinite;
}
  

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg  viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="38" id="clockface"></circle>
      <path d="M50,31 A19,19 1 0,1 50,69 A19,19 1 0,1 50,31" id="spent"></path>
     </svg>

在本例中，我使用了 css 动画，但您可以使用 JavaScript 控制 stroke-dashoffset 的值。

stroke-dasharray 的值是使用 spent.getTotalLength() 获得的

如果您不熟悉 SVG 中的笔画动画，请阅读 How SVG Line Animation Works