5

浏览velocity.js changelog 我读到：

... 2) 背部、弹跳和弹性缓动已被移除。请改用弹簧物理学。...

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

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

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

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

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

我不明白要使用哪些摩擦和张力值来实现easeOutBounce easing。我试图让球在达到 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>

4

1 回答 1

2

Being the guy that helped creating that easing in Velocity, I understand it's not possible to create bounce and elastic easings with it. But if you'll ask Julian (creator of Velocity) he'll probably say you're better off with a spring easing than with bounce.

Having said that, your best bet is to register these easings yourself on Velocity. Check out explanations at the bottom of this thread.

于 2014-09-30T10:21:55.853 回答