javascript - 在SVG中顺时针销毁路径

Question

所以第一个函数创建了一个圆，它工作得很好，但我对 destroyCircle 函数有疑问。有什么办法可以顺时针破坏圆圈吗？

演示:http://jsfiddle.net/mkn9t627/

HTML代码:

<div style="width:160px;height:160px;">
    <svg width="160" height="160" viewBox="0 0 160 160">
        <path id="arc" transform="translate(80, 80) scale(0.85)" fill="rgba(0,0,0,0.73)" d="M 0, 0 V -80 A 0 0 1 1 1 -0.001 -80 Z"></path>
    </svg>
</div>

Javascript 代码:

function destroyCircle(id) {
    var circle = document.getElementById(id);
    var angle = 270;
    var radius = 80;
    window.timerx = window.setInterval(

    function () {
        angle = angle + 3;
        var radians = (angle / 180) * Math.PI;
        var x = -Math.cos(radians) * radius;
        var y = Math.sin(radians) * radius;
        var e = circle.getAttribute("d");
        var d = e + " L " + x + ", " + y;

        if (angle > (270 + 356)) {
            window.clearInterval(window.timerx);
        }
        circle.setAttribute("d", d);
    }, 20);
}

function drawCircle(id) {
    var circle = document.getElementById(id);
    var angle = 90;
    var radius = 80;
    window.timer = window.setInterval(

    function () {
        angle = angle + 3;
        var radians = (angle / 180) * Math.PI;
        var x = -Math.cos(radians) * radius;
        var y = -Math.sin(radians) * radius;
        var e = circle.getAttribute("d");
        var d = e + " L " + x + " " + y;
        circle.setAttribute("d", d);
        if (angle > 449) {
            window.clearInterval(window.timer);
            destroyCircle("arc"); // DESTROY THE CIRCLE
        }
    }, 10);
}

// draw the circle
drawCircle("arc");

Answer 1

我认为这是最简单的方法:

您需要删除添加到您的drawCircle 函数中的所有片段。为此，您可以将字符串转换为数组并简单地使用 shift 或 pop(pop 将逆时针执行)。

function destroyCircle(id) {
    var circle = document.getElementById(id);
    var angle = 0;
    var radius = 80;

    var e = circle.getAttribute("d");
    var x = e.split('Z');
    var y = x[1].split('L');

    window.timerx = window.setInterval(function () {
        y.shift()
        var d = x[0] + 'Z L' + y.join('L');

        if (!y.length) {
            d = x[0] + 'Z';
            clearTimeout(window.timerx)
        }

        circle.setAttribute("d", d);
    }, 10);
}

我已经更新了你的 jsFiddle:http://jsfiddle.net/mkn9t627/1/