修复了 jQuery 缓动的加速？

Posted 2023-02-22

【中文标题】修复了 jQuery 缓动的加速？

【英文标题】：Fixed acceleration for jQuery easing?

【发布时间】：2013-10-06 04:35:56

【问题描述】：

我正在制作一个非常规的网站，它可以水平滚动很远的距离。我注意到 jQuery 的缓动函数在滚动距离的长度范围内被拉伸。它加速的持续时间似乎是它需要滚动的距离的固定分数。例如，它可能会在前 1/5 距离加速，在 3/5 以恒定速度滚动，然后在剩余的 1/5 减速。这使得长距离滚动时的加速度更加缓慢。无论需要滚动多远，有什么方法可以让它在固定的时间内加速？

如果有帮助，这是我的代码的一部分

$('tbody.travelTo a').click(function()
    $('html, body').animate(
        scrollLeft: $( $.attr(this, 'href') ).offset().left - 1/2 * $(window).width() + 1/2 * $( $.attr(this, 'href') ).width()
    , $( $.attr(this, 'href') ).offset().left / travelRate, 'swing');
    return false;
); 

【参考方案1】：

您可以在animate 方法中设置持续时间。 API

类似的东西

.animate( 
   scrollTop:'300px',
   300, //duration is the 2nd parameter (default - 400ms)
   swing,
   function() 
     alert(animation complete! - your custom code here!); 
    
)

或者您可以随时编写自己的缓动方法

jQuery.easing.method(   
 null,  
 current_time,  
 start_value,   
 end_value,     
 total_time 
)

有用的链接 - http://forrst.com/posts/How_to_create_custom_jQuery_easing_functions-OKb

【讨论】：

我可以设置整个滚动事件的持续时间，但我想设置滚动事件加速部分的持续时间。这样想，现在如果屏幕必须在 5 秒内滚动 100 像素，它可能会执行以下操作：

加速：1 秒恒速：3 秒减速：1 秒如果它必须滚动 500 像素，它可能会这样做：加速：5 秒恒速：15 秒减速：5 秒但我想要什么这样做是这样的：加速：1 秒恒速：23 秒减速：1 秒与第一个距离（100 像素）相比，您是否看到它如何保持恒定的加速持续时间？

我认为，效果取决于您选择的缓动类型。

是的，我查看了所有这些图表。我选择哪一个并不重要。图表在我要求它滚动的距离上被“拉伸”

看起来您需要自定义缓动功能，请查看我的更新答案