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>

Answer 2

Here's a gist一个有效的GSAP示例。

您提到您计划在SVG中添加其他元素。我建议您阅读GSAP / SVG文档here。

使用GSAP制作动画时，我总是建议使用ID选择器。

滚动

2 个答案: