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乘1并向左移动4个像素。蓝色的是您所看到的大小和位置独立变化的地方。红色只允许在位置改变时改变大小，并且看起来应该是平滑的动画。

enter image description here

Answer 2

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

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

另一种选择是将它们从75％的脉冲中转移到一些黄色闪烁的横幅和框架的雅致使用中。

Answer 3

那么动画字体大小呢？即=＆GT; 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

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 →

Answer 6

我会使用Flash通过缓动功能为“75％”PNG SUPER设置平滑动画。这将非常有效。

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

6 个答案: