qooxdoo Animation is a low level animation layer which comes with several effects to animate DOM elements. An effect changes one or more attributes of a DOM element from a start to an end value in the given time either linear or using a transition function. Effects can be stacked in a queue and orderd by assigning a startup delay.
To create an effect instance the desired effect and pass the DOM element, which should be used for the animation, as parameter. The effect can be configured by changing the properties like from, to, duration and more. Once the effect is set up, it can be started by calling the start() method of the effect.
var element = document.getElementById("dlAmount");
var attention = new qx.fx.effect.core.Highlight(element);
function update(amount)
{
element.innerHTML = parseInt(amount);
attention.start();
}
Every effect has a delay property which can be set to the amount of seconds the effect should wait before it should be executed after calling the start() method on it. You can use this property to arrange effects in the order you want them to be executed.
var el = button1.getContainerElement().getDomElement();
var psEffect = new qx.fx.effect.combination.Pulsate(el);
// The pulsate effect will take two seconds to execute
psEffect.seDuration(2);
var mvEffect = new qx.fx.effect.core.Move(el);
mvEffect.set({
x : 100,
y : 200,
delay : 2 // Wait two seconds to execute
});
// Start both effects at the same time
psEffect.start();
mvEffect.start();
To create own effects, create a new class and extend from qx.fx.Base and overwrite the update() methode. You can access the DOM element of the effect by calling this._getElement().
qx.Class.define("fxdemo.flickerBackground",
{
extend : qx.fx.Base,
members :
{
update : function(value)
{
var element = this._getElement();
// Value is a floating-point number between the start and end property.
value +=""; // Convert it to a string.
value = parseInt(value[value.length-1], 10); // Read the last digit and parse it to integer
element.style.backgroundColor = "'" + (value % 2 == 0) ? "red" : "blue" + "'";
}
}
});
The qx.fx.effect package contains 14 effects: