0

如下所示，我尝试在 Popmotion 中的另一个动画结束时创建弹跳效果。

我不知道该怎么做，所以一旦速度达到某个阈值，我就尝试反转速度。

结果是零星的，并不总是有效。

关于如何使用 Popmotion 最好地创建弹跳效果的任何想法？

说明 1

球大部分时间都会弹跳，但弹跳的时间长短差异很大。有时它会在一次反弹后突然停止。我不确定为什么会这样，因为我不完全了解该解决方案的实际工作原理。如果我们简单地反转速度，为什么它会变慢。查看代码，我的猜测是球会无限期地振荡，但事实并非如此。

说明 2

在Firefox 65.0.1中，动画似乎是一致的。在Chrome 72.x中，它的行为是非理性的。即动画和弹跳长度每次都会改变。

const {
  tween,
  styler,
  value,
  easing,
  physics,
  transform
} = popmotion;
const {
  clamp,
  pipe,
  conditional
} = transform;

const ball = document.querySelector('#ball');
const ballStyler = styler(ball);
const ballY = value(0, ballStyler.set('y'));
const BOTTOM = 50;

const pipedPhysics = physics({
  acceleration: 2000,
  // friction: 0.5,
  // restSpeed: 0,
  // springStrength: 300,
  // to: 50
}).pipe(clamp(0, BOTTOM));

const anim = pipedPhysics.start(ballY);

ballY.subscribe(v => {
  if (v >= BOTTOM) {
    anim.setVelocity(-ballY.getVelocity());
  };
  // console.log('v, vel: ', v, ballY.getVelocity());    
});
#ball {
  background: #ff2420;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: 0px;
  transform-origin: 50%;
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<div id="ball"></div>

4

0 回答 0