希望我能正确解释。我有两个沿两个不同路径运行的脉冲动画。我已经播放了动画的持续时间,但似乎可以让它们在它们加入的位置“同步”,以便只有一个圆圈到达顶部。这可能吗?
这是我的代码:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewBox="0 0 120 120"
version="1.1"
id="svg11"
sodipodi:docname="testAn.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview13"
showgrid="false"
inkscape:zoom="2.4857496"
inkscape:cx="201.80878"
inkscape:cy="187.12268"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g140"
transform="translate(35.662173,31.252367)">
<path
id="theMotionPath-sa"
d="M 10,10 V 40 H 52"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle119"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle121"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle123"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle125"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
</g>
<g
id="g57"
transform="translate(15.662173,36.252367)">
<path
id="theMotionPath-ch"
d="M 10,35 H 30 V 3"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle36"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle38"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle40"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle42"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
</g>
</svg>
希望这有道理!
只需根据@ccprog的答案进行构建,您还可以使用keyTimes
和keyPoints
更改水平和垂直部分中动画的速度。您需要了解以下几点:
首先,您需要将#theMotionPath-ch
的d
属性设置为d="M 10,35 H 30 V 5"
,以使其与其他路径到达相同的垂直点
然后,计算每个路径相对于其长度变化的点:0.4167英寸#theMotionPath-sa
和0.4英寸#theMotionPath-ch
。
最后,添加一个附加项keyTime
(我将其设置为0.6
,表示在0.6 * 3s = 1.8s
和keyPoint
上一步对应的。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewBox="0 0 120 120"
version="1.1"
id="svg11"
sodipodi:docname="testAn.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview13"
showgrid="false"
inkscape:zoom="2.4857496"
inkscape:cx="201.80878"
inkscape:cy="187.12268"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g140"
transform="translate(35.662173,31.252367)">
<path
id="theMotionPath-sa"
d="M 10,10 V 40 H 52"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle119"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle121"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle123"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle125"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
</g>
<g
id="g57"
transform="translate(15.662173,36.252367)">
<path
id="theMotionPath-ch"
d="M 10,35 H 30 V 5"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle36"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle38"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle40"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle42"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
</g>
</svg>
看完这些示例后,我发现只要每个动画的时间保持不变,并且每个动画运行的间隔也保持不变,那么路径的长度就不会有任何区别。将会改变的只是动画的速度。
这是另一个示例:
<svg width="300" height="300" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Edit This Path . -->
<path d="M 10,60 H 60 " stroke="#4789D0" stroke-width="1" fill="none" id="M-Right"/>
<path d="M 60,60 v -50 " stroke="#4789D0" stroke-width="1" fill="none" id="M-Up"/>
<path d="M 60,60 h 30" stroke="#4789D0" stroke-width="1" fill="none" id="M-Left"/>
<!-- Here is a green circle which will be moved along the motion path. -->
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c1" begin='0s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c2" begin='1s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c3" begin='2s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c4" begin='3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc1" begin='c1.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc2" begin='c2.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc3" begin='c3.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc4" begin='c4.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc1" begin='c1.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc2" begin='c2.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc3" begin='c3.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc4" begin='c4.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
</svg>
您可以编辑长度,但仍会保持同步
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句