Subversion Repositories wimsdev

Rev

Rev 20 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /*
  2.         DynAPI Distribution
  3.         Fader Animation Extension
  4.  
  5.         The DynAPI Distribution is distributed under the terms of the GNU LGPL license.
  6.  
  7.         requires: DynLayer, Fader
  8. */
  9.  
  10. function TextAnimation(x,y,text,animBy,dlyr){
  11.         this.EventObject = EventObject;
  12.         this.EventObject();
  13.  
  14.         this._chars=[];
  15.         this._lyrPool=[];
  16.         this._text=text;
  17.         this._animBy=null;
  18.         this._inUse=0;
  19.         this._dlyr=(dlyr||dynapi.document);
  20.  
  21.         this.setLocation(x,y);
  22.         this.animateBy(animBy);
  23.         this.visible=true;
  24.  
  25.         var me=this; // use delegate "me"
  26.         var fn=function(){
  27.                 me._created=true;
  28.                 me._split();
  29.         }
  30.         if(this._dlyr!=dynapi.document) this._dlyr.onCreate(fn);
  31.         else {
  32.                 var e={onload:fn};
  33.                 this._dlyr.addEventListener(e);
  34.         }
  35. };
  36. var p = dynapi.setPrototype('TextAnimation','EventObject');
  37. p._clear = function(){
  38.         var l;
  39.         var p=this._lyrPool;
  40.         var c=this._chars;
  41.         for(var i=0;i<c.length;i++){
  42.                 l=c[i];
  43.                 l.setVisible(false);
  44.                 l.removeAllEventListeners();
  45.                 p[p.length]=l;
  46.         }
  47.         this._chars.length=0;
  48. };
  49. p._createCharLayer=function(t){
  50.         var l;
  51.         var p=this._lyrPool;
  52.         if (!p.length) l = this._dlyr.addChild(new DynLayer());
  53.         else {
  54.                 l = p[p.length-1];
  55.                 p.length--;
  56.         };
  57.         l._ta=this;
  58.         l.setHTML(t);
  59.         if(l._created) {
  60.                 // resize char layer
  61.                 l.setSize(1,1); // why mozilla,gecko,ie??
  62.                 l.setSize(l.getContentWidth(),l.getContentHeight());
  63.         }
  64.         l.setVisible(this.visible);
  65.         if(dynapi.ua.ie) l.css.filter='alpha(opacity=100)';
  66.         else l.css.MozOpacity = 1;
  67.         return l;
  68. };
  69. p._exec = function(cmd,i){
  70.         window.setTimeout(cmd,(this._ms*i)+5);
  71. };
  72. p._resize=function(align){
  73.         var x=this.x;
  74.         var y=this.y;
  75.         var i,l,c=this._chars;
  76.         for(i=0;i<c.length;i++){
  77.                 l=c[i]; // resize char layer
  78.                 if(l._created) {
  79.                         l.setSize(1,1); // why mozilla,gecko,ie??
  80.                         l.setSize(l.getContentWidth(),l.getContentHeight());
  81.                         if(align) {
  82.                                 l.setLocation(x,y);
  83.                                 x+=l.w;
  84.                         }
  85.                 }
  86.         }
  87. };
  88. p._split = function(){
  89.         var i,ar,lyr
  90.         var t=this._text;
  91.         var c=this._chars;
  92.         var x=this.x;
  93.         var y=this.y;
  94.         if(!t||!this._created) return;
  95.         this._clear();
  96.         if(this._animBy=='all') {       // By all
  97.                 t='<nobr>'+t+'</nobr>';
  98.                 lyr=c[0]=this._createCharLayer(t);
  99.                 lyr.setLocation(x,y);
  100.         }else {                                         // By word or letter
  101.                 if (this._animBy=='word') {
  102.                         t=t.replace(/\s/g,' &nbsp; ')
  103.                         ar=t.split(' ');
  104.                 }
  105.                 else {
  106.                         ar=t.split('');
  107.                 }
  108.                 for(i=0;i<ar.length;i++){
  109.                         if (ar[i]==' ') ar[i]='&nbsp;';
  110.                         lyr=c[i]=this._createCharLayer(ar[i]);
  111.                         lyr.setLocation(x,y);
  112.                         x+=lyr.w;
  113.                 }
  114.         }
  115.         if(lyr) lyr.addEventListener(TextAnimation._tiggerEvents);
  116. };
  117. p.animateBy=function(s,delay){  // all, letter, word
  118.         this._animBy=s||this._animBy||'letter';
  119.         this.setDelay(delay);
  120.         this._split();
  121. };
  122. p.getCharLayer = function(i){
  123.         if (i>=0 && i<this.chars.length) return this.chars[i];
  124. };
  125. p.setDelay = function(delay){
  126.         this._ms=delay||this._ms||50;
  127. };
  128. p.setFont=function(size,family){
  129.  
  130. };
  131. p.setLocation=function(x,y){
  132.         x=x||0; y=y||0;
  133.         var byX=x-this.x;
  134.         var byY=y-this.y;
  135.         var c=this._chars;
  136.         this.x=x; this.y=y;
  137.         for (var i=0;i<c.length;i++){
  138.                 l=c[i]; l.setLocation(l.x+byX,l.y+byY);
  139.         }
  140. };
  141. p.setText=function(t,animBy,delay){
  142.         this._text=t||'';
  143.         this.setDelay(delay);
  144.         this.animateBy(animBy);
  145. };
  146. p.setVisible = function(b){
  147.         var c=this._chars;
  148.         this.visible=b;
  149.         for (var i=0;i<c.length;i++) c[i].setVisible(b);
  150. };
  151.  
  152. // Trigger Events
  153. var fn = function(e){
  154.         var o=e.getSource();
  155.         o._ta._inUse--;
  156.         if(!o._ta._inUse) window.setTimeout(o._ta+'.invokeEvent("animfinish")',55);
  157. };
  158. TextAnimation._tiggerEvents = {
  159.         onpathfinish:fn,
  160.         onfadein:fn,
  161.         onfadeout:fn
  162. };
  163.  
  164.  
  165. // Effects
  166. // ------------------------
  167. // Apear
  168. p.appear = function(){
  169.         var i,ext,c=this._chars;
  170.         this._exec(this+'.invokeEvent("animstart")',1);
  171.         for (i=0;i<c.length;i++) {
  172.                 if(!this._inUse) c[i].setVisible(false);
  173.                 if(i==(c.length-1)) ext=c[i]+'.invokeEvent("pathfinish")';
  174.                 this._exec(c[i]+'.setVisible(true);;'+ext,i);
  175.         }
  176.         this._inUse++;
  177. };
  178. // Bounce
  179. p.bounce = function(h,modifier){
  180.         var i,l,c;
  181.         c=this._chars;
  182.         h=(h||100);
  183.         modifier=(modifier<-1)? -1:(modifier||0);
  184.         this._exec(this+'.invokeEvent("animstart")',1);
  185.         // setup bounce chars
  186.         for (i=0;i<c.length; i++) {
  187.                 l=c[i];
  188.                 l._bonctmr=i<<modifier;
  189.                 l._boncyv=0;
  190.                 l._boncmaxv=8;
  191.                 l._boncy=-l.h;
  192.                 l.setLocation(null,this.y-h);
  193.                 if(!this._inUse) l.setVisible(true);
  194.                 this._exec(this+'._startBounce('+i+','+h+');',i);
  195.         }
  196.         this._inUse++;
  197. };
  198. p._startBounce = function(i,h){
  199.         var l,y,c,ext;
  200.         var c=this._chars;
  201.         l=c[i];
  202.         if (l._bonctmr>0) l._bonctmr--;
  203.         else {
  204.                 yv=l._boncyv;
  205.                 //y=l._boncy;
  206.                 l._boncy+=yv;
  207.                 if (yv<l._boncmaxv) l._boncyv++;
  208.                 if (l._boncy>h-l.h) {
  209.                         l._boncy=h-l.h;
  210.                         l._boncyv=-l._boncyv;
  211.                         if (l._boncmaxv>0) l._boncmaxv--;
  212.                 }
  213.                 l.setLocation(null,(this.y-h)+l._boncy+l.h);
  214.         }
  215.  
  216.         if(l._boncmaxv!=0){
  217.                 this._exec(this+'._startBounce('+i+','+h+');'+ext,1);
  218.         }
  219.         else if(i==(c.length-1)) {
  220.                 this._exec(l+'.invokeEvent("pathfinish")',1);
  221.         }
  222. };
  223. // Fade In
  224. p.fadeIn = function(inc,ms){
  225.         var i,c=this._chars;
  226.         this._exec(this+'.invokeEvent("animstart")',1);
  227.         for (i=0;i<c.length;i++) this._exec(c[i]+'.fadeIn('+inc+','+ms+');',i);
  228.         this._inUse++;
  229. };
  230. // Fade Out
  231. p.fadeOut = function(inc,ms){
  232.         var i,c=this._chars;
  233.         this._exec(this+'.invokeEvent("animstart")',1);
  234.         for (i=0;i<c.length;i++) this._exec(c[i]+'.fadeOut('+inc+','+ms+');',i);
  235.         this._inUse++;
  236. };
  237. // Fly From
  238. p.flyFrom = function(x,y,inc,ms){
  239.         var i,l,c=this._chars;
  240.         this._exec(this+'.invokeEvent("animstart")',1);
  241.         for (i=0;i<c.length;i++) {
  242.                 l=c[i];
  243.                 this._exec(
  244.                         ((!this._inUse)? l+'.setVisible(true);':'')
  245.                         +l+'.slideTo('+l.x+','+l.y+','+inc+','+ms+');'
  246.                 ,i);
  247.                 l.setLocation(x,y);
  248.         }
  249.         this._inUse++;
  250. };
  251. p.zoomText = function(from,to,inc,ms){
  252.         var i,l,c;
  253.         c=this._chars;
  254.         this._exec(this+'.invokeEvent("animstart")',1);
  255.         // setup chars
  256.         for (i=0;i<c.length; i++) {
  257.                 l=c[i];
  258.                 l._zTo = to||20;
  259.                 l._zFrom = from||10;
  260.                 l._zMs=(ms)? ms:50;
  261.                 l._zInc=(inc)? Math.abs(inc):5;
  262.                 l.css.fontSize=l._zFrom+'px';
  263.                 if (l._zFrom>l._zTo) l._zInc*=-1;
  264.                 if(!this._inUse) l.setVisible(true);
  265.                 this._exec(this+'._startZoom('+i+');',i);
  266.         }
  267.         this._inUse++;
  268. };
  269. p._startZoom= function(i){
  270.         var l,y,c,ext;
  271.         var l=this._chars[i];
  272.         var inc = l._zInc;
  273.         var from = l._zFrom;
  274.         var to = l._zTo;
  275.         from+=inc;
  276.         if ((inc<0 && from<=to)|| (inc>0 && from>=to)) from=to;
  277.         l._zFrom=from;
  278.         l.css.fontSize=from+'px';
  279.         l.setSize(0,0); // ??
  280.         l.setSize(l.getContentWidth(),l.getContentHeight());
  281.         if(i==0) l.setLocation(null,this.y-(l.h/2));
  282.         else l.setLocation(this._chars[i-1].x+this._chars[i-1].w,this.y-(l.h/2));
  283.         if(from!=to) l._zTmr=window.setTimeout(this+'._startZoom('+i+')',l._zMs);
  284.         else if(i==(this._chars.length-1)) {
  285.                 this._exec(l+'.invokeEvent("pathfinish")',1);
  286.         }
  287. };
  288.  
  289. // to-do:
  290. p.wave = function(){};
  291. p.nudge = function(){};
  292. p.quake = function(){};
  293.