(function(){
var map = Array.prototype.map;
var nodes = document.querySelectorAll('[data-text]');
var text = map.call(nodes, function(n){ return n.getAttribute('data-text') });
var duration = 1000;
var delay = duration/text.length;
var animation = new animationQueue({
duration: duration,
delay: delay
});
nodes = map.call(nodes, function(n){ n.innerText = ''; return n });
animation.add(function(){
return new animationQueue().add(function(progress){
nodes.forEach(function(n, i){
n.innerText = text[i].substr(0, Math.round(text[i].length*progress))
});
}).play();
});
animation.run();
})();
這段JS代碼通過querySelectorAll()方法獲取了data-text屬性的節點,并獲取了這些節點上的文本內容。接著聲明了動畫的時間長度和延時時間,以及animationQueue動畫隊列。之后使用innerText屬性將節點清空,并將目標文本內容寫入到這些節點中。
接下來就是最核心部分——使用animationQueue來控制文字動畫特效。在這個過程中,我們可以通過控制每個文本節點的innertext屬性來實現不同的文字特效。animationQueue中的add()方法表示向動畫隊列中添加多個動畫,play()方法表示依次播放隊列中的動畫,而duration屬性表示整個動畫的時間長度。
總的來說,這段JS代碼非常精簡,卻能實現非常炫酷的文字動畫特效。開發者可以根據自己的需求自由修改代碼,實現更加個性化的文字動畫特效效果。