如何用SVG/SMIL的animateTransform实现钟摆式无限往复旋转动画

一、替换原有动画代码 #

直接将你SVG中path元素内的animateTransform替换为以下代码，即可实现钟摆往复且端点减速的效果：

<path d="m348.28,113.8c-.2-1.09-1.63-1.09-1.84,0l-4.56,35.94,5.48,17.44,5.48-17.44-4.56-35.94Z"
    fill="#373838" stroke-width="0">
    <animateTransform
        attributeType="xml"
        attributeName="transform"
        type="rotate"
        values="45 347.37 177.35; -45 347.37 177.35; 45 347.37 177.35"
        keyTimes="0; 0.5; 1"
        keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
        calcMode="spline"
        dur="2s"
        repeatCount="indefinite"
    />
</path>

二、关键参数的简单解释 #

无需深入理解曲线知识，只需记住这些参数的作用：

• values：定义动画的三个关键位置，依次是「起始45度」→「端点-45度」→「回到起始45度」，直接实现往复运动。
• keyTimes：对应values的时间节点，0是动画开始，0.5是动画进行到一半（1秒时）到达-45度，1是动画结束（2秒时）回到45度，确保往返时间均等。
• keySplines：0.5 0 0.5 1是现成的缓入缓出曲线，让动画启动时加速、到达端点时自动减速，完美模拟钟摆的物理效果。
• calcMode="spline"：告诉浏览器使用keySplines定义的曲线控制动画速度，而非匀速运动。
• dur="2s"：整个往返动画的总时长，可按需调整（比如改成3s会让钟摆变慢）。

三、原有参数含义补充 #

你之前用的from="45 347.37 177.35"和to="-45 347.37 177.35"格式是正确的：
rotate类型的动画参数格式为 [旋转角度] [旋转中心X坐标] [旋转中心Y坐标]，其中347.37和177.35就是你要围绕旋转的圆心坐标，无需修改。

四、为什么autoReverse不生效 #

SMIL规范中的autoReverse属性在现代浏览器中对animateTransform元素的支持极差，几乎没有浏览器实现该功能，因此用values定义完整往返路径是更可靠的替代方案。

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