javascript - KineticJS:当浏览器选项卡未激活时，如何保持补间运行？

Question

这是我的补间函数:

var secondsNotchTween = function() {

    var tween = new Kinetic.Tween({
        node: secondsNotchShape,
        rotationDeg: currentRotationDegree + 6,
        duration: 0.5,
        easing: Kinetic.Easings.ElasticEaseOut
    });

    return {
        tween: tween
    };

};

我每秒都用 setTimeout 调用它，如下所示:

var secondsNotchAnimation = function() {
    secondsNotchTween().tween.play();
};

var playSecondsNotchAnimation = function() {

    minuteNotchTimeout = setTimeout(function() {

        secondsNotchAnimation();
        playSecondsNotchAnimation();

    }, displayTime().intervalToSecond);

};

它的工作方式正如我所希望的那样，但是当动画位于“背景”中(不在当前浏览器选项卡中)时，补间并没有真正执行。我认为这是某种 requestAnimationFrame 问题，但我似乎找不到解决方法？还有其他人遇到过这样的问题吗？

Answer 1

你的假设是正确的。

KineticJS 动画使用 requestAnimationFrame 来驱动其动画，当浏览器选项卡未聚焦时，RAF 将自动停止执行。不建议更改 KineticJS 动画处理的内部结构。

解决方法需要您创建自己的 requestAnimationFrame 循环，该循环根据耗时而不是帧数来推进动画。

幸运的是，英国皇家空军已经预见到了这种需求。

当选项卡重新获得焦点时，RAF 将向您的动画循环发送时间戳。您可以使用该时间戳来计算耗时。然后，您可以正确地推进动画以反射(reflect)耗时，而不是已停止的动画循环的帧数。

您必须决定是否值得在 KineticJS 结构之外重新创建动画函数(和缓动)。这当然不难，但是要重新创建的功能数量很大。

无论哪种方式......祝您的项目顺利!