Kalan animasyon süresini elde etmenin bir yolu var mı?

Question

Farzedeyim ve çocukları için .animate({opacity:0},400, function(){}); kullanıyorum. Bir animasyonun tamamlanması için kalan süreyi elde etmek mümkün mü? ör. 200 ms geri kaldı ya da animasyon yoksa 0 mı? Teşekkürler.

Answer 1

ben kalan süreyi almak için adım işlevini kullanarak bir örnek oluşturdu
[gdoron tarafından gönderildi olarak] step fonksiyonunu nasıl kullanabileceğinizi daha iyi anlamanıza yardımcı olmak için:

(animasyonu durdurmak ve kalan süreyi geri almak için get state! düğmesini tıklatın!)

demo with opacity

Mesafe örneği jQuery

demo with distance :

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>'); 
}); 

• Sen Şu anda animasyonlu (left) özelliği alma animation step içeride fx.prop kullandığını görebilirsiniz. kolayca alabilirsiniz (ne olursa olsun ... opaklığı) animasyon zaman ve mesafe bilerek döndü now değere bazı basit matematik ((now*time)/distance) ve sayesinde devleti 'durdurulmuş/durdurulmuş':
  
• Sen nasıl görebilirsiniz .

Answer 2

İhtiyacın neden hiçbir fikrim yok, ama step Bu değeri ayıklamak yardımcı olabilir:

Adım İşlevini

.animate ikinci versiyonu() Bir adım seçeneği sağlar - Animasyonun her adımında tetiklenen bir geri çağırma işlevi. Bu işlev, özel animasyon türlerini etkinleştirmek veya animasyonu meydana geldiğinde değiştirmek için kullanışlıdır. İki argümanı (şimdi ve fx) kabul eder ve bu, animasyonlu DOM öğesine ayarlanır. Şimdi

: özelliğinin sayısal değer her aşamada hareketli olan
FX: örneğin hareketli eleman, bir başlangıç ​​elem gibi özelliklerin bir dizi içerir jQuery.fx prototip nesnesine başvuru, ve sırasıyla animasyonlu özelliğin ilk ve son değeri için sonlandırın ve animasyonlu mülk için teklif verin.

docs

Answer 3

Dinleyin, herkesin hakkında konuşmaya devam ettiği step işlevini boş verin. Bir keresinde ne yaptığınıza ve kendi yazmamın tam tersini koydu. Bu, toplam animasyon zamanına (bu sayıyı jQuery'ye verdiğinizden beri zaten bilinmelidir) ve katsayısının mevcut ve hedef opaklık. Daha sonra, bu bölümü toplam animasyon süresiyle çarpın, toplamın toplam süreden çıkarılmasını sağlayın. Bu kadar basit.

Sözde kod: Sadece meraktan

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; 
}