reactjs - 如何使用 React Spring 创建抛物线动画

Question

嘿，我是响应 spring 的新手，想知道如何创建抛物线动画。我尝试使用这段代码在定义原点和目标位置的位置创建一个。我将位置坐标存储在coordinates数组中。但是元素遵循线性三角形路径而不是弯曲的抛物线路径。任何帮助深表感谢。

  const n = useRef(0)
  const styles = useSpring({
    loop: () => 3 > n.current++,
    from: { x: coordinates[n.current] },
    to: { x: coordinates[n.current+1},
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        backgroundColor: '#46e891',
        borderRadius: 16,
        ...styles,
      }}
    />
  )
}