HTML5+CSS on Canvas 3D WebGL (TM) Library
 

Basic Positioning and Animations - taccGL Tutorial

Linear Motion

The simplest motion is to move something from one position to another with a constant speed. taccgl™ has the methods from and to to specify the source and destination of a motion animation. The following example moves the testimg (which is the image on top of the text) from coordinates (0,0) to (200,1000). All distances are measured in CSS pixels and the top left corner of an HTML pages has coordinates (0,0).

taccgl.actor("testimg").from(0,0).to(200,1000).start();RUN

In fact taccgl™ is working in 3D, so you can give a third coordinate as z-coordintate to move the animated element towards or away from the user. All ordinary elements live in the z=0 plane and if you leave out the third coordinate 0 is assuemed.

taccgl.actor("testimg").from(0,0,2000).to(200,1000,-3000).duration(5).start();RUN
var to=taccgl.objFile(); to.read('/objtest/taccgldoc.obj',false);
taccgl.actor("testimg",to.scene()).modFit().from(0,0,2000).to(200,1000,-3000).duration(5).start();
RUN

Default values for from and to are the original position of the specified HTML element. So by leaving out from the animated element moves from its HTML position to the position specified using to. By leaving out to the animated element moves from the given from position to its normal HTML position.

taccgl.actor("exh10i").to(0,0).duration(5).start();RUN
taccgl.actor("exh10i").from(0,0).duration(5).start();RUN
taccgl.actor("exh10i").to({ox:200}).duration(5).start();RUN
taccgl.actor("exh10i").to({ox:-100, oy:-100}).duration(5).start();RUN
taccgl.actor("exh10i").to({rx:1}).duration(5).start();RUN
taccgl.actor("exh10i").to({x:0, rx:-1}).duration(5).start();RUN

Linear Motion to another Element

The following example moves something, in this case the img-element with the logo and the id=exh20i, to the position of another HTML element, the box on the left with the id=exh30. The specification {el:"exh30"} refers to the position of the HTML element with id=exh30. More precisely the left upper corner of the element.

Using ex and ey you can specify relative coordinates within the target element. So {el:"exh30",ex:1} refers to the right upper corner of the target element and {el:"exh30", ex:0.5, ey:0.5} to the middle of the target element. In order to properly align the elements we use {el:"exh30", ex:0.5, ey:0.5, rx:-0.5, ry:-0.5}. rx and ry give relative coordinates with respect to the source element as discussed above. So using negative -0.5 moves the source element to the target element so that the middle of the source element is move to the middle of the target element.

taccgl.actor("exh20i").to({el:"exh30"}).duration(5).start();RUN
taccgl.actor("exh20i").to({el:"exh30",ex:1}).duration(5).start();RUN
taccgl.actor("exh20i").to({el:"exh30",ex:0.5,ey:0.5}).duration(5).start();RUN
taccgl.actor("exh20i").to({el:"exh30",ex:0.5,ey:0.5,rx:-0.5,ry:-0.5}).duration(5).start();RUN

This method is often used to position or animate HTML elements from somewhere else on the page.

In the following example the logo with id=exh20i, which is the one from the previous example i.e. from somewhere else, is positioned in the middle of the box above using {el:"exh40", ex:0.5, ey:0.5, rx:-0.5, ry:-0.5}.

taccgl.actor("exh20i").position({el:"exh40",ex:0.5,ey:0.5,rx:-0.5,ry:-0.5}).duration(5).start();RUN
taccgl.actor("exh20i").from({el:"exh40",oy:10}).to({el:"exh40",ex:1,rx:-1,oy:10}).duration(5).start();RUN

The example afterwards shows a motion of this element from the left hand side ({el:"exh40",oy:10}) to the right hand side ({el:"exh40", ex:1, rx:-1, oy:10} of the box. The offset oy is used to move the logo 10px down.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Simple Rotation
Previous Page: Basic 3D Models
Please Add a Comment or Question, click here!