我尝试一个接一个地动画化汉字笔画。要做到这一点"在 i 结束时,开始过渡 i+1",我使用 each("end", animateSO(code,i+1))
,其中 animateSO 因此以增量回调自身。
// 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);
我预计.each("end", animateSO(code, next))
在当前过渡结束时触发。但所有的过渡都是一起开始的。
如何,"在i结束时,开始过渡i+1"?
小提琴:http://jsfiddle.net/0v7jjpdd/4/
编辑:最终结果 http://jsfiddle.net/0v7jjpdd/7/
你需要把对animateSO
的调用放到一个函数中,否则它将与其余代码一起调用:
.each("end", function() { animateSO(code, next) });
在此处完成演示。