javascript - 通过java脚本绘制SVG圆一一

Question

我想一个接一个地绘制 SVG 圆形动画我已经通过使用硬编码 ID 完成了这项工作，但我想让它动态化。我们可以按类使用它，也可以通过增加 id 来使用它。另外，请记住我必须在没有 jQuery 的情况下做这件事。

var circle = document.getElementById('C1');
    var radius = circle.getAttribute("r");
    var circleLength = 2 * Math.PI * radius;
    circle.style.strokeDasharray = circleLength;
    circle.style.strokeDashoffset = circleLength;
    

    var circle2 = document.getElementById('C2');
    circle2.style.opacity = 0;
    var radius2 = circle2.getAttribute("r");
    var circleLength2 = 2 * Math.PI * radius2;
    circle2.style.strokeDasharray = circleLength2;
    circle2.style.strokeDashoffset = circleLength2;
    
    
    var circle3 = document.getElementById('C3');
    circle3.style.opacity = 0;
    var radius3 = circle3.getAttribute("r");
    var circleLength3 = 2 * Math.PI * radius3;
    circle3.style.strokeDasharray = circleLength3;
    circle3.style.strokeDashoffset = circleLength3;       


    circle.addEventListener("animationend", myFunction);
    function myFunction() {
        circle2.style.opacity = 1;
        circle2.style.animationDelay = '3s';
    }
    
    
    circle2.addEventListener("animationend", myFunction2);
    function myFunction2() {
        circle3.style.opacity = 1;
        circle3.style.animationDelay = '6s';
    }
    

.circle {
        animation: dash 3s linear forwards;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="859.959px" height="560.153px" viewBox="0 0 859.959 560.153" enable-background="new 0 0 859.959 560.153"
	 xml:space="preserve">
    <g id="circles">
        <circle class="circle" id="C1" fill="none" stroke="#CCCCCC" stroke-width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-miterlimit="2.6131" cx="401.403" cy="336.855" r="29.461"></circle>
        <circle class="circle" id="C2" fill="none" stroke="#CCCCCC" stroke-width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-miterlimit="2.6131" cx="366.4" cy="289.934" r="47.874"></circle>
        <circle class="circle" id="C3" fill="none" stroke="#CCCCCC" stroke-width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-miterlimit="2.6131" cx="315.55" cy="306.65" r="18.413"></circle>
    </g>
</svg>

`

Answer 1

我认为您希望循环中的代码删除重复的代码。我尽可能地把它包起来。

  var circle = []; var circleLength = []; var radius = [];
  for (i = 1; i < 4; i++){
   circle[i] = document.getElementById('C'+i);
   if(i>1){
	 circle[i].style.opacity = 0;
   }
   radius[i] = circle[i].getAttribute("r");
   circleLength[i] = 2 * Math.PI * radius[i];
   circle[i].style.strokeDasharray = circleLength[i];
   circle[i].style.strokeDashoffset = circleLength[i];
      if(i==3){
       circle[1].addEventListener("animationend", function(){
        myFunction(2,3);
        }, false);
       circle[2].addEventListener("animationend", function(){
        myFunction(3,6);
        }, false);
      }
   }
   function myFunction(index, sec) {
     circle[index].style.opacity = 1;
     circle[index].style.animationDelay = sec+'s';
   }
    

    .circle {
        animation: dash 3s linear forwards;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     width="859.959px" height="560.153px" viewBox="0 0 859.959 560.153" 
     enable-
     background="new 0 0 859.959 560.153"
     xml:space="preserve">
     <g id="circles">
      <circle class="circle" id="C1" fill="none" stroke="#CCCCCC" stroke-
       width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-
       miterlimit="2.6131" cx="401.403" cy="336.855" r="29.461"></circle>
      <circle class="circle" id="C2" fill="none" stroke="#CCCCCC" stroke-
       width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-
       miterlimit="2.6131" cx="366.4" cy="289.934" r="47.874"></circle>
      <circle class="circle" id="C3" fill="none" stroke="#CCCCCC" stroke-
       width="0.8504" stroke-dashoffset="" stroke-dasharray="" stroke-
       miterlimit="2.6131" cx="315.55" cy="306.65" r="18.413"></circle>
     </g>
    </svg>