Effects/Fx.Transitions.js

   1 /*
   2 Script: Fx.Transitions.js
   3         Effects transitions, to be used with all the effects.
   4
   5 License:
   6         MIT-style license.
   7
   8 Credits:
   9         Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>, modified & optimized to be used with mootools.
  10 */
  11
  12 /*
  13 Class: Fx.Transitions
  14         A collection of tweening transitions for use with the <Fx.Base> classes.
  15
  16 Example:
  17         >//Elastic.easeOut with default values:
  18         >new Fx.Style('margin', {transition: Fx.Transitions.Elastic.easeOut});
  19         >//Elastic.easeOut with user-defined value for elasticity.
  20         > var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
  21         >new Fx.Style('margin', {transition: myTransition.easeOut});
  22
  23 See also:
  24         http://www.robertpenner.com/easing/
  25 */
  26
  27 Fx.Transition = function(transition, params){
  28         params = params || [];
  29         if ($type(params) != 'array') params = [params];
  30         return $extend(transition, {
  31                 easeIn: function(pos){
  32                         return transition(pos, params);
  33                 },
  34                 easeOut: function(pos){
  35                         return 1 - transition(1 - pos, params);
  36                 },
  37                 easeInOut: function(pos){
  38                         return (pos <= 0.5) ? transition(2 * pos, params) / 2 : (2 - transition(2 * (1 - pos), params)) / 2;
  39                 }
  40         });
  41 };
  42
  43 Fx.Transitions = new Abstract({
  44
  45         /*
  46         Property: linear
  47                 displays a linear transition.
  48
  49         Graph:
  50                 (see Linear.png)
  51         */
  52
  53         linear: function(p){
  54                 return p;
  55         }
  56
  57 });
  58
  59 Fx.Transitions.extend = function(transitions){
  60         for (var transition in transitions){
  61                 Fx.Transitions[transition] = new Fx.Transition(transitions[transition]);
  62                 Fx.Transitions.compat(transition);
  63         };
  64 };
  65
  66 Fx.Transitions.compat = function(transition){
  67         ['In', 'Out', 'InOut'].each(function(easeType){
  68                 Fx.Transitions[transition.toLowerCase() + easeType] = Fx.Transitions[transition]['ease' + easeType];
  69         });
  70 };
  71
  72 Fx.Transitions.extend({
  73
  74         /*
  75         Property: Quad
  76                 displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut
  77
  78         Graph:
  79                 (see Quad.png)
  80         */
  81
  82         //auto generated
  83
  84         /*
  85         Property: Cubic
  86                 displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut
  87
  88         Graph:
  89                 (see Cubic.png)
  90         */
  91
  92         //auto generated
  93
  94         /*
  95         Property: Quart
  96                 displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut
  97
  98         Graph:
  99                 (see Quart.png)
 100         */
 101
 102         //auto generated
 103
 104         /*
 105         Property: Quint
 106                 displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
 107
 108         Graph:
 109                 (see Quint.png)
 110         */
 111
 112         //auto generated
 113
 114         /*
 115         Property: Pow
 116                 Used to generate Quad, Cubic, Quart and Quint.
 117                 By default is p^6.
 118
 119         Graph:
 120                 (see Pow.png)
 121         */
 122
 123         Pow: function(p, x){
 124                 return Math.pow(p, x[0] || 6);
 125         },
 126
 127         /*
 128         Property: Expo
 129                 displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut
 130
 131         Graph:
 132                 (see Expo.png)
 133         */
 134
 135         Expo: function(p){
 136                 return Math.pow(2, 8 * (p - 1));
 137         },
 138
 139         /*
 140         Property: Circ
 141                 displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut
 142
 143         Graph:
 144                 (see Circ.png)
 145         */
 146
 147         Circ: function(p){
 148                 return 1 - Math.sin(Math.acos(p));
 149         },
 150
 151
 152         /*
 153         Property: Sine
 154                 displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut
 155
 156         Graph:
 157                 (see Sine.png)
 158         */
 159
 160         Sine: function(p){
 161                 return 1 - Math.sin((1 - p) * Math.PI / 2);
 162         },
 163
 164         /*
 165         Property: Back
 166                 makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut
 167
 168         Graph:
 169                 (see Back.png)
 170         */
 171
 172         Back: function(p, x){
 173                 x = x[0] || 1.618;
 174                 return Math.pow(p, 2) * ((x + 1) * p - x);
 175         },
 176
 177         /*
 178         Property: Bounce
 179                 makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut
 180
 181         Graph:
 182                 (see Bounce.png)
 183         */
 184
 185         Bounce: function(p){
 186                 var value;
 187                 for (var a = 0, b = 1; 1; a += b, b /= 2){
 188                         if (p >= (7 - 4 * a) / 11){
 189                                 value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
 190                                 break;
 191                         }
 192                 }
 193                 return value;
 194         },
 195
 196         /*
 197         Property: Elastic
 198                 Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
 199
 200         Graph:
 201                 (see Elastic.png)
 202         */
 203
 204         Elastic: function(p, x){
 205                 return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
 206         }
 207
 208 });
 209
 210 ['Quad', 'Cubic', 'Quart', 'Quint'].each(function(transition, i){
 211         Fx.Transitions[transition] = new Fx.Transition(function(p){
 212                 return Math.pow(p, [i + 2]);
 213         });
 214         Fx.Transitions.compat(transition);
 215 });