getElementById('elementID'), 'left', 0, 200, 1000);
You have five parameters, but glancing at the code to instantiate an object gives you little
insight about what the numbers mean. You have to refer to the class definition to understand
what the values mean. To solve this problem, you can switch the parameters to an object literal
to take advantage of named keys. This change also gives you the flexibility to expand the
CHAPTER 6 n VISUAL EFFECTS 131
application programming interface (API) without making the instantiation even more complicated.
So change that around now by passing in only an options argument and pulling the
element ID from that options object:
function Animation(options)
{
var el = options.element;
if(typeof el == 'string') el = document.getElementById(options.element);
if(!el) return false;
}
Now when you want to instantiate the object, you can simply pass in an options object:
var options = {
element:document.getElementById('elementID'),
property: 'left',
from: 0,
to: 200,
duration: 1000
};
new Animation(options);
Next you need to perform the animation. Unfortunately, however, there??™s no way to just
tell the document to animate an item. Like traditional animation, you place the element in a
new location after a fraction of time, which is done with small changes at multiple times per
second. This process creates the illusion of movement, as demonstrated (as well as a static
image can) in Figure 6-2.
Pages:
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202