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

保罗·普林斯露

希望我能正确解释。我有两个沿两个不同路径运行的脉冲动画。我已经播放了动画的持续时间,但似乎可以让它们在它们加入的位置“同步”,以便只有一个圆圈到达顶部。这可能吗?

这是我的代码:

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

希望这有道理!

vqf

只需根据@ccprog的答案进行构建,您还可以使用keyTimeskeyPoints更改水平和垂直部分中动画的速度。您需要了解以下几点:

  • 首先,您需要将#theMotionPath-chd属性设置为d="M 10,35 H 30 V 5",以使其与其他路径到达相同的垂直点

  • 然后,计算每个路径相对于其长度变化的点:0.4167英寸#theMotionPath-sa和0.4英寸#theMotionPath-ch

  • 最后,添加一个附加项keyTime(我将其设置为0.6,表示在0.6 * 3s = 1.8skeyPoint上一步对应的。

<?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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何同时在两个不同路径的.bat文件中启动2个命令?

如何比较两个不同路径的点(点数组)

Angular 路由器延迟加载:以相同路径开头的两个不同模块

SVG椭圆路径与窗口沿两个轴成比例地缩放,以形成圆形“字幕”

我可以在网站的两个不同路径上托管相同的React应用程序吗?

两个不同元素的同步悬停

如何绘制带有两个不同颜色的半圆的 Svg 并对其应用动画

不同路线的两个相同的 ERB 表达式产生不同的结果

短文件名导致两个相同路径的问题

角| 使用两个具有相同路径的组件

Adobe CQ:使两个具有相同路径的<cq:include>可编辑

一个具有两种不同路径的网址(网址重写)

如何在CSS中同步两个动画?

如何同步两个 CSS 动画时间

我是否需要创建两个 kinesis 传输流以在同一个 s3 存储桶中的两个不同路径下发送消息?

如何重叠两个不同的 SVG?

如何使两个不同表中的两个不同列保持同步?

如何同步不同类中的两个线程

两个视图上的TranslationAnimation不同步

休眠两个会话的数据不同步

两个内容大小不同的 ScrollViewer 的同步滚动

在两个不同(Arch)Linux机器之间同步Thunderbird

用不同的图片同步两个QGraphicsView

同步两个不同内容的控件的滚动位置

图中从X到Y的两条不同路径

如何同步两个不同系统中的两个文件夹

如何在两个不同的 css 动画之间交替

我如何在symfony2中声明两个动作或具有相同路径

如何在WAR中公开具有相同路径的两个JAX-RS资源