JQuery動畫的最大速度

Question

是否有可能在做動畫時讓動畫的速度只達到最大值。所以它應該像往常一樣加速，當速度達到一定值時，它應該保持在這個最大速度。

我該如何做到這一點？

Answer 1

這聽起來很像緩解問題，但除了自己製作數學和技術訣竅外，您始終可以選擇連續鏈接兩個動畫。

$('#foo') 
    .animate({ /* start off the animation */ }, 1000, 'swing') 
    .animate({ /* finish the animation */ }, 1000, 'linear') 
    ; 

...或類似的東西。

請記住，同一個（元素）隊列上的動畫，而不同的動畫並行運行。

Answer 2

最大動畫速度由動畫必須移動的距離，動畫的持續時間和緩動功能（它應該在哪裏加速/減速）控制。最簡單的例子是線性緩動（恆速）。在這種情況下，以像素/秒爲單位的速度將只是動畫移動的總像素距離除以動畫的持續時間（以秒爲單位）。你可以控制這兩個參數（持續時間和距離），這樣你就可以設置你喜歡的方式。

對於非線性動畫，整體速度感仍然由距離和持續時間決定，但該持續時間間隔內的確切加速度/減速度由緩動功能決定。爲了構建自己的緩動函數需要一些習慣，但已經創建了很多。

jQuery有兩個內置的easing函數"swing"和"linear"。還有許多其他的緩解功能已經建成，您可以從中選擇jQueryUI以及各種第三方緩解功能，如these。