Many of the patterns cover animations and transitions, the problems they solve, and
the caveats that go along with them. You can check it out at http://developer.yahoo.com/
ypatterns/index.php.
Building a Simple Animation Object
Now that you have a sense of why you might want to animate something, let??™s look at building
your own animation object. Animating an element can be fairly simple: you take an element
and then change one or more of its properties over time.
CHAPTER 6 n VISUAL EFFECTS 130
Because you??™ll want the possibility of animating multiple objects, you should make it a
class construct. Define the function to take five parameters: the element to animate, the property
you want to change, the start value, the end value, and the length of time it should take to
complete the transition:
function Animation(element, property, from, to, duration){ }
The animation object would then be instantiated using the following structure:
new Animation('elementID', 'left', 0, 200, 1000);
When it comes to building any code, it??™s a good idea to think through the implementation.
There are pros and cons to every decision taken, and you should always consider why you
make each decision.
Taking a look at the code so far, you can see that the element ID is passed in as a string,
presumably to retrieve the element within the animation object via the document object
model (DOM) method document.
Pages:
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200