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

AFAIK 您几乎受到浏览器执行 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，我在这里做一些繁重的工作！” 然后你有用户的 GPU 来动画它而不是 CPU。如果您的页面需要一点提升，总是有帮助的。请记住，它有时会导致页面的图形撕裂，因为它仍然是真正的实验性 webkit 东西。它应该适用于 Safari 5+ 和 Chrome 10+。

于 2012-07-25T17:26:02.463 回答