新版本的Popmotion旋转木马修复

Question

https://codepen.io/popmotion/pen/Kyewbv

这是不可行的，因为某些原因。

正如这里提到的，https://popmotion.io/pure/必须是

const slider = document.querySelector('.slider');
const sliderX = value(0, styler(slider).set('x'))

listen(slider, 'mousedown touchstart').start(() => {
  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x, clampMovement)
    .start(sliderX);
});

listen(document, 'mouseup touchend').start(() => {
  decay({
    from: sliderX.get(),
    velocity: sliderX.getVelocity()
  }).pipe(clampMovement)
    .start(sliderX);
});

每当我使用它时，夹子的运动就会显示为未定义的。究竟应该是什么呢？有谁能让它起作用吗？

Answer 1

如果您查看衰变文件，您将看到：

注意:这个动画是反对惯性的。

惯性动画文档：https://popmotion.io/api/inertia/

代码库：https://codepen.io/popmotion/pen/BMNvqj

这是一个活生生的例子：

​

const { styler, inertia, listen, pointer, value, calc } = window.popmotion;

const slider = document.querySelector('.carousel');

const divStyler = styler(slider);
const sliderX = value(0, v => divStyler.set('x', v));

listen(slider, 'mousedown touchstart').start(() => {

  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x)
    .start(sliderX);
});

listen(document, 'mouseup touchend').start(() => {
  inertia({
    min: -slider.scrollWidth, //0,
    max: -0, //getBoundariesWidth(),
    from: sliderX.get(),
    velocity: sliderX.getVelocity(),
    power: 0.6,
    bounceStiffness: 400,
    bounceDamping: 20
  })
  .start(sliderX);
});

body {
  --pink: #ff1c68;
  --green: #14d790;
  --blue: #198fe3;
  --black: #21282d;
  --purple: #9b65de;
  color: #222;
  background: #49a9f8;
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px;
}
.pen {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}
.created-by {
  flex: 0 0 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  margin: 0 -20px;
}
.logo {
  margin-left: 10px;
}
h1 {
  font-size: 32px;
  line-height: 28px;
  margin-bottom: 10px;
  color: white;
}
.pen a {
  color: white;
  margin-bottom: 70px;
}
.carousel {
  display: flex;
  align-items: stretch;
  height: 100px;
  position: relative;
  background: #6dc1f9;
  width: 100%;
  border-radius: 5px;
}
.carousel .item {
  background: white;
  border-radius: 5px;
  margin-right: 15px;
  flex: 0 0 100px;
}
.carousel .item:nth-child(4n + 2) {
  background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
  background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
  background: var(--blue);
}

<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
  <h1>Inertia playground</h1>
  <a href="https://popmotion.io/api/inertia" target="blank">View docs</a>
  <div class="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

​

如果您想使用衰变动画：

​

const { styler, decay, listen, pointer, value, transform } = window.popmotion;

const { clamp } = transform;

const slider = document.querySelector('.carousel');
const divStyler = styler(slider);
// const sliderX = value(0, divStyler.set('x'));
const sliderX = value(0, v => divStyler.set('x', v));


listen(slider, 'mousedown touchstart').start(() => {
 
  
  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x)
    .start(sliderX);
});
  
listen(document, 'mouseup touchend').start(() => {
  
  decay({
    from: sliderX.get(),
    velocity: sliderX.getVelocity()
  }).pipe(clamp(-slider.scrollWidth, 0))
    .start(sliderX);
});

body {
  --pink: #ff1c68;
  --green: #14d790;
  --blue: #198fe3;
  --black: #21282d;
  --purple: #9b65de;
  color: #222;
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
.pen {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
  flex: 1 1 100%;
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
}
.created-by {
  flex: 0 0 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
}
.logo {
  margin-left: 10px;
}
h1 {
  font-size: 32px;
  line-height: 28px;
  margin-bottom: 10px;
}
.pen a {
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 70px;
}
.carousel {
  display: flex;
  align-items: stretch;
  height: 150px;
  position: relative;
}
.carousel .item {
  background: var(--purple);
  border-radius: 5px;
  margin-right: 15px;
  flex: 0 0 110px;
}
.carousel .item:nth-child(4n + 2) {
  background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
  background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
  background: var(--blue);
}

<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
  <h1>Decay playground</h1>
  <a href="https://popmotion.io/api/decay" target="blank">View docs</a>
  <div class="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

​

Codepen衰变演示：https://codepen.io/anon/pen/GaLpwR

Answer 2

这个库没有工作，如果您需要快速解决方案，您可以切换到另一个库。例如，刷卡，它有许多示例和选项。

易于设置，并在许多浏览器中工作。

在github https://github.com/nolimits4web/swiper上有很好的表现