打开另一个选项卡时设置位置不更新

Question

我做了一个固定数量的物品的成长动画，成长之后，我把它向左移动。
通过应用矩阵进行增长

var trans_vector = new THREE.Matrix4().makeTranslation(0, height / 2, 0);
var graphics = new Graphics();
var rectangle = graphics.box(width, height, material);
rectangle.geometry.applyMatrix(trans_vector);

添加新项目时，我从将添加到场景的容器中删除一个项目

    var children = this.container.children;
    if (this.current_number === this.max_number) {
        this.container.remove(children[0]);
        this.current_number = this.max_number - 1;
    }
    object.position.copy(this.position); // this is a fixed position
    this.container.add(object);
    this.current_number++;

我使用 tweenjs（唯一）编写了一个向左平移的函数

animateTranslation : function(object, padding, duration) {
    var new_x = object.position.x - padding; // Move to left
    console.log(new_x); // Duplicated item here :(
    new TWEEN.Tween(object.position).to({
        x : new_x
    }, duration).start();
},

然后我删除了所有 "previous" 项，使用 for 循环

for (var i = 0; i < this.current_number-1; i++) {
        this.animateTranslation(this.container.children[i], 
                    this.padding,
                    this.duration/4)
    }

如果我们打开并保留当前选项卡，以上代码运行正确。 问题是当我们移动到另一个选项卡，做一些事情然后返回时，一些对象具有相同的位置，导致平移到相同的位置。看起来很奇怪。
它同时出现在 Chrome、Firefox 和 IE11 上。
我不知道为什么，请指点我发生了什么。

Answer 1

大多数现代浏览器选择在 setInterval 中限制延迟并在非活动选项卡中暂停 requestAnimationFrame。这样做是为了保留 CPU 个周期并降低功耗，这对移动设备尤其重要。您可以在 answer

中找到有关每个浏览器的更多详细信息

That means, while the tab is inactive, your tween animation is not working the way it is normally expected to.

一个简单的解决方案是在选项卡处于非活动状态时使用变量停止主动画循环。

window.onfocus = function () { 
  isActive = true; 
}; 

window.onblur = function () { 
  isActive = false; 
};

打开另一个选项卡时设置位置不更新

Set position not updated when open another tab

three.js

tween.js