Question

我有这个飞行文本侯爵，因为它飞得很复杂（特别是在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');                                           
        });
     }
 });

Answer 1

AFAIK你几乎受限于浏览器在每个动画周期中执行Javascript以更新DOM元素的CSS属性的速度。您可以使用Modernizr检查CSS Transitions支持并使用它们（如果可用），如果不支持则回退到jQuery动画。我在许多项目中使用这种技术，它运行良好 - 原生CSS转换比Javascript动画更高效（即使不是硬件加速）。

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

Answer 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，我在这里做了一些繁重的工作！”然后你就可以让用户的GPU为它设置动画而不是CPU。如果您的页面需要一点点提升，请务必提供帮助。请记住，它有时会导致页面的图形撕裂，因为它仍然是真正的实验性webkit。它应该适用于Safari 5+和Chrome 10 +。

为什么这个飞行文字渲染起伏不定？

2 个答案: