减缓for循环以实现Canvas动画。

Question

我正在使用canvas制作一些东西，我可以传入一个数字（0-360度），线条会从当前位置动画到我设定的度数。目前，我已经让线条达到了我想要的角度（我还没有编写函数部分来传递角度...现在只是在for循环中执行）。所以我的主要问题是如何使线条的动画变慢？如果我只让for循环运行，它就会立即到达终点。如何减缓速度以实现动画效果？

代码在这里：http://jsfiddle.net/WPTjv/2/ 谢谢！

编辑：我不太喜欢这个代码，如果你有更好的方法，我也很愿意采纳建议。

- Bill

Answer 1

你需要使用类似于 setInterval 的方法，每 N 毫秒调用一次代码。语法如下：

setInterval(代码, 毫秒数);

它返回一个数字，你需要保存这个数字以便停止代码的执行。因此我们可以编写以下代码：

 var interval = setInterval(function() {
     clock();
     x++;
     if (x > 90) clearInterval(interval);
 }, 30);

这将创建一个每30毫秒执行一次的函数。

每30毫秒，调用clock()，增加x的值，如果x大于90，则调用clearInterval并传递我们的setInterval调用返回的数字。这确保代码总共只会运行90次。

以下是一个实时示例： http://jsfiddle.net/WPTjv/10/

- Simon Sarris

Answer 2

给你：

http://jsfiddle.net/WPTjv/3/

- dscer