Javascript 动画缩放精灵答案

【问题标题】：Javascript animation scale spriteJavascript 动画缩放精灵
【发布时间】：2012-09-01 23:15:59
【问题描述】：

这是我用来通过 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" );
}

【问题讨论】：

标签： javascript animation sprite

【解决方案1】：

有两种缩放精灵图像的方法。

第一个是使用background-size CSS 属性。例如，如果您的精灵大小为 100 像素 x 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) 中执行。

【讨论】：