Pixi.js不斷加快在頁面刷新

Question

這些都是在這裏pixi.js創建我的引用： http://brekalo.info/en/reference

如果我們去引用它加載pixiJS，一切工作正常第一次加載！然後，如果我們轉到另一頁，讓我們假設：http://brekalo.info/en/contact，然後再返回到引用 - 現在，我的引用加速了文本移動和旋轉，並且它在每個參考頁加載時都保持加速！

這裏是我的JavaScript/Pixi的代碼如下：

function initiatePixi() { 

Object.keys(PIXI.utils.TextureCache).forEach(function(texture) { 
    PIXI.utils.TextureCache[texture].destroy(true);} 
); 

// create an new instance of a pixi stage 
var container = new PIXI.Container(); 

// create a renderer instance. 
renderer = PIXI.autoDetectRenderer(frameWidth, frameHeight, transparent = false, antialias = true); 

// set renderer frame background color 
renderer.backgroundColor = 0xFFFFFF; 

// add the renderer view element to the DOM 
document.getElementById('pixi-frame').appendChild(renderer.view); 

// create references 
createReferences(animate); // callback to animate frame 

function createReferences(callback) { 

    // Create text container 
    textContainer = new PIXI.Container(); 
    textContainer.x = 0; 
    textContainer.y = 0; 

    for (i = 0; i < references.length; i++) { 

     var style = { 
      font:"22px Verdana", 
      fill:getRandomColor() 
     }; 

     var text = new PIXI.Text(references[i], style); 

     text.x = getRandomInteger(20, 440); // text position x 
     text.y = getRandomInteger(20, 440); // text position y 

     text.anchor.set(0.5, 0.5); // set text anchor point to the center of text 

     text.rotation = getRandomInteger(0, rotationLockDeg) * 0.0174532925; // set text rotation 

     // make the text interactive 
     text.interactive = true; 

     // create urls on text click 
     text.on("click", function (e) { 
      var win = window.open("http://" + this.text, '_blank'); 
      win.focus(); 
     }); 

     textContainer.addChild(text); 

     rotateText(); // rotate text each second 

    } 

    container.addChild(textContainer); 

    // callback 
    if (callback && typeof(callback) === "function") { 
     callback(); 
    } 

} 

function animate() { 

    requestAnimationFrame(animate); 

    // render the stage 
    renderer.render(container); 
} 

function rotateText() { 

var rotateTimer = setInterval(function() { 

    for (var key in textContainer.children) { // loop each text object 

     var text = textContainer.children[key]; 

     if(text.rotation/0.0174532925 < -rotationLockDeg || text.rotation/0.0174532925 > rotationLockDeg) { 

      if(text.rotation/0.0174532925 < -rotationLockDeg) 
       text.rotation = -rotationLockRad; 
      if(text.rotation/0.0174532925 > rotationLockDeg) 
       text.rotation = rotationLockRad; 

      rotation = -rotation; 

     } 

     text.rotation += rotation; // rotate text by rotate speed in degree 

     if(text.x < 0 || text.x > 460) 
      dx = -dx; 
     if(text.y < 0 || text.y > 460) 
      dy = -dy; 

     text.x += dx; 
     text.y += dy; 
    } 

}, 75); 

} 

// get random integer between given range (eg 1-10) 
function getRandomInteger(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

// random hex color generator 
function getRandomColor() { 
    var letters = 'ABCDEF'.split(''); 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

提前感謝！

::歡呼::

約瑟普

Answer 1

@Cristy謝謝你的建議！

這是我如何設法解決這個..

我把一個屬性在我的Pixi-parameters.js：

pixiWasLoaded = false; 

然後，當我打電話initiatePixi（）函數，我設置：

pixiWasLoaded = true; 

現在在我的controllers.js我有這樣一段代碼：

.run(function($rootScope, $location, $window) { 
    $rootScope.$watch(function() { 
      return $location.path(); 
     }, 
     function(page){ 
      if(page == "/hr/reference" || page == "/en/references"){ 
       if($window.pixiWasLoaded) 
        $window.addRendererElementToDOM(); 
       else 
        loadReferences(); 
      } 
     }); 
}); 

它檢查是否加載了引用頁面，然後使用$ window來查找我的全局變量「pixiWasLoaded」，如果未加載，那麼它使用loadReferences（）函數加載PixiJS。如果已經加載，它會調用我的代碼部分渲染視圖添加到DOM，所以我的動畫功能，可使其..

::歡呼::

約瑟普

Answer 2

擴大@Cristy's comment一個答案：

答案是相同的理由，爲什麼你的問題的標題是錯誤的：確實是有NO頁在做你所描述的時候刷新。如果有的話，你首先不會有這個問題。試試看，在你的動畫頁面上點擊F5幾次，它將保持相同的速度。

原因是您正在運行基於角度的單頁應用程序，並且只交換路徑更改中加載的視圖內容。這不會阻止已運行的動畫代碼在導航到另一個視圖時繼續在後臺運行，因此，當您返回到動畫選項卡時，您將爲動畫創建另一組間隔定時器，這將導致更多的執行從而視覺上更快的動畫。