Animation 沿不同路径同步两个SVG动画

希望我的解释是正确的。 我有两个脉冲动画，沿着两条不同的路径运行。我已经玩了动画的持续时间，但我似乎可以让它们在它们连接的点同步，这样只有一个圆到达顶部。 这可能吗

这是我的密码：

image/svg+xml

---

你的主要问题是你的点以不同的速度移动，因为运动路径有不同的长度。我认为最明智的解决方案是定义三条独立的运动路径，一条用于左腿和右腿，另一条用于上肢。然后，对动画计时，使左腿和右腿的动画同时在中心点结束，向上腿的动画同时开始

这需要仔细规划运动速度和计时，并隐含有关路径长度的知识。为了更容易理解推理，我已经解析了SVG中的转换，并稍微重新定位和调整了路径的大小。此外，我还反转了右腿的方向，这样您就不需要反转运动的方向-这样您就不用详细说明关键点/关键时间属性

以下是我得到的：

id                   d              length   dur
theMotionPath-left   M 25 70 H 45   20       1.5s
theMotionPath-right  M 85 70 H 45   40       3s
theMotionPath-up     M 45 70 V 40   30       2s

不同腿的速度完全匹配，只是大致匹配。但这并不是威慑，重要的是每一秒所有的点都会到达/离开中心点

不过左腿有个问题。repeatCount=不确定表示动画在完成后立即重新启动。从1.5秒开始的运动将在3秒结束，然后在4.5秒、6秒、7.5秒之后再次结束，。。。每一秒的运动都不会按照要求与其他部分匹配

解决这个问题的方法是在每次动画开始之间增加一个延迟：运行1.5秒，等待1.5秒，再次运行等等

这可以通过一个技巧来实现。可以对同一动画执行不同的运行。省略repeatCount属性，但定义开始时间列表：

---

你的主要问题是你的点以不同的速度移动，因为运动路径有不同的长度。我认为最明智的解决方案是定义三条独立的运动路径，一条用于左腿和右腿，另一条用于上肢。然后，对动画计时，使左腿和右腿的动画同时在中心点结束，向上腿的动画同时开始

这需要仔细规划运动速度和计时，并隐含有关路径长度的知识。为了更容易理解推理，我已经解析了SVG中的转换，并稍微重新定位和调整了路径的大小。此外，我还反转了右腿的方向，这样您就不需要反转运动的方向-这样您就不用详细说明关键点/关键时间属性

以下是我得到的：

id                   d              length   dur
theMotionPath-left   M 25 70 H 45   20       1.5s
theMotionPath-right  M 85 70 H 45   40       3s
theMotionPath-up     M 45 70 V 40   30       2s

不同腿的速度完全匹配，只是大致匹配。但这并不是威慑，重要的是每一秒所有的点都会到达/离开中心点

不过左腿有个问题。repeatCount=不确定表示动画在完成后立即重新启动。从1.5秒开始的运动将在3秒结束，然后在4.5秒、6秒、7.5秒之后再次结束，。。。每一秒的运动都不会按照要求与其他部分匹配

解决这个问题的方法是在每次动画开始之间增加一个延迟：运行1.5秒，等待1.5秒，再次运行等等

这可以通过一个技巧来实现。可以对同一动画执行不同的运行。省略repeatCount属性，但定义开始时间列表：

---

只需根据@ccprog的答案进行构建，您还可以使用关键时间和关键点来更改动画在水平和垂直部分的速度。你需要意识到以下几点：

首先，您需要将运动路径ch的d属性设置为d=M 10,35 H 30 V 5，以便它与另一条路径到达相同的垂直点

然后，计算每条路径相对于其长度变化的点：运动路径sa中为0.4167，运动路径ch中为0.4

最后，添加一个额外的keyTime，我将其设置为0.6，即0.6*3s=1.8s，以及上一步中相应的keyPoint

image/svg+xml

---

只需根据@ccprog的答案进行构建，您还可以使用关键时间和关键点来更改动画在水平和垂直部分的速度。你需要意识到以下几点：

首先，您需要将运动路径ch的d属性设置为d=M 10,35 H 30 V 5，以便它与另一条路径到达相同的垂直点

然后，计算每条路径相对于其长度变化的点：运动路径sa中为0.4167，运动路径ch中为0.4

最后，添加一个额外的keyTime，我将其设置为0.6，即0.6*3s=1.8s，以及上一步中相应的keyPoint

image/svg+xml