Javascript Масштаб анимации спрайтов

Question

Это спрайт я использую для анимации объекта с помощью CSS. Каждый кадр имеет ширину 224 пикселя, поэтому свойство background-position для div увеличивается на -224px каждый кадр, и цикл продолжается. Проблема в том, что ширина моего div не фиксирована. Я использую процентную ширину div для независимого разрешения разрешения. Поэтому я хочу, чтобы мой рама шириной 224 пикселя масштабировалась по ширине div и перемещалась влево по той же сумме в каждом кадре. Надеюсь, вам это ясно. Вот функция JS, используемая для анимации div.

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

Существует два способа масштабирования спрайт-изображения.

Первый должен сыграть с атрибутом CSS background-size. Если ваш размер спрайта составляет, например, 100 пикселей на 100 пикселей, по умолчанию 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).