Question

我试图在开放路径上从开始到结束移动obj并结束开始

此处单路径表示没有其他重叠的额外路径

在我从头到尾完成的代码中，但我怎样才能从头到尾完成

请帮助

提前谢谢

＆＃13;

<?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>

＆＃13;

Answer 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>

Answer 2

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

＆＃13;

<?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>

＆＃13;

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

2 个答案: