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)中执行此操作。