Easing
Thanks to George McGinley Smith
Metro 4 includes a several easing function to create animation effect.
What this
Easing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration.
Easing can be applied when using the jQuery .animate() method. The effects helper methods like .show('fast'), .toggle('fast'), fadeIn('fast'), and so on all just use the default easing, "swing."
Default easing
The default easing function is swing
. To change default easing you can write:
$.easing.def = "easeOutQuart";
Example of usage
$('#myDiv').animate(
{ opacity: 0 }, // what we are animating
'fast', // how fast we are animating
'easeInExpo', // the type of easing
function() { // the callback
alert('done');
}
);
Metro 4 easing funcs
Func name | Demo |
swing |
|
easeInQuad |
|
easeOutQuad |
|
easeInOutQuad |
|
easeInCubic |
|
easeOutCubic |
|
easeInOutCubic |
|
easeInQuart |
|
easeOutQuart |
|
easeInOutQuart |
|
easeInQuint |
|
easeOutQuint |
|
easeInOutQuint |
|
easeInSine |
|
easeOutSine |
|
easeInOutSine |
|
easeInExpo |
|
easeOutExpo |
|
easeInOutExpo |
|
easeInCirc |
|
easeOutCirc |
|
easeInOutCirc |
|
easeInElastic |
|
easeOutElastic |
|
easeInOutElastic |
|
easeInBack |
|
easeOutBack |
|
easeInOutBack |
|
easeInBounce |
|
easeOutBounce |
|
easeInOutBounce |
|