Shrink |
Grow(on click) |
Fold |
Unfold |
Pulse |
Shadow |
Appear |
Shake LR |
Shake TB |
Fade |
Drop |
TV |
Fade (on mouse over) |
Blind Up (with ghost) + Blind Down (with bounce) |
Blind Up + Blind Down + Blind Right + Drop + Appear |
Blind Up |
Blind Down |
Blind Left |
Blind Right |
Blind Right + Appear binded right |
|
click for more - click again for less
These effects were created by dave glass using YUI's Animation library.
-
To create an animation on an object you add a behaviour
someComponent
.add(new Animation(OnEvent.click));
-
The Animation does not have any Effects,
and you need to provide it by adding (chain) multiple Effects together
new Animation(OnEvent.click)
.add(new Effect(Effect.Type.Fade, delay))
.add(new Effect(Effect.Type.Appear, delay)));
-
Each Effect can have different types of Attributes like "ghosting (fading effect), easing, delay etc"
see here.
Attributes can be chained as well
Attributes attributes = new Attributes("ghosting", "true")
attributes.add("delay", "true")
.add("ease", Easing.elasticBoth.function());
new Effect(Effect.Type.Fade, attributes));
-
Animation on a component is triggered when an event (click/mouseover) on the component
occurs. You override the tiggerId to allow the Animation to be triggered by another
markup id (not necessary a component)
-
Mulitple Animation. You can do
component.add(animation) with different
animation effects with the same event. and each animation will be cycled through.
e.g.
component.add(animation(click).add(blindDownEffect);
component.add(animation(click).add(blindUpEffect);
if you click on the above "click for more..." again it will execute the
2nd animation and cycle to the first one
|