Question

我最近在requestAnimationFrame上阅读了一堆，并承诺在滚动事件上更流畅地处理动画。我特别采用了本文中的方法：http://www.html5rocks.com/en/tutorials/speed/animations/

所以我决定在我正在开发的新网站上试用它，虽然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+'%'
     });
}

Answer 1

Requestanimationframe是一个FPS计时问题。它通过将动画与浏览器绘制框架的能力对齐来防止动画丢帧。我认为您的问题是您希望它与用户完成的视觉滚动一致。由于您希望图像在滚动时准确移动，因此您希望直接使用onScroll。如果您想在屏幕周围设置一些动画，那么您需要使用requestanimationframe，以便它们与浏览器更新它们的能力保持一致。

requestAnimationFrame实际上比onScroll慢吗？

1 个答案: