这是我的补间功能：
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会将时间戳发送到动画循环。您可以使用该时间戳来计算经过的时间。然后，您可以正确地推进动画以反映经过的时间，而不是停止的动画循环的帧数。
您必须决定是否值得在KineticJS结构之外重新创建动画函数（和缓动）。当然这并不困难，但是要重新创建的功能数量很大。
无论哪种方式...祝您项目顺利！