Question

还有另一个关于这个问题的线索，但可能因为我在我的问题上不是很清楚而没有得到解决。

我想再试一次，希望我能解决这个问题：

我最近的任务是创建一个单页网站，模仿基本的Flash动画，即滑入和淡出元素。

当我进行交互式模拟时，我遇到了一个大问题 - 乱七八糟的动画。这个问题出现在屏幕大于18英寸的Mac上，无论浏览器和低于18的Mac都只针对FF版本3及以下版本。在PC上，动画几乎完美无缺。

以下是我的jquery代码，受影响的元素标有ids＃md1，＃md2和＃md3：

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

我采用了各种优化方法，包括在索引页面上缓存受影响的div中存在的图像，然后将用户重定向到实际页面并排队动画，但没有任何效果。

这真的非常令人沮丧，因为我似乎已经用尽了我所知道的所有可用方法，而且我似乎无法让它在Mac上运行良好。

我有一种直觉，认为我正在编写太多关于文档准备的动画，这会导致缓慢 - 任何人都可以确认这是否是主要原因，如果还有其他方法可以解决这个问题？

非常感谢你的帮助。非常感谢=）

Answer 1

最好的方法是使用CSS过渡/动画。如果某些浏览器不支持它们，那么这样的浏览器在任何类型的动画上都不是很好。

CSS中的过渡和动画可以通过本机代码更好地优化，因此理论上可以表现出更加平滑（更高的FPS）行为。

截至上面的jquery动画：

尝试减少复杂元素的fadeTo数量。
尝试简化样式 - 减少opacity或rgba()的使用案例数量。

总的来说：你拥有的DOM元素越少越好。

Answer 2

队列

使用jQuery动画时，如果您正在运行多个动画或重复相同的动画，则应在动画前加上dequeue()和stop()，否则它们可能会在彼此后面等待运行并产生结果无意中延迟。

$('#md1').dequeue().stop().animate({ top: "-60px" }, 500);

使用此功能的

Here's a Codepen demo和a another slightly more complex demo。

帧速率

您可以使用此处记录的jquery.fx.interval来操纵jQuery处理动画的帧速率。

可以操纵此属性以调整动画运行的每秒帧数。默认值为13毫秒。将这个数字设置得更低可以使动画在更快的浏览器（例如Chrome）中运行更顺畅，但这样做可能会对性能和CPU产生影响。

由于jQuery使用一个全局间隔，因此不应运行任何动画，或者应停止所有动画以使此属性的更改生效。

参考：http://api.jquery.com/jquery.fx.interval/

间隔

您可以使用setInterval将动画分解为更小的位，这将更容易，更快速地处理。

例如，如果要在任何延伸距离上为div的位置设置动画，您可以将距离分成小部分，并将其设置为以恒定速度运行，因此看起来好像是单个平滑过渡。

Here's a demo.

请求

间隔方法实际上只适用于简单的动画。但是对于更复杂的动画，您可以使用requestAnimationFrame来控制浏览器选择何时是执行代码的最佳时刻。

function animLoop( render, element ) {
    var running, lastFrame = +new Date;
    function loop( now ) {
        // stop the loop if render returned false
        if ( running !== false ) {
            requestAnimationFrame( loop, element );
            running = render( now - lastFrame );
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

// Usage
animLoop(function( deltaT ) {
    elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
    if ( left > 400 ) {
      return false;
    }
// optional 2nd arg: elem containing the animation
}, animWrapper );

Code snippet found here.

进一步阅读："requestAnimationFrame for Smart Animating" - Paul Irish

更流畅的Jquery动画

2 个答案:

队列

帧速率

间隔

请求