在拖动或单击时反应弹簧动画答案

【问题标题】：React spring animation on drag OR click在拖动或单击时反应弹簧动画
【发布时间】：2020-07-22 19:38:09
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs animation drag-and-drop react-spring

【解决方案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

【讨论】：