Last active
August 29, 2015 14:04
-
-
Save CooLNuanfeng/75c85a7ddcca500decb8 to your computer and use it in GitHub Desktop.
jQuery 扩展 tween 算法及原生运动框架tween版
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $.extend(jQuery.easing , { | |
| easeIn: function(x,t, b, c, d){ //加速曲线 | |
| return c*(t/=d)*t + b; | |
| }, | |
| easeOut: function(x,t, b, c, d){ //减速曲线 | |
| return -c *(t/=d)*(t-2) + b; | |
| }, | |
| easeBoth: function(x,t, b, c, d){ //加速减速曲线 | |
| if ((t/=d/2) < 1) { | |
| return c/2*t*t + b; | |
| } | |
| return -c/2 * ((--t)*(t-2) - 1) + b; | |
| }, | |
| easeInStrong: function(x,t, b, c, d){ //加加速曲线 | |
| return c*(t/=d)*t*t*t + b; | |
| }, | |
| easeOutStrong: function(x,t, b, c, d){ //减减速曲线 | |
| return -c * ((t=t/d-1)*t*t*t - 1) + b; | |
| }, | |
| easeBothStrong: function(x,t, b, c, d){ //加加速减减速曲线 | |
| if ((t/=d/2) < 1) { | |
| return c/2*t*t*t*t + b; | |
| } | |
| return -c/2 * ((t-=2)*t*t*t - 2) + b; | |
| }, | |
| elasticIn: function(x,t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d) == 1 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p=d*0.3; | |
| } | |
| if (!a || a < Math.abs(c)) { | |
| a = c; | |
| var s = p/4; | |
| } else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | |
| }, | |
| elasticOut: function(x,t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d) == 1 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p=d*0.3; | |
| } | |
| if (!a || a < Math.abs(c)) { | |
| a = c; | |
| var s = p / 4; | |
| } else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | |
| }, | |
| elasticBoth: function(x,t, b, c, d, a, p){ | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d/2) == 2 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p = d*(0.3*1.5); | |
| } | |
| if ( !a || a < Math.abs(c) ) { | |
| a = c; | |
| var s = p/4; | |
| } | |
| else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| if (t < 1) { | |
| return - 0.5*(a*Math.pow(2,10*(t-=1)) * | |
| Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | |
| } | |
| return a*Math.pow(2,-10*(t-=1)) * | |
| Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; | |
| }, | |
| backIn: function(x,t, b, c, d, s){ //回退加速（回退渐入） | |
| if (typeof s == 'undefined') { | |
| s = 1.70158; | |
| } | |
| return c*(t/=d)*t*((s+1)*t - s) + b; | |
| }, | |
| backOut: function(x,t, b, c, d, s){ | |
| if (typeof s == 'undefined') { | |
| s = 3.70158; //回缩的距离 | |
| } | |
| return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | |
| }, | |
| backBoth: function(x,t, b, c, d, s){ | |
| if (typeof s == 'undefined') { | |
| s = 1.70158; | |
| } | |
| if ((t /= d/2 ) < 1) { | |
| return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | |
| } | |
| return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | |
| }, | |
| bounceIn: function(x,t, b, c, d){ //弹球减振（弹球渐出） | |
| return c - this['bounceOut'](x,d-t, 0, c, d) + b; | |
| }, | |
| bounceOut: function(x,t, b, c, d){ | |
| if ((t/=d) < (1/2.75)) { | |
| return c*(7.5625*t*t) + b; | |
| } else if (t < (2/2.75)) { | |
| return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; | |
| } else if (t < (2.5/2.75)) { | |
| return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; | |
| } | |
| return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; | |
| }, | |
| bounceBoth: function(x,t, b, c, d){ | |
| if (t < d/2) { | |
| return this['bounceIn'](x,t*2, 0, c, d) * 0.5 + b; | |
| } | |
| return this['bounceOut'](x,t*2-d, 0, c, d) * 0.5 + c*0.5 + b; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Tween = { | |
| linear: function (t, b, c, d){ //匀速 | |
| return c*t/d + b; | |
| }, | |
| easeIn: function(t, b, c, d){ //加速曲线 | |
| return c*(t/=d)*t + b; | |
| }, | |
| easeOut: function(t, b, c, d){ //减速曲线 | |
| return -c *(t/=d)*(t-2) + b; | |
| }, | |
| easeBoth: function(t, b, c, d){ //加速减速曲线 | |
| if ((t/=d/2) < 1) { | |
| return c/2*t*t + b; | |
| } | |
| return -c/2 * ((--t)*(t-2) - 1) + b; | |
| }, | |
| easeInStrong: function(t, b, c, d){ //加加速曲线 | |
| return c*(t/=d)*t*t*t + b; | |
| }, | |
| easeOutStrong: function(t, b, c, d){ //减减速曲线 | |
| return -c * ((t=t/d-1)*t*t*t - 1) + b; | |
| }, | |
| easeBothStrong: function(t, b, c, d){ //加加速减减速曲线 | |
| if ((t/=d/2) < 1) { | |
| return c/2*t*t*t*t + b; | |
| } | |
| return -c/2 * ((t-=2)*t*t*t - 2) + b; | |
| }, | |
| elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d) == 1 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p=d*0.3; | |
| } | |
| if (!a || a < Math.abs(c)) { | |
| a = c; | |
| var s = p/4; | |
| } else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | |
| }, | |
| elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d) == 1 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p=d*0.3; | |
| } | |
| if (!a || a < Math.abs(c)) { | |
| a = c; | |
| var s = p / 4; | |
| } else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | |
| }, | |
| elasticBoth: function(t, b, c, d, a, p){ | |
| if (t === 0) { | |
| return b; | |
| } | |
| if ( (t /= d/2) == 2 ) { | |
| return b+c; | |
| } | |
| if (!p) { | |
| p = d*(0.3*1.5); | |
| } | |
| if ( !a || a < Math.abs(c) ) { | |
| a = c; | |
| var s = p/4; | |
| } | |
| else { | |
| var s = p/(2*Math.PI) * Math.asin (c/a); | |
| } | |
| if (t < 1) { | |
| return - 0.5*(a*Math.pow(2,10*(t-=1)) * | |
| Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | |
| } | |
| return a*Math.pow(2,-10*(t-=1)) * | |
| Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; | |
| }, | |
| backIn: function(t, b, c, d, s){ //回退加速（回退渐入） | |
| if (typeof s == 'undefined') { | |
| s = 1.70158; | |
| } | |
| return c*(t/=d)*t*((s+1)*t - s) + b; | |
| }, | |
| backOut: function(t, b, c, d, s){ | |
| if (typeof s == 'undefined') { | |
| s = 3.70158; //回缩的距离 | |
| } | |
| return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | |
| }, | |
| backBoth: function(t, b, c, d, s){ | |
| if (typeof s == 'undefined') { | |
| s = 1.70158; | |
| } | |
| if ((t /= d/2 ) < 1) { | |
| return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | |
| } | |
| return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | |
| }, | |
| bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出） | |
| return c - Tween['bounceOut'](d-t, 0, c, d) + b; | |
| }, | |
| bounceOut: function(t, b, c, d){ | |
| if ((t/=d) < (1/2.75)) { | |
| return c*(7.5625*t*t) + b; | |
| } else if (t < (2/2.75)) { | |
| return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; | |
| } else if (t < (2.5/2.75)) { | |
| return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; | |
| } | |
| return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; | |
| }, | |
| bounceBoth: function(t, b, c, d){ | |
| if (t < d/2) { | |
| return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; | |
| } | |
| return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b; | |
| } | |
| } | |
| function getStyle(obj,attr) | |
| { | |
| if(obj.currentStyle){ | |
| return obj.currentStyle[attr]; | |
| } | |
| else{ | |
| return getComputedStyle(obj,false)[attr]; | |
| } | |
| } | |
| function starMove(obj,json,time,fx,callBack) | |
| { | |
| var iNowTime=getNow(); | |
| var iCur={}; | |
| for(var attr in json) | |
| { | |
| if(attr=="opacity") | |
| { | |
| iCur[attr]=Math.round(getStyle(obj,attr)*100); | |
| } | |
| else | |
| { | |
| iCur[attr]=parseInt(getStyle(obj,attr)); | |
| } | |
| } | |
| clearInterval(obj.oTimer); | |
| obj.oTimer=setInterval(function(){ | |
| var iTime=time-Math.max(0,iNowTime-getNow()+time); | |
| for(var attr in json) | |
| { | |
| var iVal=Tween[fx](iTime,iCur[attr],json[attr]-iCur[attr],time) | |
| if(attr=="opacity") | |
| { | |
| obj.style.opacity=iVal/100; | |
| obj.style.filter="alpha(opacity="+iVal+")" | |
| } | |
| else | |
| { | |
| obj.style[attr]=iVal+"px"; | |
| } | |
| } | |
| if(iTime==time) | |
| { | |
| clearInterval(obj.oTimer); | |
| if(callBack) | |
| { | |
| callBack.call(obj); | |
| } | |
| } | |
| },14); | |
| } | |
| function getNow() | |
| { | |
| return new Date().getTime(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment