隐藏SVG元素中途动画答案

【问题标题】：Hide SVG element halfway animation隐藏SVG元素中途动画
【发布时间】：2020-04-08 06:06:54
【问题描述】：

我有一个重复的 20 秒 svg 动画。中途（10 秒）它应该突然隐藏一个名为leftside 的path-元素。当动画完成并重复时，它应该再次显示该元素。我怎样才能做到这一点？

现在，我的第一个循环开始工作了。但不幸的是，动画重复时的重置不起作用。

这就是我所拥有的：

<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
    d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
    c-17.9,10.9-13.4,91.9-14.9,155.8"
  />
  <g id="vehicle">
    <path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    <path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
  </g>
  
  <animateMotion id="movement"
          xlink:href="#vehicle"
          dur="20s"
          begin="0;movement.end+4s"
          fill="freeze"
          keyPoints="0;1;0"
          keyTimes="0;0.5;1"
          calcMode="spline"
          keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
          >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  
  <animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="10s;movement.begin+10s;" repeatCount="indefinitive" fill="freeze" />
  <animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" repeatCount="indefinitive" fill="freeze" />

</svg>

【问题讨论】：

标签： html animation svg svg-animate

【解决方案1】：

我是这样吗？

<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
    d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
    c-17.9,10.9-13.4,91.9-14.9,155.8"
  />
  <g id="vehicle" stroke-width="2" stroke="red">
    <path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    <path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
  </g>
     <!-- Two dash move forward 10s -->
  <animateMotion id="movement_forward"
          xlink:href="#vehicle"
          dur="10s"
          begin="0;movement_back.end"
          keyPoints="0;1"
          keyTimes="0;1"
          calcMode="linear"
                   > 
    <mpath xlink:href="#motionPath" />
  </animateMotion>  
      <!-- One dash goes back 10 seconds -->
      <animateMotion id="movement_back"
          xlink:href="#rightside"
          dur="10s"
          begin="movement_forward.end"
          keyPoints="1;0"
          keyTimes="0;1"
          calcMode="linear"
                   > 
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  
 
</svg>

begin="0;movement_back.end" - 第一个动画的重启在第二个动画结束后开始

begin="movement_forward.end - 因此，两个动画循环。当第一个动画结束时，第二个动画开始

对于路径不同部分的不均匀运动，需要更改属性值：

keyPoints="0;0.2;0.4;0.8;1"
keyTimes="0;0.495;0.6;0.75;1"

<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
    d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
    c-17.9,10.9-13.4,91.9-14.9,155.8"
  />
  <g id="vehicle" stroke-width="2" stroke="red">
    <path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    <path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
  </g>
     <!-- Two dash move forward 10s -->
  <animateMotion id="movement_forward"
          xlink:href="#vehicle"
          dur="10s"
          begin="0;movement_back.end"
          keyPoints="0;0.2;0.4;0.8;1"
          keyTimes="0;0.495;0.6;0.75;1"
          calcMode="linear"
                   > 
    <mpath xlink:href="#motionPath" />
  </animateMotion>  
      <!-- One dash goes back 10 seconds -->
      <animateMotion id="movement_back"
          xlink:href="#rightside"
          dur="10s"
          begin="movement_forward.end"
          keyPoints="1;0.8;0.4;0.2;0"
          keyTimes="0;0.495;0.6;0.75;1"
          calcMode="linear"
                   > 
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  
 
</svg>

【讨论】：

【解决方案2】：

这对我来说很难理解，但我得到了这个解决方案：

<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
    d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
    c-17.9,10.9-13.4,91.9-14.9,155.8"
  />
  <g id="vehicle">
    <path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    <path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
  </g>
  
  <animateMotion id="movement"
          xlink:href="#vehicle"
          dur="20s"
          begin="0;movement.end+4s"
          fill="freeze"
          keyPoints="0;1;0"
          keyTimes="0;0.5;1"
          calcMode="spline"
          keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
          >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  
  <animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="movement.begin+10s; 20s"  fill="freeze" />
  <animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" fill="freeze" />
</svg>

几点：

如果要重复动画，关键字是indefinite，而不是indefinitive。
您显然想将leftside 动画设置为indefinite。这将适用于 opacity 动画本身，持续时间为 0.01s。这意味着，在被触发后，动画将以闪烁模式每 0.01 秒重复一次。
我认为这里的问题与leftside 动画之间的相互作用有关，并且每次都具有偏好。但是，这看起来是一个复杂的问题，我并不完全理解 (explained here)。

【讨论】：