绘制简单 SVG 路径的脚本会减慢整个 PC 的速度答案

【问题标题】：Script to draw simple SVG-path slows down the entire PC绘制简单 SVG 路径的脚本会减慢整个 PC 的速度
【发布时间】：2014-02-18 16:54:59
【问题描述】：

我有一个基于 svg 的 Web 项目加载动画，它在悬停时绘制 360° 弧。这需要大约 0.8 秒才能完成。之后一个容器滑入，看我的小提琴：http://jsfiddle.net/s2XCL/2/

        function drawCircle(arc) {
            var i = 0;
            var circle = document.getElementById(arc);
            var angle = 0;
            var radius = 75;
            window.timer = window.setInterval(

            function () {
                angle -= 5;
                angle %= 360;
                var radians = (angle / 180) * Math.PI;
                var x = 200 + Math.cos(radians) * radius;
                var y = 200 + Math.sin(radians) * radius;
                var e = circle.getAttribute("d");
                if (i === 0) {
                    var d = e + " M " + x + " " + y;
                } else {
                    var d = e + " L " + x + " " + y;
                }
                circle.setAttribute("d", d);
                i++;
            }, 10);


        }

        function removeCircle() {
          //  var circle = document.getElementById(arc);
          //  circle.style.display = "none";
        }

该函数在 HTML 标记中的 svg 标记内调用：

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid" style="width:400px; height:400px;" onmouseover="drawCircle('arc2'); removeCircle();">
            <path d="M200,200 " id="arc2" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="5"></path>
        </svg>

这按预期工作，但在我的两台测试机上都占用了整个 3 GHz 内核。我目前正在学习JS，所以我只能猜测导致性能不足的原因。

我还希望 svg 在完成动画或鼠标离开容器后消失，所以如果有人对此有提示，那就太好了。

对于任何谷歌同事，请参阅此处http://jsfiddle.net/s2XCL/4/ 以获取解决方案。也可以随意使用 sn-p。

【问题讨论】：

标签： javascript css performance animation svg

【解决方案1】：

问题是您永远不会清除超时。这将导致您的计时器继续运行，并且每次您将鼠标移到 svg 元素上方时，它都会不断创建新的计时器。这意味着，如果您将鼠标移动的时间过长，它将不断向path 标签添加越来越多的内容，并且会产生很多延迟。

要解决此问题，只需为您的全局 timer 变量添加一个 clearInterval：

clearInterval(timer);

您还需要通过将事件处理程序更改为mouseenter，而不是mousemove，确保它仅在您最初将鼠标移动到svg 顶部时运行，而不是每次在其中移动时运行。最后，您需要清除路径的d 属性，否则圆圈将永远不会被删除。

该函数将具有以下内容：(http://jsfiddle.net/s2XCL/3/)

clearInterval(window.timer||0); //clear the previous timer, or "timer 0" (nonexistent) when it's not defined yet
circle.setAttribute("d", "M200,200 "); //reset d attribute to default

window.timer = window.setInterval(//interval

【讨论】：

非常感谢！这对我帮助很大。

【解决方案2】：

此外，每次都构建一条完整的路径并不是一种非常有效的方法。

更好的方法是使用 dasharray 技巧为路径绘制动画。你要做的是慢慢增加stroke-dasharray 中的第一个数字，直到它等于路径的长度。在这种情况下，这就是圆的周长。

stroke-dasharray="0 1000"
stroke-dasharray="5 1000"
stroke-dasharray="10 1000"
...etc...

Here's a fiddle showing this trick applied to your case.

【讨论】：