www.robertpenner.com ">

Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

Javascript Animation Easing von Robert Penner

Das HTML5 und Javascript Bild von Standardabweichung aus München

Easing Equations

Easing Equations von Robert Penner
Quelle: www.robertpenner.com

//valueChange = valueEnd - valueStart; var easeOutCubic= function (time, duration, valueStart, valueChange) { return valueChange*((time=time/duration-1)*time*time + 1) + valueStart; } var easeInQuad= function (time, duration, valueStart, valueChange) { return valueChange*(time/=duration)*time + valueStart; } var easeOutQuad= function (time, duration, valueStart, valueChange) { return -valueChange *(time/=duration)*(time-2) + valueStart; } var easeInOutQuad= function (time, duration, valueStart, valueChange) { if ((time/=duration/2) < 1) return valueChange/2*time*time + valueStart; return -valueChange/2 * ((--time)*(time-2) - 1) + valueStart; } var easeInCubic= function (time, duration, valueStart, valueChange) { return valueChange*(time/=duration)*time*time + valueStart; } var easeOutCubic= function (time, duration, valueStart, valueChange) { return valueChange*((time=time/duration-1)*time*time + 1) + valueStart; } var easeInOutCubic= function (time, duration, valueStart, valueChange) { if ((time/=duration/2) < 1) return valueChange/2*time*time*time + valueStart; return valueChange/2*((time-=2)*time*time + 2) + valueStart; } var easeInQuart= function (time, duration, valueStart, valueChange) { return valueChange*(time/=duration)*time*time*time + valueStart; } var easeOutQuart= function (time, duration, valueStart, valueChange) { return -valueChange * ((time=time/duration-1)*time*time*time - 1) + valueStart; } var easeInOutQuart= function (time, duration, valueStart, valueChange) { if ((time/=duration/2) < 1) return valueChange/2*time*time*time*time + valueStart; return -valueChange/2 * ((time-=2)*time*time*time - 2) + valueStart; } var easeInQuint= function (time, duration, valueStart, valueChange) { return valueChange*(time/=duration)*time*time*time*time + valueStart; } var easeOutQuint= function (time, duration, valueStart, valueChange) { return valueChange*((time=time/duration-1)*time*time*time*time + 1) + valueStart; } var easeInOutQuint= function (time, duration, valueStart, valueChange) { if ((time/=duration/2) < 1) return valueChange/2*time*time*time*time*time + valueStart; return valueChange/2*((time-=2)*time*time*time*time + 2) + valueStart; } var easeInSine= function (time, duration, valueStart, valueChange) { return -valueChange * Math.cos(time/duration * (Math.PI/2)) + valueChange + valueStart; } var easeOutSine= function (time, duration, valueStart, valueChange) { return valueChange * Math.sin(time/duration * (Math.PI/2)) + valueStart; } var easeInOutSine= function (time, duration, valueStart, valueChange) { return -valueChange/2 * (Math.cos(Math.PI*time/duration) - 1) + valueStart; } var easeInExpo= function (time, duration, valueStart, valueChange) { return (time==0) ? valueStart : valueChange * Math.pow(2, 10 * (time/duration - 1)) + valueStart; } var easeOutExpo= function (time, duration, valueStart, valueChange) { return (time==duration) ? valueStart+valueChange : valueChange * (-Math.pow(2, -10 * time/duration) + 1) + valueStart; } var easeInOutExpo= function (time, duration, valueStart, valueChange) { if (time==0) return valueStart; if (time==duration) return valueStart+valueChange; if ((time/=duration/2) < 1) return valueChange/2 * Math.pow(2, 10 * (time - 1)) + valueStart; return valueChange/2 * (-Math.pow(2, -10 * --time) + 2) + valueStart; } var easeInCirc= function (time, duration, valueStart, valueChange) { return -valueChange * (Math.sqrt(1 - (time/=duration)*time) - 1) + valueStart; } var easeOutCirc= function (time, duration, valueStart, valueChange) { return valueChange * Math.sqrt(1 - (time=time/duration-1)*time) + valueStart; } var easeInOutCirc= function (time, duration, valueStart, valueChange) { if ((time/=duration/2) < 1) return -valueChange/2 * (Math.sqrt(1 - time*time) - 1) + valueStart; return valueChange/2 * (Math.sqrt(1 - (time-=2)*time) + 1) + valueStart; } var easeInElastic= function (time, duration, valueStart, valueChange) { var s=1.70158;var p=0;var a=valueChange; if (time==0) return valueStart; if ((time/=duration)==1) return valueStart+valueChange; if (!p) p=duration*.3; if (a < Math.abs(valueChange)) { a=valueChange; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (valueChange/a); return -(a*Math.pow(2,10*(time-=1)) * Math.sin( (time*duration-s)*(2*Math.PI)/p )) + valueStart; } var easeOutElastic= function (time, duration, valueStart, valueChange) { var s=1.70158;var p=0;var a=valueChange; if (time==0) return valueStart; if ((time/=duration)==1) return valueStart+valueChange; if (!p) p=duration*.3; if (a < Math.abs(valueChange)) { a=valueChange; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (valueChange/a); return a*Math.pow(2,-10*time) * Math.sin( (time*duration-s)*(2*Math.PI)/p ) + valueChange + valueStart; } var easeInOutElastic= function (time, duration, valueStart, valueChange) { var s=1.70158;var p=0;var a=valueChange; if (time==0) return valueStart; if ((time/=duration/2)==2) return valueStart+valueChange; if (!p) p=duration*(.3*1.5); if (a < Math.abs(valueChange)) { a=valueChange; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (valueChange/a); if (time < 1) return -.5*(a*Math.pow(2,10*(time-=1)) * Math.sin( (time*duration-s)*(2*Math.PI)/p )) + valueStart; return a*Math.pow(2,-10*(time-=1)) * Math.sin( (time*duration-s)*(2*Math.PI)/p )*.5 + valueChange + valueStart; } var easeInBack= function (time, duration, valueStart, valueChange, s) { if (s == undefined) s = 1.70158; return valueChange*(time/=duration)*time*((s+1)*time - s) + valueStart; } var easeOutBack= function (time, duration, valueStart, valueChange, s) { if (s == undefined) s = 1.70158; return valueChange*((time=time/duration-1)*time*((s+1)*time + s) + 1) + valueStart; } var easeInOutBack= function (time, duration, valueStart, valueChange, s) { if (s == undefined) s = 1.70158; if ((time/=duration/2) < 1) return valueChange/2*(time*time*(((s*=(1.525))+1)*time - s)) + valueStart; return valueChange/2*((time-=2)*time*(((s*=(1.525))+1)*time + s) + 2) + valueStart; } var easeInBounce= function (time, duration, valueStart, valueChange) { return valueChange - (duration-time, 0, valueChange, duration) + valueStart; } var easeOutBounce= function (time, duration, valueStart, valueChange) { if ((time/=duration) < (1/2.75)) { return valueChange*(7.5625*time*time) + valueStart; } else if (time < (2/2.75)) { return valueChange*(7.5625*(time-=(1.5/2.75))*time + .75) + valueStart; } else if (time < (2.5/2.75)) { return valueChange*(7.5625*(time-=(2.25/2.75))*time + .9375) + valueStart; } else { return valueChange*(7.5625*(time-=(2.625/2.75))*time + .984375) + valueStart; } } var easeInOutBounce= function (time, duration, valueStart, valueChange) { if (time < duration/2) return (time*2, 0, valueChange, duration) * .5 + valueStart; return (time*2-duration, 0, valueChange, duration) * .5 + valueChange*.5 + valueStart; } /* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright (C) 2001 Robert Penner All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this * list of conditions and the following disclaimer. Redistributions in binary * form must reproduce the above copyright notice, this list of conditions and * the following disclaimer in the documentation and/or other materials provided * with the distribution. * * Neither the name of the author nor the names of contributors may be used to * endorse or promote products derived from this software without specific prior * written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE * POSSIBILITY OF SUCH DAMAGE. * */

HTML5 / Javascript Code Teilen

Javascript Snippet auf Facebook teilen  Facebook
Javascript Snippet auf Facebook teilen  Google+