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会向动画循环发送时间戳。您可以使用该时间戳来计算已用时间。然后，您可以正确地推进动画以反映经过的时间，而不是停止的动画循环的帧数。

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

无论哪种方式......祝你的项目好运！

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

1 个答案: