1

使用 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 (<250kb)，虽然有所改进，但仍然存在滞后。如果有更优化的方法来做到这一点，我还没有看到。对这个场景的任何输入都会很棒。这样做的最终目标是在 ipad 上流畅运行，因此任何大于 2048 x 2048 的图像尺寸都不会飞。

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

4

0 回答 0