Author: Manuel Lemos (mlemos-at-acm.org)
Version: @(#) $Id: pageAnimation.documentation,v 1.2 2013/01/28 10:34:20 mlemos Exp $
Animation package
Classes for animating HTML page elements.
Manuel Lemos (mlemos-at-acm.org)
animationNumber = animate.addAnimation(animation)
Add an animation to the list of running animations.
The animation argument is an object that defines properties of the animation. The animation object may have the following properties:
name (optional) - Name of the animation
effects - Array with the definition of the sequence of effects of the animation. Each entry in this array is an object that defines the effect properties.
All effect properties must have an entry named type that defines the type of effect.
All other effect properties are specific to each type of effect. See the Effects classes to learn about the available effects and their parameters.
debug (optional) - Integer value to specify the animation debug level. 0 means no debugging support is enabled. Higher values make the object generate more debug information.
The animationNumber return value is an integer value that is the number of the added animation.
This object contains several classes that implement the built-in supported animation effects.
Additional effects may be implemented by external animation plug-in classes that may become available by registering them with the ML.Animation.registerEffects function.
All effect classes take as constructor function argument an object with parameters to configure the animation effect.
Most of the parameters are defined by the application. The names and the types of the parameters depend on the type of effect.
Below follows the list of supported parameters for each type of built-in animation effect.
Add content to the end of a given page element.
(Required) Identifier of the element to which the content will be added
(Required) HTML content to be added to the page element
Cancel a given animation if it is in progress
(Required) Name of the animation that should be canceled
Give visual emphasis to a given page element.
This effect requires HTML5 canvas objects support in the user browser, otherwise the effect is skipped.
(Optional) Identifier that will be assigned to the canvas object that will be created.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element that will be emphasized
Number value with the thickness of the lines that will be drawn
Default value: 4
(Required) Name of the method of emphasis. Currently this effect can give emphasis by drawing lines around the given page element. The method may be either 'circle', 'underline' and 'double-underline'.
Number value of the opacity level of the lines that will be drawn. The value must be between 0 and 1
Default value: 0.5
String of parameters that define how the lines will be stroke in the canvas object.
Default value: '#0000ff'
Make a given page element fade and appear gradually.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element to be faded
(Required) String with the type of visibility property that should be set in the beginning to make the page element visible. The value must be either 'display' or 'visibility'.
Make a given page element fade and disappear gradually.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element to be faded
(Required) String with the type of visibility property that should be set in the end to make the page element invisible. The value must be either 'display' or 'visibility'.
Hide a given page element if it is visible.
(Required) Identifier of the element to be hidden
Scroll the page if necessary to make a given page element show in the browser window viewport.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element to be made visible
Add content to the beginning of a given page element.
(Required) Identifier of the element to which the content will be added
(Required) HTML content to be added to the page element
Display a number in a given page element increasing or decreasing gradually from a given start number to an end number.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element into which the number will be displayed
Integer with the start value of the number
Default value: 0
(Required) Integer with the end value of the number
Replace the content of a given page element.
(Required) Identifier of the element that will have its content replaced
(Required) HTML content to replace in the page element
Show a given page element if it is invisible.
(Required) Identifier of the element to be shown
Scroll the content of a given page element horizontally or vertically until it completely appears.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element to slide
(Required) String with the name of the side from which the page element should scroll. It should be either 'left', 'right', 'top', or 'bottom'
Scroll the content of a given page element horizontally or vertically until it completely disappears.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
(Required) Identifier of the element to slide
(Required) String with the name of the side to which the page element should scroll. It should be either 'left', 'right', 'top', or 'bottom'
Wait for a given period of time before proceeding to the next animation effect.
Number with the length of time of the effect in seconds
Default value: defined by the ML.Animation.defaultDuration variable
Number that defines the default duration of animation effects
Default value: 1
registered = ML.Animation.registerEffects(name, effects)
Register a new type of animation effect by assigning an effects class that will implement it.
The name argument is a string with the name of the new animation effect to be registered.
The effects argument is a reference to the constructor function of the class that implements the new effect.
The registered return value is a boolean value that indicates whether the new animation effect was registered successfully. If this value is false, it means there is already a registered animation effect with the same name.