[英]Javascript animation scale sprite
这是我用来通过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" );
}
缩放子画面图像有两种方法。
第一个是使用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)
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.