javascript - 使用JavaScript复制CSS或SMIL动画

Question

SMIL动画以及使用CSS设置SVG元素的动画为not suported on IE 11。

为了给我的SVG设置动画，我想使用JavaScript，更改stroke-dashoffset属性。这是我的SVG的样子：

 <svg
      xmlns="http://www.w3.org/2000/svg"
      width="200px"
      height="200px"
      viewBox="0 0 70 70"
    >
      <rect width="70px" height="70px" stroke="gray" stroke-width="20" fill="none" />
    
      <rect width="70" class="animate" height="70" stroke="yellow" stroke-width="20" fill="none" stroke-dasharray="120">
         <!-- A part that I want to replicate with JavaScript -->
         <animate
          attributeName="stroke-dashoffset"
          calcMode="linear"
          values="20 20;-120;-240"
          keyTimes="0;0.5;1"
          dur="1"
          begin="0s"
          repeatCount="indefinite"
        />
      </rect>
    </svg>

我知道如何使用 style.strokeDashoffset更改属性。

问题是：如何制作动画，以使其在需要时准确地更改属性？

因此，从上面的示例代码中：我希望将 strokeDashoffset属性在时间0更改为 20 20，在以下位置更改为：0.5的 -120，在时间1更改为： -240（动画将无限期地工作）。我尝试以离散的方式进行操作，但这显然不是我所需要的，因为动画需要连续进行。

Answer 1

您可以使用setInterval（）函数。


  let timer = setInterval(function() { if (animation complete) clearInterval(timer); else keep changing the values}, time);


并尝试将动画属性传达为间隔的数学函数。

希望这可以帮助