raphaelJS 2.1沿路径动画

Question

我想沿着弯曲的路径为一条路径(实际上是一组路径,但我会达到这个路径)设置动画.

RaphaelJS 2删除了这个animateAlong方法,原因是我无法辨别.深入了解由Zevan抽象的Raphael文档的齿轮演示,我已经做到了这一点:

//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/hKGLG/4/

我希望第三个圆圈沿红色路径动画.它现在是动画,但距红色路径的距离等于第三个圆的原始坐标.奇怪的是,出现这种情况是否变换translate的along对象是相对的(小写字母"T")或绝对(大写的"T").它也总是在同一个地方动画,即使我在animate通话之前用变换翻译轻推它.

任何帮助非常感谢.我刚刚在矢量土地上下船了.指针是有帮助的 - 一个工作小提琴甚至更好.

Answer 1

您只需跳跃,跳过并跳过您想要的功能.这里的混淆涉及转换和对象属性之间的交互 ​​- 具体而言,转换不会修改原始对象属性.翻译只是添加而不是替换您圈子的原始坐标.

解决方案非常简单.在你的方法中:

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处创建所有圆圈然后将它们转换为您想要的显示坐标可能是有意义的,避免了大量的迭代数学运算).但它的功能...... 看到这里.

另一个警告:... T平移不会影响已经应用于给定圆的任何其他变换.此实现不能保证与其他转换很好地协作.