Question

我有两个动画，我想将其分组为一个动画，以便缓动将继续并继续进入下一个动画。第二个动画需要在第一个动画完成后开始。这是我到目前为止所做的，但是当第二个动画开始时（这是我期望的），缓和开始了。

$progressBar.animate({width: progressBarWidth + '%'}, barAnimationSpeed, 'swing', function(){
    $overGoalBar.animate({width: overGoalBarWidth + '%'}, barAnimationSpeed, 'swing', function(){});
});

Here's an example of how it works right now

如何将这些动画分组为一个缓动动画？

Answer 1

如果您想演示动态创建的进度条百分比值，并带有缓动效果。

我会使用服务器创建的背景图像

ex）在PHP中使用GD库

并将该图像设置为CSS中一个DIV标记的背景。

#progressBar { background-img('Dynamically-created-image.jpg'); }

最后只为一个DIV标签设置一次动画。

如果我理解正确，这个想法可能有用。

Answer 2

这是一个很棒的在线工具，用于编写自定义缓动函数...

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

此外，这里有更多关于缓和的信息......如果你有一个缓动函数，你不需要缓动插件。从其中包含的链接中，您可以看到每个链接的演示，然后与其后面的缓动函数进行比较...

How can I add aceleration to this jQuery animation?

Answer 3

您是否尝试过使用linear？

$('#progressBar').animate({width: 50 + '%'}, 2500, 'linear', function(){
    $('#overGoalBar').animate({width: 49 + '%'}, 2500, 'linear', function(){});
});

它注意到完全将两个动画链接在一起，但它确实将它平滑了。

http://jsfiddle.net/dkBMA/11/

jQuery缓动：如何将动画链接在一起作为一个缓动动画？

3 个答案: