打開另一個選項卡時設置的位置未更新

我做了固定數量項目的增長動畫，並且在增長後，我將它移動到左側。
使經濟增長由應用矩陣打開另一個選項卡時設置的位置未更新

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

我刪除所有的「以前」的項目，使用循環

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

如果我們打開並保持當前選項卡，上面的代碼正確運行。 問題是，當我們移動到另一個選項卡，執行某些操作並返回時，某些對象具有相同的位置，導致翻譯到相同的位置。它看起來很奇怪。
它出現在Chrome，Firefox和IE11上。
我不知道爲什麼，請指出我發生了什麼事。

來源

2015-06-12 kidnan1991

大多數現代瀏覽器選擇限制在setInterval中的延遲並在非活動選項卡中暫停。這樣做是爲了保持CPU週期並降低功耗，對移動設備尤爲重要。您可以找到有關各個瀏覽器的詳細信息在此answer

這意味着，當標籤是無效的，你的補間動畫不能正常使用它通常預期的方式。

一個簡單的解決方案是停止主動畫循環，如果選項卡不使用變量。

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

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

來源

2015-06-12 06:33:59

謝謝@Adrian Moisa。我也這麼認爲。目前，我修改了翻譯功能，不使用補間，只是簡單地減去填充。它的工作原理是：D – kidnan1991

打開另一個選項卡時設置的位置未更新

回答

相關問題