js動畫緩動公式
阿新 • • 發佈:2020-12-15
緩動公式
效果:
- Linear:無緩動效果
- Quadratic:二次方的緩動(t^2)
- Cubic:三次方的緩動(t^3)
- Quartic:四次方的緩動(t^4)
- Quintic:五次方的緩動(t^5)
- Sinusoidal:正弦曲線的緩動(sin(t))
- Exponential:指數曲線的緩動(2^t)
- Circular:圓形曲線的緩動(sqrt(1-t^2))
- Elastic:指數衰減的正弦曲線緩動
- 超過範圍的三次方緩動((s+1)t^3 – st^2)
- 指數衰減的反彈緩動
/* * Tween.js * t: current time(當前時間) * b: beginning value(初始值) * c: change in value(變化量) * d: duration(持續時間) */ var Tween = { Linear: function(t, b, c, d) { return c*t/d + b; }, Quad: { 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; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t-2) - 1) + b; } }, Cubic: { easeIn: function(t, b, c, d) { return c * (t /= d) * t * t + b; }, easeOut: function(t, b, c, d) { return c * ((t = t/d - 1) * t * t + 1) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t*t + b; return c / 2*((t -= 2) * t * t + 2) + b; } }, Quart: { easeIn: function(t, b, c, d) { return c * (t /= d) * t * t*t + b; }, easeOut: function(t, b, c, d) { return -c * ((t = t/d - 1) * t * t*t - 1) + b; }, easeInOut: 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; } }, Quint: { easeIn: function(t, b, c, d) { return c * (t /= d) * t * t * t * t + b; }, easeOut: function(t, b, c, d) { return c * ((t = t/d - 1) * t * t * t * t + 1) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2*((t -= 2) * t * t * t * t + 2) + b; } }, Sine: { easeIn: function(t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t, b, c, d) { return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b; } }, Expo: { easeIn: function(t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t, b, c, d) { return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(t, b, c, d) { return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOut: function(t, b, c, d) { return c * Math.sqrt(1 - (t = t/d - 1) * t) + b; }, easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } }, Elastic: { easeIn: function(t, b, c, d, a, p) { var s; if (t==0) return b; if ((t /= d) == 1) return b + c; if (typeof p == "undefined") p = d * .3; if (!a || a < Math.abs(c)) { s = p / 4; a = c; } else { 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; }, easeOut: function(t, b, c, d, a, p) { var s; if (t==0) return b; if ((t /= d) == 1) return b + c; if (typeof p == "undefined") p = d * .3; if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else { 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); }, easeInOut: function(t, b, c, d, a, p) { var s; if (t==0) return b; if ((t /= d / 2) == 2) return b+c; if (typeof p == "undefined") p = d * (.3 * 1.5); if (!a || a < Math.abs(c)) { a = c; s = p / 4; } else { s = p / (2 *Math.PI) * Math.asin(c / a); } if (t < 1) return -.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 ) * .5 + c + b; } }, Back: { easeIn: function(t, b, c, d, s) { if (typeof s == "undefined") s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOut: function(t, b, c, d, s) { if (typeof s == "undefined") s = 1.70158; return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b; }, easeInOut: 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; } }, Bounce: { easeIn: function(t, b, c, d) { return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: 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 + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeInOut: function(t, b, c, d) { if (t < d / 2) { return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; } else { return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; } } } } Math.tween = Tween;
var tween = { easeInQuad: function(pos){ return Math.pow(pos, 2); }, easeOutQuad: function(pos){ return -(Math.pow((pos-1), 2) -1); }, easeInOutQuad: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); return -0.5 * ((pos-=2)*pos - 2); }, easeInCubic: function(pos){ return Math.pow(pos, 3); }, easeOutCubic: function(pos){ return (Math.pow((pos-1), 3) +1); }, easeInOutCubic: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); return 0.5 * (Math.pow((pos-2),3) + 2); }, easeInQuart: function(pos){ return Math.pow(pos, 4); }, easeOutQuart: function(pos){ return -(Math.pow((pos-1), 4) -1) }, easeInOutQuart: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeInQuint: function(pos){ return Math.pow(pos, 5); }, easeOutQuint: function(pos){ return (Math.pow((pos-1), 5) +1); }, easeInOutQuint: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); return 0.5 * (Math.pow((pos-2),5) + 2); }, easeInSine: function(pos){ return -Math.cos(pos * (Math.PI/2)) + 1; }, easeOutSine: function(pos){ return Math.sin(pos * (Math.PI/2)); }, easeInOutSine: function(pos){ return (-.5 * (Math.cos(Math.PI*pos) -1)); }, easeInExpo: function(pos){ return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); }, easeOutExpo: function(pos){ return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; }, easeInOutExpo: function(pos){ if(pos==0) return 0; if(pos==1) return 1; if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); return 0.5 * (-Math.pow(2, -10 * --pos) + 2); }, easeInCirc: function(pos){ return -(Math.sqrt(1 - (pos*pos)) - 1); }, easeOutCirc: function(pos){ return Math.sqrt(1 - Math.pow((pos-1), 2)) }, easeInOutCirc: function(pos){ if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); }, easeOutBounce: function(pos){ if ((pos) < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeInBack: function(pos){ var s = 1.70158; return (pos)*pos*((s+1)*pos - s); }, easeOutBack: function(pos){ var s = 1.70158; return (pos=pos-1)*pos*((s+1)*pos + s) + 1; }, easeInOutBack: function(pos){ var s = 1.70158; if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); }, elastic: function(pos) { return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; }, swingFromTo: function(pos) { var s = 1.70158; return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2); }, swingFrom: function(pos) { var s = 1.70158; return pos*pos*((s+1)*pos - s); }, swingTo: function(pos) { var s = 1.70158; return (pos-=1)*pos*((s+1)*pos + s) + 1; }, bounce: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, bouncePast: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeFromTo: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeFrom: function(pos) { return Math.pow(pos,4); }, easeTo: function(pos) { return Math.pow(pos,0.25); }, linear: function(pos) { return pos }, sinusoidal: function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; }, reverse: function(pos) { return 1 - pos; }, mirror: function(pos, transition) { transition = transition || tween.sinusoidal; if(pos<0.5) return transition(pos*2); else return transition(1-(pos-0.5)*2); }, flicker: function(pos) { var pos = pos + (Math.random()-0.5)/5; return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos); }, wobble: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; }, pulse: function(pos, pulses) { return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; }, blink: function(pos, blinks) { return Math.round(pos*(blinks||5)) % 2; }, spring: function(pos) { return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); }, none: function(pos){ return 0 }, full: function(pos){ return 1 } }