Canvas Library
 

Timing of Transitions - taccGL™ Tutorial

Duration and Start

For each transition you can select a duration using the duration method (or its abbeviated name dur) and a starting time using startTime. Default duration is 1 second and default startTime 0 (or the present time if an animation is running already). Two transitions can be done in a sequence (as in the 3rd example below) setting the start time of the second transition to the start time of the first transition plus its duration. Two Transition can be done (partially) simultaneously, if the second transition starts at a time the first transition is running (or vice versa), as in the fourth example below.

taccgl.actor("testimg").to ({el:"eb1"}). dur(0.9). start();
RUN
taccgl.actor("testimg").to ({el:"eb1"}). dur(3). start();
RUN
taccgl.actor("testimg").to ({el:"eb1"}). dur(0.9). start();
taccgl.actor("testimg").from({el:"eb1"}). to (200,200,0). dur(2). startTime (0.9). start();
taccgl.actor("testimg").from(200,200,0). to ({el:"eb1"}). startTime(2.9). dur(1.3). start();
RUN
taccgl.actor("testimg").to ({el:"eb1"}). dur(3). start();
taccgl.actor("logoimg").to ({el:"eb1",ey:1,oy:90}). dur(1.5) . startTime (1.5) .start();
RUN

It is well possible to have multiple transitions referring to the same HTML element, either to make the element perform multiple visual effects sequentially or to display it multiple times simultanously

taccgl.actor("testimg").to({el:"eb2"}). duration(2). start();
taccgl.actor("testimg"). from({el:"eb2"}). duration(2). startTime(2) .start();
RUN
taccgl.actor("testimg") .position({el:"eb2",z:-500}) .duration(2) .start();
taccgl.actor("testimg") .position({el:"eb2",z:-500}) .rotateMiddle(0,1,0) .rotatePart(Math.PI/2,Math.PI/2) .duration(2) .start();
RUN

<div id="examplediv2" style="float:right; margin-left:10px; padding:10px; width:150px; height:150px; border:1px solid black; font-size:12px;"> Test DIV with example text. </div>

In the next sections below and in (Continuations) you will learn easier ways to connect various transitions rather than explicitly setting startTime as discussed above.

Note that it is also possible to perform multiple visual effects on the same actor within a single transition, such as a linear motion and a rotation or a motion and a blend. Start time and duration must be identical for all the simultaneous visual effects.

taccgl.actor("examplediv2").to(0,2000,0). rotateMiddle(0,1,0).start();
RUN
taccgl.actor("examplediv2").to(0,2000,1000). rotateMiddle(0,0,1).color("green").start();
RUN
taccgl.actor("examplediv2").rotateMiddle(0,1,0). color("white","blue").start();
RUN
taccgl.actor("examplediv2").color("white","blue"). to({oz:-5000}).rotateMiddle(0,0,1). dur(5). start();
RUN
taccgl.actor("examplediv2").resize(null,null,0,0). blend(1,0).start();
RUN

Getting Transitions in a Sequence

Using javaScript you can assign a transition to a variable. Later on you can use that variable to define a new transition, which starts immediately after the designated transition.

var mystep=taccgl.actor("testimg"). to({el:'ex2'}). dur(3). start();
mystep.actor("testimg"). from({el:'ex2'}). to({el:'ex2',oy:100}). dur(5). start();
mystep.actor("logoimg"). to({el:'ex2'}). dur(4) . start();
RUN

Note that the second and third line of the example use mystep.actor instead of taccgl.actor. The method mystep.actor (actor) works almost as taccgl.actor but starts the transition immediately after mystep. The a method works accordingly.

showAfter and showBefore

In the first version of the next example the logoimg vanishes for a short time after before the end of the animation. The reason is simply that there is no transition showing it. The only transition showing the logoimg starts at 1 second and takes 1.5 seconds, while animation starts at time 0 and ends at 3, because the first transition has a duration of 3. Therefore before 1 second and after 2.5 seconds the logoimg is not shown. A possible solution is showAfter that shows a transition in its end position after the animation itself is finished and showBefore that makes a transition show in its begin position even before running.

taccgl.actor("testimg").from ({el:"ex1"}).to ({el:"ex2"}). dur(3). start();
taccgl.actor("logoimg").from ({el:"ex1",ry:-1}).to ({el:"ex2",ry:-1}). dur(1.5) . startTime (1) . start();
RUN
taccgl.actor("testimg").from ({el:"ex1"}).to ({el:"ex2"}). dur(3). start();
taccgl.actor("logoimg").from ({el:"ex1",ry:-1}).to ({el:"ex2",ry:-1}). dur(1.5) . startTime (1) . showBefore(). showAfter(). start();
RUN

Aligning Transition Duration

var mystep=taccgl.actor("ex1").rotateMiddle(1,0,0). start();
var secondstep=mystep.a("ex1").paint().rotateMiddle(0,1,0). dur(1.5) . start();
taccgl.actor("hl2").rotateMiddle(0,1,0). untilaLEo(secondstep) . start();
RUN

This example defines two transitions, mystep and secondstep, rotating "ex1" in different ways. It uses a as previously described to perform these two transitions after each other. Then it defines a third transition, rotating ex2, that is supposed to run during mystep and secondstep. It uses untilaLEo which runs the third transition at Least until End of transition "secondstep", i.e. it increases the duration of the third transition until the end of the "secondstep".

There are various methods like untilaLEo to express timing relations among transitions, e.g. untilaLBo to increase duration until the begin of another transition, untilaMEo decrease duration to end before another transition ends, or untilaMBo decrease duration to end before another transition begins.