如何为矩形的对角线设置动画？ [英] How to animate a line of a rectangle's diagonals?

问题描述

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

I am trying add up an animation diagonally. The rectangle height and width I know (dynamically adding up). Now trying to animated a line from N to L, or O to M or other ways. I tried with svg and increasing the line's x1, y1, x2, y2 but this is getting complicated. Any easier or simpler solution?

< img src = https://i.stack.imgur.com/1UkfB.jpg alt =在此处输入图片描述>

推荐答案

您可以为行赋予笔划-dashoffset 并将其动画化为0。计算 stroke-dasharray的值和 stroke-dashoffset 我使用了 getTotalLength（）方法来计算 stroke-dasharray 和 stroke-dashoffset 。希望对您有所帮助。

You can give your lines a stroke-dashoffset and animate it to 0. To calculate the values for stroke-dasharray and stroke-dashoffset I've used the getTotalLength() method to calculate the values for stroke-dasharray and stroke-dashoffset. I hope it helps.

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也一样。

And this is with both lines animated this time with m to o and l to n: just change the values for x1 to x2 and viceversa. The same for y. This will change the direction of the line.

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 和<$使用相同的动画c $ c> #nl

这篇关于如何为矩形的对角线设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！