如何为矩形的对角线设置动画？

Question

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

Answer 1

您可以将a stroke-dashoffset设置为行并将其设置为0的动画。为了计算和的值stroke-dasharray，stroke-dashoffset我使用了getTotalLength（）方法来计算stroke-dasharrayand 的值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