Question

我正在尝试为精灵表制作动画并让它具有响应能力。我有动画工作，但是当我缩小它时，动画变得不稳定，图像在顶部重复（非常轻微，可能是1或2像素值）

这里可以看到小提琴：http://jsfiddle.net/gag847kp/2/

要复制该问题，请将比例更改为小于1的值，例如.8

div的宽度/高度与精灵表宽度/高度的比例似乎很好，我不确定导致问题的原因。例如，图像最初为250x241。当我缩放它.8时，它变为200x192.8，两者的比率为1.037344398340249。

同样，div的背景大小是一致的，宽度为200，缩放时高度为4820。（它们是25帧，每帧高度为192.8 = 4820）

实际的精灵表重新调整代码：

function resizeAnimations() {
    $.each(animations, function(index, animation) {
        resize(animation.$ele);

        var width = animation.originalWidth * scale;
        var height = (animation.originalHeight *  animation.animation.frames) * scale;

        animation.$ele.css('background-size', width + "px " + height + "px");
    });
}

Answer 1

由于浮动数字，您的（已调整大小的）动画精灵会遇到 子像素 问题。

发言结果值： jsFiddle demo

var sprite_height_scaled = (animation.originalHeight * scale) << 0;

（以上<<是最快的;你也可以使用以下之一：）

(animation.originalHeight * scale) | 0

parseInt(animation.originalHeight * scale, 10)

Math.floor(animation.originalHeight * scale, 10)

如果它仍然出现在这个问题的另一个方面：*

// 25(frames) / 6025px(sprite-height) = 241px frame height
// now let's scale
var scale = 0.8;
console.log( (6025/25)*scale );     // 168.7px
// We cannot have subpixel values so let's floor the result:
console.log( (6025/25)*scale | 0 ); // 168px
// Still, the main problem is: if we resize the background to 0.8 scale,
// will every frame's first pixel line inherit the 
// previous frame (lower line) sub-pixel data?
// Most likely.

只需在编辑器中打开您的精灵，然后在每个帧之间添加2 * expected-min-scale (round to even)透明像素。

Answer 2

尝试向下舍入计算的调整大小尺寸。

function resize($ele) {
    $ele
        .height(Math.floor($ele.height() * scale))
        .width(Math.floor($ele.width() * scale));
}

我认为自然行为是.round()。

我说实话，你不能像其他情况那样获胜，.ceil()可能比.floor()更好。

更好的解决方案是为您的精灵帧提供更大的余量。

响应精灵表动画不能很好地缩放

2 个答案: