JQuery - 如何平滑地调整图像大小以创建脉动效果？

Question

嘿,我和我的一个朋友在一个网站上工作,从一开始,我们的客户就对我们的一个动画的质量感到不满.这个动画拍摄一个图像并使其变大,然后使其变小,并重复以获得脉动效果.整个动画中的不透明度也会发生变化.

当前动画位于网站http://laveryrowe.com的主页上.有问题的动画是75%的图像,您可以在到达网站后立即看到.

我在safari,firefox和Internet Explorer中测试过.动画只是关于firefox,但是safari和Internet Explorer不能为我们的客户生成足够平滑的大小.

有谁知道比我用过的更好的动画制作方法？(请参阅下面的代码并查看网站上的示例).

function pulse() {
    $('#seventyfive').animate({
        marginTop: 175, 
        marginLeft: 25, 
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            marginTop: 161.95, 
            marginLeft: 15.2, 
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

非常感谢,我们真的可以用一只手,

编辑: 问题不在于定位,(或者至少我认为不是),而是更多地与图像调整大小的方式有关,你可以注意到随着它变大而产生的抖动边缘.随着不透明度的增加,它似乎看起来更好,但是当它不透明时我需要相同的质量.

贾伊

Answer 1

您的动画不平滑，因为您的 marginLeft 向下舍入（图像向左移动一个像素），然后您的宽度向上舍入（图像像素向右移动一点，因为它们被重新采样到更大的宽度。）尽管图像没有向右移动，但您的眼睛会告诉您它已经向右移动，因为它们认为图像的中间稍微向右移动。这与垂直执行相同的操作一起使动画看起来在跳跃。

以下是我认为边缘似乎闪烁或摇晃的原因的示例。下面是两张 3 x 1 像素的图像。它们的大小都调整为 5 x 1 并向左移动 4 个像素。蓝色的是您所看到的，其中大小和位置独立变化。红色的只允许在位置改变时改变大小，并且应该看起来是一个平滑的动画。