如何使SVG动画无缝流畅? [英] How can I make the SVG animation seamless and smooth?
问题描述
我已经为SVG制作了动画，以提供手写效果，我想使动画更加无缝，因为动画中出现了字母"W"，它也使字母的其他部分也出现了，我可以不要减小笔划宽度，因为字母的其余部分不会完全显示出来，请指导我完成操作.
由于我无法在此处将代码上载其SVG，并且不能超过35,000个字符，因此请务必检查CodePen.
HTML代码
<defs>
<clipPath id="clip-path" transform="translate(0 0)">
<path id="w" d="M47.205,44.721c-.1.062-.191.119-.262.169a1.172,1.172,0,0,0-.192.17,1.237,1.237,0,0,0-.155.208,1.71,1.71,0,0,0-.13.285L42.677,55.6q-.354-.956-.708-1.9-.307-.8-.655-1.694t-.623-1.6L38.8,55.6Q37.7,52.9,36.825,50.73q-.37-.925-.739-1.818c-.247-.6-.467-1.134-.662-1.618s-.357-.883-.485-1.2-.2-.508-.223-.57a1.835,1.835,0,0,0-.293-.47,1.326,1.326,0,0,0-.539-.332H36.7a.519.519,0,0,0-.355.4.832.832,0,0,0,.093.539l2.836,7.18,1.077-3.3q-.215-.57-.493-1.247t-.532-1.279c-.17-.4-.313-.747-.432-1.04s-.187-.464-.208-.516a1.529,1.529,0,0,0-.223-.409,1.143,1.143,0,0,0-.532-.332h2.711a.5.5,0,0,0-.315.4,1.016,1.016,0,0,0,.07.539l.817,2.033.8-2.2a.886.886,0,0,0,.068-.479q-.039-.2-.347-.293h1.633a2.841,2.841,0,0,0-.254.17,1.007,1.007,0,0,0-.169.161,1.148,1.148,0,0,0-.124.185,2.582,2.582,0,0,0-.116.254l-1.155,3.034,1.556,4.313L45.652,45.6a1.01,1.01,0,0,0,.062-.533.513.513,0,0,0-.355-.346h1.849Z" style="fill: none" />
</clipPath>
</defs>
<g id="w-grp">
<g style="clip-path: url(#clip-path)">
<polyline class="logo-path m-1" id="w-path" points="35.084 43.989 39.663 55.599 38.796 55.599 38.609 55.136 42.916 43.989 38.968 43.989 43.484 55.599 42.677 55.597 42.474 55.101 46.67 43.989" style="fill: none;stroke: #191717;stroke-miterlimit: 10;stroke-width: 3px" />
</g>
</g>
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
链接的问题1:用于SVG的JQuery函数，要在第一动画完成后立即执行第二动画吗?
链接的问题2:使用Jquery控制基于SVG CSS的动画?
链接的问题3:使用Jquery控制多个SVG元素的速度?
这就是我要这样做的方式:
我使用的是一条折线元素，并且正在使用类似V的路径进行裁剪.为了制作W，我使用了两次剪切的折线.我正在对use元素的stroke-dashoffset进行动画处理，第二个元素的延迟为1s
svg{width:300px;border:solid}
use{
stroke-dasharray: 255;
stroke-dashoffset: 255;
animation: dash 1s linear forwards;
}
use:nth-of-type(2){
animation-delay:1s
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="30 80 250 150">
<defs>
<clipPath id="clip">
<path id="V" xmlns="http://www.w3.org/2000/svg" d="M52,90L103,210 110,210 160,90 152,90 110,190 66,90 52,90" stroke="black" fill="none" />
</clipPath>
<polyline id="poly" points="58,85 107,203 156,85" stroke="red" fill="none" stroke-width="19" clip-path="url(#clip)" />
</defs>
<use xlink:href="#poly" x="0" />
<use xlink:href="#poly" x="50" />
</svg>
I have animated the SVG, to give a handwriting effect, I want to make the animation more seamless, as the letter "W" appears in the animation, it makes the other part of the letter appear as well, and I can't decrease the stroke-width as the rest of the part of the letter will not appear completely, please guide me along on what can be done.
As I cant upload the code here its SVG and exceeding more than 35,000 characters, so please do check the CodePen.
HTML Code
<defs>
<clipPath id="clip-path" transform="translate(0 0)">
<path id="w" d="M47.205,44.721c-.1.062-.191.119-.262.169a1.172,1.172,0,0,0-.192.17,1.237,1.237,0,0,0-.155.208,1.71,1.71,0,0,0-.13.285L42.677,55.6q-.354-.956-.708-1.9-.307-.8-.655-1.694t-.623-1.6L38.8,55.6Q37.7,52.9,36.825,50.73q-.37-.925-.739-1.818c-.247-.6-.467-1.134-.662-1.618s-.357-.883-.485-1.2-.2-.508-.223-.57a1.835,1.835,0,0,0-.293-.47,1.326,1.326,0,0,0-.539-.332H36.7a.519.519,0,0,0-.355.4.832.832,0,0,0,.093.539l2.836,7.18,1.077-3.3q-.215-.57-.493-1.247t-.532-1.279c-.17-.4-.313-.747-.432-1.04s-.187-.464-.208-.516a1.529,1.529,0,0,0-.223-.409,1.143,1.143,0,0,0-.532-.332h2.711a.5.5,0,0,0-.315.4,1.016,1.016,0,0,0,.07.539l.817,2.033.8-2.2a.886.886,0,0,0,.068-.479q-.039-.2-.347-.293h1.633a2.841,2.841,0,0,0-.254.17,1.007,1.007,0,0,0-.169.161,1.148,1.148,0,0,0-.124.185,2.582,2.582,0,0,0-.116.254l-1.155,3.034,1.556,4.313L45.652,45.6a1.01,1.01,0,0,0,.062-.533.513.513,0,0,0-.355-.346h1.849Z" style="fill: none" />
</clipPath>
</defs>
<g id="w-grp">
<g style="clip-path: url(#clip-path)">
<polyline class="logo-path m-1" id="w-path" points="35.084 43.989 39.663 55.599 38.796 55.599 38.609 55.136 42.916 43.989 38.968 43.989 43.484 55.599 42.677 55.597 42.474 55.101 46.67 43.989" style="fill: none;stroke: #191717;stroke-miterlimit: 10;stroke-width: 3px" />
</g>
</g>
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?
Linked Question 2: To Control SVG CSS Based Animation Using Jquery?
Linked Question 3: To Control The Speed Of Multiple SVG Elements Using Jquery?
This is how I would do it:
I'm using a polyline element that I am clipping with a V like path. In order to make the W I'm using the clipped polyline twice. I am animating the stroke-dashoffset of the use elements, the second element with a 1s delay
svg{width:300px;border:solid}
use{
stroke-dasharray: 255;
stroke-dashoffset: 255;
animation: dash 1s linear forwards;
}
use:nth-of-type(2){
animation-delay:1s
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="30 80 250 150">
<defs>
<clipPath id="clip">
<path id="V" xmlns="http://www.w3.org/2000/svg" d="M52,90L103,210 110,210 160,90 152,90 110,190 66,90 52,90" stroke="black" fill="none" />
</clipPath>
<polyline id="poly" points="58,85 107,203 156,85" stroke="red" fill="none" stroke-width="19" clip-path="url(#clip)" />
</defs>
<use xlink:href="#poly" x="0" />
<use xlink:href="#poly" x="50" />
</svg>
这篇关于如何使SVG动画无缝流畅?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
