37

パフォーマンス、ファイルサイズ (および私の正気) に最適なのはどれですか: .gifCSS (および必要に応じて JS) を使用したアニメーション付きの s またはスプライトシート?

ファイルサイズ

だから、私はフレームの圧縮を理解していないので、ここでどちらが良いかは正直わかりません.gif. 私の推測では、私が正しくスイングできれば、最終的にはほぼ同じになると思いますが、これが間違っている場合、またはこれが別の理由による要因である場合はお知らせください.

ここでの主な利点は、1 つのシートに複数のアニメーションを含めることができるスプライトシートにあると思います (ここでは、数百のアニメーション化されたスプライトについて話しています)。また、以前の質問の 1 つに基づいて、CSS を使用して単一のフレームを簡単に引き出すことができることを知っていimage-rect()ます。ファイルの場合と同様に、.gifそれぞれのアニメーションの長さが異なる可能性があるため、実際には 1 つのアニメーションしか含めることができません。

補遺:また、アニメーションの一部は特定のスプライトに対して繰り返されるため、スプライトシートにはフレームのコピーが 1 つだけ.gif必要ですが、(少なくとも私の知る限り) すべてのフレームが必要です。

パフォーマンス

ここでもう一度推測すると.gif、他のことのために多くの JS コードを実行しているのと同時に、すべてのアニメーションを管理する必要がないため、アニメーション化された s の方が大幅に高速になることが直感でわかります。しかし、確かなことはわかりません。おそらく、ブラウザは 30 以上.gifのアニメーションで大きな打撃を受けるでしょう。

私の正気

スプライトシートは私のために作られているので、私の作業は最初のうちは高くなります (書き込みとアニメーションエンジン、およびシートごとに 1 つまたは 1 つのハンドコーディング)。しかし、いったん記述されると、それは永久に使用可能であり、スプライトシートの変更にはコードへの最小限の変更しか必要ありません。

一方、アニメーション.gifファイルは、Photoshop で簡単に作成できるものではありません (より優れたプログラムがあれば、お知らせください) 。そして、ひとつひとつ手作業で行わなければならず、長いプロセスです。しかし、一度作ってしまえば、変える必要はありません。私のスプライトシートはすぐに変更される可能性は低いので、1 回で完了する可能性があります。

私の質問 (tl;dr)

これは、ファイルサイズ (Web 経由の HTTP ヘッダー転送を含む)、最新のブラウザーでのパフォーマンス、および作成の容易さ (優先度は最も低いですが、私の仕事をより簡単にすることができれば、またはこれに異議を唱えていただければ幸いです)、.gifスプライト シートから作成されたアニメーション ファイル、または単に CSS と既に持っているスプライト シートを使用していますか?

例

アニメーション スプライト (60 フレーム)VSスプライトシートと同じアニメーション

4

8 に答える 8

17

気になったのでJavaScriptで実装してみました。

JsFiddle デモ(コメントに従って編集されたイメージ ホスト)。

私が見つけたもの：

  • できます！そして、予想以上に良い。
  • CPU 使用率は実際には低いです (IE6 の恐竜ではテストしていませんが、「修正」が必要になると確信しています)。
  • サイズをカットしたり、品質を大幅に向上させることができます (ソースによって異なります)。
  • Mikey G. のコンセプトとは異なり、これはズームイン/ズームアウトしても機能します (両方で試してみてください)。
  • gif と同じように可変フレーム期間を使用できます。
  • より多くの作業があれば、プレーヤーのような API (一時停止/再開、早送り、スキップなど) を持つことさえできます。
  • 他の形式を活用: 8 ビット アルファ PNG、プログレッシブ JPEG、<canvas>SVG、WebP ...

詳細については、JsFiddle デモ ページを参照してください。

于 2012-04-13T11:10:29.103 に答える
15

これについて検討したかっただけです。1 つのページに複数のアニメーションがあるシナリオは多数あります。同じページにインタラクティブな複数のアニメーションがあるシナリオ。GIF よりも CSS アニメーションを含むスプライト シートを使用することをお勧めします。ここに私のデモがあります：

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

ご覧のとおり、スプライト バージョンは簡単にロール オーバーを処理しますが、GIF ベースのバージョンはクルチャンクして停止します。

