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();
        });
    }); 
};

预先非常感谢，我们真的需要一只手，

编辑： 问题不在于位置（或者至少我不认为如此），而更多地与图像调整大小的方式有关，当它变大时，你会注意到边缘的抖动。随着不透明度的增加，它看起来看起来更好，但当它不透明时我需要相同的质量。

Jai

Answer 1

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

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

Answer 2

您研究过使用 jQuery UI 效果吗？

http://jqueryui.com/demos/effect/#default

另一种选择是与他们交谈摆脱了75%的脉动，进入了一些黄色闪烁的横幅和有品味的框架使用。

Answer 3

那么如何设置字体大小的动画呢？即=> http://jsfiddle.net/steweb/D3X7R/

js/jQuery

(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
})(false);

标记：

<div id="seventyfive">75%</div>

Css：

#seventyfive{
    position:absolute;
    font-size:100px;
    font-weight:bold;
}

Answer 4

您可以尝试使用 += 某个数量，而不是每次都动画到特定值。我以前用过它，从未发现任何问题。

Answer 5

这是以下示例 →

问题是您正在为两个同时调整位置和大小，并且它们彼此不同步。我知道您这样做是为了使其垂直和水平居中。相反，我会使用一个（可怕的）表格来将图像保持在正确的位置，然后用 Javascript 调整大小和不透明度，如下所示：

<table id="table75">
    <tr>
        <td><img id="seventyfive" src="http://laveryrowe.com/assets/images/heading_index_75.png" /></td>
    </tr>
</table>

#table75 { width:XXXpx; height:YYYpx; }
#table75 tr { vertical-align:middle; }
#table75 tr td { text-align:center; }

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

您可以根据需要定位和调整此表格的大小它位于正确的位置（如有必要，使用绝对定位）。

查看示例→

Answer 6

我会使用 Flash 为“75%”PNG 制作超级平滑的动画，并具有缓动功能。这会非常有效。