0

私はお互いの上に2つの画像を持っています。一番上のものが別の場所に移動すると、両方とも一種のゆがみ/ぼやけになります。1 秒後、画像は通常の状態に戻ります。

これが起こらないようにするにはどうすればよいですか?

http://jsfiddle.net/jenga/W59c4/

4

3 に答える 3

1

画像の実際のサイズは140x198です。別のサイズに縮小および拡大しています。ラスターイメージの動作方法が原因で、これによりぼやけや歪みが発生します。より大きなソース画像、より高いDPIを使用するか、ソース画像のベースサイズを超えて拡大しないでください。

それ以外の場合、JavaScriptアニメーションの知覚される「滑らかさ」は、クライアントコンピューターのリソースに大きく依存します。ブラウザスレッドのメモリが不足している場合（Firefox + Firebugは、数時間の作業後に最大1 GBの常駐RAM消費量に膨れ上がる可能性があります！）、またはシステムに開始できるリソースがあまりない場合、アニメーションは次のことができます。ぎくしゃくしていて、画面のレンダリングが遅くなったり、グリッチが発生したりする可能性があります。

スケーリングによって引き起こされる歪みを除いて、アニメーションは自分のコンピューターでスムーズに実行されます（：Pを操作するためのリソースがたくさんあります）

ドキュメンテーション

于 2012-08-31T20:40:51.647 に答える
0

ブラックカードのサイズを希望のサイズに変更します。幅600ピクセルのオリジナルを使用して、幅75ピクセルに縮小しています。それが歪みの原因です。

于 2012-08-31T20:41:01.930 に答える
0

私の推測では、黒いカードが表示されていないため、ブラウザは黒いカードをアンチエイリアスしていません。アニメーション中、ブラウザは青いカードの位置とスケールを急速に更新しています。パフォーマンスの測定として、setTimeout のタイトなループが提供する範囲を超えてブラウザが呼吸する余地ができるまで、アンチエイリアスを延期することがあります。

于 2012-08-31T20:48:00.440 に答える