有什麼方法可以獲得動畫的剩餘時間嗎？

假設我有一些div，並且我爲其子女使用.animate({opacity:0},400, function(){});。是否有可能獲得完成動畫的剩餘時間？例如，剩餘200毫秒，或者如果沒有動畫，則爲0？謝謝。有什麼方法可以獲得動畫的剩餘時間嗎？

來源

2012-05-13 Anonymous

只是出於好奇......爲什麼你需要的價值？ –

@ RokoC.Buljan。我猜想這是一種愛好。他是收集動畫時代。 – gdoron

我有排隊一些回調給孩子的問題 - 它並不總是觸發，並且確定哪個孩子排隊它是不容易的，所以我想用setTimeout來嘗試使它更可靠。 – Anonymous

爲了幫助您更好地瞭解如何使用step功能 [張貼由gdoron]
我使用一步函數來獲取剩餘的時間創建了一個例子：

（點擊get state!按鈕停止動畫並檢索剩餘時間！）

demo with distance
demo with opacity

距離例如jQuery的：

var time = 4000; 
var distance = 300; 
var currentTime = 0; 

$('#ball').animate({ 
    left: distance 
}, { 
    duration: time, 
    step: function (now, fx) { 

     currentTime = Math.round((now * time)/distance); 
     var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> '; 

     $('body').append('<p>' + data + '</p>'); 
    }, 
    easing: 'linear' 
}); 

$('#getTime').click(function() { 
    $('#ball').stop(); 
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>'); 
});

你可以看到我是如何使用的fx.prop的animation step內獲得當前動畫的（left）屬性。我們可以通過一些簡單的數學運算（(now*time)/distance）和返回的now值，輕鬆地檢索動畫時間和距離（不透明度，無論...）的「停止/暫停」狀態。

來源

2012-05-13 02:06:45

謝謝這是非常有益的！而且，如果我們將step函數限制爲可變寫入，似乎不會達到很高的性能。無論如何，它不會被調用每1毫秒或什麼。 – Anonymous

@ user1125062它不應該導致我們只訪問已經運行我們動畫的東西。 –

我不知道你爲什麼需要它，但step可以幫你提取此值：

步驟功能

第二個版本.animate的（）提供了一個循序漸進的選項 - 在動畫的每個步驟中觸發的回調函數。此功能對於啓用自定義動畫類型或在動畫發生時更改動畫非常有用。它接受兩個參數（now和fx），並將其設置爲正在動畫的DOM元素。

現在：屬性的數值在每一步進行動畫
FX：一個參考jQuery.fx原型對象，其中包含許多性質比如ELEM爲動畫元素，開始並分別結束動畫屬性的第一個和最後一個值，併爲屬性設置動畫。

docs

來源

2012-05-13 00:43:32 gdoron

嗯，但我應該怎麼做？ :) – Anonymous

@ user1125062。你可以得到當前值，第一個值，最後一個值等等，然後玩它。無論如何，我相信還有其他的方式來做你想做的事情...... – gdoron

沒有setInterval或這種方法，不，AFAIK。這是獲得它的唯一途徑。 – inhan

聽着，沒關係大家都在談論的step函數。我曾經需要你做的並且寫下我自己的那個，簡單地說它是通過查看整個動畫時間（應該已經知道你已經知道了，因爲你曾經給這個數字給jQuery）和的商目前和目標的不透明度。然後，將該商與總動畫時間相乘，從總時間中減去總和。就那麼簡單。

僞代碼：

func calculate-time-left-in-a-running-fade-in-animation: 
{ 
    var current_opacity = $elem.css('opacity'); 
    var target_opacity = this.getTargetOpacity(); 

    var total = this.getTotalAnimationTime(); 

    var quotient = current_opacity/target_opacity; 
    return total - quotient * total; 
}

來源

2012-10-09 06:40:08

有趣的方法，雖然沒有它！儘管精度很重要，但步驟是唯一的方法。 – Anonymous

只要動畫暫停，自己檢索屬性值或使用now變量就是一回事。在jQuery步驟示例中，@roXon給出了在動畫的每一步都會有很多開銷。甚至可能會引入全局變量，例如實際上的例子。如果您打算在計算之前暫停動畫（與示例一樣），然後以編程方式恢復動畫，則完全沒有任何區別。我甚至會說在一個正在運行的動畫下獲得這個計算值會產生相同的結果。 –

步驟邏輯的存儲產品（剩餘時間的計算值）不像活動列表，該值不會將其自身更新爲最精確的值。它不會是任何東西，而是您在任何時候使用它的「舊」計算。你甚至會有一箇中間人負責彌補這個信息差距，這個步驟功能，理論上誰應該拒絕精確度。但是，如果您在需要知道剩餘時間時做出完全相同的計算，那會不會更精確？而且代碼的可讀性和處理開銷也更便宜。 –

有什麼方法可以獲得動畫的剩餘時間嗎？

回答

相關問題