SNAP.svg 顺时针动画路径

Question

我正在尝试使用 SNAP.svg 为甜甜圈制作动画。我正在使用 SNAP.animate 函数来计算路径值。问题是路径是从 endAngle 绘制到 startAngle，但我想要相反的路径。

这是codepen link http://codepen.io/junedchhipa/pen/qaeePP

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #chart {
            text-align: center;
            width: 100%;
            margin-top: 60px;
            margin-bottom: 60px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 0 0 25%;
            height: 600px;
        }
    </style>
</head>
<body>
    <svg id="chart"></svg>
</body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
    <script>
        var s = Snap("#chart");

        var centerX =  279.6666666666667,
            centerY =  279.6666666666667,
            colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
            x1 = [398.2520587792069, 418.9678919498291,  162.3925655822982,  227.28417802067494,  279.6666666666667],
            y1 = [ 205.56628955139018,  291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
            endAngle = [58, 95, 237, 338, 360],
            startAngle = [0, 58, 95, 237, 338],
            percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
            begin = [0,1280,2560,3840,5120],
            dur = 1280;


        for(var i=0; i<5; i++) {
            var el = s.path("");
            el.node.id = "w" + i;

            animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
        }

        function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {

            window.setTimeout(function() {
                var endpoint = (percent/100)*360;

                Snap.animate(0, endpoint,  function (val) {

                    var d = endAngle - val,
                        dr = d-90,
                        radians = Math.PI*dr/180,

                        x2 = centerX + size*Math.cos(radians),
                        y2 = centerY + size*Math.sin(radians),

                        largeArc = val>180 ? 1 : 0,
                        path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",0 "+x2+","+y2;     

                    el.attr({
                        d: path,
                        stroke: color,
                        fill: 'none',
                        strokeWidth: 40
                    });

                    console.log(el.node.getAttribute('id'),d)
                },dur, mina.easeinout); 

            }, begin)

        }
    </script>
</html>

Answer 1

没关系，使用 StartAngle 值并让它工作。更新了代码笔 http://codepen.io/junedchhipa/pen/qaeePP

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #chart {
            text-align: center;
            width: 100%;
            margin-top: 60px;
            margin-bottom: 60px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 0 0 25%;
            height: 600px;
        }
    </style>
</head>
<body>
    <svg id="chart"></svg>
</body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
    <script>
        var s = Snap("#chart");

        var centerX =  279.6666666666667,
            centerY =  279.6666666666667,
            colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
            x1 = [398.2520587792069, 418.9678919498291,  162.3925655822982,  227.28417802067494,  279.6666666666667],
            y1 = [ 205.56628955139018,  291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
            endAngle = [58, 95, 237, 338, 360],
            startAngle = [0, 58, 95, 237, 338],
            percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
            begin = [0,500,1000,1500,2000],
            dur = 500;


        for(var i=0; i<5; i++) {
            var el = s.path("");
            el.node.id = "w" + i;

            animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
        }

        function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {

            window.setTimeout(function() {
                var endpoint = (percent/100)*360;

                Snap.animate(0, endpoint,  function (val) {

                    var startDeg = startAngle,
                        startRadians = Math.PI*(startDeg-90)/180,
                        endDeg = startDeg + val,
                        endRadians = Math.PI*(endDeg-90)/180,

                        x1 = centerX + size*Math.cos(startRadians),
                        y1 = centerY + size*Math.sin(startRadians),
                        x2 = centerX + size*Math.cos(endRadians),
                        y2 = centerY + size*Math.sin(endRadians),

                        largeArc = val>180 ? 1 : 0,
                        path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",1 "+x2+","+y2;     

                    el.attr({
                        d: path,
                        stroke: color,
                        fill: 'none',
                        strokeWidth: 40
                    });

                    console.log(el.node.getAttribute('id'),"startDeg",startDeg)
                    console.log(el.node.getAttribute('id'),"endDeg",endDeg)
                },dur, mina.easeinout); 

            }, begin)

        }
    </script>
</html>

SNAP.svg 顺时针动画路径

SNAP.svg animate path clockwise

animation

svg

snap.svg