Question

我将这个8字形的循环作为SVG图像。我感兴趣的是动画一个白色的50px长度元素，动画沿着8循环无限制地动画。

据我所知，SVG动画可以动画制作，但是这个元素如何能够有效地遵循SVG的界限，这是否可以实现？使用CSS实现这是否合理？

这是元素应遵循的SVG路径：

这是SVG白色元素的视图，它应该在线上进行动画和循环。

Answer 1

我希望能够正确理解这个问题。

是的，这是可能的。

以下代码行可用作基础。我只在Chrome中测试过，也许我是在火车上的笔记本电脑上写的......

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG 001</title>
  <style>
    body{font-family:"Calibri", sans-serif;}
    svg{border:1px solid #eee;}
    
  </style>
</head>
  <body>
    <h1>Offset Dasharray</h1>
   <svg id ="mySVG" width="500" height="500" viewBox="0 0 500 500">
   <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="#ccc"
    stroke-width="10" fill="none" />
  </svg>
  <br>
  <button onclick="dashAni(myPath, 50, 1500)">start</button>
  <script>
    var dashAni = function(path, length, duration){
      var dashPath = path.cloneNode(true);
      mySVG.appendChild(dashPath);
      var pathLen=path.getTotalLength();  
      var aktPos=0
      var sumSteps = duration / (1000/60) // 60 pics per second
      var step=0;
      var pathAnim;
      dashPath.setAttribute('stroke-dasharray', length + ' ' + (pathLen - length));
      dashPath.setAttribute('stroke', "red");
      dashPath.setAttribute('stroke-dashoffset', aktPos);

      var anim=function(){
         aktPos = pathLen/sumSteps*step*-1;
          //aktLen = easeInOutQuad(step/sumSteps)*len;
         dashPath.setAttribute('stroke-dasharray', length + ' ' + pathLen);
         dashPath.setAttribute('stroke-dashoffset', aktPos);

         if (step <= (sumSteps)){
          step++;
          pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
          } else {
            mySVG.removeChild(dashPath);
            clearTimeout(pathAnim);
          }
      }
     anim();
    }
    dashAni(myPath, 50, 1500);
  </script>
</body>  
</html>

是SVG线上的元素可动画

1 个答案: