如何使用 react-spring useChain 制作循环动画

Question

我想用 react-spring 创建一个循环动画来加载，但是当我使用循环时，它的时间错误，我不知道如何制作 useChain 动画循环。

const animation = {
  from: { scale: 0, opacity: 0, background: 'red' },
  to: [
    { scale: 1, opacity: 1 },
    { scale: 0, opacity: 0 }
  ],
  config: {
    duration: 500
  }
}

const Loading = () => {
  const leftBottomRef = useSpringRef()
  const leftBottom = useSpring({
    ref: leftBottomRef,
    ...animation
  })

  const leftTwoRef = useSpringRef()
  const leftTwo = useSpring({
    ref: leftTwoRef,
    ...animation
  })

  const centerRef = useSpringRef()
  const center = useSpring({
    ref: centerRef,
    ...animation
  })

  const rightTwoRef = useSpringRef()
  const rightTwo = useSpring({
    ref: rightTwoRef,
    ...animation
  })

  const rightTopRef = useSpringRef()
  const rightTop = useSpring({
    ref: rightTopRef,
    ...animation
  })

  useChain(
    [leftBottomRef, leftTwoRef, centerRef, rightTwoRef, rightTopRef],
    [0, 0.3, 0.6, 0.9, 1.2],

  )

  return (
    <div className='loading'>
      <div className='loader'>
        <animated.div style={center} />
        <animated.div style={rightTwo} />
        <animated.div style={rightTop} />
        <animated.div style={leftTwo} />
        <animated.div style={center} />
        <animated.div style={rightTwo} />
        <animated.div style={leftBottom} />
        <animated.div style={leftTwo} />
        <animated.div style={center} />
      </div>
      loading...
    </div>
  )
}

如果有办法让useChain循环或者有其他方法来实现这个动画？

这里是我正在尝试做的一些背景

Answer 1

您是否尝试将loop: true 添加到您的animation 对象或其中的config，就像他们拥有in the docs 一样？