减慢循环到动画Canvas [英] Slow down for loop to animate Canvas

问题描述

我想使用画布，我可以传入一个数字，这将等于一定的程度0-360，一条线将动画从其目前的位置到我设置的程度。

I'm trying to make something using canvas, where I can pass in a number, which would equal a certain degree 0-360, and a line would animate from where ever its current position is to the degree I set.

现在我有线路到任何程度我想要的（我没有做功能部分，但我通过的学位...只是做它现在的for循环）所以我的主要问题是我如何得到动画更慢的线？如果我只是让for循环运行它只是直到终点。

Right now I have the line going to whatever degree I want (I haven't done the function part yet where I pass in the degree... just doing it in the for loop for now) So my main question is how do I get the line to animate slower? If I just let the for loop run it just goes right to the end point. How can I slow it down so it animates?

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

谢谢！

Edit：我不太喜欢代码，所以如果你有更好的方法来做它，我很乐意接受建议。

I'm not particularly fond of the code, so if you have a better way to do it too I'm happy to take suggestions.

推荐答案

您需要使用像setInterval这样的函数来每N毫秒调用一段代码。语法为：

You need to use something like setInterval to call a piece of code every N milliseconds. The syntax is:

setInterval（code，milliseconds）;

它返回一个需要保存的数字，以便停止代码。所以我们可以这样写：

It returns a number that you need to save so you can stop the code. So we can write:

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

这会创建一个每30毫秒发生一次的函数。

This creates a function that occurs every 30 milliseconds.

每30毫秒， clock（）被调用， x 递增，如果 x 超过90，我们调用 clearInterval 并传入我们的调用 setInterval 返回。

Every 30 milliseconds, clock() is called, x is incremented, and if x is more than 90 we call clearInterval and pass in the number that our call to setInterval returned. This makes sure that the code open happens 90 times total.

下面是一个实例：

http://jsfiddle.net/WPTjv/10/

这篇关于减慢循环到动画Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！