如何构建自定义jQuery缓动/弹跳动画? [英] How To Build Custom jQuery Easing/Bounce Animations?

问题描述

我熟悉jQuery动画功能，并且还遍历了各种 jQuery UI缓动功能.不幸的是，它们都没有显示出与我正在寻找的相同的动画效果，因此可以创建自己的缓动功能吗?

I am familiar with the jQuery animate function and I have also gone through the various jQuery UI easing functions. Unfortunately none of them appear as the same animation effect I'm looking for so is it possible to create your own easing functions?

我尝试的动画可以在 Apple Mac网页上看到，其中包含动态加载的产品顶部的小部件.初始项目似乎从顶部滑入，然后在就位着陆后产生反弹的效果.是否可以使用自定义jQuery代码重新创建此宽松样式?还是可能建立自己的第三方便捷功能?

The animation I am attempting can be seen on the Apple Mac webopage with the dynamically loaded products widget at the top. The initial items appear to slide in from the top and then give a bounce-back effect after landing in place. Is it possible to recreating this easing style using custom jQuery code? Or possibly build your own 3rd party easy functions?

我提供了我正在谈论的内容的屏幕，希望有人可以提供解决方案.在此先感谢:)

I've included a screen of what I'm talking about and hopefully somebody can offer a solution. Thanks in advance :)

推荐答案

在此处查看我的 演示

See my demo here

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

The main idea is performing 2 continuous animations using easeOutCubic effect:

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缓动/弹跳动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！