gpt4 book ai didi

javascript - 带延迟的 svg 文本动画

转载 作者:行者123 更新时间:2023-12-03 10:10:52 26 4
gpt4 key购买 nike

我想实现这样的东西 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/

最佳答案

让动画在延迟后开始怎么样?

我 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);
}

基本上,行为是:

  1. 初始化(隐藏)所有路径
  2. 将它们全部设置为在延迟一段时间*i后开始

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

关于javascript - 带延迟的 svg 文本动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30117930/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com