拖动或单击时反应弹簧动画

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像素的上脚和下脚。我在暂停的情况下完成了两种状态，但可能会以更优雅的方式完成。

  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