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

发布于 2024-12-04 20:46:08 字数 446 浏览 3 评论 0原文

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

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

以下是其当前工作原理的示例。

如何将这些动画组合成一个缓动动画？

原文

I have two animations that I would like to group as one animation so that the easing will carry over and continue into the next animation. The second animation needs to start after the first one has finished. This is what I have so far, but the easing starts over when the second animation begins (which is what I would have expected).

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

Here's an example of how it works right now.

How can I group these animations into one easing animation?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雄赳赳气昂昂 2024-12-11 20:46:08

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

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

例如）在 PHP 中使用 GD 库

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

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

最后，只需为该 DIV 标签设置一次动画即可。

如果我理解正确的话，这个想法可能会奏效。

If you want to demonstrate dynamically created percentage value of progress bar with easing effect.

I would use server created background Image

ex) Using GD Library in PHP

and set that image as background of one DIV tag in CSS.

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

Lastly just animate that one DIV tag once.

If I have understood you correctly, this idea might work.

回复收藏 0 原文

权谋诡计 2024-12-11 20:46:08

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

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

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

如何向此 jQuery 动画添加加速？

回复收藏 0 原文

故事灯 2024-12-11 20:46:08

您尝试过使用线性吗？

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

值得注意的是，它确实将两个动画链接在一起，但它确实使它变得平滑。

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

Have you tried using linear?

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

It's note exactly chaining two animations together, but it does smooth it out.

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

回复收藏 0 原文

~没有更多了~