約 100 フレームの、アニメーションするロゴのあるページが必要です。画像交換技術 (x 秒ごとに画像を変更する) を使用することが実現可能かどうか疑問に思っていましたか、それともフレーム数のために推奨されませんか? ビデオを使用する次善の策はありますか? どの方法がパフォーマンス的に最も優れているかを知りたかっただけです。ありがとう!
2 に答える
spritely
短いコードと完了により、あなたにとって最善の策になると思います。
ドキュメントから:
Spritely
は 2 つの主要なメソッドのみを持つ単純なプラグインでsprite()
あり、pan()
どちらも要素の background-image css プロパティを単純にアニメーション化します。この 2 つの違いは、'sprite'
画像には 2 つ以上'frames'
のアニメーションが含まれているのに対し、'pan'
画像には左または右にパンしてから繰り返す連続した画像が含まれていることです。通常、どちらの場合も、これには png ファイル (透明度の有無にかかわらず) を使用します。
You might wish to use a transparent gif for Internet Explorer 6
、おそらく見栄えは良くありませんが。html 要素は、スプライトを表示するのに適切なサイズである必要がありますが、通常、背景画像は html 要素よりも大きく、spritely メソッドは html 要素内で背景画像を再配置します。
彼らはこの画像を使ってアニメーション化しています:
これはトリガーコードです:
$('#bird').sprite({fps: 12, no_of_frames: 3});
画面をクリックしたときにマウスがスプライトを引き寄せるようにするには、次のようにします。
$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();
ここで詳細を見つけることができます: http://www.spritely.net/documentation/
どのブラウザをサポートしますか? 画像は何らかの方法で透明になりますか?
最新のブラウザーのみをサポートする場合は、スプライト画像とCSS3 Animationを使用したスプライト アニメーションを使用できます。
すべてのブラウザーをサポートしたいが、画像を透明にする必要がない場合は、gif を作成するだけです。
それから、javascript にも 2 つの方法があります。1つは画像の交換で言及した方法で、もう1つは@MrXenotypeが言うように、スプライト画像を使用しています。これは2つの方法で行うことができます。スプライトされた画像を背景画像として使用し、JS を使用して背景位置を変更します。もう1つは、彼が言うように、スプライトされた画像レイヤーを「表示長方形」に移動します。