posZ Library Method
Short Description: Move in Eye Direction
Signature: t.posZ (z0,[z1[,ex,ey,ez]])
Group: Light and Shadow
Class: transition Class
Assigns z0 to the z coordinate of the transition in 3D space
and adapts the x and y coordinates so that the final 2D image of the
transition does stay stationary.
In other words, the top left point of the transition is moved away or towards the user
to an extend that its z coordinate finally matches the z0 parameter.
The main application area of posZ arises for HTML elements that
already have the correct position on the screen in 2D, but that conceptually
are not in the z=0 plane. So for example this page has a grey background
that is 200px behind the main image and the main text box. The page creates
a 3D effect by attaching CSS-shadows to the image and the text box that create a
hovering effect.
In order to make taccgl™ display correct shadows, it needs to be defined
that the grey background is in the z=200px plane e.g. using posZ and resizeZ:
taccgl.a(document.body).shadowOnly().color("black").posZ(500).resizeZ().showAfter().start(); taccgl.actor("testimg").to(200,1000,-500).dur(7).start(); taccgl.actor("Middle").showAfter().start(); taccgl.actor("MenuBar").showAfter().start(); | RUN |
First have a look at the following simpler examples:
taccgl.a(document.body).shadowOnly().color("black").showAfter().start(); taccgl.actor("testimg").posZ(-500).start(); taccgl.actor("Middle").posZ(-500).start(); taccgl.actor("MenuBar").posZ(-500).start(); | RUN |
taccgl.a(document.body).shadowOnly().color("black").showAfter().start(); taccgl.actor("testimg").posZ(-400).start(); taccgl.actor("Middle").posZ(-200).start(); taccgl.actor("MenuBar").posZ(-300).start(); | RUN |
As the examples show (in 3D mode) elements become smaller when moved away and larger when moved
towards the user. By using resizeZ this effect can be suppressed, or in other words,
the element is resized just as much as needed to compensate the change of distance.
Then the animated element is in fact stationary and just the shadows change.
taccgl.a(document.body).shadowOnly().color("black").showAfter().start(); taccgl.actor("testimg").posZ(-500).resizeZ().start(); taccgl.actor("Middle").posZ(-500).resizeZ().start(); taccgl.actor("MenuBar").posZ(-500).resizeZ().start(); | RUN |
taccgl.a(document.body).shadowOnly().color("black").showAfter().start(); taccgl.actor("testimg").posZ(-1000).resizeZ().start(); taccgl.actor("Middle").posZ(-1000).resizeZ().start(); taccgl.actor("MenuBar").posZ(-1000).resizeZ().start(); | RUN |
taccgl.a(document.body).shadowOnly().color("black").posZ(1500).resizeZ().showAfter().start(); taccgl.actor("testimg").start(); taccgl.actor("Middle").start(); taccgl.actor("MenuBar").start(); | RUN |
taccgl.actor("Middle").showAfter().start(); taccgl.actor("ex2",null,null,2).posZ(-500).resizeZ().dur(5).start(); | RUN |
The additional parameters ex, ey, ez specify the position of the virtual eye.
If not specified, the current eye point specified with adjustEye is used,
at the point in time when the posZ method is called and later changes
of the eye point position are not taken into account.
If the eye point changes, e.g. during parallax scrolling, it might be required
to explicitly specify the ex, ey, ez parameters.
When using posZ together with position, to, from
or other methods changing the position of the element, then posZ must be used
after these methods.
WebGL™ is a trademark of the Khronos Group Inc.
| 
3D Animation
