0

I try to animate strokes of Chinese character one after an other. To do this "at the end of i, start transition i+1", I use each("end", animateSO(code,i+1)), where animateSO thus callback itself with an increment.

// Animate strokes function
var animateSO = function(code, i){
var id= "#kvg\\:"+code+"-s"+i, 
    next=i+1;
var path = d3.select(id);
var totalLength = Math.ceil( path.node().getTotalLength() );
    console.log("i: "+i+" ; id: "+id+" ; lenght: "+totalLength+"; i++: "+next);
path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(totalLength*15)
    .ease("linear")
    .attr("stroke-dashoffset", 0)
    .each("end", animateSO(code, next));
}
animateSO("07425", 1);

I expected .each("end", animateSO(code, next)) to fire at the end of the current transition. But all transition are started together.

How to, "at the end of i, start transition i+1" ?

Fiddle: http://jsfiddle.net/0v7jjpdd/4/

EDIT: final result http://jsfiddle.net/0v7jjpdd/7/

Hugolpz
  • 17,296
  • 26
  • 100
  • 187

1 Answers1

1

You need to put the call to animateSO into a function, otherwise it will be called together with the rest of the code:

.each("end", function() { animateSO(code, next) });

Complete demo here.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204