HTML5 CSS on Canvas Animation Library
 

Multiple Triangle Animations - taccGL™ Tutorial

Sawtooth Animations

The following animations can be used to rip-apart an HTML element leaving a saw like edge. It is possible to use right-angled triangles as in the first example or equilateral triangles. The latter, however, require one side to include one more triangle, which is added using ml.add in the fourth example.

taccgl.ma('ex80',taccgl.triangle) . paint(). hide() .sliceH(4) .clipR(1,1,-1,0,0,-1). from ({ox:200}). dur(3)
.union ( taccgl.ma('ex80',taccgl.triangle) . visAtEnd() .sliceH(4) . from ({ox:-200}) .dur(3)) . start();
RUN
taccgl.ma('ex80',taccgl.triangle) . paint(). hide() .sliceH(10) .clipR(1,1,-1,0,0,-1). from ({ox:200}). dur(3)
.union ( taccgl.ma('ex80',taccgl.triangle) . visAtEnd() .sliceH(10) . from ({ox:-200}) .dur(3))
. start();
RUN
taccgl.ma('ex80',taccgl.triangle) . paint(). hide() .sliceH(4) .clipR(1,0,-1,0.5,0,1). from ({ox:200}). dur(3)
.union ( taccgl.ma('ex80',taccgl.triangle) . visAtEnd() .sliceH(4) . clipR(0,0.5,1,0.5,0,1). from ({ox:-200}) .dur(3))
. start();
RUN
var mr = taccgl.ma('ex80',taccgl.triangle) . paint(). hide() .sliceH(4) .clipR(1,0,-1,0.5,0,1). from ({ox:200});
var ml = taccgl.ma('ex80',taccgl.triangle) . visAtEnd() .sliceH(4) . clipR(0,0.5,1,0.5,0,1);
ml.add ( ml.ar[0].clone(). clipR(0,-0.5,1,-0.5,0,0.5) );
ml.from ({ox:-200});
ml.union(mr). vEnd (0,0,0). dur(3) . start();
RUN

Triangle Rotations

The following examples demonstrate using both sliceH and sliceV on triangles: The original element is split into rectangles and of each rectangle the upper left triangle is shown. Idea of the following samples is to clone the resulting set and used clipR to select the right bottom triangle. Then the sets are unified and processed as a single set.

var m = taccgl.ma('ex90',taccgl.triangle) . paint(). hide(). visFinal() .sliceH(4) .sliceV(4);
m.union (m.clone() .clipR(1,1,-1,0,0,-1));
m. sequence(3) . start();
RUN
var m = taccgl.ma('ex90',taccgl.triangle) . paint(). hide(). visFinal() .sliceH(4) .sliceV(4). to({ox:200,oy:-200});
var n=m.clone().clipR(1,1,-1,0,0,-1).to({ox:-200,oy:200});
m.union (n);
m. dur(5). start();
RUN
var m = taccgl.ma('ex90',taccgl.triangle) . paint(). hide(). visFinal() .sliceH(4) .sliceV(4);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
var b= taccgl.bb('ex90');
m.to (b.x,b.y,0). rotate(b.x+b.w/2,b.y+b.h/2,0, 0,0,1);
m.mp( (t,i) => {t.rotatePart(0,Math.PI*(i%16)/8)} );
m. dur(1). start();
l=m.cont(). rotate(b.x+b.w/2,b.y+b.h/2,0, 0,0,1) . dur(2). start();
RUN
var m = taccgl.ma('ex90',taccgl.triangle) . paint(). hide(). visFinal() .sliceH(16) .sliceV(16);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
var b= taccgl.bb('ex90');
m.to (b.x,b.y,0). rotate(b.x+b.w/2,b.y+b.h/2,0, 0,0,1);
m.mp( (t,i) => {t.rotatePart(0,Math.PI*(i%256)/128)} );
m. dur(1). start();
l=m.cont(). rotate(b.x+b.w/2,b.y+b.h/2,0, 0,0,1) . dur(2). start();
RUN

Splinter Animations

taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(4) .sliceV(4) . alpha(1,0).
mp ( t=>{t . to({ox:600*Math.random()-300,oy:600*Math.random()-300}) } ) . start();
RUN
taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24) . alpha(1,-0.3). dur(2).
mp ( t=>{t . to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).vEnd(0,0,0) } ) .start();
RUN
taccgl.ma('ex100',taccgl.triangle2) . paint(). hide(). visFinal(). showbefore() . sliceH(100) .sliceV(100) . alpha(1,0). dur(0.5) .
mp ( t=>{t . to({ox:1000*Math.random()-500,oy:1000*Math.random()-500}).vEnd(0,0,0) } ) . start();
RUN

There are many versions of splinter animations presented. The above three examples work with the top left triangles only while the other examples use clone and union as described in the previous section.

Basic idea is to use an accelerated motion animation with a random target position. In order to use random on each individual piece, mp must be used.

Some of the examples below use a random startTime which gives the animation a kind of delayed start. Others add a rotation effect.

var m=taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2)
. mp ( t=>{t.to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}) . posZ(0,4000) . vEnd(0,0,0)
} ) . start();
RUN
var m=taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t.startTime(Math.random()*1) .to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).vEnd(0,0,0)
} ). start();
RUN
var m=taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t.startTime(Math.random()*1) .to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).
rotateMiddle(0,0,1) .vEnd(0,0,0)
} ) . start();
RUN
var m=taccgl.ma('ex100',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(12) .sliceV(12);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t.startTime(Math.random()*1) .to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).
rotateMiddle(0,0,1) .vEnd(0,0,0)
} ) . start();
RUN

Above examples use vEnd(0,0,0) while the 2 examples below use vBegin with quite high random values to create more like an explosion effect. In all, but especially these a negative value second parameter for alpha is used to fade out a not so nice looking ending of the animation.

var m=taccgl.ma('ex110',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(4) .sliceV(4);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t.startTime(Math.random()*1) .to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).
rotateMiddle(0,0,1) .vEnd(0,0,0)
}) . start();
RUN
var m=taccgl.ma('ex110',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t . to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).
rotateMiddle(0,0,1) .vBegin(2000*Math.random()-1000,2000*Math.random()-3000,2000)
} ) . start();
RUN
var m=taccgl.ma('ex110',taccgl.triangle) . paint(). hide(). visFinal(). showbefore() . sliceH(24) .sliceV(24);
var n=m.clone().clipR(1,1,-1,0,0,-1);
m.union (n);
m . alpha(1,-0.3). dur(2).
mp ( t=>{t . to({ox:2000*Math.random()-1000,oy:2000*Math.random()-1000}).posZ(0,4000).
rotateMiddle(0,0,1) .vBegin(2000*Math.random()-1000,2000*Math.random()-4000,4000)
} ) . start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.