带有延迟的 svg 文本动画

Question

我想实现这样的东西 http://24ways.org/2013/animating-vectors-with-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'，我希望 's' 先绘制，然后在完成后开始绘制 'p' 字母。在我的示例中，两个字母同时绘制。如果有人能帮助我，我将不胜感激。

这里是例子http://jsfiddle.net/thLvLkq0/

Answer 1

让动画延迟播放怎么样？

我 fork 你的 fiddle 让它像那样工作。

http://jsfiddle.net/pz19fL7h/

for(var i=1; i<3; i++) {
    init(i);
    (function(i) {
        window.setTimeout(function() { start(i, duration); }, (i-1)*duration);
    })(i);
}

基本上，行为是：

初始化（隐藏）所有路径
将它们全部设置为在 duration*i 延迟后开始

如果路径绘制的持续时间已知，这应该很容易做到。

带有延迟的 svg 文本动画

svg text animation with delay

javascript

svg

svg-animate