Question

前几天在堆栈溢出http://codepen.io/anon/pen/LERrGG上找到了这个。

我认为这是一支非常棒的笔。唯一的问题是在计时器用完后无法调用函数。我试图实现这一点但没有成功。

如何编辑代码，使其成为一个有用的计时器，即它已用完了？＃？

(function animate() {
  theta += 0.5;
  theta %= 360;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
  setTimeout(animate, t)
})();

Answer 1

您可以通过检查theta是否比最初开始时更小来确定是否已绘制完整的圆圈：

(function animate() {
  var oldTheta = theta;
  theta += 0.5;
  theta %= 360;
  if (theta < oldTheta) {
    // the timer has "run out"
  }
  else {
    var x = Math.sin(theta * Math.PI / 180) * radius;
    var y = Math.cos(theta * Math.PI / 180) * -radius;
    var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
    timer.setAttribute('d', d);
    setTimeout(animate, t);
  }
})();

Answer 2

你必须检查theta是否小于360。

  (function animate() {
  theta += 0.5;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
 if(theta<360) setTimeout(animate, t);
 else doSomething();
})();

在动画settimeout之后执行一个函数

2 个答案: