如何构建自定义的jQuery Easing/Bounce动画？

Question

我熟悉jQuery动画函数，并已经了解了各种jQuery UI缓动函数。不幸的是，它们中没有一个能产生我正在寻找的相同动画效果，那么是否可以创建自己的缓动函数？

我试图制作的动画可以在Apple Mac网页上看到，位于顶部的动态加载产品小部件。最初的项目似乎从顶部滑入，然后在落地后产生反弹效果。是否可能使用自定义的jQuery代码重新创建这种缓动样式？或者可能构建自己的第三方轻松函数？

我附上了屏幕截图，希望有人能提供解决方案。先感谢您:)

- Jake

---

看一下这个 - https://dev59.com/wm025IYBdhLWcg3wl3Em，它应该能帮助你理解如何构建或添加缓动类型到缓动函数中。http://forrst.com/posts/How_to_create_custom_jQuery_easing_functions-OKb - Jay Blanchard

你提供的示例页面在IE（低于版本10）中无法正常工作，这表明它实际上（大部分）是使用CSS动画。只有一些项目实际上是使用JavaScript / JQuery进行动画处理，例如包含产品类别的单个DIV滑入视图，底部的小三角也似乎是通过使用JS进行动画处理的。查看Animate.css示例，看看是否有任何一个适合您的需求，或者您可以根据其中描述的CSS动画/转换技术自己制作。 - TildalWave

@FarrukhSubhani - 看起来是通过CSS动画实现的：http://images.apple.com/global/styles/productbrowser.css 第169行到第340行。 - Derek 朕會功夫

@ Derek 谢谢你，这似乎是正确的...我相当有信心这个动画是基于 JS 构建的，但我将不得不使用源代码来尝试一下。 - Jake

@Derek，我正在查看所有的关键帧，但是很遗憾我对这种技术非常陌生。你有任何推荐的文章吗？我只是不明白它们如何在DOM完成后强制加载动画。通常CSS3动画需要某种事件，比如hover或focus。但关键帧必须是另一回事 - 我会继续挖掘，但非常感谢你的帮助。 - Jake

Answer 1

在这里查看我的演示

主要思路是使用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");
});

- phnkha

---

这是一个很好的解决方案，感谢jQuery。享受奖励吧！我将开启另一个问题，寻找使用CSS3关键帧的解决方案。 - Jake