如何使SVG运动在1轴上以完美正弦（t）移动位置

Question

我正在尝试使动画 SVG 图像中的对象沿一个轴（上下或左右）以完美的正弦运动移动。例如：

x(t) = a + b * sin(t * 2PI*f)

（我还尝试以这种方式为样条线的一个属性设置动画，但这似乎更困难或不可能）。

我知道您可以使用样条曲线来缓和运动，但这只是一个近似值。我想要一个完美的正弦。

我尝试了几件事：

首先我尝试使 animateMotion 遵循椭圆路径。您可以使用两个椭圆来形成一个完美的圆。问题是它沿着一个轴线性移动。因此，如果将宽度或高度设置为零，运动仍然是线性的！

其次，我尝试通过独立于高度缩放视图框宽度来拉伸运动。 这确实可以正确缩放运动，也可以正确缩放对象。您可以通过使用缩放的倒数缩放对象来补偿对象缩放，但您永远无法使此缩放达到 0，因为这需要有限大的对象。 下面是我执行此操作的代码片段

<svg viewBox="0 0 5000 5000"
   width="2000"
   height="200"
   preserveAspectRatio="none">
   <path d="M25,-250v500h-50v-500z" >
       <animateMotion path="M1000,600 A200,200 0 1 1 300,600 A200,200 0 1 1 1000,600"
           width="5000"
           height="500"
           preserveAspectRatio="none"  
           begin="0s" dur="3s" repeatCount="indefinite"/>
   </path>
   <path d="M1000,600 A200,200 0 1 1 300,600 A200,200 0 1 1 1000,600" fill="none"
   stroke="black" stroke-width="20"/>
</svg>

我对 SVG 动画没有足够的经验来解决这个问题，但我想出了一些想法：

• 找到一种方法，只缩放移动对象的位置，而不缩放对象的尺寸，然后将宽度或高度缩放 0。
• 也许有一种方法可以只缩放运动本身而不缩放移动的物体
• 也许有一种方法可以否决动画的x或y并将其设置为固定值
• 组合两个沿一个轴以相反方向移动的动画，使它们相互抵消

如何才能做到呢？ （再说一次，我不是在寻找近似值。）

还请帮我修改我的帖子。我无法用剪断的工作代码发布它，因为即使我使用了正确的缩进，stackoverflow 也会抱怨缩进。所以我在额外的引号中添加了它。

Answer 1

我能够通过使用分组来使其发挥作用。通过分组，您可以嵌套元素，然后可以在同一对象上应用 animateMotion 两次。我对两个动画使用了相同的弧线，但一个是垂直翻转的，并且都是半振幅的。我使用了单位圆并使用viewbox进行缩放以简化计算。

svg{border:dotted}

<svg width="200" height="200" viewBox="-0.1 -0.1 1.2 1.2" border="1px solid blue">
    <path id="lineAC" d="M0,0.5 A0.5,0.5 0 1,1 1,0.5" stroke="blue" stroke-width="0.02" fill="none"/>
    <path id="lineAC" d="M0,0.5 A0.5,0.5 0 1,0 1,0.5" stroke="green" stroke-width="0.02" fill="none"/>
    <g>
    <g>
        <rect width="0.1" height="0.1" x="-0.05" y="-0.05" rx="0" ry="0" fill="black" />
        <animateMotion path="M0,0.25 A0.25,0.25 0 1,1 0.5,0.25 
                                     A0.25,0.25 0 1,1 0,0.25" dur="3s" repeatCount="indefinite"/> 
    </g>
        <animateMotion path="M0,0.25 A0.25,0.25 0 1,0 0.5,0.25 
                                     A0.25,0.25 0 1,0 0,0.25" dur="3s" repeatCount="indefinite"/> 
    </g>
</svg>