爲什麼這個飛行文字渲染波濤洶涌？

我有這個飛行文本侯爵，呈現真正波濤洶涌，因爲它飛行（特別是在FireFox）它似乎在一定的時間間隔跳，我想知道如果我可以通過使用easeIn或類似的東西使它運行更順利。對此有何想法？爲什麼這個飛行文字渲染波濤洶涌？

爲方便起見，我設置了jsfiddle。

HTML：

<div id="taglines"> 
    <h4>Your expert. Your partner.</h4> 
</div> 
<div class="container"> 
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3> 
    <h3 id="fly2" class="flying-text">Graphics</h3> 
    <h3 id="fly3" class="flying-text">Sourcing</h3> 
    <h3 id="fly4" class="flying-text">Distribution</h3> 
    <h3 id="fly5" class="flying-text">Online Tools</h3> 
    <h3 id="fly6" class="flying-text">Custom Branding</h3> 
    <h3 id="fly7" class="flying-text">Personalized Support</h3> 
</div>

CSS：

.container{ 
    width:1000px; 
    margin:0 0 0 -10px; 
    color:#c3cd25; 
} 

#taglines{ 
    color:#000; 
} 

#taglines h4{ 
    font-size:20px; 
} 

.flying-text{ 
    margin-left:-100px; 
    font-size:40px; 
}

的JavaScript：

$(document).ready(function(){ 
    $('.container .flying-text').css({opacity:0}); 
    $('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000); 

    var int = setInterval(changeText, 5000);  

    function changeText(){ 
     var $activeText = $(".container .active-text"); 
    var $nextText = $activeText.next(); 

     if($activeText.next().length == 0) $nextText = $('.container .flying-text:first'); 

    $activeText.animate({opacity:0}, 1000); 
     $activeText.animate({marginLeft: "-100px"});  
     $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){ 
     $activeText.removeClass('active-text');           
     }); 
    } 
});

來源

2012-07-25 Keith

對我來說工作順利，沒有什麼不開心 – 2012-07-25 17:22:01

看上去對我很好。如果有什麼我建議減少持續時間，看看是否有幫助。 – RobB 2012-07-25 17:23:48

如果你想更加流暢，使用jquery的easing插件。反正它工作正常 – SVS 2012-07-25 17:24:19

因爲您正在使用DOM重繪風格的動畫，所以它不穩定。這基本上是「每16毫秒讓我們重畫一點點的頁面，因爲我們可以弄清楚（這通常會結束很多開始）」

另一種方法是原生的內置CSS3方法！這將是無限平滑的，代碼比jQuery的.animate（）方法好得多。缺點是我們不得不擔心舊版瀏覽器。這就是Ben Barnett的jQuery插件派上用場的地方。

http://playground.benbarnett.net/jquery-animate-enhanced/

這裏的片段放在正上方的其它JS的東西：

<script src="https://raw.github.com/benbarnett/jQuery-Animate-Enhanced/master/jquery.animate-enhanced.min.js" type="text/javascript"></script>

這個奇妙的工具，將利用現有的代碼，分析瀏覽器，並自動使用它轉換成更平滑，儘可能使用CSS3動畫。這正是你需要的。只需將其包含在動畫代碼上方的頁面中即可。

去想其他的事情...

如果你願意與真正可怕的實驗的東西（這並不像它看起來那麼糟）玩一下，我會嘗試添加該代碼在動畫元素的CSS：

-webkit-transform-style: preserve-3d;

，告訴瀏覽器，「去抓住GPU，我做在這裏一些繁重的！」然後你有用戶的GPU來動畫而不是CPU。如果你的網頁需要一點點提升，總是有幫助的。請記住，它有時會導致頁面的圖形撕裂，因爲它仍然是實驗性的webkit內容。它應該在Safari 5+和Chrome 10+中運行。

來源

2012-07-25 17:26:02 alt

確定了不穩定性，但值得注意的是它確實改變了動畫。沒有什麼一點微調無法修復。謝謝！ – Keith 2012-07-25 17:45:10

如果它改變了動畫，你可能想要走相反的方向。編寫一個可以工作的CSS3轉換，讓它回退到DOM動畫。只是當你遇到這種事情的建議。 – alt 2012-07-25 17:49:11

AFAIK你幾乎瀏覽器如何快速地執行JavaScript限於更新每個動畫週期的DOM元素的CSS屬性。您可以使用Modernizr檢查CSS Transitions支持，並使用這些支持（如果不支持的話，可以回退到jQuery動畫）。我在許多項目中使用這種技術，並且它工作得很好 - 原生CSS轉換比Javascript動畫更高效（即使不是硬件加速）。

if (Modernizr.csstransitions) { 
    // update CSS 
} 
else { 
    // animate CSS 
}

來源

2012-07-25 17:25:00

我會考慮使用Modernizr，謝謝！ +1 – Keith 2012-07-25 17:42:12

爲什麼這個飛行文字渲染波濤洶涌？

回答

相關問題