0

スプライト画像をdiv全体に移動してアニメーションを作成しようとしています。スプライト画像には、アニメーションの各フレームが含まれています。「キャンバス」のサイズは600x624ピクセルです。スプライトシートの各フレームは600ピクセルごとに配置され、一度に600ピクセルずつ画像を移動します。

これが私がこれまでに持っているものです... voyced.com/crownacre/www/demo/sprite.html

次のJavaScriptを使用して、画像を画面上で移動しています...

(function myLoop(i) {
    setTimeout(function() {
        defImg.css({
            right: '-=600'
        });
        if(--i) myLoop(i); //  decrement i and call myLoop again if i > 0
    }, 60) // delay ms
})(114); // number of frames in the sprite

69000pxのスプライトシートの全幅としてすべて左に浮かんでいるいくつかのスプライトを使用しました。これは、1つの画像だけを使用すると、さらに多くの問題を引き起こします。したがって、なぜ私は現時点で4を持っています。

だから...私が抱えている問題は、アニメーションが数回一時停止することです。Firefoxでは（私にとっては）問題ないように見えますが、Chromeでは気づき、IEでは見逃すことはできません。

また、常に16200ピクセルごとに途切れるので、これは1つのスプライトを画面上の次のスプライトに移動することに関連していると思います。

アイデアは人々を喜ばせますか？

前もって感謝します！

4

3 に答える 3

1

スプライトアニメーションプラグインを使用してみましたか？

http://www.spritely.net/

あなたが望むことをします、彼らのデモでうまく動くようです。

于 2013-01-10T14:43:55.773 に答える
1

最初に言わせてください：あなたがスプライトとして表示しようとしている巨大な画像は、スプライト/アニメーションが正確に使用されているものではありません。実際の ソリューションをよりよく調べることができますが<canvas>（特にアニメーションを見る場合）、それにはより複雑なJavaScriptスキルが必要になります。

とにかく、スタッターの問題は、プロパティですべてがfloat編集された複数の画像を使用しているためです。別の画像を表示する必要があるたびに、途切れに気付くことがあります。これはブラウザエンジンと関係があり、実際の画像をペイントする必要があるかもしれません（かなり大きいので難しいです）。leftpositionsliderright

したがって、複数の画像を使用する代わりに、1つの画像を使用して（注意してください。これは、.JPGまたは.GIFよりコンパクトになる傾向があるため.PNG）、実際のCSSスプライトをで使用することもできbackground-positionます。

これは、コードと1つの単一の画像を使用する例です。幸運を！

于 2013-01-10T15:16:48.653 に答える
0

フィードバックをありがとうございました。私が抱えていた問題を解決するのに役立つヒントを組み合わせて使用​​しました。

  1. Spritelyは非常に役立ちました。基本的に、@ marcoKが提案したのと同じことを行い、background-positionプロパティを調整します。このプラグインは、スプライトの各フレームを制御するための確実な方法を提供し、指定されたフレームに到達したときにコールバックを作成します-素晴らしいです！

  2. もう一つの問題は巨大なスプライトでした。モバイルサファリでは3MPを超えるものは許可されないため、画像を作成できる最大サイズは4800x624でした。最後のフレームに到達したときに次を呼び出す個別のアニメーションとして、それぞれ15個あります。私はこれがスムーズに機能することに非常に懐疑的でしたが、それはすべてのブラウザで機能します。

リクエストの数にはあまり満足していませんが、pngを最適化した後、プリローダーを追加してもファイルサイズはそれほど悪くありません。

結果に本当に満足しています... http：//www.crownacre.voyced.com/そしてFlashを使用しないもう1つの理由！

于 2013-01-11T11:09:05.800 に答える