We released the first version of AliceJS a while back, and spent several months gathering feedback and playing around with it. Clearly, the concept of Organics has been popular with users: the ability to alter various aspects of an animation to subtly randomize the final outcome is a powerful idea to keep UI animations in an application fresh. The simplicity of the API and the closeness to the CSS syntax has also been well received.
Introduction
For those who are not familiar with the framework, check out the Wobble demo at http://blackberry.github.com/Alice/demos/fx/wobble.html. First, play around with the Duration and Rotation parameters to see how they affect the animation. Then change the Timing function and the Perspective of Origin. After playing with that, start adding Randomness and see how all the various animations start changing.
The key to AliceJS is that all of this happens with only one line of code on top of an application’s regular HTML, so development is dead easy. AliceJS generates CSS properties at the DOM level (so it works on any DOM element, not just images like with other “animation” frameworks) to enable those effects. Below is a simple sample for a page that uses AliceJS:
<!DOCTYPE html>
<HTML lang="en">
<BODY>
<SCRIPT src="js/src/alice.core.js"></SCRIPT>
<SCRIPT src="js/src/alice.plugins.cheshire.js"></SCRIPT>
<BR>
<BR>
<TABLE border="0px" align="center" cellspacing="40px">
<TR><TD>
<IMG id="e1" src="images/logo_header_plain.png">
</TD><TD>
<FORM id="e2">
Name: <input type="text"/><BR>
Pswd: <input type="text"/>
</FORM>
</TD></TR>
</TABLE>
<BR>
<BR>
<CENTER><BUTTON onClick="animate_n()">Animate Normal</BUTTON><BR>
<BUTTON onClick="animate_o()">Animate Organic</BUTTON>
</CENTER>
<SCRIPT type="text/javascript">
var a = alice.init();
function animate_n() {
a.wobble(["e1", "e2"], 10, "center", "1000ms", "ease-in-out");
}
function animate_o() {
a.wobble(["e1", "e2"], {value: 20, randomness: 80}, "center",
{value: 1000, randomness: 20}, "ease-in-out");
}
</SCRIPT>
</BODY>
</HTML>
In this example, we create a basic Form, and an Image, laid out in an HTML table. Then we have 2 buttons, and 2 functions that execute the AliceJS code to start the Wobble effect. The first function uses standard parameters while the second adds randomness factors to ‘duration’ and ‘rotation’. The signature for Wobble is:
alice.plugins.wobble = function(elems, rotate, perspectiveOrigin, duration, timing);
This API is slightly different from V0.1, so you need to update your code. In the following sections, we will discuss the main ideas in the API re-architecture we did for V0.2. One thing we didn’t change however was the similarity with CSS. The best way to think about AliceJS is to think as if you were doing CSS work. For example, this is a normal call:
a.wobble(["e1", "e2"], {value: 20, randomness: 80}, "center",
{value: 1000, randomness: 20}, "ease-in-out");
Putting CSS glasses on, it could look like this:
#MyDiv {
animate-wobble: randomize(20deg, 80%) center randomize(1000ms, 20%) ease-in-out;
}
Or
#MyDiv {
animate-wobble-rotation: 5 80%;
animate-wobble-anchor: center;
animate-wobble-duration: 1000ms 20%;
animate-wobble-timing-function: ease-in-out;
}
API Redo
Jim Ing (@jim_ing, the co-developer of the framework) and myself had never been fully satisfied with the code underneath it all. After all, it was thrown together quite rapidly so we could explore the Organics concept and build cool animations. So, it was time for us to fundamentally revisit this codebase. The result is V0.2 which is essentially a complete rewrite.
- We have centralized all parameter processing, so that the framework is completely uniform for all effects. It also allowed us to add a lot of extensibility right in for future enhancements.
- We create a massively flexible master effect and added “shortcuts”, simple additional sub-effects which essentially open up a few parameters and delegate to the master effect.
Parameter centralization
In the example above, I passed in an array of strings to denote the elements in the DOM for which the Wobble effect should apply. But what if I actually already had the elements? Or you used a selector on a class?
// example 1
a.wobble("e1", 20, "center", 1000, "ease-in-out");
a.wobble(["e1", "e2"], 20, "center", 1000, "ease-in-out");
// example 2
var e1 = document.getElementById("e1");
var e2 = document.getElementById("e2");
a.wobble(e1, 20, "center", 1000, "ease-in-out");
a.wobble([e1, e2], 20, "center", 1000, "ease-in-out");
// example 3
var elems = getElementsByTagName("toto");
a.wobble(elems, 20, "center", 1000, "ease-in-out");
The framework centralizes all processing of the “elements” parameter. Not only does that make the framework, and all effects (present and future) consistent, but it also allows for extension. In a future article, we’ll explore that concept and show how we could use jQuery for instance as the selector. That same approach applies to all parameters, for example, for duration:
- 1000: a value without any unit is understood as being in milliseconds
- “1000ms”: a string with a unit as milliseconds
- “10s”: a string with a unit as seconds
Additionally, when using randomization, you simply use an object passed in as {value: 1000, randomness: 10}. Here, “value” is exactly as we just discussed above, and “randomness” is a percentage factor. So, for a value of 1000 and a randomness factor of 10 (or “10%”), the final value will land somewhere between 900 and 1100 (+ or – 10% of the value). In a future article, we’ll describe how this can be further customized so that you could use a more sophisticated randomization function. This can have interesting applications such as generating random values successively that don’t deviate from a specified median value. There are lots of cool possibilities.
Effects
We decided to consolidate effects as much as we could. From our experience with AliceJS V0.1, we knew that we could create a large class of effects with simple parameter variance. So we decided to try it out. Some effects that used to be available in the experimental section of AliceJS 0.1 are not yet available in the new architecture, but they should follow soon.
In AliceJS 0.2, we have one giant master effect called Cheshire in honor of the cat in “Alice In Wonderland”. In Walt Disney’s classic animated film, you could see the cat fade in and out, rotate, slide around and so on. And that’s exactly what that effect can do… and a lot more. This master effect uses many parameters such as duration, timing, direction, move, rotate, overshoot, perspective etc… You should use the new Builder tool at http://blackberry.github.com/Alice/demos/builder.html to play around with the parameters and generate the low-level code against the master effect.
I played around, and the tool generated the following Cheshire call:
alice.cheshire({"elems": ["elem1"],
"delay": {"value": "0ms","randomness": "30%"},
"duration": {"value": "2500ms","randomness": "50%"},
"timing": "ease-in-out",
"iteration": "infinite",
"direction": "alternate",
"playstate": "running",
"move": "left",
"rotate": {"value": "90","randomness": "80%"},
"flip": "left",
"turns": "4",
"fade": "in",
"scale": {"from": "1%","to": "100%"},
"shadow": "true",
"overshoot": "20%",
"perspective": "1000",
"perspectiveOrigin": "center",
"backfaceVisibility": "visible"
});
As you can see, the master effect is very powerful, with a lot of parameters to achieve almost limitless possibilities. For simplicity, we have then defined sub effects which are essentially shortcuts. As you saw previously, the Wobble effect only requires a few of those parameters. And to make it easy to type, make it still look like CSS code, and help in IDEs that can do function call completion, we used the more traditional way of passing in parameters. Here is how ‘Wobble’ is structured:
alice.plugins.wobble = function (elems, rotate, perspectiveOrigin, duration, timing) {
"use strict";
console.info("wobble: ", arguments);
alice.plugins.cheshire({
elems: elems,
rotate: rotate || 5,
perspectiveOrigin: perspectiveOrigin || "center",
duration: duration || "200ms",
timing: timing || "ease-in-out",
iteration: "infinite",
direction: "alternate"
});
};
We picked “rotate”, “perspectiveOrigin”, “duration”, and “timing” as the key properties for the ‘Wobble’ effect, and simply filled in the rest in the method. It is effectively just a shortcut to a full Cheshire call.
There are 15 sub effects out of the box which can be all seen on http://blackberry.github.com/Alice/demos/. They are:
- Bounce
- Dance
- Drain
- Fade
- Hinge
- PageFlip
- Pendulum
- PhantomZone
- RaceFlag
- Slide
- Spin
- Toss
- Twirl
- Wobble
- Zoom
With the builder tool, you can create your own mixture and the possibilities are almost endless. You can look at further variations with the samples on http://blackberry.github.com/Alice/demos/stack.html and http://blackberry.github.com/Alice/demos/sampler.html.
Conclusion
AliceJS 0.2 is a complete rewrite to make sure we had a solid base to continue developing the framework.
- We have implemented rich parameter syntaxes which are completely centralized across the entire framework for extensibility and consistency.
- We have consolidated animation parameters into a master effect from which we then derived over a dozen sub effects.
- We added a builder tool
- We added more samples to show how flexible this all is.
- We added Jasmine test cases.
The framework works best on BlackBerry 7 and PlayBook devices due to top notch CSS hardware acceleration implementation of course, but we have also tested it on a number of other platforms: the framework now works across a wide range of WebKit-based mobile device such as iOS and Android, and desktop Safari and Google Chrome. Last but not least, we did finally add support for Firefox. Yeah! Do note that 3D effects such as flips require FireFox 10 to work.
We hope you have a lot of fun with it and we are eagerly awaiting feedback and contributions. In the near future, we’ll post additional articles about building new master effects, customizing how the framework handles parameter arguments, and creating sub effects.
PS: I apologize for my uppercasing of HTML tags! ;P
Today was the official worldwide launch of the BlackBerry® PlayBook™ OS 2.0 software update. There are many new features; rather than singling out any, I’ll point to the official pages and blogs.
Open BlackBerry News 