0

飛んでいるときに非常に途切れ途切れにレンダリングされるこのフライングテキストマーキスがあります（特に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');                                           
        });
     }
 });
4

2 に答える 2

3

私の知る限り、ブラウザーが Javascript を実行して各アニメーション サイクルで DOM 要素の CSS プロパティを更新する速度はかなり制限されています。Modernizr を使用して CSS トランジションのサポートを確認し、利用可能な場合はそれらを使用し、サポートされていない場合は jQuery アニメーションにフォールバックできます。私はこの手法を多くのプロジェクトで使用していますが、うまく機能します。ネイティブ CSS トランジションは、Javascript アニメーションよりも (ハードウェア アクセラレーションを使用しない場合でも) はるかにパフォーマンスが高くなります。

if (Modernizr.csstransitions) {
    // update CSS
}
else {
    // animate CSS
}
于 2012-07-25T17:25:00.693 に答える
2

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 を取りに行ってください。ここで重労働を行っています!」と伝えます。そして、CPU の代わりにユーザーの GPU でアニメートします。ページに少しブーストが必要な場合は、常に役立ちます。これはまだ本当に実験的な Webkit のものであるため、ページのグラフィックのティアリングが発生する場合があることに注意してください。Safari 5 以降および Chrome 10 以降で動作するはずです。

于 2012-07-25T17:26:02.463 に答える