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几次，它将保持相同的速度。

原因是您正在运行基于角度的单页应用程序，并且只交换路径更改中加载的视图内容。这不会阻止已运行的动画代码在导航到另一个视图时继续在后台运行，因此，当您返回到动画选项卡时，您将为动画创建另一组间隔定时器，这将导致更多的执行从而视觉上更快的动画。