我认为您的设置中有两个小错误。
第一个是点的间距是 stroke-dash 数组的 2 个参数的总和。由于第一个参数始终为 0.001,因此第二个参数应该是公式的结果减去 0.001。
第二个是你在圆圈周围放置 36 个点。从点到点的角度为 10 度。因此,您的动画应该为系列指定 10 度、20 度、30 度,而不是 15 度 30 度 45 度……这会在每个循环结束时产生 5 度的跳跃。
我认为我或多或少的工作
初始轮换也存在问题;我希望现在这是你想要的。
而且,由于 svg 的尺寸较小,因此进行了某种围捕;将其设置为 600 平方会更好。
我还在 10 度处添加了一条线来检查点的正确对齐方式。
CSS
body {
background: black;
padding: 0;
margin: 0;
}
circle {
fill: none;
stroke-width: 10;
stroke-linecap: round;
}
circle { -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;}
circle:nth-child(2) { -webkit-animation-name:second;
-moz-animation:second 3s ease-in-out infinite;
animation:second 3s ease-in-out infinite;}
circle:nth-child(3) { -webkit-animation-name:third; -moz-animation:third 3s ease-in-out infinite; animation:third 3s ease-in-out infinite; }
circle:nth-child(4) { -webkit-animation-name:fourth; -moz-animation:fourth 3s ease-in-out infinite; animation:fourth 3s ease-in-out infinite; }
circle:nth-child(5) { -webkit-animation-name:fifth; -moz-animation:fifth 3s ease-in-out infinite; animation:fifth 3s ease-in-out infinite; }
circle:nth-child(6) { -webkit-animation-name:sixth; -moz-animation:sixth 3s ease-in-out infinite; animation:sixth 3s ease-in-out infinite; }
circle:nth-child(7) { -webkit-animation-name:seventh; -moz-animation:seventh 3s ease-in-out infinite; animation:seventh 3s ease-in-out infinite; }
circle:nth-child(8) { -webkit-animation-name:eighth; -moz-animation:eighth 3s ease-in-out infinite; animation:eighth 3s ease-in-out infinite; }
circle:nth-child(9) { -webkit-animation-name:ninth; -moz-animation:ninth 3s ease-in-out infinite; animation:ninth 3s ease-in-out infinite; }
circle:nth-child(10) {
-webkit-animation-name:tenth;
-moz-animation:tenth 3s ease-in-out infinite;
animation:tenth 3s ease-in-out infinite;
-webkit-transform: rotate(10deg);}
@-webkit-keyframes second { 0% { -webkit-transform:rotate(5deg) }
100% { -webkit-transform:rotate(15deg) } }
@-webkit-keyframes third { 100% { -webkit-transform:rotate(20deg) } }
@-webkit-keyframes fourth { 0% { -webkit-transform:rotate(5deg) }
100% { -webkit-transform:rotate(35deg) } }
@-webkit-keyframes fifth { 100% { -webkit-transform:rotate(40deg) } }
@-webkit-keyframes sixth { 0% { -webkit-transform:rotate(5deg) }
100% { -webkit-transform:rotate(55deg) } }
@-webkit-keyframes seventh {100% { -webkit-transform:rotate(60deg) } }
@-webkit-keyframes eighth { 0% { -webkit-transform:rotate(5deg) }
100% { -webkit-transform:rotate(75deg) } }
@-webkit-keyframes ninth { 0% { -webkit-transform:rotate(0deg) }
100% { -webkit-transform:rotate(80deg) } }
@-webkit-keyframes tenth { 0% { -webkit-transform:rotate(5deg) }
100% { -webkit-transform:rotate(95deg) } }
@-moz-keyframes second { 0% { -moz-transform:rotate(5deg) }
100% { -moz-transform:rotate(15deg) } }
@-moz-keyframes third { 100% { -moz-transform:rotate(20deg) } }
@-moz-keyframes fourth { 0% { -moz-transform:rotate(5deg) }
100% { -moz-transform:rotate(35deg) } }
@-moz-keyframes fifth { 100% { -moz-transform:rotate(40deg) } }
@-moz-keyframes sixth { 0% { -moz-transform:rotate(5deg) }
100% { -moz-transform:rotate(55deg) } }
@-moz-keyframes seventh { 100% { -moz-transform:rotate(60deg) } }
@-moz-keyframes eighth { 0% { -moz-transform:rotate(5deg) }
100% { -moz-transform:rotate(75deg) } }
@-moz-keyframes ninth { 100% { -moz-transform:rotate(80deg) } }
@-moz-keyframes tenth { 0% { -moz-transform:rotate(5deg) }
100% { -moz-transform:rotate(95deg) } }
line {
stroke-width: 1;
-webkit-transform-origin: left center;
-webkit-transform: rotate(-10deg);
}
并且还对样式进行了一些优化
好吧,在这个问题上花了很多时间之后,我几乎可以肯定在某种舍入/精度中存在某种错误。
我已经完全改变了想法以避免这个问题。目标是让圆圈在结束动画之前形成完整的圆圈,以便动画的开始和结束始终同步。
由于这会产生巨大的关键帧样式,我想重用它;为了实现这一点,我以嵌套的方式对圆圈进行了分组;并将动画应用于每个组:
HTML
<svg viewBox="0 0 60 60">
<g class="g">
<circle cx="30" cy="30" r="10" stroke-dasharray="0.001, 1.745" stroke="hsl(120, 100%, 50%)"/>
<g class="g">
<circle cx="30" cy="30" r="12" stroke-dasharray="0.001, 2.094" stroke="hsl(108, 100%, 50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="14" stroke-dasharray="0.001, 2.443" stroke="hsl(96, 100%, 50%)"/>
<g class="g">
<circle cx="30" cy="30" r="16" stroke-dasharray="0.001, 2.793" stroke="hsl(84, 100%, 50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="18" stroke-dasharray="0.001, 3.142" stroke="hsl(72, 100%, 50%)"/>
<g class="g">
<circle cx="30" cy="30" r="20" stroke-dasharray="0.001, 3.491" stroke="hsl(60, 100%, 50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="22" stroke-dasharray="0.001, 3.840" stroke="hsl(48, 100%, 50%)"/>
<g class="g">
<circle cx="30" cy="30" r="24" stroke-dasharray="0.001, 4.189" stroke="hsl(36, 100%, 50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="26" stroke-dasharray="0.001, 4.538" stroke="hsl(24, 100%, 50%)"/>
<g class="g">
<circle cx="30" cy="30" r="28" stroke-dasharray="0.001, 4.887" stroke="hsl(12, 100%, 50%)" class="c2"/>
</g></g></g></g></g></g></g></g></g></g>
</svg>
(是的,回到低分辨率!)
CSS
body {
background: black;
padding: 0;
margin: 0;
}
circle {
fill: none;
stroke-width: 1;
stroke-linecap: round;
}
.g {
-webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center;
-webkit-animation-duration: 108s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: anim;
-moz-animation:second 3s ease-in-out infinite;
animation:second 3s ease-in-out infinite;}
.c2 {
-webkit-transform-origin: center center;
-webkit-transform: rotate(5deg);
}
@-webkit-keyframes anim { 0% { -webkit-transform:rotate(0deg)}
2.778% { -webkit-transform:rotate(10deg)}
5.56% { -webkit-transform:rotate(20deg)}
8.33% { -webkit-transform:rotate(30deg)}
11.11% { -webkit-transform:rotate(40deg)}
13.89% { -webkit-transform:rotate(50deg)}
16.67% { -webkit-transform:rotate(60deg)}
19.44% { -webkit-transform:rotate(70deg)}
22.22% { -webkit-transform:rotate(80deg)}
25% { -webkit-transform:rotate(90deg)}
27.78% { -webkit-transform:rotate(100deg)}
30.56% { -webkit-transform:rotate(110deg)}
33.33% { -webkit-transform:rotate(120deg)}
36.11% { -webkit-transform:rotate(130deg)}
38.89% { -webkit-transform:rotate(140deg)}
41.67% { -webkit-transform:rotate(150deg)}
44.44% { -webkit-transform:rotate(160deg)}
47.22% { -webkit-transform:rotate(170deg)}
50% { -webkit-transform:rotate(180deg)}
52.78% { -webkit-transform:rotate(190deg)}
55.56% { -webkit-transform:rotate(200deg)}
58.33% { -webkit-transform:rotate(210deg)}
61.11% { -webkit-transform:rotate(220deg)}
63.89% { -webkit-transform:rotate(230deg)}
66.67% { -webkit-transform:rotate(240deg)}
69.44% { -webkit-transform:rotate(250deg)}
72.22% { -webkit-transform:rotate(260deg)}
75% { -webkit-transform:rotate(270deg)}
77.78% { -webkit-transform:rotate(280deg)}
80.56% { -webkit-transform:rotate(290deg)}
83.33% { -webkit-transform:rotate(300deg)}
86.11% { -webkit-transform:rotate(310deg)}
88.89% { -webkit-transform:rotate(320deg)}
91.67% { -webkit-transform:rotate(330deg)}
94.44% { -webkit-transform:rotate(340deg)}
97.22% { -webkit-transform:rotate(350deg)}
100% { -webkit-transform:rotate(360deg)}
}
和新的演示 (对不起,只有 webkit)
这是我调查错误的尝试。我改变了系统,而不是动画,我有两组圆圈,一组是彩色的,另一组是黑色的,旋转了 10 度。不应显示色环;偏移量是对误差的衡量。(也许你需要滚动才能看到圆圈
偏移量演示