具有SVG 仅[]]的形状为“ 8”的环形动画，> [使用[[0]的组合 <animate attributeName="cx">和<attributeName="cy">来寻找最佳点以实现“ 8”字形动画时，我头疼不已。我想使用它，因为按照我的指标，它在FPS，CPU和GPU使用方面似乎是性能最高的。 “理想”运动路径的快速演示：https://codepen.io/ivancis/pen/eYmZowz 我非常头痛，试图通过使用 和 的组合来找到最佳点以实现“ 8”字形动画。我想... ] >> 由注释的改进引起的新解决方案 我只需要结合使用即可为svg元素设置动画<animate attributeName="cx"><animate attributeName="cy">（用于性能）以进行“ 8”形运动，循环 由于作者不想使用animateMotion命令，因此在这种情况下我只看到一种方法来实现沿无穷大符号的圆运动动画： [必须沿着无穷大符号顺序选择许多点并将其坐标分配给圆cx = "x"，cy = "y" 选择的点越多，圆沿着无穷大符号的轨迹移动越近 在矢量编辑器中，我依次将圆放在无穷大符号上，并记下其在圆心的坐标。第一个圆的中心坐标为cx ="70"cy ="60"因此，对沿无穷大符号定位的所有圆进行了此操作。最后一个圆与第一个圆具有相同的坐标，从而实现闭合循环 [仅在动画公式cx，cy中替换这些值 圆周运动动画cx，半径为cy的[C0 r="5 半径 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="5"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> ，例如在问题作者的示例中 r = 40 您没有说您真正想要哪种动画。 因此，我将提供不同类型的动画的示例，您可以选择它们中的任何一个并以某种方式自行修改。 无限符号移动动画 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="40"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> Rotation 鼠标悬停在符号上 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 100 100"> <path fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10"> <animateTransform attributeName="transform" type="translate" values="0; 150; 0" begin="0s" dur="4s" repeatCount="indefinite" /> </path> </svg> .infinity1{ transform-box: fill-box; transform-origin: center center; transition: rotate 2s linear ; } .infinity1:hover { animation: spin 2s linear infinite; } @keyframes spin { 100% {transform :rotate(360deg);} } 绕Y轴旋转 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <path class="infinity1" fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> </svg> .infinity1{ transform-box: fill-box; transform-origin: center center; transition: rotate 2s linear ; fill:transparent; } .infinity1:hover { animation: spin 2s linear infinite; } @keyframes spin { 100% {transform :rotateY(360deg);} } 通过更改属性stroke-dasharray填充无穷大符号的动画 单击圆圈中的彩色字母 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" > <path class="infinity1" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> </svg> .container { width:40%; height="40%"; background:black; } <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100"> <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> <!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" --> <path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" /> </path> <!-- Middle point on the left stroke-dashoffset="-159.5" --> <path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" /> </path> <!-- Midpoint left top stroke-dashoffset="128.5" --> <path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" /> </path> <!-- Midpoint lower right stroke-dashoffset="192.7" --> <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" /> </path> <!-- Middle point on the right stroke-dashoffset="223.9" --> <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" /> </path> <g id="btn_L" transform="translate(-17 0)" > <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="green" >L</text> </g> <g id="btn_C" transform="translate(3 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="24" y="95" font-size="10" fill="crimson" >C</text> </g> <g id="btn_T" transform="translate(23 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="24" y="95" font-size="10" fill="orange" >T</text> </g> <g id="btn_B" transform="translate(43 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="dodgerblue" >B</text> </g> <g id="btn_R" transform="translate(63 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="purple" >R</text> </g> </svg> </div>

问题描述 投票：0回答：2
[使用[[0]的组合 <animate attributeName="cx">和<attributeName="cy">来寻找最佳点以实现“ 8”字形动画时，我头疼不已。我想使用它，因为按照我的指标，它在FPS，CPU和GPU使用方面似乎是性能最高的。

“理想”运动路径的快速演示：https://codepen.io/ivancis/pen/eYmZowz

我非常头痛，试图通过使用

和

的组合来找到最佳点以实现“ 8”字形动画。我想...

css animation svg svg-animate smil
2个回答
1
投票

我只需要结合使用即可为svg元素设置动画<animate attributeName="cx"><animate attributeName="cy">（用于性能）以进行“ 8”形运动，循环

1
投票
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.