更平滑的Jquery动画

关于这一点，我有另一条线索，但没有解决，可能是因为我的问题不太清楚

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

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

当我得到一个交互式模型时，我遇到了一个大问题——动画的起伏。问题出现在屏幕大于18英寸的Mac电脑上，而不考虑浏览器，18英寸以下的Mac电脑仅适用于FF版本3及以下。在个人电脑上，动画几乎完美无缺

以下是我的jquery代码，受影响的元素用id#md1、#md2和#md3标记：

我求助于各种优化方法，包括缓存索引页上受影响div中的图像，稍后将用户重定向到实际页面，并对动画进行排队，但没有任何效果

这真的很令人沮丧，因为我似乎已经用尽了我所知道的所有可用方法，而且我似乎无法让它在Mac上正常工作

我有一种直觉，我在准备文档的时候编译了太多的动画，这导致了迟钝——有人能确认这是否是主要原因，是否有其他方法可以解决这个问题吗

---

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

最好的方法是使用CSS转换/动画。 如果某些浏览器不支持它们，那么这种浏览器对任何类型的动画都不好

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

从上面的jquery动画开始：

尽量减少复杂元素上的fadeTo数量

尝试简化样式-减少使用透明度的

opacity

或

rgba（）

一般来说：DOM元素越少越好。

Queue 使用jQuery animate时，如果正在运行多个动画或重复同一个动画，则应在动画前面加上

dequeue（）

和

stop（）

，否则它们可能会在等待运行时相互堆积，导致意外延迟

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

那就用这个

---

帧速率 您可以使用

jQuery.fx.interval

来操纵jQuery处理动画的帧速率，这在这里有文档记录

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

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

参考：

---

间隔 您可以使用setInterval将动画分解为更小的位，这样处理起来更容易、更快

例如，如果要在任意延长距离上设置div位置的动画，则可以将该距离分成小部分，并将其设置为以恒定速度运行，使其看起来像是单个平滑过渡

---

要求 间隔方法实际上只适用于简单的动画。但是对于更复杂的动画，您可以使用

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 );

• 进一步阅读：

---

我测试并绝对确定的一件事是，动画元素上的阴影会造成明显的起伏。另一件总是有帮助的事情是缩小图像的表面积。@Babiker：我同意你的观点；在受影响图像的表面区域，您完全正确。我已经尝试在18岁时缩小浏览器大小“在Mac电脑和动画上面确实有了相当大的改进。不幸的是，我在设计方向上没有发言权，并且被指示遵守给我的静态补偿。谢谢你，我一定会尝试一下，看看它是如何进行的。我还在决定如何减少DOM元素的数量。

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 );