Animation

Table of Contents

Animation

Since 2.0

ICEFaces provides a way to animate standard JSF components as well by using the <ace:animation> attachable behavior. It works by nesting the <ace:animation> tag inside the component. Then, in this tag one specifies the event name that will trigger the animation. This event must be supported by the component. The TLD documentation of each standard JSF component lists which events are supported, which usually map to standard DOM events. The event name must be entered without the 'on' prefix. For example, for 'onmousemove' the value of the 'event' attribute must be 'mousemove'. Also the event attribute does not support EL expressions, its value can be only a literal defined in the template. Finally, the animation parameters are specified in the desired way, as described below.

See the ICEfaces Showcase Live Demo of this component, complete with source code.
TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

- 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.)

<h:panelGroup>
    <ace:animation event="click" name="fade"/>
    <ace:animation event="click" 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.)

<h:panelGroup>
    <ace:animation event="click" 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 types of animations "predefined" and "free form".

easing
Specifies the variation of the rate at which an animation progresses.
Possible values are swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
The default easing type in the underlying jQuery library is easeOutQuad.

iterations Number of times the animation is to repeat.

duration Length of effect in milliseconds.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2018 ICEsoft Technologies Canada Corp.