Javascript 如何在pixi.js中创建性能良好的动画互动程序？

如何使用PIXI js从使用平铺精灵的精灵表设置动画？我需要从精灵工作表中设置平铺精灵背景的动画

目前，在PIXI.js API中存在为平铺精灵设置动画的API调用。我创建了以下类来帮助我加载和设置平铺背景的动画

/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
    PIXI.TilingSpriteAnimation = function(texture, frames, rows, frametime, loop)  {
          PIXI.TilingSprite.call(
            this, texture,
            VIEWPORTWIDTH,
            this._texture.baseTexture.height);

        this._stop = true;
        this._texture = new PIXI.Texture(texture);
        this.frameTime = frametime;
        this.loop = loop || true;
        this.curX = 0;
        this.curY = 0;
        this.fh = this._texture.height / rows;
        this.fw = this._texture.width / frames;
        this.ticks = 0;
        this.maxFrames = frames;
        this.maxRows = rows;
        this.done = false;

        this.calculateFrame();
    };

    PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
    PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;

    Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
        get: function() {
            return this._texture;
        }
    });

    PIXI.TilingSpriteAnimation.prototype.update = function() {

        console.log(this.ticks);
        if(!this._stop) {
          this.ticks += 1;
        }

        if (this.done == false) {
            if (this.ticks >= this.frameTime) {
                this.curX++;
                this.ticks = 0;

                if (this.curX == this.maxFrames) {
                    this.curX = 0;

                    this.curY++;

                    if (this.curY == this.maxRows) {
                        this.curY = 0;

                        if (!this.loop)
                            this.done = true;
                    }
                }
                this.calculateFrame();
            }
        }
    };

    PIXI.TilingSpriteAnimation.prototype.goto = function(frame, row) {
        this.curX = frame;
        this.curY = row || 0;
    };

    PIXI.TilingSpriteAnimation.prototype.stop = function() {
        this._stop = true;
    };

    PIXI.TilingSpriteAnimation.prototype.play = function() {
        this._stop = false;
    };

    PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
        this.texture.frame.x = this.curX * this.fw;
        this.texture.frame.y = this.curY * this.fh;
        this.texture.frame.width = this.fw;
        this.texture.frame.height = this.fh;
        this.texture.setFrame(this.texture.frame);
        this.generateTilingTexture(this.texture);
    };

}).call(this);

---

但是，此代码效率很低，因为每次输入新帧时，它都会计算一个新的平铺纹理。我该如何优化它呢？

我花了一些时间研究这个问题，但得出了以下结论。我希望有帮助

/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
    PIXI.TilingSpriteAnimation = function(texture, frames, frametime, loop)  {
          PIXI.TilingSprite.call(
            this, texture,
            VIEWPORTWIDTH,
            VIEWPORTHEIGHT);

        this._stop = true;
        this._texture = new PIXI.Texture(texture);
        this.frameTime = frametime;
        this.loop = loop || true;
        this.curX = 0;
        this.fh = this._texture.height;
        this.fw = this._texture.width / frames;
        this.ticks = 0;
        this.maxFrames = frames;

        for (var i=0;i<frames;i++){
          this.preLoadFrame(i);
        }

        this.calculateFrame();
    };

    PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
    PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;

    Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
        get: function() {
            return this._texture;
        }
    });

    PIXI.TilingSpriteAnimation.prototype.update = function() {

        if (this._stop == false) {
            this.ticks += 1;
            if (this.ticks >= this.frameTime) {
                this.curX++;
                this.ticks = 0;

                if (this.curX == this.maxFrames) {
                    this.curX = 0;

                    if (!this.loop) {
                        this._stop = true;
                    }
                }
                this.calculateFrame();
            }
        }
    };

    PIXI.TilingSpriteAnimation.prototype.goto = function(frame) {
        this.curX = frame;
    };

    PIXI.TilingSpriteAnimation.prototype.stop = function() {
        this._stop = true;
    };

    PIXI.TilingSpriteAnimation.prototype.play = function() {
        this._stop = false;
    };

    PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
      this.tilingTexture = PIXI.Texture.fromFrame("texture" + this.curX);
    };

    PIXI.TilingSpriteAnimation.prototype.preLoadFrame = function(frame) {
        var text = new PIXI.TilingSprite(this.texture);
        text.texture.frame.x = frame * this.fw;
        text.texture.frame.y = 0;
        text.texture.frame.width = this.fw;
        text.texture.frame.height = this.fh;
        text.texture.setFrame(text.texture.frame);  
        text.generateTilingTexture(text);

        PIXI.Texture.addTextureToCache(text.tilingTexture, "texture" + frame)
    };
}).call(this);

/////////////////////////////////////////////////////////////////////////////
///平铺精灵动画
/////////////////////////////////////////////////////////////////////////////
（功能（）{
PIXI.TilingSpriteAnimation=函数（纹理、帧、帧时、循环）{
PIXI.TilingSprite.call(
这个,质地,，
视口宽度，
视窗高度）；
这是.\u stop=true；
此._纹理=新的PIXI.纹理（纹理）；
this.frameTime=帧时间；
this.loop=loop | | true；
这个.curX=0；
this.fh=this.\u.height；
this.fw=this.\u纹理宽度/帧；
此参数为0；
this.maxFrames=frames；
for（变量i=0；i=this.frameTime）{
这个.curX++；
此参数为0；
if（this.curX==this.maxFrames）{
这个.curX=0；
如果（！this.loop）{
这是.\u stop=true；
}
}
这个.calculateName（）；
}
}
};
PIXI.TilingSpriteAnimation.prototype.goto=函数（帧）{
this.curX=帧；
};
PIXI.TilingSpriteAnimation.prototype.stop=函数（）{
这是.\u stop=true；
};
PIXI.TilingSpriteAnimation.prototype.play=函数（）{
这是错误的；
};
PIXI.TilingSpriteAnimation.prototype.CalculateName=函数（）{
this.tilingTexture=PIXI.Texture.fromFrame（“纹理”+this.curX）；
};
PIXI.TilingSpriteAnimation.prototype.preload框架=函数（框架）{
var text=new PIXI.TilingSprite（this.texture）；
text.texture.frame.x=frame*this.fw；
text.texture.frame.y=0；
text.texture.frame.width=this.fw；
text.texture.frame.height=this.fh；
text.texture.setFrame（text.texture.frame）；
文本。生成纹理（文本）；
PIXI.Texture.addTextureToCache（text.tilingTexture，“纹理”+帧）
};
}).打电话（这个）；

我有一些担心，这段代码可能不会节省内存。我会关注这一点。