淡化jQuery Easing的反弹
Tone down jQuery Easing's bounce
我正在使用jQuery缓动插件并使用弹跳缓动效果。我喜欢它,但它是如此难以置信的激烈。我需要调低它(可能会消除反弹并使曲线不那么剧烈。
我找到了这篇文章,但我实际上不是数学专业的学生......有人可以用英语帮助我吗?我什至不需要完全掌握它,只要有人为我提供功能,我就可以了。
我知道我应该粘贴我尝试过的代码,但我什至不知道该尝试什么,所以我想我会发布 jQuery Easing 插件提供的缓动函数。
easeOutBounce: 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 + .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;
}
}
最好的选择是找到一个接近您想要的缓动函数并调整持续时间。但是如果你真的想做一些自定义的事情,jQuery 缓动插件允许你使用以下函数指定计时:
jQuery.easing.newEasingMethodName (
x, // Ignored
current_time,
start_value,
end_value,
total_time
)
它在动画的各个点被调用,并期望返回适合于动画运行时间的位置。检查easeOutBounce
,您可以看到每个if
语句将进度标准化为总时间的百分比(t/=d
片段),并应用 4 个论坛之一来派生当前值作为该百分比的函数。
问题在于这些公式函数不是连续的——它们被单独"调整"以在时间轴中精确的完成百分比点拾取另一个函数离开的地方。例如,在下面的代码段中,如果您选择"步骤",您将看到动画从一个位置跳到另一个位置,没有中间动画。如果您只是从easeOutBounce
代码块中取出一个if
语句,就会发生这种情况 - 它会从一个步骤的完成跳到下一个步骤的开始,该步骤被调整为在时间轴的后面部分开始,因此会导致您的动画到处跳跃。
您可以使用下面的 custom
函数作为起点 - 它只是easeOutBounce
函数,重写以使其不那么晦涩难懂。
祝你好运,:)
var $div = $('#test');
var $easeMethodName = $('#method-name');
var $animationDuration = $('#animation-duration');
$('button').click(function() {
$div.toggleClass('expanded');
var width = $div.hasClass('expanded') ? 400 : 200;
var duration = parseInt($animationDuration.val(), 10);
$div.animate({
width: width
}, {
duration: duration,
easing: $easeMethodName.val()
});
});
var linear = function(ignore, t, start_value, end_value, d) {
var pct = t/d;
return pct * end_value;
};
$.easing.linear = linear;
var step = function(ignore, t, start_value, end_value, d) {
var pct = t/d * 100;
var step = Math.round(pct / 25);
return (step * .25) * end_value + start_value;
};
$.easing.step = step;
// This is the eastOutBounce function, rewritten to make it a little
// easier to read. Use it as a starting point for modification.
// t is the current time; d is the duration of the animation
var custom = function(ignore, t, start_value, end_value, d) {
var pct = t/d;
var step1 = 1/2.75; // ~36%
var step2 = 2/2.75; // ~73%
var step3 = 2.5/2.75; // ~90%
if (pct < step1) {
return end_value*(7.5625*pct*pct) + start_value;
} else if (pct < step2) {
return end_value*(7.5625*(pct-=(1.5/2.75))*pct + .75) + start_value;
} else if (pct < step3) {
return end_value*(7.5625*(pct-=(2.25/2.75))*pct + .9375) + start_value;
} else {
return end_value*(7.5625*(pct-=(2.625/2.75))*pct + .984375) + start_value;
}
};
$.easing.custom = custom;
#test {
width: 200px;
height: 20px;
border: 1px solid #900;
background: #ccc;
position: relative;
margin-top: 1em;
}
label, button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<label>Method name:
<select id="method-name">
<option value="linear">Linear</option><option value="step">Step</option><option value="custom">Custom</option><option value="easeInOutBounce">easeInOutBounce</option>
</select>
</label>
<label>Duration:
<input id="animation-duration" value="1000" />
</label>
<button>Animate</button>
<div id="test">
</div>
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 淡化jQuery Easing的反弹
- 固定位置Jquery上的Easing
- 我如何使用jquery ui使用带有滚动条的easing
- 如何重置动画图像的边距使用jquery easing
- jQuery添加的easing会打断后面的动画.语法错误
- jQuery动画在变换时不采取easing
- jquery的easing函数中有哪些不同的参数?