Question

如下所示，我试图在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>

Popmotion：弹跳效果

0 个答案: