Canvas 3D Animation Library
 

hV Library Method

Short Description: Set Height Vector of Object

Signature: t.hV (x,y,z) or (p)
Group: Shape
Class: transition Class
 

Defines the height vector of the animated object. Default is (0,h,0) whereby h is the height of the associated HTML element. The height vector gives the displacement from the top left corner to the bottom left corner. Alternatively (p) can be specified as a Position Specification that will be resolved into coordinates. p then specifies to bottom left corner and the height vector is evaluated by subtracting the current top left point from p.

Sample HTML element with id="s10"

By enlarging or reducing the vector, the height of the (animated image of the) element can be changed.

By turning the height and the width vector the object can be rotated.

The examples below reduce the length of the height vector and so reduce the height of the transition.

taccgl.actor('s10') . hV (0, 100, 0) . duration(5). start();
RUN
taccgl.actor('s10') . hV ({ry:0.5}) . duration(5). start();
RUN
var t= taccgl.actor('s10'); t. hV (0,t.h/2,0) . duration(5). start();
RUN

The examples below add use a non-zero x or z value to the vector and so produce a parallelogram.

taccgl.actor('s10') . hV (100, 200, 0) . duration(5). start();
RUN
taccgl.actor('s10') . hV ({rx:0.5,ry:1}) . duration(5). start();
RUN
var t= taccgl.actor('s10'); t. hV (t.h/2,t.h,0) . duration(5). start();
RUN
var t= taccgl.actor('s10'); t. hV (0,t.h,-t.h) . duration(5). start();
RUN
var t= taccgl.actor('s10'); t. hV (0,0,-t.h) . duration(5). start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.wV - Set Width Vector of Object
Previous Page: transition.clipRTo - Animate Relative Clipping - Set end point