HTML5 Canvas 3D Animation Library
 

Flexibles - taccGL™ Tutorial

Using taccglFlexiBorder Class you can draw HTML elements in a flexible way. The actor method has an optional second parameter to specify shape to be drawn. taccgl.flexiBorder draws an element with a flexible border. Then you can morph the element from one shape to another: Using Rect (default), Circle, Wave, ZWave, or Flip you can select an initial shape and using Rect1 (default), Circle1, Wave1, ZWave1, or Flip1 a target shape.

The examples below morph the image above from a rectangle into a Circle.

var a=taccgl.actor("testimg",taccgl.flexiBorder) .Circle1().start();
RUN
var a=taccgl.actor("testimg",taccgl.flexiBorder) .Circle1(); a.resize(null,null,a.h,a.h) .start();
RUN
var a=taccgl.actor("testimg",taccgl.flexiBorder) .Circle1(); a.resize(null,null,a.h,a.h) .flyOut(a.x+(a.w-a.h)/2,a.y,0) .start();
RUN

The following examples morph from one Wave into another:

var a=taccgl.actor("testimg",taccgl.flexiBorder) .Wave(200,200,0,10) .Wave1(0,200,0,10).start();
RUN
var a=taccgl.actor("testimg",taccgl.flexiBorder) .ZWave(1,1,0,10) .ZWave1(0,1,0,10).start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.