Canvas 3D Animation Library
 

Selectors for multiple Transitions - taccGL™ Tutorial

mClass Selector

Element 2

Transitions can be created for multiple elements at once. For example these 3 images all share the css class "myclass". Using the selector mClass it is possible to select all elements of that class and to create a transition, just as a would do. Then all methods called automatically apply to all these transitions at once, e.g. all will rotate according to rotateMiddle(0,1,0). paint, hide, and visAtEnd must be called explicitly since mClass just takes over the function of a but not the additional functionality of actor.

taccgl.mClass('myclass') . paint(). hide(). visAtEnd() . rotateMiddle(0,1,0) . start();
RUN
taccgl.mClass('myclass') . paint(). hide(). visAtEnd() . to ({ry:1}) . start();
RUN
taccgl.mClass('myclass') . paint(). hide(). visAtEnd() . to ({el:'ex5-1',ex:-1}) . start();
RUN

Sequence

Using sequence the transitions can be performed in a sequence rather than simultaneously. It receives the total duration of the sequence as parameter.

taccgl.mClass('myclass') . paint(). hide(). visAtEnd() . rotateMiddle(0,1,0) . sequence(3). start();
RUN
taccgl.mClass('myclass') . paint(). visAtEnd() . rotateMiddle(0,1,0) . sequence(3). hideAtBegin(). start();
RUN
taccgl.mClass('myclass') . paint(). hide(). showBefore(). visAtEnd() . rotateMiddle(0,1,0) . sequence(3,.5). start();
RUN
taccgl.mClass('myclass') . paint(). hideAtBegin(). visFinal() . showAfter() . to ({ry:1}) . sequence(3,-.2). start();
RUN

Sequence also has a second parameter specifying the time gap between two steps of the sequence. The gap can also be negative which makes steps overlap.

Variables

Selectors like mClass return a set of transitions as result. Most methods that apply on a single transition can apply on a set of transitions as well. In this case the a method is applied to all transitions in the set.

var m=taccgl.mClass('myclass');
m . paint(). hide(). visAtEnd();
m . to ({el:'ex20'}) . sequence(3). start();
RUN

Using getI a particular transition within a set can be selected. The following example makes the 2nd transition move to a different position and rotate.

var m=taccgl.mClass('myclass') . paint(). hide(). visAtEnd() . to ({el:'ex20'});
m.getI(1). to ({el:'ex20',ox:250}) . rotateMiddle(0,1,0);
m . sequence(3). start();
RUN

Iteration

Element 2

Often one wants to supply expressions to the methods called for each element of a set. In the next example, we want to move the elements into a diagonal position and put them to the coordintates {ry:i+1}. Thereby i is the number of the transition in the set (starting from 0). So the first element is moved to position 1, the second to 2, and the third to 3. In order to do so, we need the iterator method mp. mp has as parameter a javaScript function, which is then called for each element of the set. This functions has parameters (t,i) whereby t is the transition to be processed and i its position in the ordered set.

taccgl.mClass('exclass') . paint(). hide(). visAtEnd() . mp ( function(t,i){t.to ({ry:i+1})} ).start();
RUN
taccgl.mClass('exclass') . paint(). hide(). visAtEnd() . mp ( (t,i)=>{t.to ({ry:i+1})} ).start();
RUN

Mult

The mult methods allows to multiply each transition in the set for a given number of times. So the example below turns the given 3 transitions into 6 transitions, whereby each transition is duplicated.

taccgl.mClass('exclass') . paint(). hide(). visAtEnd() . mult(2). mp ( (t,i)=>{t.to ({el:ex50,rx:i})} ).start();
RUN

Very often mult is used on sets having just a single element.

taccgl.ma('ex60') . paint(). hide(). visAtEnd() . mult(6).
mp ( (t,i)=>{t.to ({rx:i*1.1})} ) .start();
RUN
taccgl.ma('ex60') . paint(). hide(). visAtEnd() . mult(36).
mp ( (t,i)=>{
t.to ({rx:i%6*1.1, ry:Math.floor(i/6)*1.1})
} ) .start();
RUN
m= taccgl.ma('ex60') . paint(). hide(). visAtEnd() . mult(36).
mp ( (t,i)=>{t.to ({rx:i%6*1.1, ry:Math.floor(i/6)*1.1})} ) .start();
m.cont().dur(5).start()
RUN
taccgl.ma('ex60') . hide(). visAtEnd(). paint() .resize(1,100) . mult(900)
. mp ( (t,i)=>{
t .to({ox:i,ry:Math.sin(i/900*Math.PI*2)})
}) .start();
RUN
taccgl.ma('ex60') . hide(). visAtEnd(). color("red").resize(1,1) . mult(900)
. mp ( (t,i)=>{
t.from({ox:i}) .to({ox:i,oy:100*Math.sin(i/900*Math.PI*10)})
}) .start();
RUN

Slicing

Slicing cuts transitions into vertical or horizontal slices. There are the sliceH and sliceV methods for this purpose. They get as parameter the number n of slices to cut. Cutting means each transition in the set is replaced by n transitions, each new transition referring to a slice of the original transition, otherwise performing the same animations.

taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceH(4) . sequence(3) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceV(4) . showBefore() .showAfter () .rotateMiddle(0,0,1) .sequence(3,-0.5) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceH(299) . showBefore() .showAfter().rotateMiddle(0,0,1) .sequence(3,-0.5) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceH(20) . showBefore() .showAfter() .from({x:0,rx:-1,oy:-100}) .sequence(3,-1.5). vEnd(0,0,0). start();
RUN
taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceH(299) . showBefore() .showAfter()
.mp ( (t,i)=>{t.to({ox:200*Math.sin(i/100)})}) . start();
RUN

It is also possible to use both sliceH and sliceV to cut a transition into rectangles:

taccgl.ma('ex80') . paint(). hide(). visAtEnd() .sliceH(4) .sliceV(4) . sequence(3) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visAtEnd(). showafter().sliceH(4) .sliceV(4) .rotateMiddle(1,0,0). rotatePart(Math.PI,Math.PI*2). sequence(3,-0.2) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visFinal(). showafter() .sliceH(4) .sliceV(4)
. rotateMiddle(0,1,0) .rotatePart(Math.PI,Math.PI*2). alpha(0,1)
. mp ( t=>{t.startTime(Math.random()*2)} ) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visFinal(). showbefore() . sliceH(4) .sliceV(4) . alpha(1,0)
. mp ( t=>{
t.startTime(Math.random()*0) .to({ox:600*Math.random()-300,oy:600*Math.random()-300})
} ) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24) . alpha(1,-0.3). dur(2)
. mp ( t=>{
t.startTime(Math.random()*0) .to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}) .posZ(0,-4000) .vEnd(0,0,0)
} ) . start();
RUN
taccgl.ma('ex80') . paint(). hide(). visFinal(). showbefore() . sliceH(100) .sliceV(100) . alpha(1,0). dur(0.5)
. mp ( t=>{
t.startTime(Math.random()*0) .to({ox:1000*Math.random()-500,oy:1000*Math.random()-500}) .vEnd(0,0,0)
} ) . start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.