如何在单个路径上将 obj 从开始移动到结束并从结束移动到开始答案

【问题标题】：How to move obj from start to end and end to start on single path如何在单个路径上将 obj 从开始移动到结束并从结束移动到开始
【发布时间】：2018-04-21 12:25:58
【问题描述】：

我正在尝试在开放路径上从头到尾移动 obj 并从头到尾

这里单路径表示没有其他重叠的额外路径

在我从头到尾完成的代码中，但我怎么能从头到尾做到这一点

请帮忙

提前谢谢你

<?xml version="1.0"?>
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points -->
    <path d="M10.635,5.412L50.41,50.187" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/>
       

        <!-- Red circle which will be moved along the motion path. -->
        <circle cx="0" cy="" r="2" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

【问题讨论】：

标签： jquery animation svg jquery-animate

【解决方案1】：

您可以使用keyPoints 和keyTimes 动画属性。

keyPoints 中的值是从 0 到 1 路径上的小数位置。 keyTimes 中的值是 dur 的时间分数。

keyPoints="0;  // start
           1;  // end
           0"  // start
keyTimes="0;   // begin time
          0.5; // halfway through duration
          1"   // end time
calcMode="linear" // for chrome

<?xml version="1.0"?>
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points -->
    <path d="M10.635,5.412L50.41,50.187" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/>
       

        <!-- Red circle which will be moved along the motion path. -->
        <circle cx="0" cy="" r="2" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite" keyPoints="0;1;0" keyTimes="0;0.5;1" calcMode="linear">
            <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

【讨论】：

感谢 Paul 先生，我做到了，但最重要的是缺少 calcMode="linear"。如果我们不使用它，这适用于 chrome，据我所知，它不会在 chrome 中工作。再次感谢您。
是的。 calcMode 的默认值为 paced。但遗憾的是 Chrome 不支持节奏模式。

【解决方案2】：

您可以将路径设置为以原始起点结束。

<?xml version="1.0"?>
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points -->
    <path d="M10.635,5.412 L50.41,50.187 L10.635,5.412" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/>
       

        <!-- Red circle which will be moved along the motion path. -->
        <circle cx="0" cy="" r="2" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

【讨论】：

我不能使用多条重叠路径，单条路径可以做同样的事情吗？？
我们不需要设置从头到尾重叠的路径，您可以在我的路径之后添加“Z”，它的工作方式相同。检查这个：jsfiddle.net/6ver8fc6
Z 表示关闭路径，和我做的一样。
是的，但是当它的动态路径更容易在路径之后添加 Z 而不是你做对了吗？
是的，你是对的。如果路径是简单的一行，使用Z会更容易。