javascript - 如何在 Raphaël.js 中用动画绘制简单路径

Question

我正在尝试使用 Raphaël.js 库在此 Demo 绘制一条从路径开始到结束的带有动画的简单路径。 .

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

$('#start').click(function(e) {
       var line = canvas.path(pathString).attr({ stroke: "#000" });
       line.animate({     },5000);
});

但不确定如何在此处使用 animate() 函数。我怎样才能实现这个目标？

Answer 1

可能有更好的方法来做到这一点，但这是我能找到的最好的方法:getSubpath 允许检索路径的一段。通过实现可以动画的自定义属性，我们可以根据该属性的值控制路径:

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

canvas.customAttributes.subpath = function (from, to) {
  from = Math.floor(from);
  to = Math.floor(to);
  if(to < from)
    to = from;
  return {path: this.parentPath.getSubpath(from, to)};
};

$('#start').click(function(e) {
  canvas.clear();
  // Create an invisible full representation of the path
  var completeLine = canvas.path(pathString).attr({ 'stroke-opacity': 0 });
  var len = completeLine.getTotalLength(pathString);

  // Create a partial representation of the path
  var line = canvas.path(pathString);
  line.parentPath = completeLine;
  line.attr({ stroke: "#000", subpath: [0, 0]});

  // Animate using our custom subpath attribute from 0 to the length of the full path
  line.animate({ subpath: [0, len] }, 5000);
});

https://jsfiddle.net/r40k0kjv/5/