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

【问题标题】：JQuery - How can i smoothly resize an image to create a pulsating effect?JQuery - 如何平滑地调整图像大小以创建脉动效果？
【发布时间】：2013-08-16 01:45:50
【问题描述】：

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

当前动画在网站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();
        });
    }); 
};

提前非常感谢，我们真的可以用一只手，

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

杰

【问题讨论】：

我认为你应该对支持它的浏览器（IE9、Firefox、Safari、Opera）使用 css 转换，如果不支持则回退到动画 gif
不要发动战争，但我可以看到另一面。为什么要开发（测试、部署、维护）两种解决方案？
2 个解决方案似乎有点浪费，但还是谢谢！我对 GIF 的唯一问题是它们有时会产生奇怪的像素化效果，或者这只是我创建它们的方式？
我使用的是 IE8，我觉得它看起来很流畅。它在哪些方面看起来很糟糕？是帧率问题还是边缘看起来参差不齐？

标签： jquery image resize scale effect

【解决方案1】：

您的动画不流畅，因为您的 marginLeft 向下取整（图像向左移动一个像素），然后您的宽度向上取整（图像像素向右移动一点，因为它们被重新采样到更大的宽度.) 即使图像没有向右移动，您的眼睛也会告诉您它确实移动了，因为他们认为图像的中间稍微向右移动。这与垂直执行相同的操作一起使动画看起来跳跃。

以下是我认为边缘似乎闪烁或抖动的原因的示例。下面是两张 3 x 1 像素的图像。它们都被调整为 5 x 1 并向左移动 4 个像素。蓝色的是你看到的大小和位置独立变化的地方。红色的只允许在位置变化时改变大小，应该是一个流畅的动画。

【讨论】：

感谢您提供的信息，但与其说是图像的定位（或者至少目前这不是主要问题），不如说是图像本身的边缘不完整。调整大小。随着它变大，边缘似乎开始抖动。
@Jai 我想我们说的是同一件事。我认为它是抖动，但我想这与边缘抖动相同。
我感觉它更多地与图像本身有关，可能是因为它的分辨率不够好，但如果它是边距和宽度，如果我要四舍五入会更好吗我有哪些整数值？
整数作为起始值和结束值将无济于事，因为 jQuery.animate 会将它们按时间片划分。您必须为位置设置动画，然后在动画时手动设置大小。
你的意思是，将动画作为一种循环函数运行？其中大小都是在整个循环中手动设置的，所以本质上是我自己定义时间片吗？

【解决方案2】：

您是否考虑过使用 jQuery UI 效果？

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

另一种选择是让他们摆脱跳动的 75%，转而使用一些黄色闪烁的横幅和有品位的框架使用。

【讨论】：

感谢您的回答，我确实研究过它们，不幸的是，缩放效果似乎与使用动画有同样的问题。我非常希望我能改变客户的想法，但他不是那种人哈哈

【解决方案3】：

那么动画字体大小呢？ IE。 => 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;
}

【讨论】：

谢谢，我喜欢它背后的想法，但是 75% 的格式至关重要（根据我们的客户），因此它需要是图像而不是特定字体，这不太可能如此具体。

【解决方案4】：

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

【讨论】：

谢谢，但我不确定这是否真的会有很大的不同，而且我更喜欢精确测量，我可以预测而不必考虑太多哈哈

【解决方案5】：

Here's an example of the following →

问题是您同时为位置和大小设置动画，并且它们彼此不同步。我了解您这样做是为了使其保持垂直和水平居中。相反，我会使用 (dreaded) 表格将图像保持在正确的位置，并使用 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();
        });
    }); 
};

您可以定位和调整此表的大小，但您需要将其放置在正确的位置（必要时使用绝对定位）。

See example →

【讨论】：

这在 chrome 12 中似乎让我感到震惊。
它产生的图像质量与我已经得到的几乎相同，但我承认移动更加流畅，所以谢谢

【解决方案6】：

我会使用 Flash 为“75%”PNG SUPER 平滑动画，并带有缓动功能。这将非常有效。

【讨论】：

OP 明确表示他需要一个 jQuery 答案。这没有帮助。