EaselJSを使用して、ユーザーがカスタムスライダーでスクロールできるアニメーションを作成しました。10枚のスプライトシートを使用して、サイズ1924x1708の152フレームを表示します。
//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でスムーズに実行することです。そのため、2048x2048より大きい画像サイズは飛行しません。
cssスプライトまたはjavascriptの独自のカスタムメソッドを使用してパフォーマンスを向上させることは可能ですか?