Question

我有一个无限的发散动画，你可以在这个链接中看到：

我试图拥有这个动画的几个实例，但是当我尝试生成多个实例时，无限动画就会消失。我不知道这是不是最好的方法，但我试着在以下链接中生成同一动画的几个实例：

这是我的代码：

    CircleNumber=Math.round(15)
    const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);
    const data = Array.from(Array(CircleNumber).keys());
            var emanatingCircles=[];
    const radialGradient = svg.append("defs")
                              .append("radialGradient")
                              .attr("id", "radial-gradient");

    radialGradient.append("stop")
                      .attr("offset", "0%")
                      .attr("stop-color", "#f4425f");

    radialGradient.append("stop")
                    .attr("offset", "100%")
                    .attr("stop-color", "orange");
  for(var i=0; i<2; i++){

    // Outer 
    svg.append("circle")
       .classed('OuterCircle', true)
       .attr("id","fuera")
       .attr("cx",50*(i+2))
       .attr("cy",50*(i+2))
       .attr("r",10)
       .attr("fill","url(#radial-gradient)")
       .attr('gradient',()=>{return })
       .attr("stroke","orange")    
       .on('mouseover',function(d,i,g){
         console.log(g)
            d3.select(this).transition().ease("bounce").duration(500).attr("r",13)
         })
       .on('mouseout', function(d,i,g){
           d3.select(this).transition().ease("bounce").duration(500).attr("r",10)
         });
    // Inner
    svg.append('circle')
       .classed('InnerCircle',true)
       .attr('r',5)
       .attr("id","dentro")
       .attr('stroke','yellow')
       .attr('fill','yellow')
       .attr('opacity',1)
       .attr('cx',50*(i+2))
       .attr('cy',50*(i+2))
       .on('mouseover',function(d,i,g){
            console.log('outercircle');
            console.log(g[i]);
            d3.select(this).transition().ease("bounce").duration(500).attr("r",7)
         })
       .on('mouseout', function(d,i,g){
           d3.select(this).transition().ease("bounce").duration(500).attr("r",5)
         });

    emanatingCircles[i] = svg
      .append('circle')
      .attr('class','emanting')
      .attr('r',5)
      .attr('stroke','yellow')
      .attr('fill','none')
      .attr('opacity',1)
      .attr('stroke-width',2)
      .attr('cx',50*(i+2))
      .attr('cy',50*(i+2))


      emananting(i);

  }  


    function emananting(index){
    console.log(index)
            emanatingCircles[index]
         .transition().duration(5000)
              .attr('opacity',0)
              .attr('r',20)
              .transition().duration(0)
              .attr('opacity',0)
              .attr('r',5)
              .each("end", emananting[index]);
      emanatingCircles[index].attr("opacity", 1);
    }

非常感谢

Answer 1

我改变了一些你的代码

function emananting(index) {
    console.log(index)
    emanatingCircles[index]
        .transition().duration(5000)
        .attr('opacity', 0)
        .attr('r', 20)
        .transition().duration(0)
        .attr('opacity', 0)
        .attr('r', 5)
        .each("end", (index)=> emanating(index)); // pass in a emananting function
    emanatingCircles[index].attr("opacity", 1);
}

我猜你应该把一个函数传递给 .each（“end”，...）

当创建无限动画的另一个实例时，它会消失

1 个答案: