反向SVG线图动画 [英] Reverse SVG line drawing animation
问题描述
我试图扭转这种SVG怎么行动画。我需要从左至右画线，但只能得到它的工作从右到左。我试图改变在Illustrator终点，但这只是导致它从两侧绘制。我该怎么做呢？你可以在这里看到动画： http://mckeever02.github.io/voxbit/
这是SVG：
＆LT; SVG视框=0 0 759.7 234.2＆GT;
＆LT; Path类=电话线行程=＃FFF笔画宽度=4中风dashoffset =20=填写无类=ST0D =M755.6,229.7H540.1c- 31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335
M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335
C-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55/＆GT;
＆LT; / SVG＆GT;
和CSS的动画吧：
.phone线{
行程dasharray：1400;
-webkit-动画：绘制4S易用性的;
}@ -webkit-关键帧画{
从{
行程dashoffset：1400;
}
至 {
行程dashoffset：0;
}
}
正如你所知道的中风dasharray 属性创建一个虚线的图案。当该值被分配1400这意味着划线的虚线之间的长度和空间1400也就是说为0〜1400的线将是present以及从1400到2800破折号将是present。
现在，当您更改中风dashoffset 从 1400 到 0 它带来的线进入视野从一个方向。最初的偏移是在1400，因此只破折号是可见的（无线）。当动画为0的偏移量，前围向左和线路移出（即present从0到1400）慢慢进入视野。
有一个简单的方法来从另一个方向做这将是从 1400 动画它 2800 。当做到这一点，短划线向右作为线移出（即present从2800到4200），慢慢地映入眼帘。
.phone线{\r
行程dasharray：1400;\r
动画：绘制4S易用性的;\r
}\r
@keyframes画{\r
从{\r
行程dashoffset：1400;\r
}\r
至 {\r
行程dashoffset：2800;\r
}\r
} \r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; SVG视框=0 0 759.7 234.2＆GT;\r
＆LT; Path类=电话线行程=＃000笔画宽度=4中风dashoffset =20=填写无类=ST0D =M755.6,229.7H540.1c- 31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335\r
M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335\r
C-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55/＆GT;\r
＆LT; / SVG＆GT; \r
由保罗·勒博在 <一提到另一种方法（ href=\"http://stackoverflow.com/questions/32483980/reverse-svg-line-drawing-animation/32484124#comment52829547_32484124\">comments)将是从 -1400 到 0 ，这也产生输出上面的代码相同。
.phone线{\r
行程dasharray：1400;\r
动画：绘制4S易用性的;\r
}\r
@keyframes画{\r
从{\r
行程dashoffset：-1400;\r
}\r
至 {\r
行程dashoffset：0;\r
}\r
} \r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; SVG视框=0 0 759.7 234.2＆GT;\r
＆LT; Path类=电话线行程=＃000笔画宽度=4中风dashoffset =20=填写无类=ST0D =M755.6,229.7H540.1c- 31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335\r
M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h，7.9H335\r
C-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55/＆GT;\r
＆LT; / SVG＆GT; \r
注意：在我看来，理想的方法是改变你的
路径的方向本身从左边开始，向右移动而不是从从右到左。这只是一个简单的解决方法，而无需更改路径扭转方向。I'm trying to reverse how this SVG line animates. I need the line to draw from left to right but can only get it to work right to left. I tried changing the end point in illustrator but this only led to it drawing from both sides. How do I do this? You can see the animation here: http://mckeever02.github.io/voxbit/
This is the SVG:
<svg viewBox="0 0 759.7 234.2"> <path class="phone-line" stroke="#fff" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" /> </svg>and the CSS to animate it:
.phone-line { stroke-dasharray:1400; -webkit-animation: draw 4s ease-in; } @-webkit-keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
解决方案As you would be aware, the
stroke-dasharrayproperty creates a dashed line pattern. When the value is assigned as 1400 it means that the length of the dash and the space between the dashes is 1400. That is for 0 to 1400 the line will be present and from 1400 to 2800 a dash would be present.Now when you change the
stroke-dashoffsetfrom1400to0it brings the line into view from one direction. Initially the offset is at 1400 and thus only the dash is visible (no line). When the offset is animated to 0, the dash moves out towards the left and the line (that is present from 0 to 1400) slowly comes into view.A simple method to do it from the other direction would be to animate it from
1400to2800. When this is done, the dash moves out towards the right as the line (that is present from 2800 to 4200) slowly comes into view..phone-line { stroke-dasharray: 1400; animation: draw 4s ease-in; } @keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 2800; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <svg viewBox="0 0 759.7 234.2"> <path class="phone-line" stroke="#000" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" /> </svg>
Another approach (as mentioned by Paul LeBeau in comments) would be to animate it from
-1400to0. This also produces the same output as the above snippet..phone-line { stroke-dasharray: 1400; animation: draw 4s ease-in; } @keyframes draw { from { stroke-dashoffset: -1400; } to { stroke-dashoffset: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <svg viewBox="0 0 759.7 234.2"> <path class="phone-line" stroke="#000" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" /> </svg>
Note: Ideal approach in my view would be to change the direction of your
pathitself to start from the left and move to the right instead of go from right to left. This is only a simple workaround to reverse the direction without altering thepath.
这篇关于反向SVG线图动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
