使用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或我自己的自定义方法获得更高的性能?