Question

所以第一个函数创建一个圆圈并且它的效果非常好但是我遇到了 destroyCircle 函数的问题。有没有办法让顺时针方向破坏圆圈？

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/

在SVG中顺时针销毁路径

1 个答案: