如何通过在 svg 中保存开始时间来重新启动动画

Posted 2023-03-05

【中文标题】如何通过在 svg 中保存开始时间来重新启动动画

【英文标题】：How to restart an animation with saving a begin time in svg

【发布时间】：2020-02-06 14:09:37

【问题描述】：

我正在尝试实现三行一个接一个填充并在等待重新启动时冻结的情况，第一行从 0s 开始，第二行在 3s，最后一行在 6s，整个进程需要 9 秒然后重新启动

<svg viewBox="0 0 74 2"  >
    <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
    <line class="line" x1="0" y1="0" x2="0" y2="0" 
          style="stroke:red;stroke-width:4" >
          <animate 
               id="first"
               dur="3s"
               attributeName="x2"
               from="0"
               begin="0s"
               to="20"
               dur="3s"
               fill='freeze'
          />
    </line>
    <line x1="27" y1="0" x2="27" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="second"
                dur="3s"
                begin="3s"
                attributeName="x2"
                from="27"
                to="47"
                dur="3s"
                fill='freeze'
                repeatCount="1"
          />
    </line>
    <line x1="54" y1="0" x2="54" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="third"
                dur="3s"
                begin="6s"
                attributeName="x2"
                from="54"
                to="74"
                dur="3s"
                repeatCount="1"
                fill='freeze'
          />
    </line>
  Sorry, your browser does not support inline SVG.
</svg>

我的问题是除了节省它们的开始时间之外，如何同时重新启动三个动画标签。

附言我想将它嵌入到反应组件中

【参考方案1】：

最简单的方法是让所有动画的长度相同，这样它们就可以同时重新启动。然后调整每个动画中的变化，使它们在正确的时间发生。

为此，我已将动画从 from/to 转换为值，因此我可以每隔 3 秒指定一个值。

<svg viewBox="0 0 74 2"  >
    <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
    <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
    <line class="line" x1="0" y1="0" x2="0" y2="0" 
          style="stroke:red;stroke-width:4" >
          <animate 
               id="first"
               dur="9s"
               attributeName="x2"
               begin="0s"
               values="0;20;20;20"
               from="0"
               to="20"
               repeatCount="indefinite"
          />
    </line>
    <line x1="27" y1="0" x2="27" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="second"
                dur="9s"
                begin="0s"
                attributeName="x2"
                values="27;27;47;47"
                fill='freeze'
                repeatCount="indefinite"
          />
    </line>
    <line x1="54" y1="0" x2="54" y2="0" 
             style="stroke:red;stroke-width:4" >
          <animate 
                id="third"
                dur="9s"
                begin="0s"
                attributeName="x2"
                values="54;54;54;74"
                repeatCount="indefinite"
          />
    </line>
  Sorry, your browser does not support inline SVG.
</svg>