1

我想沿着弯曲的路径为路径（实际上是一组路径，但我会谈到）设置动画。

RaphaelJS 2 删除了该animateAlong方法，原因我无法辨别。深入研究由Zevan抽象的 Raphael 文档的gears 演示，我已经做到了这一点：

//adding a custom attribute to Raphael
(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + [point.x, point.y]
      };
      return t;
    };
  };
})();

var paper = Raphael("container", 600, 600);

paper.addGuides();

// the paths
var circ1 = paper.circle(50, 150, 40);
var circ2 = paper.circle(150, 150, 40);
var circ3 = paper.circle(250, 150, 40);
var circ4 = paper.circle(350, 150, 40);

var arc1 = paper.path("M179,204c22.667-7,37,5,38,9").attr({'stroke-width': '2', 'stroke': 'red'});

// the animation

// works but not at the right place
circ3.attr({guide : arc1, along : 1})
         .animate({along : 0}, 2000, "linear");

http://jsfiddle.net/hKKLG/4/

我希望第三个圆圈沿红色路径设置动画。它现在正在制作动画，但距离红色路径的距离等于第三个圆圈的原始坐标。奇怪的是，无论对象中的变换是相对的（小写的“t”）还是绝对的（大写的“T”），都会发生这种translate情况along。它也总是在同一个位置进行动画处理，即使我在animate调用之前用变换平移来轻推它。

非常感谢任何帮助。我刚在矢量陆地下船。指针很有帮助——一个工作小提琴更好。

4

1 回答 1

5

您只是一跳、跳过和跳离您想要的功能。这里的混淆涉及转换和对象属性之间的交互 ​​- 具体来说，转换不会修改原始对象属性。翻译只是添加而不是替换圆圈的原始坐标。

解决方案非常简单。在你的方法中：

this.ca.along = function(percent) {
  var box = this.getBBox( false );  // determine the fundamental location of the object before transformation occurs
  var g = this.attr("guide");
  var len = g.getTotalLength();
  var point = g.getPointAtLength(percent * len);
  var t = {
    transform: "...T" + [point.x - ( box.x + ( box.width / 2 ) ), point.y - ( box.y + ( box.height / 2 ) )]  // subtract the center coordinates of the object from the translation offset at this point in the guide.
  };
  return t;

显然，这里有一些优化空间（即，在 0,0 创建所有圆，然后将它们转换为所需的显示坐标，避免大量迭代数学可能是有意义的）。但它的功能...... 见这里。

One other caveat: the ...T translation won't effect any other transforms that have already been applied to a given circle. This implementation is not guaranteed to play nicely with other transforms.

于 2012-11-08T21:59:59.357 回答