html - 如何为矩形的对 Angular 线设置动画？

Question

我正在尝试对 Angular 添加动画。我知道的矩形高度和宽度(动态相加)。现在尝试为一条从 N 到 L，或 O 到 M 或其他方式的线设置动画。 我尝试使用 svg 并增加该行的 x1、y1、x2、y2，但这变得越来越复杂。有更简单或更简单的解决方案吗？

Answer 1

你可以给你的线条一个 stroke-dashoffset 并将其设置为 0。计算 stroke-dasharray 和 stroke-dashoffset 的值> 我用过 getTotalLength()方法计算 stroke-dasharray 和 stroke-dashoffset 的值。希望对您有所帮助。

svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox = "0 0 100 70">  
  <rect x="10" y="10" width="80" height="50" />
  <line id="om" x1="90" y1="60" x2="10" y2="10" />
</svg>

这次是用 m 到 o 和 l 到 n 的两条动画线:只需将 x1 的值更改为 x2，反之亦然。 y 也一样。这将改变线的方向。

svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#mo,#ln{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox = "0 0 100 70">  
  <rect x="10" y="10" width="80" height="50" />
  <!--<line id="om" x1="90" y1="60" x2="10" y2="10" />
  <line id="nl" x1="90" y1="10" x2="10" y2="60" />-->
  <line id="mo" x2="90" y2="60" x1="10" y1="10" />
  <line id="ln" x2="90" y2="10" x1="10" y1="60" />
</svg>

我为 #om 和 #nl 使用相同的动画