Có cách nào để có thời gian hoạt ảnh còn lại không?

Question

Giả sử tôi có một số div và tôi sử dụng .animate({opacity:0},400, function(){}); cho con của nó. Sau đó, bạn có thể nhận được thời gian còn lại cho hoạt ảnh hoàn thành không? ví dụ: 200 ms còn lại hoặc 0 nếu không có hoạt ảnh? Cảm ơn.

Answer 1

Để giúp bạn hiểu rõ hơn về cách bạn có thể sử dụng step chức năng [như được đăng bởi gdoron]
Tôi tạo ra một ví dụ bằng cách sử dụng bước chức năng để có được thời gian còn lại:

(nhấp vào nút get state! để dừng hoạt ảnh và truy xuất thời gian còn lại!)

demo with distance
demo with opacity

cách dụ 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>'); 
}); 

• Bạn có thể xem như thế nào tôi đã sử dụng fx.prop bên trong animation step để có được (left) bất động sản hiện đang hoạt hình.
  
• Bạn có thể xem cách: biết thời gian hoạt ảnh và khoảng cách (độ mờ, bất kỳ ...) chúng tôi có thể dễ dàng truy xuất trạng thái 'đã dừng/tạm dừng' bằng một số phép toán đơn giản ((now*time)/distance) và nhờ giá trị trả về now .

Answer 2

Tôi không có ý tưởng tại sao bạn cần nó, nhưng step có thể giúp bạn trích xuất giá trị này:

Bước Chức năng

Phiên bản thứ hai của .animate() cung cấp một lựa chọn bước - một chức năng gọi lại được kích hoạt tại mỗi bước của hoạt ảnh. Chức năng này rất hữu ích cho việc bật các loại hoạt hình tùy chỉnh hoặc thay đổi hoạt ảnh khi nó đang diễn ra. Nó chấp nhận hai đối số (bây giờ và fx), và điều này được đặt thành phần tử DOM đang được làm động.

tại: giá trị số tài sản được hoạt hình ở mỗi bước
fx: một tham chiếu đến đối tượng nguyên mẫu jQuery.fx, trong đó có một số tài sản như elem cho các phần tử hoạt hình, bắt đầu và kết thúc cho giá trị đầu tiên và cuối cùng của thuộc tính động, tương ứng và chống cho thuộc tính đang được làm động.

docs

Answer 3

Nghe, đừng bận tâm đến chức năng step mà mọi người tiếp tục nói đến. Tôi đã từng cần những gì bạn làm và viết của riêng tôi mà chỉ cần đặt nó ngược thiết kế thời gian còn lại bằng cách xem tổng thời gian hoạt hình (nên đã được biết đến bạn kể từ khi bạn đã đưa số này cho jQuery) và thương của Opacity hiện tại và mục tiêu. Sau đó, chỉ nhân thương số đó với tổng thời gian hoạt ảnh, có tổng trừ đi tổng thời gian. Đơn giản như thế.

Pseudo-code:

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