Therefore, you should implement the first approach into
the script:
function Animation(options)
{
var el = options.element;
if(typeof el == 'string') el = document.getElementById(options.element);
if(!el) return false;
var fps = 30;
CHAPTER 6 n VISUAL EFFECTS 133
function animate()
{
}
var intervalID = setInterval(animate, 1000 / fps);
}
You now have a timer running and executing at 30fps. Next up, you need to take the
object that you want to animate and determine how many steps it will take to animate,
given the current frame rate and duration. After that, it??™s simply a matter of incrementing
the steps each time you run the animate() function. After you reach the number of steps,
clear the interval??”and the animation is done. This is the basic animation class:
function Animation(options)
{
var el = options.element;
if(typeof el == 'string') el = document.getElementById(options.element);
if(!el) return false;
var fps = 30;
// stores which step we're on
var step = 0;
// determines the total number of steps
var numsteps = options.duration / 1000 * fps;
// determines the interval between each step
var interval = (options.from - options.to) / numsteps;
function animate()
{
// what the new position will be
var newval = options.from - (step * interval);
// the step increments AFTER the comparison
if(step++ < numsteps) {
// use Math.ceil to round to an integer and style
el.
Pages:
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205