Popmotion

Popmotion

关注
发信
关注(28)粉丝(399)

javascript - Popmotion轮播修复程序新版本

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);
});

每当我使用它时，钳位运动都显示为未定义。实际上应该是什么？有什么可能使它起作用吗？

最佳答案

如果查看Decay documentation，您将看到:



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

一个Codepen: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 Decay演示:https://codepen.io/anon/pen/GaLpwR

关于javascript - Popmotion轮播修复程序新版本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56414809/

10-09 02:50
Powered by LMLPHP ©2024 Popmotion 0.027229