Question

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

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

//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创建所有圆圈然后将它们转换为您想要的显示坐标可能是有意义的，避免了大量的迭代数学运算）。但它很实用...... see here。

另一个警告：... T平移不会影响已经应用于给定圆的任何其他变换。这个实现不保证与其他变换很好地配合。

raphaelJS 2.1沿路径动画

1 个答案: