带有anime.js的SVG线条动画答案

【问题标题】：SVG line animation with anime.js带有anime.js的SVG线条动画
【发布时间】：2017-06-05 08:11:25
【问题描述】：

我正在修改笔以创建 SVG 动画。我希望绿色元素完全遵循线条路径，但事实并非如此。此外，它没有在一条线上正确地循环 8 条路径，而是在循环的十字路口反弹。任何建议如何实现这一点将不胜感激，因为我无法找到解决方案

var path = anime.path('path');

anime({
  targets: 'div',
  translateX: path,
  translateY: path,
  rotate: path,
  duration: 6000,
  loop: true,
  easing: 'linear'
});

这是代码笔：https://codepen.io/anon/pen/VWYKwB

【问题讨论】：

标签： javascript jquery animation svg

【解决方案1】：

几天前我告诉过你，你的路径有问题。你必须重建你的道路......

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head> 
  <body>
    <button onclick="dashAni(myPath, 50, 3500)">start</button>
    <svg id="mySVG"  width="200" height="200" viewBox="0 0 500 500">
        <path id="myPath" d="M 50,250 c 0 -100   150 -100   200 0 
                                      c 50 100   200 100   200 0
                                      c -0 -100   -150 -100   -200 0
                                      c -50 100   -200 100   -200 0
                                      z" 
        stroke="#eee"
        stroke-width="5" fill="none" />
    </svg>
    <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();
      }
    </script>
  </body>
  </html>

【讨论】：

我把它变成了一个单一的路径，但它仍然无法正常工作。我应该能够将您的路径也添加到我的代码中，但该行仍然没有正确遵循路径。您能否详细说明我的路径有什么问题，因为它现在应该是一条路径（仅一条 M）。这里添加了您的路径：codepen.io/anon/pen/VWYKwB
很遗憾，我不能告诉你，因为我很少使用图书馆。处理此类库的时间对我来说太大了，所以我自己编写了我一直需要的例程。