Canvas Library

taccgl Transitions

A taccgl™ animation is composed of one or more transitions. A javaScript program first calls taccgl™ multiple times to create and parameterize each of the transitions. Then it calls taccgl.start to play them. Playing takes place in an asynchronous way, i.e. after starting, the animation runs in quasi parallel, while the calling program can do other tasks or terminate. (Note that taccgl™ initiates a javascript event handler, which is called regularly to proceed with the animation. )

The user program can anytime, even while the animation is playing, modify or extend the animation.

A transition shows or animates graphical objects of various shapes, for example a single triangle, an HTML element painted on a rectangle, a distorted or morphed HTML element, a box, or an imported external 3D object created with a 3D drawing program. Typically a transition moves, rotates, resizes, clips, or fades the graphical object or possibly performs several of these actions simultaneously. For performing multiple motions sequentially, like moving an element from one place to another one needs multiple transitions. As an important special case a transition might not perform any motion or action, in this case it just shows the graphical object for a specified period of time.

taccgl™ transitions are designed to be fully executable by shader programs in the GPU. On taccgl.start all transitions are downloaded into the GPU. Then taccgl™ uses a single1 GPU-draw command per frame to make the GPU perform all transitions at once. Therefore taccgl™ consumes very little javaScript performance while playing animations and leaves much room for the user program.

A transition is repesented by a javaScript object of class Transition Class or a subclass thereof. There are subclasses for various basic shapes, see Shapes. A transition object is first created (using e.g. the a, actor, or cont methods) whereby the basic shape of the graphical object must be selected. After object creation a multitude of parameters can be set by calling methods. Finally transition.start must be called to start the newly created transition.

For each transition, the following items can be set

  1. various parameters of the Shape,
  2. the Time and Duration of the Transion
  3. the Motion performed during the transition
  4. the Textures and possible animations

WebGL™ is a trademark of the Khronos Group Inc.

[1] If user shaders are used more draw commands are needed.
Next Page:Shapes
Previous Page: Transparancy