1

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の独自のカスタムメソッドを使用してパフォーマンスを向上させることは可能ですか?

4

0 に答える 0