如何使用react-spring实现SVG组件绕中心点持续跷跷板摆动？

要实现像跷跷板一样的绕点摆动，核心是利用CSS旋转（rotate）配合transform-origin指定旋转中心，而非平移（translate）。以下是具体修改方案：

1. 确定并设置旋转中心 #

先估算SVG <g> 元素的中心点（根据你提供的路径坐标，这个组件的中心点大致为 (317px, 100px)，可根据视觉效果微调），将其设为旋转原点。

2. 重构react-spring动画逻辑 #

放弃手动定时器切换状态的方式，改用react-spring内置的loop属性实现持续往复旋转，代码更简洁且动画更流畅。

修改后的App.tsx代码 #

import React from 'react';
import { useSpring } from '@react-spring/web';
import Hangingbar from './Hangingbar';

const App = () => {
    const hangingBarSpring = useSpring({
        // 设置旋转原点为组件中心点
        transformOrigin: '317px 100px',
        // 定义摆动角度：从-5°到5°再回到-5°，形成往复摆动
        rotate: [-5, 5, -5],
        // 动画时长3秒，可根据需求调整
        config: { duration: 3000 },
        // 开启循环动画
        loop: true
    })

    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;

额外优化提示 #

如果想要更贴近真实跷跷板的弹性效果，可以替换config参数为弹簧物理配置：

config: { tension: 120, friction: 15 }

通过调整tension（张力）和friction（摩擦力）数值，能模拟出更自然的摆动衰减和回弹效果。

内容的提问来源于stack exchange，提问作者japheth