如何解决svg加载器动画循环
我需要一些帮助来创建我的SVG加载器。我下面有一个这样的动画。动画开始时,每个圆圈变为橙色。完成后,线开始向后画(可以),但每个圆圈也应变为蓝色。而且它也应该循环播放。你们能帮我吗?包含摘要。
svg {
width: 100%;
max-width: 500px;
}
path {
stroke-dasharray: 2530;
stroke-dashoffset: 2530;
animation: draw 1.5s linear infinite alternate;
}
.circle-big {
fill: #6085A1;
}
.circle-small {
fill: #fff;
}
#circle-1-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 0ms;
}
#circle-2-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 100ms;
}
#circle-3-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 350ms;
}
#circle-4-big {
animation: changeColor;
animation-duration: 100ms,100ms;
animation-fill-mode: forwards;
animation-delay: 650ms;
}
#circle-5-big {
animation: changeColor;
animation-duration: 100ms,100ms;
animation-fill-mode: forwards;
animation-delay: 800ms;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes changeColor {
0% {
fill: #6085A1;
}
100% {
fill: #EF7B00;
}
}
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1228 408">
<g>
<path stroke-linecap="round" stroke-width="11" stroke="black" fill="none" d="M51,244L216,71L478,339L762,50L948,238L1139,48"></path>
<circle class="circle-big" id="circle-1-big" cx="51" cy="244" r="39"></circle><circle class="circle-small" id="circle-1-small" cx="51" cy="244" r="14"></circle>
<circle class="circle-big" id="circle-2-big" cx="216" cy="71" r="39"></circle><circle class="circle-small" id="circle-2-small" cx="216" cy="71" r="14"></circle>
<circle class="circle-big" id="circle-3-big" cx="478" cy="339" r="39"></circle><circle class="circle-small" id="circle-3-small" cx="478" cy="339" r="14"></circle>
<circle class="circle-big" id="circle-4-big" cx="762" cy="50" r="39"></circle><circle class="circle-small" id="circle-4-small" cx="762" cy="50" r="14"></circle>
<circle class="circle-big" id="circle-5-big" cx="1139" cy="48" r="39"></circle><circle class="circle-small" id="circle-5-small" cx="1139" cy="48" r="14"></circle>
</g>
</svg>
</div>
解决方法
我对您的代码进行了一些更改:
-
不是使用2个圆,而是使用一个粗笔划的圆。在这种情况下,我是粗略地设置笔画而不是填充动画。
-
您有一条路径,并为笔划破折号设置了动画。问题在于路径的各个部分具有不同的长度,从而使得无法知道何时开始绘制圆圈的动画。我正在使用5条路径,而不是仅一条路径,而是在路径动画的末尾开始圆形动画。
-
在这种情况下,您不能使用动画方向:相反,我正在使用2个串联的动画。我还需要一些JavaScript才能知道第二个动画何时结束,以便可以删除svg类并将其添加回去。
为了计算延迟,我使用css变量,但是您可能需要为每个段使用不同的动画(对于那些不支持变量的浏览器)。或者,您可以使用javascript。另外,我正在使用变量来存储每个路径的长度。
作为观察:正如@Alexandr_TT在其注释中提到的,在这种情况下,SMIL动画可能会更好。还有一个用于SMIL动画的js polyfill。
let svg = document.querySelector("svg");
let i = 0;
first.addEventListener(
"animationend",() => {
i++;
if (i % 2 == 0) {
svg.setAttribute("class","");
}
},false
);
window.setInterval( function(){
svg.setAttribute("class","svg");
},15000/60);
svg {
width: 100%;
max-width: 500px;
}
path {
stroke-dasharray: var(--sd);
stroke-dashoffset: var(--sd);
stroke:black;
}
.svg path {
animation: draw 1s forwards calc(1.5s * var(--n)),draw1 1s forwards calc(1.5s * (9 - var(--n)))}
circle {
stroke: #6085a1;
stroke-width:30px;
fill:white;
}
.svg circle {
animation: a .5s forwards calc(1.5s * var(--n) - .5s),b .5s forwards calc(1.5s * (10 - var(--n)) - .5s);
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes draw1 {
to {
stroke-dashoffset: var(--sd);
}
}
@keyframes a {
0% {
stroke: #6085A1;
}
100% {
stroke: #EF7B00;
}
}
@keyframes b {
0% {
stroke: #EF7B00;
}
100% {
stroke: #6085A1;
}
}
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1228 408" class="svg">
<!--<path stroke-linecap="round" stroke-width="11" stroke="black" fill="none" d="M51,244L216,71L478,339L762,50L948,238L1139,48"></path>-->
<g style="--sd:239;--n:0">
<path id="a" stroke-width="11" d="M51,71" />
<circle cx="51" cy="244" r="30" id="first"></circle>
</g>
<g style="--sd:374.79;--n:1">
<path id="b" stroke-width="11" d="M216,339" />
<circle cx="216" cy="71" r="30"></circle>
</g>
<g style="--sd:405.19;--n:2">
<path id="c" stroke-width="11" d="M478,50" />
<circle cx="478" cy="339" r="30"></circle>
</g>
<g style="--sd:264.46;--n:3">
<path id="d" stroke-width="11" d="M762,238" />
<circle cx="762" cy="50" r="30"></circle>
</g>
<g style="--sd:269.4;--n:4">
<path id="e" stroke-width="11" d="M948,48" />
<circle cx="948" cy="238" r="30"></circle>
</g>
<g style="--n:5">
<circle cx="1139" cy="48" r="30"></circle>
</g>
</svg>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。