Docs/Fx/Fx.Transitions.md

   1 Class: Fx {#Fx}
   2 ===============
   3
   4 Fx.Transitions overrides the base [Fx][] constructor, and adds the possibility to use the transition option as string.
   5
   6 ### Transition option:
   7
   8 The equation to use for the effect. See [Fx.Transitions][]. It accepts both a function (ex: Fx.Transitions.Sine.easeIn) or a string ('sine:in', 'bounce:out' or 'quad:in:out') that will map to Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut
   9
  10
  11 Object: Fx.Transitions {#Fx-Transitions}
  12 ======================================
  13
  14 A collection of tweening transitions for use with the [Fx][] classes.
  15
  16 ### Examples:
  17
  18         $('myElement').set('tween', {transition: Fx.Transitions.Elastic.easeOut});
  19         $('myElement').tween('margin-top', 100);
  20
  21 ### See also:
  22
  23 - [Robert Penner's Easing Equations](http://www.robertpenner.com/easing/)
  24
  25 ### Note:
  26
  27 Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash
  28
  29
  30
  31 Fx.Transitions Method: linear {#Fx-Transitions:linear}
  32 ------------------------------------------------------
  33
  34 Displays a linear transition.
  35
  36 Fx.Transitions Method: quad {#Fx-Transitions:quad}
  37 --------------------------------------------------
  38
  39 Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.
  40
  41 Fx.Transitions Method: cubic {#Fx-Transitions:cubic}
  42 ----------------------------------------------------
  43
  44 Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
  45
  46
  47 Fx.Transitions Method: quart {#Fx-Transitions:quart}
  48 ----------------------------------------------------
  49
  50 Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.
  51
  52 Fx.Transitions Method: quint {#Fx-Transitions:quint}
  53 ----------------------------------------------------
  54
  55 Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
  56
  57 Fx.Transitions Method: pow {#Fx-Transitions:pow}
  58 ------------------------------------------------
  59
  60 Used to generate Quad, Cubic, Quart and Quint.
  61
  62 ### Note:
  63
  64 - The default is `p^6`.
  65
  66 Fx.Transitions Method: expo {#Fx-Transitions:expo}
  67 --------------------------------------------------
  68
  69 Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.
  70
  71
  72
  73 Fx.Transitions Method: circ {#Fx-Transitions:circ}
  74 --------------------------------------------------
  75
  76 Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.
  77
  78
  79
  80 Fx.Transitions Method: sine {#Fx-Transitions:sine}
  81 --------------------------------------------------
  82
  83 Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.
  84
  85
  86
  87 Fx.Transitions Method: back {#Fx-Transitions:back}
  88 --------------------------------------------------
  89
  90 Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.
  91
  92
  93
  94 Fx.Transitions Method: bounce {#Fx-Transitions:bounce}
  95 ------------------------------------------------------
  96
  97 Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
  98
  99
 100
 101 Fx.Transitions Method: elastic {#Fx-Transitions:elastic}
 102 --------------------------------------------------------
 103
 104 Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
 105
 106
 107
 108 Class: Fx.Transition {#Fx-Transition}
 109 =====================================
 110
 111 This class is only useful for math geniuses who want to write their own easing equations.
 112 Returns an [Fx][] transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.
 113
 114 ### Syntax:
 115
 116         var myTransition = new Fx.Transition(transition[, params]);
 117
 118 ### Arguments:
 119
 120 1. transition - (*function*) Can be a [Fx.Transitions][] function or a user-provided function which will be extended with easing functions.
 121 2. params     - (*mixed*, optional) Single value or an array for multiple values to pass as the second parameter for the transition function. A single value will be transformed to an array.
 122
 123 ### Returns:
 124
 125 * (*function*) A function with easing functions.
 126
 127 ### Examples:
 128
 129         // Your own function. Here overshoot is bigger (now 1.3) when base -> 1 and base != 1.
 130         var myTransition = new Fx.Transition(function(pos, x){
 131                 return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
 132         }, 1.3);
 133
 134         var myFx = new Fx.Tween('myElement', {
 135                 property: 'height',
 136                 transition: myTransition.easeOut
 137         }).start(30, 100);
 138
 139 ### See Also:
 140
 141 - [Fx.Transitions][]
 142
 143
 144 [Fx]: /core/Fx/Fx
 145 [Fx.Transitions]: #Fx-Transitions
 146 [Element.effect]: /core/Element/#Element:effect
 147 [Linear]: ../Docs/assets/images/Linear.png
 148 [Quad]: ../Docs/assets/images/Quad.png
 149 [Cubic]: ../Docs/assets/images/Cubic.png
 150 [Quart]: ../Docs/assets/images/Quart.png
 151 [Quint]: ../Docs/assets/images/Quint.png
 152 [Expo]: ../Docs/assets/images/Expo.png
 153 [Circ]: ../Docs/assets/images/Circ.png
 154 [Sine]: ../Docs/assets/images/Sine.png
 155 [Back]: ../Docs/assets/images/Back.png
 156 [Bounce]: ../Docs/assets/images/Bounce.png
 157 [Elastic]: ../Docs/assets/images/Elastic.png