有什么方法可以获取动画的剩余时间吗? [英] Is there any way to get the remaining time of animation?

问题描述

假设我有一些div，并且我将.animate({opacity:0},400, function(){});用作其子级. 那么是否有可能获得动画完成的剩余时间?例如，剩余200毫秒；如果没有动画，则为0? 谢谢.

Suppose I have some div, and I use .animate({opacity:0},400, function(){}); for its children. Is it ever possible then to get the remaining time for an animation to complete? eg, 200 ms remaining, or 0 if there's no animation? Thanks.

推荐答案

为帮助您更好地了解如何使用step函数 [如 gdoron 所发布的]
我使用 step 函数创建了一个示例以获取剩余时间:

To help you better understand how you can use the step function [as posted by gdoron]
I created an example using the step function to get the remaining time:

(单击get state!按钮停止动画并检索剩余时间！)

(click the get state! button to stop the animation and retrieve the remaining time!)

具有距离的演示
演示不透明

demo with distance
demo with opacity

距离示例jQuery:

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

• 您可以看到我如何使用animation step内的fx.prop来获取当前动画的(left)属性.
  
• 您可以看到:了解动画时间和距离(不透明度等)，我们可以通过一些简单的数学运算((now*time)/distance)并通过返回的值.
• You can see how I used the fx.prop inside the animation step to get the (left) property that is currently animated.
  
• You can see how: knowing the animation time and the distance (opacity, whatever...) we can easily retrieve the 'stopped/paused' state by some simple math ((now*time)/distance) and thanks to the returned now value.

这篇关于有什么方法可以获取动画的剩余时间吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！