HTML5 CSS on Canvas Animation Library
 

mapFrom Library Method

Short Description: Animate mapped rectangular portion of texture canvas

Signature: t.mapFrom (s,t,w,h) or (l,r)
Group: Texture
Class: transition Class
 
almost empty element with id="ex10"

This method is used to animate a rectangular texture. The parameters have the same meaning as width map. mapTo defines the end of the animation, while mapFrom defines the begin of the animation.

Examples

var a=taccgl.actor("testimg"); taccgl.a("ex10").mapFrom(a.x,a.y,a.w,a.h).mapTo(a.x,a.y,a.w,a.h/2).start();
RUN
var a=taccgl.actor("testimg"); taccgl.a("ex10").mapFrom(a.x,a.y,a.w,a.h).mapTo(a.x,a.y+10,a.w,a.h-20).start();
RUN
var a=taccgl.actor("testimg"), e=taccgl.a("ex10"); e.mapFrom(a.x,a.y,a.w,a.h).mapTo(a.x,a.y,e.w,e.h).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").mapElement("testimg").mapTo({el:"testimg"},{el:"testimg",ex:0.5,ey:1}).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").mapFrom({el:"testimg",ex:1},{el:"testimg",ey:1}).mapTo({el:"testimg",ex:1},{el:"testimg",ey:0.5}).start();
RUN
taccgl.a("ex10").mapActor("testimg").mapTo({el:"testimg",ey:1},{el:"testimg",ex:1}).start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.mapT - Map portion of texture canvas
Previous Page: transition.mapTo - Animate mapped rectangular portion of texture canvas