代码之家 › 专栏 › 技术社区 › Codemonkey

SVG加载程序在有大量背景JS加载时无法正确设置动画。这个能修好吗?

svg javascript

Codemonkey · 技术社区 · 7 年前

我使用的是一个基本的SVG加载程序,而我的站点做了一些繁重的JS工作,但它几乎没有任何动画效果。我可以在浏览器中设置优先级吗?我很高兴JS的执行速度慢了0.01秒,如果这意味着SVG可以正常运行的话。

这是svg文件:

<svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
<circle cx="5"  cy="5"  r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="2s"   values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="5"  cy="21" r="5" fill-opacity=".2"><animate attributeName="fill-opacity" begin="0s" dur="1.8s" values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="5"  cy="37" r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.6s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="5"  r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="21" r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.2s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="37" r="5" fill-opacity=".2"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="5"  r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.6s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="21" r="5" fill-opacity=".6"><animate attributeName="fill-opacity" begin="0s" dur="1.8s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="37" r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="2s"   values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
</svg>

谢谢!

2 回复 | 直到 7 年前

Arseniy-II 7 年前

我相信 Web Workers 正是你需要的!

您需要将繁重的js代码提取到其中,以便提高页面性能。

enxaneta 7 年前

而不是使用 SMIL animations 你可以尝试CSS动画(更好的支持)

circle{
 animation:changeOpacity var(--d) infinite
}

@keyframes changeOpacity{
  0%{fill-opacity:var(--a)}
  50%{fill-opacity:var(--b)}
  100%{fill-opacity:var(--c)}
}

<svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
<circle cx="5"  cy="5"  r="5" style="--a:.8;--b:.1;--:.8;--d:1.8s"></circle>
<circle cx="5"  cy="21" r="5" style="--a:.1;--b:.8;--:.1;--d:1.8s"></circle>
<circle cx="5"  cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:1.6s"></circle>
<circle cx="21" cy="5"  r="5" style="--a:.1;--b:.8;--:.1;--d:1.4s"></circle>
<circle cx="21" cy="21" r="5" style="--a:.8;--b:.1;--:.8;--d:1.2s"></circle>
<circle cx="21" cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:1.4s"></circle>
<circle cx="37" cy="5"  r="5" style="--a:.8;--b:.1;--:.8;--d:1.6s"></circle>
<circle cx="37" cy="21" r="5" style="--a:.8;--b:.1;--:.8;--d:1.8s"></circle>
<circle cx="37" cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:2s"></circle>
</svg>