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 = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

提前致谢！

::干杯::

约瑟普

Answer 1

要将 @Cristy's comment 扩展为答案：

答案与您的问题标题错误的原因相同：在执行您描述的操作时确实没有页面刷新。如果有的话，你一开始就不会有这个问题。试试看，在动画页面上点击 F5 几次，它会保持相同的速度。

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

Answer 2

@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 所以我的动画函数可以渲染它..

::干杯::

乔西普

Pixi.js 页面刷新持续加速

Pixi.js keeps accelerating on page refresh

javascript

pixi.js