Dev*_*von 16 javascript jquery animation easing-functions jquery-easing
如何修改这个jQuery缓动函数以产生一个不那么夸张的反弹?
$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (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;
};
Run Code Online (Sandbox Code Playgroud)
我正在寻找一个模拟这个的缓动函数:
http://sandbox.scriptiny.com/tinyslider2/
tinyslider2使用类似的功能,看起来像这样:
new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')
Run Code Online (Sandbox Code Playgroud)
但是我今天似乎无法理解数字,以便将tinyslider2方程符合jQuery缓动格式.如果有人能给我一个例子,我会非常感激.
UPDATE
这个等式非常接近:
$.easing.custom = function (x, t, b, c, d) {
var 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;
}
Run Code Online (Sandbox Code Playgroud)
我只需要结束反弹而不开始反弹.
Chr*_*ing 14
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm允许您直观地创建缓动功能.如果您切换右上角的F5/FMX单选按钮,它会以JavaScript形式输出.
不知道正是你想要的效果,这应该让你非常接近.
$.easing.tinyslider = function(x, t, b, c, d) {
ts=(t/=d)*t;
tc=ts*t;
return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}
Run Code Online (Sandbox Code Playgroud)
否则,请使用缓动函数生成器并尝试新选项或查找http://commadot.com/jquery/easing.php以获取更多资源.
这很有趣,我总是想知道这些缓动功能是如何工作的.
| 归档时间: |
|
| 查看次数: |
10953 次 |
| 最近记录: |