Source/Fx/Fx.js

   1 /*
   2 Script: Fx.js
   3         Contains the basic animation logic to be extended by all other Fx Classes.
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 var Fx = new Class({
  10
  11         Implements: [Chain, Events, Options],
  12
  13         options: {
  14                 /*
  15                 onStart: $empty,
  16                 onCancel: $empty,
  17                 onComplete: $empty,
  18                 */
  19                 fps: 50,
  20                 unit: false,
  21                 duration: 500,
  22                 link: 'ignore'
  23         },
  24
  25         initialize: function(options){
  26                 this.subject = this.subject || this;
  27                 this.setOptions(options);
  28                 this.options.duration = Fx.Durations[this.options.duration] || this.options.duration.toInt();
  29                 var wait = this.options.wait;
  30                 if (wait === false) this.options.link = 'cancel';
  31         },
  32
  33         getTransition: function(){
  34                 return function(p){
  35                         return -(Math.cos(Math.PI * p) - 1) / 2;
  36                 };
  37         },
  38
  39         step: function(){
  40                 var time = $time();
  41                 if (time < this.time + this.options.duration){
  42                         var delta = this.transition((time - this.time) / this.options.duration);
  43                         this.set(this.compute(this.from, this.to, delta));
  44                 } else {
  45                         this.set(this.compute(this.from, this.to, 1));
  46                         this.complete();
  47                 }
  48         },
  49
  50         set: function(now){
  51                 return now;
  52         },
  53
  54         compute: function(from, to, delta){
  55                 return Fx.compute(from, to, delta);
  56         },
  57
  58         check: function(){
  59                 if (!this.timer) return true;
  60                 switch (this.options.link){
  61                         case 'cancel': this.cancel(); return true;
  62                         case 'chain': this.chain(this.caller.bind(this, arguments)); return false;
  63                 }
  64                 return false;
  65         },
  66
  67         start: function(from, to){
  68                 if (!this.check(from, to)) return this;
  69                 this.from = from;
  70                 this.to = to;
  71                 this.time = 0;
  72                 this.transition = this.getTransition();
  73                 this.startTimer();
  74                 this.onStart();
  75                 return this;
  76         },
  77
  78         complete: function(){
  79                 if (this.stopTimer()) this.onComplete();
  80                 return this;
  81         },
  82
  83         cancel: function(){
  84                 if (this.stopTimer()) this.onCancel();
  85                 return this;
  86         },
  87
  88         onStart: function(){
  89                 this.fireEvent('start', this.subject);
  90         },
  91
  92         onComplete: function(){
  93                 this.fireEvent('complete', this.subject);
  94                 if (!this.callChain()) this.fireEvent('chainComplete', this.subject);
  95         },
  96
  97         onCancel: function(){
  98                 this.fireEvent('cancel', this.subject).clearChain();
  99         },
 100
 101         pause: function(){
 102                 this.stopTimer();
 103                 return this;
 104         },
 105
 106         resume: function(){
 107                 this.startTimer();
 108                 return this;
 109         },
 110
 111         stopTimer: function(){
 112                 if (!this.timer) return false;
 113                 this.time = $time() - this.time;
 114                 this.timer = $clear(this.timer);
 115                 return true;
 116         },
 117
 118         startTimer: function(){
 119                 if (this.timer) return false;
 120                 this.time = $time() - this.time;
 121                 this.timer = this.step.periodical(Math.round(1000 / this.options.fps), this);
 122                 return true;
 123         }
 124
 125 });
 126
 127 Fx.compute = function(from, to, delta){
 128         return (to - from) * delta + from;
 129 };
 130
 131 Fx.Durations = {'short': 250, 'normal': 500, 'long': 1000};