jQuery 缓动弹跳动画

jQuery easing Bounce animation

本文关键字：动画 jQuery      更新时间：2023-09-26

我正在尝试为动画添加弹跳效果，但无法这样做。我一直在关注jQuery API animate（）页面，但我一直失败。我正在尝试创建一种效果，使我的对象从顶部滑入并在安顿到位之前反弹。

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);

我不太确定您希望反弹的具体元素，但请尝试以下操作：

$(this).animate({ "top" : "+=100px" }, 400, "easeOutBounce");

这需要jQuery Easing plugin。更多信息，github或CDN。

演示：

$("#target").animate({ "top" : "+=100px" }, 400, "easeOutBounce");
#target{ position:absolute; left:50px; top:50px; background:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div id='target'>Hellow World<div>

要使用 jQuery 实现bounce缓动效果，您需要扩展有限数量的可用缓动方法并添加更多高级缓动方法。这是一个插件，它提供了许多很酷的缓动功能。

您还可以复制所需的缓动方法（如果您不需要插件带来的所有可能性）并将其合并到代码中的某个位置：

/* jQuery easing */
jQuery.extend( jQuery.easing,{
    def: 'easeOutQuad',
    easeOutBounce: function (x,t,b,c,d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    }
});

演示：

function bounceDown(){
  $('.ball').animate({top:150}, 1000, 'easeOutBounce', onEnd);
}
function onEnd(){
  $(this).animate({top:0}, 500, 'easeOutCubic', bounceDown);
}
bounceDown();
.ball{ 
  background:red; 
  border-radius:50%;
  display: inline-block;
  padding:30px;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class='ball'></div>

相关文章：