如何动画一条矩形的对角线？
如何动画一条矩形的对角线？
提问于 2019-02-18 18:49:20
我正在尝试添加一个对角的动画。我知道的矩形的高度和宽度(动态累加)。现在尝试从N到L，或从O到M或其他方式设置线的动画。我尝试了svg和增加行的x1，y1，x2，y2，但这变得越来越复杂。有更简单或更简单的解决方案吗？
回答 1
Stack Overflow用户
发布于 2019-02-18 19:08:30
您可以为线条指定一个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使用相同的动画
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54745545
复制相关文章
相似问题