繰り返しますが、これは 1 つのシナリオにすぎませんが、役に立つかもしれないと考えました。また、優れたコード スニペットとしても機能します。

感謝。

于 2014-07-21T14:52:25.163 に答える
9

アップデート：

これを最初に投稿して以来、スプライト シート アニメーションをブラウザーで動作させることができて幸運でした。ブラウザー/コンピューターは改善されましたか、それとも私のやり方が間違っていたのでしょうか? 何も思いつきません。いずれにせよ、この回答は少し時代遅れですが、歴史的な目的のためにここに残します。今日、より関連性のある、より優れた新しい回答があります。

GIF は GPU アクセラレーションで非常にうまく機能します。部分的なフレームの更新は、一部のピクセルのみを再描画する必要があることを意味するためです。GPU を使用しない描画とは異なり、ブラウザーはフレームごとにすべてのピクセルを再描画する必要はありません。スプライト シートでは、ほとんど透明なレイヤーを重ねていないため、とにかく後者を強制しています。したがって、GIF を使用すると、特に最新のブラウザーでは確実にパフォーマンスが向上します。

GIF には明らかに 256 色に制限されているという欠点がありますが、サンプルに基づくと、それは問題にはなりません。ただし、スプライトシートを使うとどうしても問題になり、GIFが使えなくなります。これは、おそらく圧縮が悪いことを意味します。無地の領域が広く、水平方向に多くの繰り返しがあり、特定の領域に色がほとんどないため、GIF のLempel-Ziv(-Welch)圧縮の実装から大きなメリットが得られます。

于 2012-02-10T01:50:55.603 に答える
5

私はこれを見てみたい：

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

個人的には、スプライトシートを使用するのは気が狂っていると思いますが、それ以外の方法で持ち込む必要があるアニメーション GIF の数に依存すると思います

あなたの制限が何であるかはわかりませんが、CSS3を使用step()してスプライトシートをアニメーション化するフィドルは次のとおりです。

http://jsfiddle.net/simurai/CGmCe/

于 2012-02-04T10:27:11.680 に答える
1

少なくとも現在のブラウザでは、CSSスプライトに関連するもう1つの問題は、「ジッター」のスケーリングです。GIFファイルを必要なサイズ（おそらく小さいサイズ）にスケーリングできますが、CSSスプライトをスケーリングしようとすると、丸め誤差が原因でジッターが発生します（background-positionは、元の座標ではなく、スケーリングされた座標に基づいています）。スケーリングされたアニメーションスプライトを処理する別の方法を誰かが知っている場合は、それを知っておくと便利です。

ImageMagickは、アニメーションGIFまたはスプライトを作成するのに最適です。

于 2013-02-11T22:42:45.140 に答える
1

GIF アニメーションはスプライトを繰り返すことができ、部分的なフレーム更新を使用して、同じスプライトを異なる位置に配置することもできます。単純に非インタラクティブなアニメーションを表示したい場合、アニメーション gif にはすべての利点がありますが、色以外は 256 色のパレットを使用する必要があります。

確かに使いやすいMicrosoft GIF Animatorを使用したことを覚えています。私はPhotoscapeについて何も知りませんが、ネット上の言葉は、それが少し重い代替手段であるということです。

于 2012-02-04T11:03:56.870 に答える
0

何百ものスプライトについて話している場合は、.gif を使用してください。アニメーションが複雑になればなるほど、アニメーションの数が増えると、ブラウザの負荷が高くなります。これは、アニメーション .gif 自体を再生するだけでなく、アニメーションを「スライドごと」にレンダリングするために使用されるリソースが増えるためです。

ブラウザ間の互換性を考慮すると、これはさらに悪化します。いつものように、IE は大きな失敗をします。大量の小さな .gif でサイトが詰まるのを見たことはありませんが、単純な JavaScript で詰まるサイトは常に見ています。何百ものcss / jsアニメーション画像が常に反転していると、どれほど悪くなるか想像することしかできません.

よろしければ、これらのアニメーションはどのようなサイト向けですか? それはある種のアニメーションのポートフォリオですか、それとも...?

于 2012-02-09T21:59:31.440 に答える