javascript - 滚动上的动画 SVG

Question

我正在根据我的滚动位置为 SVG 线设置动画。它有效，但 FPS 真的很低，动画本身也很滞后。我很确定是我的原生 Javascript 技能把事情搞砸了，但我不知道如何解决它。

我制作了一个快速而肮脏的 JSbin 副本，复制了我目前在实际网站上的内容；

http://jsbin.com/vigaqoxiru/edit?html,css,js,output

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){setTimeout(f, 1000/60)}

document.addEventListener('DOMContentLoaded', function() {
    Timeline();
});

function Timeline() {
    requestAnimationFrame(animateLine)

    function convertRange( value, r1, r2 ) { 
         return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
    }

    function animateLine() {
        var offset = window.scrollY;
        var wheight = window.innerHeight;
        var timeline = document.querySelector(".Approach--steps");
        var theight = timeline.getBoundingClientRect().top - wheight;

        if (theight < 0) {
            var timelineMin = timeline.offsetHeight;
            var objectMin = timeline.offsetTop;
            var objectMax = timeline.offsetTop + timeline.offsetHeight;

            document.querySelector(".Approach--timeline svg").setAttribute("style", "transform: scaleY(" + Math.floor(convertRange( (offset + wheight), [objectMin, objectMax], [0, 1.0]) * 100) / 100 + ")");
        }
    }

    window.addEventListener('scroll', function(){
        requestAnimationFrame(animateLine)
    });
}

如您所见，它跳动了，它不会以 60fps 的速度滚动，尽管我使用了 scale 属性、requestAnimationFrame 和舍入值。知道实现此动画的更好方法是什么吗？最好没有 jQuery。 GSAP 没问题，因为我已经在运行它了。

Answer 1

为什么不添加一个transition时间来让它工作得更顺畅呢？

.Approach--timeline svg {
    transition: .5s ease;
}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){setTimeout(f, 1000/60)}

document.addEventListener('DOMContentLoaded', function() {
    Timeline();
});

function Timeline() {
	requestAnimationFrame(animateLine)
  
    function convertRange( value, r1, r2 ) { 
        return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
    }

    function animateLine() {
        var offset = window.scrollY;
        var wheight = window.innerHeight;
        var timeline = document.querySelector(".Approach--steps");
        var theight = timeline.getBoundingClientRect().top - wheight;
        
        if (theight < 0) {
            var timelineMin = timeline.offsetHeight;
            var objectMin = timeline.offsetTop;
            var objectMax = timeline.offsetTop + timeline.offsetHeight;

            document.querySelector(".Approach--timeline svg").setAttribute("style", "transform: scaleY(" + Math.floor(convertRange( (offset + wheight), [objectMin, objectMax], [0, 1.0]) * 100) / 100 + ")");
        }
    }

    window.addEventListener('scroll', function(){
        requestAnimationFrame(animateLine)
    });
}

.Approach--steps {
  margin-top: 600px;
  margin-bottom: 200px
}

.Approach--header {
    margin-top: 80px;
}

.Approach--step {
    margin-top: 500px;
    padding-left: 56px;
}

.Approach--timeline {

}

.Approach--timeline svg {
    position: absolute;
    margin-top: -100px;
    height: 100%;
    width: 4px;
    transition: .5s ease;
    transform: scaleY(0);
    transform-origin: top left;
}

.Approach--steps {
    position: relative;
}

<div class="Approach--steps">
   <div class="Approach--timeline">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
          <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
              <stop stop-color="#22D9BC" stop-opacity="1.0" offset="0%" />
              <stop stop-color="#1674F5" stop-opacity="1.0" offset="50%" />
              <stop stop-color="#7D00FF" stop-opacity="1.0" offset="100%" />
          </linearGradient>
          <rect x="0" y="0" width="1" height="1" fill="url(#grad)" id="Approach--svg" />
      </svg>
  </div>
  
  <div class="Approach--step">
      <p>1. Khaled Ipsum</p>
      <p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. How’s business? Boomin. They will try to close the door on you, just open it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Wraith talk. We don’t see them, we will never see them. Life is what you make it, so let’s make it. Another one. Hammock talk come soon. It’s important to use cocoa butter. It’s the key to more success, why not live smooth? Why live rough?</p>
  </div>

  <div class="Approach--step">
      <p>2. Lion</p>
      <p>The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. Hammock talk come soon. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. The key to success is to keep your head above the water, never give up.</p>
  </div>

  <div class="Approach--step">
      <p>3. We the best</p>
  </div>
  
  
</div>