在画架中跨越多个精灵表时会出现断续续续的动画

时间:2012-02-22 22:08:47

标签: javascript animation sprite easeljs

使用EaselJS,我有一个动画,用户可以使用自定义滚动 滑块。它使用10张精灵表来显示152帧,大小为1924 x 1708.

//images were declared above in style | var chromophoreAni0 = new 
Image(); | 
var data = { 
            images: [chromophoreAniImage0, chromophoreAniImage1, 
chromophoreAniImage2, chromophoreAniImage3, chromophoreAniImage4, 
                    chromophoreAniImage5, chromophoreAniImage6, 
chromophoreAniImage7, chromophoreAniImage8, chromophoreAniImage9], 
            frames: {count: 152, width: 356, height: 316}, 
            animations: {all: [0, 151]} 
        }; 
chromophoreSpriteSheet = new SpriteSheet(data); 
chromophoreAni = new BitmapAnimation(chromophoreSpriteSheet); 
chromophoreAni.gotoAndStop(1); 
stage.addChild(chromophoreAni); 
stage.update(); 
//whenever the slider changes position | 
gotoAndStop(currentSliderFrame) | 

动画有效但每当有动作时都会出现非常明显的打嗝 动画在精灵表之间跳跃。既然用户可以去 从滑块的一端到另一端尽可能快,它可能 是动画正在快速播放以保持图像 起来。但是,滚动时动画只能是平滑的 以蜗牛的速度。我也想到了精灵表的大小 1424 x 1708可能太大而无法以如此高的速度加载。所以我 将图像尺寸减小到低至1424×632(<250kb)和同时 有改善,滞后仍然存在。如果还有更多 这样做的最佳方法,我还没有看到它。对此的任何输入 情景会很精彩。最终目标是在ipad上平稳运行,因此任何大于2048 x 2048的图像都不会飞。

我是否有可能在javascript中使用css sprite或我自己的自定义方法获得更高的性能?

0 个答案:

没有答案