HTML5 Canvas 3D WebGL (TM) javaScript Library
 

Continuations - taccGL Tutorial

Using JavaScript you can assign a transition to a JavaScript variable.

var a=taccgl.actor("testimg").to (200,500,0).start();
var b= a.cont().to (1000,500,0).start();
var c= b.cont().flyHome().start();
RUN

Later on, you can define a continuation of a previous transition using cont. This creates a new transition, which shows the same object as the continued transition at the position where the continued transition stopped. So further animation starts where and when the previous transition stopped.

A common very simple use of cont is to freeze an element for a while using cont().dur(2).start(). Because no animation is specified, the element just stays in its current position.

taccgl.actor("testimg").to (400,400,0).start().cont().dur(2).start();
RUN

Note the difference to the already explained showAfter. showAfter displays the element until the complete animation finishes. The cont().dur(2).start(), however, freezes the element for a specified duration and it increases the total duration of the complete animation. Note that the complete animation runs until each transition finished (not counting any showAfter).

contAccel

contAccel can be used to avoid sudden changes in velocity or direction. It continues moving the element with its pervious velocity and gradually accelerates the object to its new destination.

Note that contAccel works quite differently than cont because it needs the destination coordinates and the duration as parameters.

var a=taccgl.actor("testimg").to ({el:"ex40",ox:-100,oy:-500}).vBegin(0,0,0).dur(3).start();
var b= a.contAccel({el:"ex40",ox:100,oy:000},3).start();
var c= b.contAccel({el:"ex40",oy:-300},3).start();
c.cont().flyHome().start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Boxes
Previous Page: Timing Transitions