0
我想实现像这样的http://24ways.org/2013/animating-vectors-with-svg/,但我希望每个字母在前一个结束后开始绘制。我不知道如何延迟实施。svg文本动画延迟
这里是我的代码:
var init = function() {
path = new Array();
length = new Array();
for(var i=1; i<3; i++){
path[i] = document.getElementById('path'+i);
length = path[i].getTotalLength();
path[i].style.transition = path[i].style.WebkitTransition = 'none';
length[i] = length;
path[i].style.strokeDasharray = length + ' ' + length;
path[i].style.strokeDashoffset = length;
path[i].getBoundingClientRect();
path[i].style.transition = path[i].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path[i].style.strokeDashoffset = '0';
}
};
init();
在这个例子中
我有两个字母“SP”和我想的'先画,然后当完成启动“P”字母。在我的例子中,两个字母同时绘制。如果有人能帮助我,我将不胜感激。
这里是例子http://jsfiddle.net/thLvLkq0/
非常感谢你!我正在尝试与达赖函数,但我无法做到! – DMande
window.setTimeout? >> https://developer.mozilla.org/en/docs/Web/API/WindowTimers/setTimeout – danikaze
诀窍还是创建一个自调用的函数,所以'i'参数在一个上下文内(因为它已经通过了作为参数),而不是由外部的'for'修改。 – danikaze