如何使用 React Spring 对 SVG 线的 x1 坐标进行动画处理？

Question

我正在尝试使用 React Spring 对 SVG 线的 x1 坐标进行动画处理，但没有任何反应。我也没有看到任何错误或失败记录。如何在 React-Spring 中对线条的位置进行动画处理？

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

function App() {
  const [toggle, setToggle] = useState(false);

  const spring = useSpring({
    from: { x1: 5 },
    to: { x1: 22 }
  });

  return (
    <>
      <div>
        <button
          type="button"
          onClick={() => {
            setToggle(!toggle);
          }}
        >
          Toggle animation
        </button>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="40"
        height="40"
        viewBox="0 0 40 40"
        stroke="#000"
        strokeWidth="2"
      >
        <animated.line
          x1="5"
          y1="10"
          x2="35"
          y2="10"
          transform="rotate(0 23.5 10)"
          styles={spring}
        />
      </svg>
    </>
  );
}

export default App;

Answer 1

我找到了一种方法来做到这一点 - 这对我来说并不明显，也许它也会对其他人有所帮助：

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

function App() {
    const [toggle, setToggle] = useState(false);

    const { x1 } = useSpring({
        from: { x1: 5 },
        to: { x1: 22 },
        immediate: toggle === false,
        reset: true
    });

    return (
        <>
            <div>
                <button
                    type="button"
                    onClick={() => {
                        setToggle(!toggle);
                    }}
                >
                    Toggle animation
                </button>
            </div>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 40 40"
                stroke="#000"
                strokeWidth="2"
            >
                <animated.line
                    x1={x1}
                    y1="10"
                    x2="35"
                    y2="10"
                    transform="rotate(0 23.5 10)"
                />
            </svg>
        </>
    );
}

export default App;

可以将 useSpring 创建的 SpringValue 直接分配给 SVG 属性，然后它'会工作的。对于那些不能像罗伯特·朗森在原始帖子中评论的那样设计的道具特别有用。感谢您指出这一点。