Glitchy-Freezing - 滚动动画不流畅 - 使用 requestAnimationFrame

Question

我正在处理this experiment，但我遇到了问题。
我在 Chrome (40) 和 Windows 上工作，一切都像一个魅力，而不是我的 Mac 与 Chrome (41dev) 相比，过渡不如 Windows 上的顺利。
我真的不明白为什么会这样。
也许是因为我是这种动画的新手。

编辑：

我已将动画放在 requestAnimationFrame 中，但一切都发生了变化。

编辑 2：

我添加了一个条件来尝试触发动画ONCE，它触发正确，但在mac中仍然不流畅，有点小故障
那是我的 js：（最好在 codepen 上检查）

function move(){
 var title = $('h1');
 title
    .css({
      transform: "translate3d(0px,0px, 0px)",
      WebkitTransform: "translate3d(0px,0px, 0px)",
      MozTransform: "translate3d(0px,0px, 0px)",
      msTransform: "translate3d(0px,0px, 0px)"});
}
function scrolling(lastScrollTop){
  var vh =$(window).height();
  vh = vh - 300;
  var title = $("h1");
  var posTitle = $("h1").offset().top;
  var scrolled = $(window).scrollTop();
  var leftTitle = $("h1").offset().left;
  var moveY = -(posTitle - 300);
  var moveX = -(leftTitle - 150);
  var fired = false;
  /* SCROLL DOWN*/
   if (scrolled > lastScrollTop && scrolled < vh){
     if( $('html,body').is(':not(:animated)') && fired == false ){
      fired = true;
      $('html,body').stop().animate({scrollTop : vh}, 700, function(){fired = false});
      console.log("triggerato scende");
      move();
      title.removeClass("opening");
     }     
   }
    /* SCROLL UP*/
    else{
     if(scrolled < vh){if( $('html,body').is(':not(:animated)') ){
       fired = true;
        $('html,body').stop().animate({scrollTop : 0}, 700, function(){fired = false});
        console.log("triggerato su");
         title
         .css({
          transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" });
        title.addClass("opening");
      }       
     }
   }   
   lastScrollTop = scrolled;
  return lastScrollTop;
}


$(document).ready(function(){
  var vh =$(window).height();
  vh = vh - 300;
  var title = $("h1");
  var posTitle = title.offset().top;
  var lastScrollTop = 0;
  var scrolled;
  var leftTitle = title.offset().left;
  var moveY = -(posTitle - 300);
  var moveX = -(leftTitle - 150);
  $(title)
    .css({
      transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" });
 setTimeout(function(){
   $(title)
    .css({"transition" : "all 0.7s", 
         "-webkit-transition" : "all 0.7s",
         "-moz-transition" : "all 0.7s",
         "-o-transition" : "all 0.7s"}
        );
 }, 300);
  $(window).scroll(function(){
       requestAnimationFrame(function(){
         lastScrollTop = scrolling(lastScrollTop)});
  });
});

有什么想法吗？谢谢大家。

Answer 1

当我在 Mac 上将 Chrome 更新到版本 41 时，我遇到了一个类似的问题（我还没有在其他任何地方测试过）。我有一个在滚动时更新的绝对定位元素，在更新 Chrome 之前它曾经很流畅，但现在它很滞后。它在 Firefox 和 Safari 中很好，所以我猜这是那个版本的 Chrome 的问题，至少在 Mac 上是这样。

Answer 2

如果计算机无法提供可接受的性能，则帧之间的时间无关紧要。 translate3d 很贵，尝试使用普通的translate（没有z轴）。 此外，如果比例是静态的（始终为 1.33），请将其删除并更改其他样式，例如字体大小。

编辑：

你搞砸了... var title = $("h1"); - 重复

$(title) - 为了什么？它是 jQuery 对象

var scrolled = $(window).scrollTop(); var st = $(window).scrollTop(); - 两个变量的值相同！

$(window).scroll(function(){ window.requestAnimationFrame(function(){ - 没有任何意义

var posTitle = $("h1").offset().top; - 使用title 代替创建新对象

优化代码：

$(document).ready(function(){
    var title = $("h1");
    var win = $(window);
    var htmlbody = $('html,body');

    var vh = win.height() - 300;
    var moveY = -(title.offset().top - 300);
    var moveX = -(title.offset().left - 150);

    var lastScrollTop = 0;

    title.css({
            transform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
            WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
            MozTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
            msTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)"
        });
    title.css({
            "transition" : "all 0.8s", 
            "-webkit-transition" : "all 0.8s",
            "-moz-transition" : "all 0.8s",
            "-o-transition" : "all 0.8s"
        });

    $(window).scroll(function(){
        var scrolled = win.scrollTop();

        if( htmlbody.is(':animated') )
            return (lastScrollTop = scrolled); // drop


        /* Not needed, but with resizing can be helpful
        var vh = win.height() - 300;
        var moveY = -(title.offset().top - 300);
        var moveX = -(title.offset().left - 150);
        //*/
        /* SCROLL DOWN*/
        console.log("sono il cicli con ST= " + scrolled + ",lastScrollTop= " + lastScrollTop + ", scrolled= " + scrolled + ", vh " + vh );
        if (scrolled > lastScrollTop && scrolled < vh){
            console.log( "scendo" );
            htmlbody.stop().animate({scrollTop : vh}, 700);
            title.css({
                    transform: "translate3d(0px,0px,0px)",
                    WebkitTransform: "translate3d(0px,0px,0px)",
                    MozTransform: "translate3d(0px,0px,0px)",
                    msTransform: "translate3d(0px,0px,0px)"
                });
            title.removeClass("opening");
        }
        /* SCROLL UP*/
        else if(scrolled < vh){
            console.log( "Arrampico" );
            htmlbody.stop().animate({scrollTop : 0}, 700);
            title.css({
                    transform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
                    WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
                    MozTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", 
                    msTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)"
                });
            title.addClass("opening");
        }
        lastScrollTop = scrolled;
    });
});