2

ここに画像の説明を入力

これは、css を介してオブジェクトをアニメーション化するために使用しているスプライトです。すべてのフレームの幅は 224px であるため、div の background-position プロパティはフレームごとに -224px ずつ増加し、サイクルが続きます。問題は、div の幅が固定されていないことです。解像度に依存しないように、div のパーセンテージ幅を使用します。したがって、224px 幅のフレームを div の幅に合わせて拡大縮小し、フレームごとに同じ量だけ左に移動します。それがあなたに明らかであることを願っています。div をアニメーション化するために使用される JS 関数を次に示します。

function moveTail() {
    if ( typeof moveTail.counter == 'undefined' ) {
        moveTail.counter = 0;
        moveTail.object = $('#genietail');
    }

    if( moveTail.counter == 42 )
        moveTail.counter = -1;
    ++moveTail.counter;
    moveTail.object.css('background-position', moveTail.counter*-224 + "px 0px" );
}
4

1 に答える 1

1

スプライト画像をスケーリングするには 2 つの方法があります。

1 つ目は、background-sizeCSS 属性をいじることです。たとえば、スプライト サイズが 100px x 100px の場合、デフォルトでbackground-sizeは が値100px 100pxになりますが、設定すると200px 200px、表示される画像サイズが 2 倍になります。

あなたの場合、次のようになります。

var spriteSize = { height: 224, width : 224 * 20 };
var imageSize = { height: 224, width : 224 };
var backgroundWidth = Math.floor((moveTail.object.width()  / imageSize.width) * spriteSize.width);
var backgroundHeight = moveTail.object.height();

moveTail.object.css("background-size", backgroundWidth + "px " +  backgroundHeight + "px");
moveTail.object.css('background-position', moveTail.counter * -moveTail.object.width() + "px 0px" );

2 つ目は、CSS 3 属性transformをscaleXとで使用することscaleYです。表示されるサイズを div で 2 倍にしたい場合は、CSS で行うことができますtransform: scaleX(2) scaleY(2)。

于 2012-09-01T15:01:17.473 に答える