clearTimeout(timeoutID);
Now that you have two ways to approach the timed sequences, you have to consider how
you want to approach the animation. On one hand, you can mimic the film approach by running
so many times a second. The general minimum number of frames per second (fps) to
avoid choppy animation is 24, but you??™ll usually see round numbers such as 30fps. Setting the
frame rate is really easy to do with setInterval():
var intervalID = setInterval(performAnimation, 33);
The first parameter is the function that you want to call, and the second parameter is 33
(1,000 milliseconds divided by 30fps and rounded to the nearest integer).
The other way you can calculate the frame rate is to look at the property that you want to
change and determine how many steps (pixels [px]) it would take to animate it over a certain
time frame. For example, if you have a property that you want to move from the left, starting at
50px and ending at 200px over a period of 3 seconds, calculate that at 200 minus 50 divided by
3 seconds = 50 iterations per second. Divide 1,000 milliseconds by 50 iterations, and you get
the following:
var intervalID = setInterval(performAnimation, 20);
This formula might work well for small iterations, but if you have an object that needs
to go from 0 to 1,000 in 1 second, that??™s 1,000 iterations, but only 30 are required to give the
appearance of a smooth animation.
Pages:
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204