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

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