隐藏SVG元素中途动画

Jordy 发表于 Dev

乔迪

我有一个重复的20秒svg动画。中途（10秒），它应该突然隐藏一个path称为的元素leftside。动画结束并重复播放时，它应再次显示该元素。我该如何实现？

现在，我有了第一个循环。但是不幸的是，动画重复时的重置无法正常工作。

这就是我所拥有的：

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

vqf

这对我来说很难遵循，但是我得到了以下解决方案：

<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动画之间的相互作用有关，并且哪个动画每次都有偏好。但是，这看起来像一个复杂的问题，我对此并不完全理解（在此进行解释）。