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.
|
3D Animation
