js動畫效果演算法
阿新 • • 發佈：2019-03-02
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) { if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .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; }, easeOut:function (t, b, c, d, a, p) { if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .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); }, easeInOut:function (t, b, c, d, a, p) { if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.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 -.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 (s == undefined) s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOut:function (t, b, c, d, s) { if (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 (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; } } } /* 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：指數衰減的正弦曲線緩動； Back：超過範圍的三次方緩動（(s+1)*t^3 - s*t^2）； Bounce：指數衰減的反彈緩動。 ps：以上都是自己的爛翻譯，希望各位修正。 每個效果都分三個緩動方式（方法），分別是： easeIn：從0開始加速的緩動； easeOut：減速到0的緩動； easeInOut：前半段從0開始加速，後半段減速到0的緩動。 其中Linear是無緩動效果，沒有以上效果 t: current time（當前時間）； b: beginning value（初始值）； c: change in value（變化量）； d: duration（持續時間）。 ps：Elastic和Back有其他可選引數，裡面都有說明。 */ //Tween中的方法接受4個引數t,b,c,d 。t為初始時間 b、c、d三個引數（即初始值，變化量，持續時間）。返回值為當前位置 //t => time(初始記步次數) b => begin(初始位置) c => change(變化量) d => duration(持續次數) /* 先通過上面的座標例項說一下演算法原理： x軸是時間，y軸是當前值，b是y軸的初始值，x軸的初始值是0，t是當前時間。當t（x軸）逐漸增加到達d時，當前值（y軸）會到達目標值（b+c）。 想詳細理解的話可以找資料看看吧（貌似跟數學關係比較大）。 下面就介紹如何使用這個Tween了，首先b、c、d三個引數（即初始值，變化量，持續時間）在緩動開始前，是需要先確定好的。 舉一個簡單的例子，一個div要向右緩動，left初始值是50，那麼b就是50，要向右移動100，那c就是100，如果知道的是目標值，例如要向右移動到150，那就把目標值150減初始值b就是變化量c了。 至於d的設定就比較靈活，只要符合t是從0向d遞增（或遞減）就可以了。 d跟步長配合使用來設定持續時間，例如d設定為100，如果設定步長是1，那麼從0到100就有100步，即分100次來完成這個過程，步數越多那麼持續時間就越長。 至於t的變化相當於時間的變化，一般是均勻變化的，每次變化都增加一個步長，當t從0遞增（或遞減）到d時，緩動就結束了。 要注意的是t是從0開始的，設定步長時必須確定t確實能到達d，如果上面的步長是3，那麼t就永遠都到不了d了。更好的處理是當t等於或超過d之後，就停止定時器並設定當前值為目標值。 */
2.個外掛 tween.js可生成平滑動畫效果的js動畫庫
http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html
3.snabbt 動畫效果外掛
2個外掛配合可以實現現在dsp裡面的任何動畫效果，不用自己寫。爽歪歪
使用方法
/**
引數列表
t: current time(當前時間)
b: beginning value(初始值)
c: change in value(變化量//不懂看下邊的解釋)
d: duration(持續時間)
*/
var Tween = {
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
}
}
var b=50,c=100,d=100,t=0,speed=1; //speed 步長
function Run(){
div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";
if(t<d){ t += speed; setTimeout(Run, 10); }
}
Run();