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（sole）

编写一个向左翻译的函数

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();
},

我删除了所有“之前”的项目，使用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

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

这意味着，当选项卡处于非活动状态时，补间动画的工作方式与正常情况下的工作方式不同。

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

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

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

打开另一个标签时设置位置未更新

1 个答案: