Svg 路径在 React Spring 动画库中没有动画答案

【问题标题】：Svg path is not animating in React Spring animating librarySvg 路径在 React Spring 动画库中没有动画
【发布时间】：2019-04-13 22:36:32
【问题描述】：

我试图实现与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

我想我在这里遗漏了一些东西。如果有人能找到问题并为我指明方向，我会很高兴。

【问题讨论】：

标签： reactjs svg react-spring

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

【讨论】：