春季宽松重新打造弹跳缓和

Question

通过velocity.js更改日志我看了：

  

... 2）背部，弹跳和弹性缓和已被移除。使用   相反，弹簧物理。 ...

我想知道是否有任何简单的方法可以使用接受自定义参数的easeOutBounce缓动重新创建jQuery动画可用的spring效果？

默认情况下，您可以使用spring缓动，如下所示：

$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });

通过指定[tension, friction]而不是仅传递缓动关键字spring，可以自定义弹簧缓动 。所以你可以这样做：

$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });

我未能理解为了达到easeOutBounce easing而使用哪种摩擦力和张力值。当它达到200px时，我试图让球反弹 - 但它反而是松散的＆＃34;松散的＆＃34;春天，低于地面而不是弹跳。

这是否可以通过velocity.js以简单的方式进行，所以我不需要自己实现自定义缓动功能？

＆＃13;

＆＃13;

$('button').on('click', function(){
   $('.ball').css('top', '120px');
   $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
});

＆＃13;

.display {
  width: 240px;
  height: 280px;
  position: relative;
  border: 1px solid #000;
}
.ball {
  position: absolute;
  top: 120px;
  left: 40px;
  width: 20px;
  height: 20px;
}
.ball:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: red;
}
.ground {
  position: absolute;
  top: 220px;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

<button>Throw ball</button>
<div class="display">
  <div class="ball"></div>
  <div class="ground"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

作为帮助在Velocity中创造缓和的人，我理解它不可能用它创造弹跳和弹性缓和。但是，如果你问Julian（Velocity的创造者），他可能会说你弹簧宽松比弹跳更好。

话虽如此，你最好的选择是自己在Velocity上注册这些缓和。查看this thread底部的解释。