Basic JavaScript Embedding - taccGL™ Library Tutorial
This tutorial page is intended for HTML/CSS Developers who just do a little bit of javaScript.
For javaScript software developers there is no specific tutorial page yet and we
refer to the Manual for the moment.
Using Functions
Definitions of animations in taccgl™ are just JavaScript
programs. However, just a small subset of javascript
features is needed to create nice animations, e.g. most of
the examples in the tutorial so far just contain method
calls with constant parameters. We, however, recommend to
put animations into javaScript function definitions (as shown
in the second example of the First Example page.
In the First Example we entered the animation directly into an a-tag like
<a href="javascript: taccgl.actor('myel').rotateMiddle(0,1,0).start(); taccgl.start()">Run</a> | |
This works great, as long as the green code is small and does not contain double quotes ("").
An alternative form is
<a href="javascript: myanimation(); ">Run</a> | |
<script > function myanimation() { taccgl.actor('myel').rotateMiddle(0,1,0).start(); taccgl.start(); } </script> | |
This is much better for longer definitions, since you can use multiple lines, indentation and double quotes.
Expressions
almost empty element with id="ex10"
Since taccgl™ animations are just JavaScript programs, you can
also use expressions as parameters, which are evaluated by
javaScript. In the example below we want to position the image in
the upper left half of the box. Since the css defined the box is
200px wide and 100px high, we could have
written resize(100,50). However, we
used resize(200/2,100/2), which means the same but more
clearly documents the calculation.
taccgl.actor("testimg").position({el:"ex10"}).resize(200/2,100/2).dur(3).start() | RUN |
The next example defines a transition named t but does not
yet use start (1st line). Then it uses
attributes t.x
and t.y
of t. These give the position of the underlying HTML
element (testimg in this case) in pixels from the documents top left.
var t=taccgl.actor("ex10"); t.to (t.x, t.y+500, 0).start(); | RUN |
t=taccgl.actor("ex10").to({oy:500}).start(); | RUN |
The parameters for to are expressions t.x
and t.y+500. This means the destination x-coordinate is
identical to the x coordinate of the HTML element itself. So
the object moves just top-down, leaving x-coordinate
constant. For y it uses t.y+500. This means the
object moves 500 pixels down. This simple example could be done
by specifying to-position to({oy:500}, however, javaScript expressions
can be much more complex.
Note: you always need to finish the JavaScript assignment t=
before you can access the new transition via the variable t and its attributes.
Event Handlers
green element with id="ex30blue" and onclick event handler
green element with id="ex30green" and onclick event handler
onclick
You can also start animations using JavaScript event handlers.
The green example demonstrates onclick, click on the green surface to start the animation.
onmouseover
The blue example uses onmouseover and onmouseout. Hover with
the mouse over the blue surface.
Here the animation is not running for a fixed duration, but for the time the mouse is hovering.
So the animation uses perm to run potentially for ever and calls stop
to stop the animation onmouseout. In fact the animation has two transitions,
a first one that moves the element and a second element made with cont
to show the element in its destination.
It is important not to use actor in this case, but a in
combination with opacityAtBegin and opacityAtEnd.
actor hides the element while running the animation, which
would trigger the onmouseout immediately (since the browser thinks the element is gone).
Instead the combination of opacityAtBegin and opacityAtEnd
just makes the element transparent while the animation is running.
<div onclick="myanimation();">...\/div> | |
taccgl.actor("ex30green").to({ox:-1000,oy:-1000,z:3000}).dur(3).start(); | RUN |
<div onmouseover="myanimation();">Button</div> | |
taccgl.a("ex30blue").paint() .opacityAtBegin(0) .opacityAtEnd(1) .to({ox:-100,oy:-100,z:300}) . dur(1).start().cont().perm().start(); | RUN |
taccgl.stop() | RUN |
<body onload="myanimation();"> ... </body> | |
onload
Also the onload event handler is very useful. It plays an
animation immediatly after the page and all required images and other
documents are loaded.
Currently we very much recommend to use onload instead of
other methods for starting an animation after loading a page. There
are ways to starts scripts earlier before everything has been
loaded. This can be quite desirable, if your page loads some stuff
slowly, e.g. big images. However, note that animations might need the
images and will not work while the required images are still loading,
so it can be very error prone to start animations early.
WebGL™ is a trademark of the Khronos Group Inc.
| 
3D Animation
