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慢嗎？

回答

相關問題