サブピクセルの精度とアンチエイリアシングで滑らかなシフトがどのように見えるか、そしてこの効果なしで同じシフトがどのように見えるかを見ることができる小さな例を作成しました。
これはどのように行われますか？
これは、元の画像の「スマートな」縮小と同様に、スプライトの助けを借りて行われます。 さて、順番に。
まず、マシンの大きな画像を撮りました。
次に、不要なバックグラウンドからそれをクリーンアップしました。
次に、 1つの大きなファイル （2400x260ポイント）に600ポイントのステップで4台の同一の車を配置しました。
その後、マシンの各コピーを前のフレームに対して1ポイントずつシフトしました。 つまり、2台目のマシン-ポイントまで、3台目-2台、4台目-3台すべてです。 スプライトには、4フレームで4ポイントの距離を超えるマシンがあります。
残っているのは最後のアクションです。車が4フレームで1ポイントを通過し、できるだけスムーズに移動するようにします。 これを行うには、画像を4倍に縮小し、エディターで縮小するときにアンチエイリアスオプションを有効にすることを忘れないでください。このような画像が得られます（ちなみに、この例で使用します）。
以下は、倍率がマシンが1つのポイントをどのように通過するかを示す写真です。
それからそれは小さいです。このスプライトの使い方は？ 最も簡単な方法：画像を移動しながら、小数部分を決定し、それを使用して目的のフレームを選択します。 Webツールでは不正確な位置決めができないため、必要な座標にスプライトを正確に配置します。たとえば、位置X = 15.25では、X軸上の15ポイントに画像を配置し、小数部分をスプライトの数に転送します。 2番目のスプライト。
原則として、同様の方法で、2つの軸に沿って移動できます。また、この方法を使用して、たとえば、カスタムボタンまたは他の同様のjs効果を持つ背景のcssアニメーションなどのスムーズな背景アニメーションを作成できます。