如何在 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/

如何在 Raphaë 中绘制带动画的简单路径l.js

How to draw a simple path with animation in Raphaël.js

javascript

raphael

graphael