与Raphael路径的SVG动画

我对SVG动画有一个相当有趣的问题。

我使用拉斐尔沿着圆形路径制作动画

obj = canvas.circle(x, y, size); path = canvas.circlePath(x, y, radius); path = canvas.path(path); //generate path from path value string obj.animateAlong(path, rate, false); 

circlePath方法是我自己创建的方法，用于生成SVG路径表示法中的圆路径：

 Raphael.fn.circlePath = function(x , y, r) { var s = "M" + x + "," + (yr) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(yr)+" z"; return s; } 

到目前为止，这么好 – 一切正常。 我的对象（obj）沿圆形路径动画。

但：

仅当我在与路径本身相同的X，Y坐标处创建对象时，动画才有效。

如果我从任何其他坐标开始动画（例如，沿着路径的一半），对象在正确半径的圆圈中动画，但是它从对象X，Y坐标开始动画，而不是沿着路径开始动画，因为它以视觉方式显示。

理想情况下，我希望能够停止/启动动画 – 重启时会出现同样的问题。 当我停止然后重新开始动画时，它会从停止的X，Y开始以圆圈为动画。

UPDATE

我创建了一个演示该问题的页面： http ： //infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

单击“开始”以开始动画。 当您停止并重新开始动画时，它会从正确尺寸的圆圈中的当前圆圈坐标继续。

Answer 1

问题是拉斐尔无法知道圆圈已经在路径的一部分。 “开始”function意味着 – 开始动画。 如果它做了其他任何事情，那将会被打破。

也就是说，您的用例是有效的，并且可能需要另一个function – 某种“暂停”。 当然，把它变成行李箱可能比你想要等待的时间更长。

从Raphael源代码中 ，这就是当你调用’stop’时会发生什么。

 Element[proto].stop = function () { animationElements[this.id] && animationElements[length]--; delete animationElements[this.id]; return this; }; 

这会减少动画的总数，并从列表中删除该动画。 以下是“暂停”function的样子：

 Element[proto].pause = function () { animationElements[this.id] && animationElements[length]--; this._paused_anim = animationElements[this.id]; delete animationElements[this.id]; return this; }; 

这样可以保存以后恢复的动画。 然后

 Element[proto].unpause = function () { this._paused_anim && (animationElements[this.id]=this._paused_anim); ++animationElements[length] == 1 && animation(); return this; }; 

将取消暂停。 鉴于范围条件，这两个函数可能需要直接注入Raphael源代码（它是核心黑客，我知道但有时候别无选择）。 我会把它放在上面显示的“停止”function的正下方。

试试看，告诉我它是怎么回事。

==== ====编辑

好的，所以看起来你必须修改animationElements [this.id]的“start”属性…类似于：

 this._pause_time = (+new Date) - animationElements[this.id].start; 

在暂停，然后

 animationElements[this.id].start = (+new Date) - this._pause_time; 

在简历上。

http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js#L3064