SVG路径在React Spring动画库中没有动画

Question

我试图实现与react-spring svg路径动画文档中所示的示例相同的示例，但它会立即呈现： 这是我的代码：

<Spring from={{ x: 0 }} to={{ x: 100 }}>
  {props => (
    <svg strokeDashoffset={props.x}>
      <path d="M7 2v11h3v9l7-12h-4l4-8z" />
    </svg>
  )}
</Spring>

这是我的密码和框：https://codesandbox.io/s/9llxp0zx8o

SVG路径没有像此处的示例2那样按预期方式动画：http://react-spring.surge.sh/spring

我想我在这里错过了一些东西。如果有人能够找到问题并向我指示方向，我将感到很高兴。

Answer 1

要像示例中那样对其进行动画处理，还需要将strokeDasharray值设置为SVG路径的长度。以下是供参考的示例：https://www.w3schools.com/howto/howto_js_scrolldrawing.asp

Answer 2

import { useEffect, useRef, useState } from 'react'
import { useSpring } from '@react-spring/core'
import { animated } from '@react-spring/web'

export const CirclePath = () => {
  const circleRef = useRef()
  const [offset, setOffset] = useState(null)
  useEffect(() => setOffset(circleRef.current.getTotalLength()), [offset])
  const config = useSpring({
    from: { offset },
    to: { offset: 0 },
  })

  return (
    <svg>
      <animated.circle
        ref={circleRef}
        cx='50'
        cy='50'
        r='30'
        strokeDashoffset={config.offset}
        strokeDasharray={offset}
        stroke='black'
        strokeWidth='2'
        fill='none'
      ></animated.circle>
    </svg>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>