requestAnimationFrame实际上比onScroll慢吗？

我最近读了一大堆requestAnimationFrame，以及它对滚动事件动画处理更流畅的承诺。我特别采纳了这篇文章的方法：http://www.html5rocks.com/en/tutorials/speed/animations/requestAnimationFrame实际上比onScroll慢吗？

所以我决定在我正在开发的一个新网站上尝试一下，尽管在Chrome中一切看起来很棒，但在Firefox和IE中动画非常不连贯。当我切换回直接从滚动事件处理程序调用我的更新函数时，它实际上结果更加平滑。所以我很困惑，看起来好像requestAnimationFrame实际上减慢了我的速度。

这是我的代码，也许我做错了什么？我只是想在用户滚动时更新div上的背景位置：

var scrollY = $(window).scrollTop(); 
var scrollTicking = false; 

$(window).on('scroll', function(){ 
    scrollY = Math.max($(window).scrollTop(), 0); 
    requestScrollTick(); 
}); 

function requestScrollTick(){ 
    if(!scrollTicking) { 
     requestAnimationFrame(scrollUpdate); 
    } 
    scrollTicking = true; 
} 

function scrollUpdate(){ 
    scrollTicking = false; 
    CT.animateFeatureCarousel(scrollY); 
} 


... 
... 


animateFeatureCarousel: function(scrollY){ 
    var $carousel = $('.curated-carousel'); 

    var scrollStart = $carousel.offset().top; 
    var scrollEnd = scrollStart + $carousel.height(); 
    var scrollDelta = scrollEnd - scrollStart; 

    var startTop = 50; 
    var endTop = 90; 
    var topDelta = (endTop - startTop)/scrollDelta; 
    var newTop = (startTop - ((scrollY - scrollStart) * topDelta)); 

    $carousel.find('.curated-carousel-item.current').css({ 
    'background-position': 'center '+newTop+'%' 
    }); 
}

来源

2014-02-26 user1224298

Requestanimationframe是一个FPS计时问题。它可以防止动画通过将它们与浏览器绘制框架的能力对齐来放弃框架。我认为你的问题是你希望它与用户完成的视觉滚动特别对齐。由于您希望图像随滚动条移动，因此您希望直接使用onScroll。如果你想在屏幕上围绕一些东西进行动画处理，你可以使用requestanimationframe，使它们保持与浏览器更新它们的能力保持一致。

来源

2014-02-26 16:41:08

我不确定这是目前的答案。这也发生在我身上。这并不能解释为什么在使用rAF的chrome中是平滑的，但是在FF中它是抖动的。在firefox和chrome中触发动画帧的逻辑机制似乎有点不同，并且在检测到滚动时由浏览器推迟。 – elpddev

requestAnimationFrame实际上比onScroll慢吗？

回答

相关问题