使用 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 x 632 (
我是否可以使用 css sprites 或我自己的 javascript 自定义方法获得更好的性能?