Используя EaselJS, у меня есть анимация, которую пользователь может прокручивать с помощью пользовательского
слайдер. Для отображения 152 кадров размером 1924 x используются 10 спрайт-листов
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 (<250 КБ) и одновременно
было улучшение, отставание было все еще там. Если есть больше
Оптимальный способ сделать это, я еще не видел. Любой вклад в это
сценарий был бы замечательным. Конечной целью для этого является бесперебойная работа на ipad, поэтому любое изображение размером больше 2048 x 2048 не будет летать. </p>
Возможно ли, что я смогу добиться большей производительности, используя спрайты CSS или мои собственные пользовательские методы в javascript?