Javascript 对EaselJS中的动画精灵应用过滤器

在EaselJS中，我有一个

精灵

，它描绘了一个可以攻击（可以播放动画）和中毒（可以通过

颜色过滤器使单位变绿

）的士兵

但是，这些操作似乎彼此不兼容：在应用

颜色过滤器后，精灵无法再设置动画。这是因为
过滤器
要求缓存其目标，这使得精灵无法设置动画。如果我删除下面的
animation.cache
调用，则动画将运行，但颜色过滤器无法应用

如何将过滤器应用于
精灵
，同时仍允许其设置动画？我是否可以对底层spritesheet图像应用过滤器，而不是直接对
Sprite
本身应用过滤器？每次我想打开和关闭过滤器时，是否需要创建一个新的
Sprite

我有一个客户，其相关代码如下：

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) { stage.update(event); }

var url = "...";
var spriteSheet = new createjs.SpriteSheet({
    images: [url],
    frames: { width:72, height:72 },
    animations: {
        attack:[1,6]
    }
});
var animation = new createjs.Sprite(spriteSheet);
stage.addChild(animation);

attackButton.addEventListener("click", function() {
    animation.gotoAndPlay("attack");
});

poisonButton.addEventListener("click", function() {
    animation.filters = [
        new createjs.ColorFilter(0.5,1,0.5,1,0,0,0,0)
    ];
    animation.cache(0,0,72,72);
});

目前，更新每个帧的缓存是最好的（也是最简单的选项）。不过，这对性能来说并不太好

您还可以过滤和缓存精灵表本身，尽管这有点困难。我曾两次回答这个问题，回答如下：





下面是一些伪代码：

spritesheet.on("complete", function(e) {
    for (var i=0; i<spritesheet._images.length; i++) {
        // Filter Code Here
        // Then
        spritesheet.images[i] = filteredBitmap.cacheCanvas;
    }
}

spritesheet.on（“完成”，函数（e）{
对于（var i=0；这似乎足够在后台播放了。如果你再次按下“毒药”，它会出现在另一个帧上。将缓存更新移动到更新周期，但不确定这对性能有何影响：@Caramiriel出色的侦探工作！这听起来性能非常糟糕，但我意识到我可以在仅触发一个帧的情况下执行同样的操作动画更新上的y。对于小提琴来说，没有区别，但是对于我的游戏（单位将在屏幕上花费大部分时间而不是积极地制作动画），区别是巨大的。重新制作的成本可能是可以忍受的。