有没有什么办法让动画的剩余时间?(Is there any way to get the remai

2019-07-29 09:12发布

假设我有一些股利,我用.animate({opacity:0},400, function(){}); 它的孩子。 有没有可能再获得一个动画完成的剩余时间? 例如,200毫秒剩余,或0,如果没有动画? 谢谢。

Answer 1:

为了帮助您更好地了解如何使用step函数[张贴由gdoron]
我用阶跃函数来获取剩余时间创建了一个例子:

(点击get state!按钮停止动画显示和检索剩余时间!)

演示与距离
演示与透明度

距离例如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值。


Answer 2:

我不知道你为什么需要它,但step可以帮你提取此值:

步进功能

.animate的所述第二版本()提供了一个步骤的选择 - 即在动画的每个步骤中烧制的回调函数。 该功能是用于使自定义动画类型或改变的动画,因为它是存在的有用的。 它接受两个参数(现在的和FX),并且这被设置为DOM元件动画。

现在 :属性的数值在每一步被动画
FX:向jQuery.fx原型对象,其中包含许多性质比如ELEM为动画元素的引用,开始和结束分别用于动画属性的第一和最后一个值,和丙用于被动画的属性。

文档



Answer 3:

听着,心中永远的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;
}


文章来源: Is there any way to get the remaining time of animation?