SNAP.svgアニメーションパスを時計回りに

SNAP.svgを使用してドーナツをアニメートしようとしています。私はパスの値を計算するためにSNAP.animate関数を使用しています。問題はパスがendAngleからstartAngleに引き込まれていることですが、その逆が欲しいです。ここでSNAP.svgアニメーションパスを時計回りに

はcodepenリンク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>

出典

2016-11-02 Mr J

ネヴァーマインド、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>

出典

2016-11-02 09:10:01

SNAP.svgアニメーションパスを時計回りに

答えて

関連する問題