Animation

ICEFaces provides animation system using ice:animation attachable behavior, that allows to attach animation(s) to the JSF standard and custom components which are type of ClientBehaviorHolder.

- There are two different type of animations:

Predefined
Free form

* Predefined:
- When using predefine animations, developers don't need to define any properties. The following are the supported predefined animations.

Blind - Blinds the element away or shows it by blinding it in.
Clip - Clips the element on or off, vertically or horizontally.
Drop - Drops the element away or shows it by dropping it in.
Explode - Explodes the element into multiple pieces.
Fade - Fades the element, by gradually changing its opacity.
Fold - Folds the element like a piece of paper.
Puff - Scale and fade out animations create the puff effect.
Slide - Slides the element out of the viewport.
Scale - Shrink or grow an element by a percentage factor.
Bounce - Bounces the element vertically or horizontally n-times.
Highlight - Highlights the background with a defined color.
Pulsate - Pulsates the opacity of the element multiple times.
Shake - Shakes the element vertically or horizontally n-times.

In order to use predefined animations a developer needs to define an animation "name" as well as a type of "event". For example:

<h:inputText>  
    <ace:animation event="click" name="highlight" />
</h:inputText>

* Free form:
When using free form animation developers are allowed to define "to" and "from" properties on animation tag such as:

<h:inputText>
   <ace:animation event="change" from="{color:'black'}" to="{color:'red'}" />
</h:inputText>

or:

<h:inputTextarea>
   <ace:animation event="mouseover" from="{height:20, color:'#222'}" to="{height:100, color:'#CCC'}" />
   <ace:animation event="mouseout" to="{height:20, color:'#222'}" from="{height:100, color:'#CCC'}" />
</h:inputTextarea>

When using free form animation the name of an animation is not required, but it can be defined as "anim".

- With the current implementation "to" and "from" will only be applied when using "anim (free form)" type of animation, and if using predefine animation such as "fade" or "highlight" then "to" and "from" can be changed using the style classas shown above.

* Chaining:
Chaining can be achieved by registering animation on same event type (e.g.)

<ice:tabSet>
    <ace:animation event="transition" name="fade"/>
    <ace:animation event="transition" name="highlight"/>
    .....

* Synchronize execution of animations:
The predefine animations are based on the style class, they only look for specific properties so synchronization is not posible with more then one animations. However Synchronize execution of an animation can be achieved using free form animation by defining more then one properties on it(e.g.)

<ice:tabSet>
    <ace:animation event="transition" from="{opacity:1, height:20}" to="{opacity:0, height:1}"/>
    .....

The above snippet will give blind up/down effect in parallel to fade in/out

Other Animation Attributes:
In addition to that the following attributes can be used on both type of animations "predefined" and "free form". Some of these easing animations are more applicable to certain components than others.

easing
Specifies an additional type of behaviour for the animation. The values exposed are supported by the underlying YUI components and are:

- backIn:Backtracks slightly, then reverses direction and moves to end.

- backOut: Overshoots and then reverses and comes back to end.

- backBoth: Backtracks slightly then reverses direction, overshoots, and then reverses and comes back to end.

- bounceIn: Bounces off start value.

- bounceOut: Bounces off end value.

- bounceBoth: Bounces off start and end values.

- easeIn: Begins slowly and accelerates towards end.

- easeInStrong: Begin slowly and accelerate quickly towards end.

- easeNone: Equivalent to no easing argument.

- easeBoth: Begin slowly, accelerate, then decelerate at end.

- easeBothStrong: Begins slowly and decelerates towards end, with vigor.

- easeOut: Begins quickly and decelerates towards end.

- easeOutStrong: Begins quickly and decelerates towards end, with vigor.

- elasticIn: Snap in elastic effect.

- elasticOut:Snap out elastic effect.

- elasticBoth:Snap both elastic effects.

iterations Number of times the animation is to repeat.

duration Length of effect in milliseconds.

Animation

Labels