使用 react-spring 为 React 中的一个点设置 SVG 组件的动画

Question

我正在做这个项目，我需要给定的 SVG 组件像跷跷板一样围绕中心的一个点摆动。摆动是连续的，即像典型的跷跷板一样上下摆动。我正在尝试使用

react-spring

.

来完成此操作

这是 SVG 的图像。

这是我想要制作动画的 SVG 组件：

Hangingbar.tsx

import React from 'react';
import { animated } from '@react-spring/web';

const Hangingbar = ({ styles }: any) => {
    return (
        <animated.g style={styles}>
            <path d="M423.563 76.1328C339.848 90.5789 256.134 105.025 172.42 119.471C172.336 122.736 172.253 126.001 172.169 129.266C179.288 131.082 186.406 132.898 193.525 134.713C283.271 116.991 373.018 99.268 462.765 81.5454C462.932 78.1966 463.099 74.8477 463.267 71.4989C450.032 73.0435 436.797 74.5882 423.563 76.1328Z" fill="#FF8800"/>
            <path d="M193.497 135.729L171.158 130.032L171.45 118.632L423.448 75.1481L464.316 70.3784L463.716 82.3681L462.957 82.5182L193.497 135.729ZM173.181 128.501L193.553 133.697L461.813 80.7227L462.218 72.6196L423.704 77.1146L173.391 120.31L173.181 128.501Z" fill="#19100D"/>
            <path d="M424.46 68.1691L173.328 118.525C171.555 118.88 171.515 121.4 173.276 121.812L194.423 126.75L462.01 74.1793C464.093 73.7702 463.896 70.7298 461.778 70.5923L424.46 68.1691Z" fill="#FF8800"/>
            <path d="M194.405 127.764L173.05 122.777C171.795 122.484 170.965 121.421 170.985 120.132C171.006 118.843 171.869 117.806 173.133 117.553L424.394 67.1713L424.525 67.1797L461.842 69.6029C463.289 69.6968 464.365 70.7732 464.459 72.2201C464.552 73.667 463.624 74.8728 462.201 75.1523L194.405 127.764ZM424.527 69.1672L173.523 119.497C173.016 119.598 172.97 120.032 172.968 120.163C172.966 120.294 172.999 120.729 173.501 120.846L194.441 125.736L461.819 73.2068C462.475 73.0777 462.49 72.517 462.479 72.3482C462.468 72.1794 462.381 71.6253 461.714 71.582L424.527 69.1672Z" fill="#19100D"/>
            <path d="M329.762 108.622H327.779V99.5948L320.369 85.1897C320.23 84.9192 319.981 84.8582 319.881 84.8443C319.779 84.8308 319.524 84.8227 319.318 85.0457L314.131 90.6478L312.676 89.3006L317.863 83.6986C318.445 83.0698 319.299 82.7623 320.149 82.8797C320.999 82.9959 321.74 83.5204 322.132 84.2827L329.762 99.1146V108.622Z" fill="#19100D"/>
        </animated.g>
    )
}

export default Hangingbar

这就是我使用

useSpring

创建弦乐样式的方式，但是，我只能设法使横条横向移动：

App.tsx（放弃只有必要的代码）

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

    useEffect(() => {
        const timer = setInterval(() => {
            setToggle(prevState => !prevState);
        }, 3000);
    
        return () => {
            clearInterval(timer);
        };
    }, []);

    const hangingBarSpring = useSpring({
        transform: toggle ? `translate3d(0px, 0px, 0px)` : `translate3d(-100px, -20px, 0px)`,
        config: { duration: 3000 },
    })

    return (
        <svg width="661" height="451" viewBox="0 0 661 451" fill="none" xmlns="http://www.w3.org/2000/svg">
            <Hangingbar styles={hangingBarSpring} />
        </svg>
    )
    }
    export default App;

我面临的挑战是用什么让杆绕中点摆动。我试着在网上搜索类似的例子，但我找不到。

Answer 1

我试了一下，这似乎对我有用！

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

const SeeSaw = () => {
  const { transform } = useSpring({
    from: {
      transform: 'rotate(25deg)',
    },
    to: {
      transform: 'rotate(-25deg)',
    },
    config: { duration: 3000 },
    loop: { reverse: true }
  });

  return (
    <animated.div
      style={{ transform }}
      className="w-16 border-b-8 border-black"
    />
  );
};

export default SeeSaw;

关键是使用“旋转”变换，然后将“反向”属性设置为 true 使其循环。