One of the most apprecciated components in moo.rd are the Fx effects, which can be used to create cross-browser and fully-customizable animations.

Into the 1.3.1 version, i have rewritten the engine which represents the effects repository. In a few words, the changements can be described as “less instances, more enanchements”.

Less instances

The number of effect has been reduced. Wait a moment, i’m not mad: all the effects you have used are already here, more powerful and more consistent. As i have just said, now we have less instances to use. The MooTools philosophy want the users to write less instances and reuse them whenever and wherever they want.

So the “double” Classes are gone. For example, the Fx.ShakeH and Fx.ShakeW have been replaced by the Fx.Shake Class. The Fx.SwitchOffH and Fx.SwicthOffW have been replaced by the Fx.SwitchOff Class. The same happened with some other classes, like Fx.Bubble and many more.

By setting the mode option to the needed value, you can choose from a vertical or a horizontal transition, into the same instance:

var fx = new Fx.Bubble('element', {mode: 'vertical'});
 
// start the Fx.Bubble effect
fx.start();

Later, if you need to change the previous transition you picked, you can do this in an extremely easy way. Now all the Fx effects support the dynamic arguments:

// change the previous transition dynamically, without change the instance
fx.start('horizontal');

so again, you have the full control of your instances wherever and whenever.

More enanchements

Now that we have learnt how to use the new Fx effects, we can go on to the next step: the enanchements.

In the previous versions of moo.rd, some effect classes that execute a transition many times, like Fx.Shake or Fx.Pulsate, was able to do this just automatically. Now you can set how many times an element must be shaken, or must be pulsated!

var fx = new Fx.Shake('element', {times: 20});
 
// shake the element 20 times vertically
fx.start('vertical');

So you can shake an element as you want, how many times you want.

Moreover, a lot of new effects have been introduced, like the Fx.Scale Class, which allows to alter any transitionable property following a given scale, the Fx.Fold Class now accepts either the vertical and the horizontal mode, the Fx.Fade Class allows to fade everything (in, out or toggling) and many, many more.

An important point is that all options of the effects which indicate the parameter to alter, can be dynamically changed into the start methods. For example:

var scale = new Fx.Scale('element', {scale: 1.4});
 
// later start and change the give scale
scale.start(1.3);
 
var drop = new Fx.DropOut('element', {where: 'down'});
 
// later start and change the position
drop.start('up');

Element shortcuts and Element.fx method

All the Fx classes have the respective Element shortcut, like Element.shrink or Element.move.

The real news is the fx method of the Element prototype, which allows to choose an effect dynamically and apply it to the element:

// use Fx.Fade
var fade = element.fx('fade');
fade.start('toggle');
 
// use Fx.Move
var move = element.fx('move', {duration:2000});
move.start(120, 58);

Again, you have the full control of the effects.

File Namespacing

The last major changement i want to report is the new namespacing of the effects file, now more meaningful than ever:

• effects_base.js: the core file required by all other effect files
• effects_morph.js: contains effects which morph the element styles
• effects_fade.js: contains effects for all fade needs
• effects_move.js: contains effects to work with the element movement
• effects_extra.js: contains an extra collection of effects
• effects_toggle.js: contains controls to toggle everything

plus:

• effects_cycle.js: allows to create fully-customizable slideshows
• effects_cycles.js: allows to create double and fully-customizable slideshows

In the next article dedicated to the Fx effects we’ll see how to use them in some real applications, but nothing will be more complex that those descripted above.

RD

This entry was posted on Wednesday, April 9th, 2008 and is filed under tutorials, what's new. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.