Javascript動畫比例精靈

Question

這是我用來通過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" );
}

Answer 1

縮放子畫面圖像有兩種方法。

第一個是使用background-size CSS屬性。 例如，如果您的精靈大小為100px x 100px，則默認情況下background-size的值為100px 100px ，但是如果將其設置為200px 200px則它將顯示的圖像大小加倍。

在您的情況下，它看起來像這樣：

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" );

第二個方法是將CSS 3屬性transform與scaleX和scaleY 。 如果要使div倍增顯示的大小，可以在CSS transform: scaleX(2) scaleY(2) 。