Over the past couple of weeks we have got a lot of great responses over the initial beta of MooTools Core 1.3. We have since improved both the code and the documentation in order to release a second beta.
Most notably we have removed the dependency on Hash. If you build 1.3 without compatibility you won't get the Hash object no more. But fear not, we have added Object.js which brings you all the Hash methods as generics. Everything else is really minor, has to do with stability or was meant to improve code quality (we really take this seriously).
We are trying hard to provide you with a consistent and meaningful API so we have decided to introduce one tiny tweeny minor breaking change. If you were setting tween, morph, load, or send options using the getter (element.get('tween', {...options here...})) that will not work anymore. You will have to use set(element.set('tween', {...options here...})), as get needs to be a pure getter.
All in all the new beta is faster, better, more stable - in a word - sexier. Tell us how it works for you.
Thanks to everyone who helped polishing the 1.3 release. I would really like to thank Arian Stolwijk (@astolwijk) who has contributed significant improvements to the documentation.
In a recent project I worked on with Thomas Aylott the page did some calculations and displayed the result after the user pulled some sliders around. Rather than just change the text from one number to another, the element would increment the number before the user's very eyes. With a fun interface like that, they had no choice but to apply for a new credit card right then.
Admittedly, I may not have thought to extend Fx to do something like that. After all, the first line of the docs for Fx is: "This Class will rarely be used on its own, ..." My first thought would be to use a periodical with a counter and then set the text until the counter was done. But Thomas extended Fx instead. Though it's the base class for all animations (tween, morph, scroller, etc.) its methods can be used for all sorts of abstract "animations."
For this article I've just come up with a few potentially useful extensions of Fx to get the idea across that you can use it for more than just element animations.
Essentially Fx just calculates a sequence of values between two numbers. The options kick in to make those values more interesting. This class, Fx.Log, simply updates the text of an element every step of the effect. Notice that this class is essentially the base Fx class except for the tiny set method.
Here's another demo that visualizes all the visible options of Fx. After you draw the effect, hover the dots to see the exact value calculated (or view source and see them all together.) Playing around with this demo might tell you more about how Fx works than anything else out there.
By default, Fx uses 50 fps. So every second it'll kick out 50 different values and fire the set method 50 different times. For the next few demos I only wanted to do something if the rounded value is different than the last rounded value, so I came up with Fx.Diff. If the value is different, it'll call the render method.
Fx.Diff = new Class({
Extends: Fx,
count: 0,
render: $empty,
set: function(now){
now = now.round();
var diff = now - this.count;
if (diff) {
this.render(diff, now);
this.count += diff;
}
return this;
}
});Since this appears to be no different than the very first demo, we'll just look at the code. Note, the difference is that the first counting demo would change the text in the element every single frame (50 times a second), but this code would only change it if the new rounded value is different from the last.
Fx.Count = new Class({
Extends: Fx.Diff,
initialize: function(element, options){
this.element = document.id(element);
this.parent(options);
},
render: function(){
this.element.set('text', this.count);
return this;
}
});I can actually see myself using this one somewhere:
Notice that Fx.Typewriter overwrites the start method of Fx. The Fx start method takes two arguments, from and to. The usage for Fx.Typewriter is to simply pass in a string of text like so: myFx.start('A whole bunch of text'). This new method knows the from argument is always 0, splits up the text into an array (one item per character) and then uses that length as the to argument. After that logic is done, it simply calls the parent start method. Then the render method takes over by figuring out how many characters to display, filtering out the tail end of the array, joining what matters, and finally setting the text of our element.
There's a very creative effect called Fx.Text on the forge. It's an animated text replacement effect. I think it's really cool and does a great job of extending Fx.
This next script is far too magical to simply show you the code. You'll need to view the source for this beauty.
Ryan Florence is a MooTools enthusiast and contributor. He maintains his JavaScript focused blog, MooDocs.net, and moo4q. Follow him on twitter or checkout his plugins on the Forge.