[Sommaire] [Imprimer]

   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  
 290  // to-do:
 291  p.wave = function(){};
 292  p.nudge = function(){};
 293  p.quake = function(){};