gpt4 book ai didi

javascript - SVG 动画 : sluggish/poor performance in Chrome

转载 作者:行者123 更新时间:2023-11-29 23:13:32 30 4
gpt4 key购买 nike

我们正在开发一个相当复杂的场景,其中有很多移动部件,到目前为止还没有涉及任何 SVG 动画。

一切都很顺利并且表现良好,直到我们引入了一个带有几条虚线的 SVG,我们使用 stroke-dashoffset 属性对其进行了动画处理。

这在 Edge 或 Firefox 中完全没有区别,但在 Chrome 中,整个场景的动画变得不稳定和缓慢。

我们甚至为同一目的尝试了两种方法 - CSS 关键帧和 SVG 元素内的 SMIL - 但两者的表现同样糟糕。

是否有我们缺少的 Chrome 性能技巧?

编辑:例子

标记:

.stream {
animation: stream 10s infinite;
}

@keyframes stream {
100% {
stroke-dashoffset: 100;
}
}
<svg version="1.0" id="streams" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225.32 66.19" enable-background="new 0 0 225.32 66.19" xml:space="preserve">
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M107.38,50.54c0,0-6.78-84.52-106.51-22.2" />
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M110.49,45.31c-0.63-13.01-4.56-44.87-27.83-43.8c-27.6,1.27-37.33,39.66-38.49,60.34"/>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M180.63,59.88c-0.69-9.65-3.6-30.18-15.76-45.51C148.44-6.34,131.85,2.22,128.87,5c-2.89,2.7-12.81,7.14-14.28,42"/>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M118.59,45.41c2.4-10.18,9.9-31.97,30.87-37.59c26.03-6.98,55.13,9.32,72.02,19.37"/>
</svg>

最佳答案

重复 How can I animate infinite marker movement down an SVG path without very high CPU usage?

这里真正的问题是糟糕的 svg 实现,参见 chrome bug

一种解决方法确实会降低 javascript 动画的帧速率,请参阅代码示例

这个特殊情况可以用虚线圆圈和 css 来完成 transform: rotate3d() .而且“GPU 转换”翻译/旋转在今天的 svg 实现中表现不佳。解决方法:将 svg 代码包装在 <div> 中并为 div 设置动画,瞧! cpu 下降到零。相关:crmarsh.com/svg-performance

const svg_elem = document.getElementById('streams')

const animateDashTime = 200 // milliseconds
let anim_dash_offset = 0
let animateDashTimer = null

function animateDashStep(){

anim_dash_offset += 1

svg_elem.setAttribute('style',
'--stroke-dashoffset: '+anim_dash_offset);

// repeat
animateDashTimer = setTimeout(
animateDashStep,
animateDashTime
)
}

// start
animateDashStep()

// stop
//clearTimeout(animateDashTimer)
<svg version="1.0" id="streams" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225.32 66.19" enable-background="new 0 0 225.32 66.19" xml:space="preserve" 

style="--stroke-dashoffset: 0"
>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10"

stroke-dasharray="3,4"
stroke-dashoffset="var(--stroke-dashoffset)"

d="M107.38,50.54c0,0-6.78-84.52-106.51-22.2"
/>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" stroke-dashoffset="var(--stroke-dashoffset)" d="M110.49,45.31c-0.63-13.01-4.56-44.87-27.83-43.8c-27.6,1.27-37.33,39.66-38.49,60.34"
/>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" stroke-dashoffset="var(--stroke-dashoffset)" d="M180.63,59.88c-0.69-9.65-3.6-30.18-15.76-45.51C148.44-6.34,131.85,2.22,128.87,5c-2.89,2.7-12.81,7.14-14.28,42"/>
<path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" stroke-dashoffset="var(--stroke-dashoffset)" d="M118.59,45.41c2.4-10.18,9.9-31.97,30.87-37.59c26.03-6.98,55.13,9.32,72.02,19.37"/>
</svg>

关于javascript - SVG 动画 : sluggish/poor performance in Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53399421/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com