Question

我为一个网络项目提供了一个基于svg的加载动画，它在悬停时绘制了一个360°-arc。这需要大约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-markup中的svg-tag内部调用：

        <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/查看解决方案。随意使用该片段。

Answer 1

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

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

clearInterval(timer);

您还需要确保只有在最初将鼠标移动到svg顶部时才运行，而不是每次在其中移动鼠标时，都将事件处理程序更改为mouseenter，而不是{{1 }}。最后，您需要清除路径的mousemove属性，否则圈子将不会被移除。

该功能将具有以下内容：（http://jsfiddle.net/s2XCL/3/）

Answer 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.

绘制简单SVG路径的脚本会降低整个PC的速度

2 个答案: