我使用拉斐尔在循循环径上动画
obj = canvas.circle(x,y,size); path = canvas.circlePath(x,radius); path = canvas.path(path); //generate path from path value string obj.animateAlong(path,rate,false);
circlePath方法是我自己创建的,用于生成SVG路径符号中的圆形路径：
Raphael.fn.circlePath = function(x,r) {
var s = "M" + x + "," + (y-r) + "A"+r+","+r+",1,"+(x-0.1)+","+(y-r)+" z";
return s;
}
到目前为止,一切都很好.我有我的对象(obj)沿循循环径动画.
但：
该动画只有在我创建的对象在同一个X,Y坐标作为路径本身时才起作用.
如果我从任何其他坐标开始动画(比如沿路径的中途),物体就会以正确半径的圆圈动画,但它会从对象X,Y坐标开始动画,而不是沿着路径在视觉上显示.
理想情况下,我想停止/启动动画 – 重新启动时出现同样的问题.当我停止,然后重新启动动画,它从停止的X,Y开始动画在一个圆圈.
UPDATE
我创建了一个演示该问题的页面：
http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo
点击“开始”开始动画.
当您停止并重新启动动画时,它将继续从当前圆圈中的正确尺寸的圆圈.
解决方法
也就是说,您的用例是有效的,可能需要另一个功能 – 某种“暂停”.当然,把它放到后备箱中可能要比你想要的要长一些.
从Raphael source code开始,当您拨打“停止”时,会发生什么.
Element[proto].stop = function () {
animationElements[this.id] && animationElements[length]--;
delete animationElements[this.id];
return this;
};
这会减少动画总数,并从列表中删除该动画.以下是“暂停”功能可能如下所示：
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源代码中(这是核心黑客,我知道但有时候别无选择).我会把它放在上面显示的“停止”功能的正下方.
尝试一下,告诉我怎么回事
==== ====编辑
好的,所以看起来你必须修改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
