用弹簧放松重新创造反弹放松

Recreate bounce easing with spring easing

本文关键字：创造 新创造      更新时间：2023-09-26

浏览velocity.js变更日志，我读到：

2） 背部、弹跳和弹性放松都被去除了。使用取而代之的是春季物理学。。。

我想知道是否有任何简单的方法可以使用接受自定义参数的spring放松来重新创建jQuery animate所提供的easeOutBounce效果？

默认情况下，您可以使用spring宽松如下：

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

可以通过指定[tension, friction]而不是只传递放松关键字spring来自定义弹簧放松。所以你可以做：

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

我不明白应该使用摩擦和张力的哪个值来实现easeOutBounce缓和。我试图让球在达到200像素时反弹，但它却充当了一个"松散"的弹簧，低于底线而不是反弹。

是否可以只使用velocity.js以简单的方式实现，这样我就不需要自己实现自定义的轻松功能了？

$('button').on('click', function(){
   $('.ball').css('top', '120px');
   $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
});
.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;
}
<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>

作为在Velocity中帮助创建这种放松的人，我知道用它来创建弹跳和弹性放松是不可能的。但如果你问Julian（Velocity的创建者），他可能会说你用弹簧放松比用弹跳更好。

话虽如此，你最好的选择是自己在Velocity上注册这些放松。查看此线程底部的解释。

相关文章：