Popmotion: эффект отказов - PullRequest
Новая
       43

Popmotion: эффект отказов

0 голосов
/ 26 февраля 2019

Как видно ниже, я попытался создать эффект отскока в конце другой анимации в 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>
...