在拖动或单击时反应 spring 动画

Question

使用 react-spring 和 react-use-gesture 我想要一个可以通过拖动或单击按钮激活的轮播动画。

我找到了解决办法：https://codesandbox.io/s/viewpager-6o78r?file=/src/index.js

将 setTimeout 放入动画帧的循环中，但我觉得必须有更好的方法。我这样做的方式可能不那么顺利，因为我没有缓动等。有没有办法在我已经为之创建的弹簧上使用 from 和 to 属性通过拖动手势使用？

Answer 1

我还没有经常使用 useSprings 函数，但我想我想出了一个更简单的解决方案：

  const handleNextPage = () => {
    if (index.current < pages.length - 1) {
      index.current = index.current + 1
      set(i => ({
        x: (i - index.current) * window.innerWidth,
        scale: 1,
        display: 'block'
      }))
    } 
  }

我还添加了一个可选的动画，当你在图像的末尾时，得到一个反馈，你在最后。它有两个状态，一个 100 像素 oversoot 和 back。我用超时设置了两个状态，但它可能会以更优雅的方式完成。

  const handleNextPage = () => {
    if (index.current < pages.length - 1) {
      index.current = index.current + 1
      set(i => ({
        x: (i - index.current) * window.innerWidth,
        scale: 1,
        display: 'block'
      }))
    } else {
      set(i => ({
        x: (i - index.current) * window.innerWidth - 100
      }))
      setTimeout(
        () =>
          set(i => ({
            x: (i - index.current) * window.innerWidth
          })),
        500
      )
    }
  }

整个例子：https://codesandbox.io/s/viewpager-5pgl5?file=/src/index.js

在拖动或单击时反应 spring 动画

React spring animation on drag OR click

javascript

animation

drag-and-drop

reactjs

react-spring