如何为矩形的对角线设置动画? [英] 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?
推荐答案
你可以给你的线条一个 stroke-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
和 #nl
这篇关于如何为矩形的对角线设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!