KineticJS:我怎么能保持一个渐变运行，而它的浏览器选项卡是不活跃的

KineticJS: How can I keep a tween running while it's browser tab is not active?

本文关键字：浏览器 选项 活跃 运行 渐变 怎么能 一个 KineticJS      更新时间：2023-09-26

这是我的补间函数:

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问题，但我似乎找不到一种方法来解决它?有人遇到过这样的问题吗?

你的推测是正确的。

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

这个解决方案需要你创建自己的requestAnimationFrame循环，根据经过的时间而不是帧数来推进动画。

幸运的是，RAF已经预见到了这一需求。

当标签恢复焦点RAF将发送一个时间戳到你的动画循环。您可以使用该时间戳来计算经过的时间。然后，你可以适当地推进你的动画，以反映经过的时间，而不是暂停动画循环的帧数。

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

不管怎样…祝你的项目好运!

相关文章：