css - 当笔画有一个 dasharray 时，我怎样才能做一个 SVG 路径绘图动画？

Question

希望为下面的 SVG 制作动画，我最初已经开始工作了。但是，我希望它用我定义的点在相反的方向上“绘制”第二个 SVG。

有什么办法可以做到这一点吗？用点从左到右有效地绘制我的形状。

代码笔:http://codepen.io/anon/pen/gFcAz

Answer 1

普通的破折号偏移动画技巧实际上只适用于实线。

这是我使用 CSS 动画最接近的结果。

http://jsfiddle.net/L4zCY/

不幸的是，破折号爬行，因为您无法控制 stroke-dashoffset 的步进率。如果您一次可以使它步进 10，那么破折号就不会移动。

所以我认为唯一的解决办法是使用 Javascript。

var path = document.querySelectorAll("svg path").item(0);
animateDashedPath(path);

/*
 * Animates the given path element.
 * Assumes the path has a "5 5" dash array.
 */
function animateDashedPath(path)
{
  var pathLength = path.getTotalLength();
  var animationDuration = 2000;
  var numSteps = Math.round(pathLength / (5+5) + 1);
  var stepDuration = animationDuration / numSteps;

  // Build the dash array so we don't have to do it manually
  var dasharray = [];
  while (numSteps-- > 0) {
    dasharray.push(5);
    dasharray.push(5);
  }
  dasharray.push(pathLength);

  // Animation start conditions
  path.setAttribute("stroke-dasharray", dasharray.join(" "));
  path.setAttribute("stroke-dashoffset", -pathLength);

  // We use an interval timer to do each step of the animation   
  var interval = setInterval(dashanim, stepDuration);

  function  dashanim() {
    pathLength -= (5+5);
    path.setAttribute("stroke-dashoffset", -pathLength);
    if (pathLength <= 0) {
      clearInterval(interval);
    }
  }
}

Demo here

更新

FF 中似乎存在问题。如果您为路径长度创建“正确”数量的破折号，它不会完全到达路径的末端。您需要添加额外的内容。

A version of the demo that works properly on FF is here