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扩展为答案：

答案与你的问题标题错误的原因相同：在你所描述的内容中确实存在 NO page refresh 。如果有的话，你首先就不会遇到这个问题。尝试一下，在动画页面上点击F5几次，它会保持相同的速度。

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

Answer 2

@Cristy感谢您的建议！

以下是我设法解决这个问题的方法..

我在pixi-parameters.js中添加了一个属性：

  <xsl:template match="start">
    <heading>From <xsl:value-of select="@loc"/>:</heading>
  </xsl:template>

然后，当我调用initiatePixi（）函数时，我设置：

pixiWasLoaded = false;

现在在我的controllers.js中我有这段代码：

pixiWasLoaded = true;

检查引用页面是否已加载，然后使用$ window查找我的全局变量＆＃34; pixiWasLoaded＆＃34;如果它没有加载，那么它使用loadReferences（）函数加载PixiJS ..如果已经加载它调用我的部分代码将渲染视图添加到DOM，所以我的动画函数可以渲染它..

::干杯::

约瑟普布罗兹

Pixi.js在页面刷新时不断加速

2 个答案: