-
-
Save FrankFang/3755182 to your computer and use it in GitHub Desktop.
Tween Action
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 timer; | |
var originalValue = lib.getScrollTop(); | |
var alteration = lib.getPos(dom).y; | |
var currentTime = 0; | |
var duration = 50; | |
var interval = 25; | |
function action(){ | |
window.scrollTo( 0, tween.quad.easeInOut(originalValue,alteration,currentTime,duration); | |
if(currentTime<duration){ | |
++currentTime; | |
timer = window.setTimeout(action,interval); | |
}else{ | |
window.clearTimeout(timer); | |
} | |
} | |
action(); | |
var tween = { | |
linear:function (originalValue,alteration,currentTime,duration) {return originalValue+currentTime/duration*alteration;},//最简单的线性变化,即匀速运动 | |
quad:{//二次方缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+Math.pow(currentTime/duration,2)*alteration; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration; | |
return originalValue-(Math.pow(progress,2)-2*progress)*alteration; | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration*2; | |
return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alteration/2+originalValue; | |
} | |
}, | |
cubic:{//三次方缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+Math.pow(currentTime/duration,3)*alteration; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration; | |
return originalValue-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alteration; | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration*2; | |
return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alteration/2+originalValue; | |
} | |
}, | |
quart:{//四次方缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+Math.pow(currentTime/duration,4)*alteration; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration; | |
return originalValue-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alteration; | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration*2; | |
return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alteration/2+originalValue; | |
} | |
}, | |
quint:{//五次方缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+Math.pow(currentTime/duration,5)*alteration; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration; | |
return originalValue-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alteration; | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration*2; | |
return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alteration/2+originalValue; | |
} | |
}, | |
sine :{//正弦曲线缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue-(Math.cos(currentTime/duration*Math.PI/2)-1)*alteration; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+Math.sin(currentTime/duration*Math.PI/2)*alteration; | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
return originalValue-(Math.cos(currentTime/duration*Math.PI/2)-1)*alteration/2; | |
} | |
}, | |
expo: {//指数曲线缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return currentTime?(originalValue+alteration*Math.pow(2,10*(currentTime/duration-1))):originalValue; | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
return (currentTime==duration)?(originalValue+alteration):(originalValue-(Math.pow(2,-10*currentTime/duration)+1)*alteration); | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
if (!currentTime) {return originalValue;} | |
if (currentTime==duration) {return originalValue+alteration;} | |
var progress =currentTime/duration*2; | |
if (progress < 1) { | |
return alteration/2*Math.pow(2,10* (progress-1))+originalValue; | |
} else { | |
return alteration/2* (-Math.pow(2, -10*--progress) + 2) +originalValue; | |
} | |
} | |
}, | |
circ :{//圆形曲线缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration) { | |
return originalValue-alteration*Math.sqrt(-Math.pow(currentTime/duration,2)); | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration) { | |
return originalValue+alteration*Math.sqrt(1-Math.pow(currentTime/duration-1)); | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration) { | |
var progress =currentTime/duration*2; | |
return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alteration/2+originalValue; | |
} | |
}, | |
elastic: {//指数衰减的正弦曲线缓动 | |
easeIn:function (originalValue,alteration,currentTime,duration,extent,cycle) { | |
if (!currentTime) {return originalValue;} | |
if ((currentTime==duration)==1) {return originalValue+alteration;} | |
if (!cycle) {cycle=duration*0.3;} | |
var s; | |
if (!extent || extent< Math.abs(alteration)) { | |
extent=alteration; | |
s = cycle/4; | |
} else {s=cycle/(Math.PI*2)*Math.asin(alteration/extent);} | |
return originalValue-extent*Math.pow(2,10*(currentTime/duration-1)) * Math.sin((currentTime-duration-s)*(2*Math.PI)/cycle); | |
}, | |
easeOut:function (originalValue,alteration,currentTime,duration,extent,cycle) { | |
if (!currentTime) {return originalValue;} | |
if (currentTime==duration) {return originalValue+alteration;} | |
if (!cycle) {cycle=duration*0.3;} | |
var s; | |
if (!extent || extent< Math.abs(alteration)) { | |
extent=alteration; | |
s =cycle/4; | |
} else {s=cycle/(Math.PI*2)*Math.asin(alteration/extent);} | |
return originalValue+alteration+extent*Math.pow(2,-currentTime/duration*10)*Math.sin((currentTime-s)*(2*Math.PI)/cycle); | |
}, | |
easeInOut:function (originalValue,alteration,currentTime,duration,extent,cycle) { | |
if (!currentTime) {return originalValue;} | |
if (currentTime==duration) {return originalValue+alteration;} | |
if (!cycle) {cycle=duration*0.45;} | |
var s; | |
if (!extent || extent< Math.abs(alteration)) { | |
extent=alteration; | |
s =cycle/4; | |
} else {s=cycle/(Math.PI*2)*Math.asin(alteration/extent);} | |
var progress = currentTime/duration*2; | |
if (progress<1) { | |
return originalValue-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*duration-s)*(2*Math.PI)/cycle); | |
} else { | |
return originalValue+alteration+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*duration-s)*(2*Math.PI)/cycle); | |
} | |
} | |
}, | |
back:{ | |
easeIn: function (originalValue,alteration,currentTime,duration,s){ | |
if (typeof s == "undefined") {s = 1.70158;} | |
return originalValue+alteration*(currentTime/=duration)*currentTime*((s+1)*currentTime - s); | |
}, | |
easeOut: function (originalValue,alteration,currentTime,duration,s) { | |
if (typeof s == "undefined") {s = 1.70158;} | |
return originalValue+alteration*((currentTime=currentTime/duration-1)*currentTime*((s+1)*currentTime + s) + 1); | |
}, | |
easeInOut: function (originalValue,alteration,currentTime,duration,s){ | |
if (typeof s == "undefined") {s = 1.70158;} | |
if ((currentTime/=duration/2) < 1) { | |
return originalValue+alteration/2*(Math.pow(currentTime,2)*(((s*=(1.525))+1)*currentTime- s)); | |
} | |
return originalValue+alteration/2*((currentTime-=2)*currentTime*(((s*=(1.525))+1)*currentTime+ s)+2); | |
} | |
}, | |
bounce:{ | |
easeIn: function(originalValue,alteration,currentTime,duration){ | |
return originalValue+alteration-Tween.Bounce.easeOut(0,alteration,duration-currentTime,duration); | |
}, | |
easeOut: function(originalValue,alteration,currentTime,duration){ | |
if ((currentTime/=duration) < (1/2.75)) { | |
return alteration*(7.5625*Math.pow(currentTime,2))+originalValue; | |
} else if (currentTime < (2/2.75)) { | |
return alteration*(7.5625*(currentTime-=(1.5/2.75))*currentTime + .75)+originalValue; | |
} else if (currentTime< (2.5/2.75)) { | |
return alteration*(7.5625*(currentTime-=(2.25/2.75))*currentTime + .9375)+originalValue; | |
} else { | |
return alteration*(7.5625*(currentTime-=(2.625/2.75))*currentTime + .984375)+originalValue; | |
} | |
}, | |
easeInOut: function (originalValue,alteration,currentTime,duration){ | |
if (currentTime< duration/2) { | |
return Tween.Bounce.easeIn(0,alteration,currentTime*2,duration) *0.5+originalValue; | |
} else { | |
return Tween.Bounce.easeOut(0,alteration,currentTime*2-duration,duration) *0.5 + alteration*0.5 +originalValue; | |
} | |
} | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment