如何使動畫緩解（緩解和緩解）與持續時間無關？

我使用jQuery與Easing plugin，我想實現恆定寬鬆次任意時間的動畫：如何使動畫緩解（緩解和緩解）與持續時間無關？

Short animation (X milliseconds) 
|<<<<|-------------------|>>>>| 
10ms      10ms 

Long animation (2X milliseconds) 
|<<<<|-----------------------------------------|>>>>| 
10ms           10ms

凡<<<</>>>>的緩解，在/緩和超時週期，並---表示常數速度運動。

是否有緩動功能/插件，或者我應該給這樣的每個動畫的時間相關的自定義函數，如果是的話，那麼是什麼樣的？

來源

2012-01-11 Ernests Karlsons

可以使用回調函數在.animate()調用鏈動畫：

var $obj  = $('#some-id'), 
    ani_dist = 500; 

//animate first easing 
$obj.stop().animate({ left : 100 }, 500, 'easeOutCirc', function() { 

    //animate main body of the animation 
    $obj.animate({ left : (ani_dist - 100) }, 1000, 'linear', function() { 

     //animate the last easing 
     $obj.animate({ left : ani_dist }, 500, 'easeInCirc'); 
    }); 
});

我不知道你想要什麼，設置動畫以動畫或什麼時間使用，但有一個想法。

來源

2012-01-11 17:50:10 Jasper

這是一個解決方案，我想過了，但是問題是，更長和更流暢的動畫，這是很難適應的寬鬆政策在兩端都有功能 - 「連接點」總是有一點擺動。是否有一個以45度線結束的緩存功能圖，而水平開始？ – 2012-01-11 18:01:09

@ErnestsKarlsons下面是不同緩動類型的一些圖表：http://jqueryui.com/demos/effect/easing.html – Jasper 2012-01-11 18:03:40

愚蠢的，只需要查看它們。出於某種原因，我確信沒有什麼合適的。對不起，謝謝你的快速回答！ – 2012-01-11 18:08:38

我認爲你應該使用動畫女王

//animate first easing 
$obj.stop() 
    .animate({ left : 100 }, 500, 'easeOutCirc') 
    .animate({ left : (ani_dist - 100) }, 1000, 'linear') 
    .animate({ left : ani_dist }, 500, 'easeInCirc') 
;

見jQuery.animate example-2

來源

2013-07-21 12:08:44 wener

如何使動畫緩解（緩解和緩解）與持續時間無關？

回答

相關問題