如何創建高效的無限循環揮動的文本動畫？

這是我想創建（JSFiddle）效果：如何創建高效的無限循環揮動的文本動畫？

$('.header h1 span').each(function() { // each letter is contained inside a <span> element 
    var that = $(this); 
    setTimeout(function() { 
     that.animate({ 
       top: "-10px" 
      }, animateTime/2) 
      .animate({ 
       top: "10px" 
      }, animateTime/2); 
    }, that.index() * 100); 
});

結果：

這似乎是成功的。不過，我跑進它看起來像這樣切換標籤後的問題，然後回來：

在上面的小提琴，我試圖「修理」這通過使動畫停止時標籤不專心。這比當我不檢查標籤無焦點時更好，但它仍然存在問題。這是我使用這樣做代碼：

var running = true; 

document.addEventListener('visibilitychange', function(){ 
    console.log("Running:" + running); 
    running = !document.hidden; 
    if(!running) clearQueues(); 
})

如果用戶花費不到幾秒鐘從標籤消沉，動畫看起來像第二GIF再次，我不明白的方式避免這種情況。我試過使用requestAnimationFrame()，但我無法弄清楚如何使其行爲正確。

所以，我的問題是：我該如何防止動畫受到選項卡未被聚焦的影響？

獎勵積分（比喻），如果你能幫助我在移動設備上提高效率，

來源

2016-05-31 Dubstaphone

你是什麼意思與「加分」？ –

簡單地使用gif有什麼效果，你已經找到了什麼？ – JonSG

@CeylanMumunKocabaş只是一個笑話;沒有任何「要點」，但我會很感激有人提供該子問題的答案，儘管它沒有任何要求。 – Dubstaphone

我不確定這是否可以解決您的口吃問題。這個策略在概念上與你正在做的類似，但是使用CSS動畫而不是js。

(function(){ 
 
    
 
    var el = document.querySelectorAll(".wavey")[0]; 
 
    var oldText = el.innerText 
 
    var newHtml = ""; 
 
    for (var i in el.innerText) { newHtml += ("<span style='animation-delay: " + i/10 + "s;'>" + oldText[i] + "</span>"); } 
 
    el.innerHTML = newHtml; 
 
    
 
})();

@keyframes wave { 
 
    from { transform: translateY(0); } 
 
    to { transform: translateY(-1em); } 
 
} 
 

 
h1.wavey { margin-top: 2em; } 
 

 
h1.wavey span { 
 
    display: inline-block; 
 
    animation-duration: 1s; 
 
    animation-name: wave; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
}

<h1 class="wavey">Hello World</h1>

來源

2016-05-31 14:52:07 JonSG

這很完美，非常感謝！我很可能會用這個;然而，有沒有辦法讓它更「浮動」而不是「有彈性？」 – Dubstaphone

您可以添加到h1.wavey span css中，例如animation-timing-function：ease-in-out;我會用它更新我的答案 – JonSG

太棒了！哈哈，你也獲得了這些獎勵積分。做得好！ – Dubstaphone

如何創建高效的無限循環揮動的文本動畫？

回答

相關問題