SVG textPath动画在页面上滚动多次

如何解决SVG textPath动画在页面上滚动多次

我试图在 Shopify 主页上获得多个标题，以便在 svg textPath 上进行动画处理。我的代码加载了标题，它们每个都位于自己的 svg 曲线路径上。但是，滚动时只有一个标题是动画的。如何让每个标题在滚动时动画化？每个标题是否需要多个 window.addEventListener(‘scroll’,onScroll-n) 函数？

<script>
 console.clear();

 var textPath = document.querySelector('#text-path');
 var textContainer = document.querySelector('#text-container');
 var path = document.querySelector( textPath.getAttribute('href') );
 var pathLength = path.getTotalLength();
 console.log(pathLength);

 function updateTextPathOffset(offset){
   textPath.setAttribute('startOffset',offset); 
 }

 updateTextPathOffset(pathLength);

 function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
 }

 window.addEventListener('scroll',onScroll);
</script>

<svg id="text-container" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  <text y="40">
    <textPath id="text-path" href="#text-curve" startOffset="200">
      {{ section.settings.title }}
    </textPath>
  </text>
</svg>

解决方法

您可以使用 SVG SMIL 制作动画：

• https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

• 从滚动事件动态设置值

<svg width="450" height="180">
  <path id="P1" pathLength="200" d="M0 100s270 87 520 0c250-87 480 0 480 0" fill="none" stroke-width="2" stroke="red"/>
  <text>
    <textPath id="P2" href="#P1">
      TEXT
      <animate 
         attributeName="startOffset"
         attributeType="XML"
         values="0;80"
         keyTimes= "0;1"
         dur="2s"
         fill="freeze"
         repeatCount="1"/>
    </textPath>
  </text>
  <animateMotion>
    <mpath href="#P2" />
  </animateMotion>
</svg>