如何在 Raphaël.js 中使用动画绘制简单路径答案

【问题标题】：How to draw a simple path with animation in Raphaël.js如何在 Raphaël.js 中使用动画绘制简单路径
【发布时间】：2016-09-08 17:20:19
【问题描述】：

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

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() 函数。我怎样才能做到这一点？

【问题讨论】：

你到底想制作什么动画？
嗨，Dark，我想像This demo那样从头到尾画线

标签： javascript raphael graphael

【解决方案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/

【讨论】：