CSS3 テクノロジー - スプライト アダプティブ スケーリング_html/css_WEB-ITnose

MOOC.com によってカスタマイズされた Qixi Festival テーマのエフェクトを完成させるのに 1 週​​間かかりました。うまく実装されていなかった機能の 1 つは、スプライト画像の適応スケーリングです

追記: 以下の実装はすべてモバイル処理に基づいています

元の画像は次のとおりです: キャラクターはスプライト画像を使用しており、その値は絶対座標データを通じて取得されます

問題は明らかであり、キャラクターはズームされた画面でも元のサイズに従って表示されます

後で、暫定セクションは予備計画のために残されました: CSS3 のスケール 処理により要素を直接スケールすることができます

スプライト画像の要素をスケールできるように、スケールを制御します 目視検査はまだ良好です。 。

しかし、これは一連の計算上の問題を引き起こすことになります。Oracle によってスケーリングされた要素はブラウザ レイアウトの元のサイズに従って計算されるため、私もこの解決策には非常に不満です

スプライト図の従来の解決策は次のとおりです。平均 さまざまなデバイスのサイズに適応するために、さまざまなサイズの画像のセットをいくつか作成します

ここでは、特にモバイル側での単一画像の処理について説明します。使用されるテクノロジーは非常に単純で、CSS3 のいくつかの知識ポイントを説明します。まずは元の画像と処理後のエフェクトを見てみましょう

原理を簡単に説明すると、上記のように、行列の変位を観察します。縦3なのでマトリックスは3*3の配置になりますが、ここでは画像が8枚しかありません。対処方法は後ほど説明します

通常、背景画像を要素全体に配置したい場合は、 CSS3 では、background-size:100% 100% を使用できます

画像全体を 1 つの要素で埋めることはできません

単一の画像を作成する方法はどうでしょうか。ここで、画像全体を全体として拡大縮小する方法を考えました。 。 。

3*3 マトリックス、長方形の数に従って水平方向と垂直方向に 100% スケールしました

CSS

1

背景サイズ : 300%

この時点では、誰もが想像していると思いますが、非常に簡単です。パーセンテージによる画像

タイマーフレームアニメーション、CSS3アニメーションアニメーション、キャンバスアニメーションなど、スプライトアニメーションを実装する方法は多すぎます

正直に言うと、モバイル端末でのオンラインテストなどを含むすべてのソリューションを実装しました

現在最も理想的なのは、CSS3 キー フレームを通じてアニメーションを処理することです。アニメーション用に多くのスタイルを記述するのは面倒です

そこで、ここでは、スクリプトを使用してキー フレームを生成し、それらをインラインでロードすることをお勧めします。スタイル、はは~~~ 完璧です~

先ほど、3*3 の行列があるが、合計数が 9 未満の場合はどうすればよいかについて述べました。

そこで、参考のためにキーフレーム アルゴリズムを提供します。これは比較的単純です

これは、誰もが理解しやすいように、簡単な

を作成したものです。興味がある方は、接続してください github にアクセスして、「フォロワー」をクリックしてください、ありがとうございます~~

github リンク: https://github.com/JsAaron/adaptive-sprite