Как я могу динамически настроить несколько экземпляров Spring? - PullRequest
Новая
       21

Как я могу динамически настроить несколько экземпляров Spring?

1 голос
/ 17 июня 2019

Бит застрял при попытке выяснить, как настроить несколько пружин с помощью React Spring , тогда пружины будут анимированы в последовательности цепочек.

Идея состоит в том, чтобы получить длину каждогопуть присутствует в массиве, это происходит в useEffect.Когда длины извлекаются, я хочу использовать их для настройки отдельных пружин, которые вместе составляют анимацию стрелки SVG.

Вот жестко закодированный пример , который работает как задумано (щелкните в любом месте вокно просмотра и стрелка будут анимированы)

Код в настоящее время выглядит следующим образом ( Code Sandbox ): 

const arrowData = {
  stroke: 'red',
  viewBox: '0 0 278 549',
  paths: [
    'M204.974 2.775c57.056 87.536 81.796 175.997 58.823 266.51C223.401 428.443-11.634 400.007 6.5 312.033 24.638 224.062 190 252 190 356c0 69.333-8 128.617-24 177.852', 
    'M223.324 500.772l-60.288 39.978-26.437-68.621',
  ]
};

const Arrow = () => {
  const [draw, setDraw] = useState(false);
  const [pathLengths, setPathLengths] = useState([]);

  // path refs
  const pathsRef = useRef(arrowData.paths.map(() => createRef()));

  // spring animation refs for chaining
  const springsRef = useRef(arrowData.paths.map(() => createRef()));


  useEffect(() => {
    const calculatedPathLengths = pathsRef.current.map(
      ref => ref.current.getTotalLength()
    );
    setPathLengths(calculatedPathLengths);

    // dynamically setup multiple springs for chained animation here, but how?
  }, [setPathLengths]);


  return (
    <div style={{pointerEvents: 'auto'}} onClick={() => setDraw(draw => !draw)}>
      <svg
        viewBox={arrowData.viewBox}
        stroke={arrowData.stroke}
        fill="none"
        strokeWidth="10"
      >
        {arrowData.paths.map((path, index) => (
          <animated.path 
            key={index}
            ref={pathsRef.current[index]}
            strokeDasharray={pathLengths[index]}
            strokeDashoffset="0" // <- value to be animated
            d={path}
          />
        ))}
      </svg>
    </div>
  )
}
...