如何构建自定义 jQuery 缓动/弹跳动画?

Posted

技术标签:

【中文标题】如何构建自定义 jQuery 缓动/弹跳动画?【英文标题】:How To Build Custom jQuery Easing/Bounce Animations? 【发布时间】:2013-01-05 22:49:32 【问题描述】:

我熟悉 jQuery animate 功能,也经历过各种jQuery UI easing functions。不幸的是,它们都不是我正在寻找的相同动画效果,所以是否可以创建自己的缓动函数?

我正在尝试的动画可以在Apple Mac webopage 上看到,动态加载的产品小部件位于顶部。最初的项目似乎从顶部滑入,然后在着陆后产生反弹效果。是否可以使用自定义 jQuery 代码重新创建这种缓动样式?或者可能构建您自己的第 3 方简易函数?

我已经包含了我正在谈论的内容的屏幕,希望有人可以提供解决方案。在此先感谢:)

【问题讨论】:

看看这个 - ***.com/questions/5916058/… 它应该可以帮助您了解如何为缓动函数构建或添加缓动类型。 forrst.com/posts/… 任何人都在查看此页面上的动画 javascript 位于 images.apple.com/global/scripts/productbrowser.js 并在 addVendorEventListener("animationStart",m); 行添加动画对于产品网格中的每个元素。 您提供的示例页面在 IE(版本 10 以下)中的工作方式不同,这表明它实际上(大部分)是 CSS 动画的。只有少数项目实际上是使用 JavaScript/JQuery 进行动画处理的,例如包含滑入视图的产品类别的单个 DIV,并且底部的插入符号似乎也使用 JS 进行了动画处理。看看Animate.css examples,看看其中是否符合您的需求,或者您是否可以根据其中描述的 CSS 动画/转换技术“自己动手” @FarrukhSubhani - 看起来它是通过 CSS 动画完成的:images.apple.com/global/styles/productbrowser.css Line 169Line 340 @Derek 谢谢你,这似乎是正确的。我相当有信心这个动画是建立在 JS 上的,但我必须使用源代码来玩。 【参考方案1】:

见我的demo here

主要思想是使用easeOutCubic效果执行2个连续动画:

html

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

JS:

$('div.left').animate(top: 410, left: 10, 300, "easeOutCubic", function()
    $('div.left').animate(top: 400, left: 20, 300, "easeOutCubic");
);

$('div.center').animate(top: 420, 300, "easeOutCubic", function()
    $('div.center').animate(top: 400, 300, "easeOutCubic");
);

$('div.right').animate(top: 410, right: 10, 300, "easeOutCubic", function()
    $('div.right').animate(top: 400, right: 20, 300, "easeOutCubic");
);

【讨论】:

这是一个很好的 jQuery 解决方案,谢谢。享受赏金!我将打开另一个问题来寻找使用 CSS3 关键帧的解决方案。

以上是关于如何构建自定义 jQuery 缓动/弹跳动画?的主要内容,如果未能解决你的问题,请参考以下文章

WPF中的动画——缓动函数

有没有办法通过自定义缓动方程使用 UIView 动画

WPF中的动画——缓动函数(转)

如何利用CSS3动画实现弹跳效果

如何使用 Core Animation 创建自定义缓动功能?

2021-09-25 WPF上位机 44-缓动动画