与Raphael路径的SVG动画

Question

我对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 + "," + (y-r) + "A"+r+","+r+",0,1,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

单击"开始"以开始动画.当您停止并重新开始动画时,它将从正确尺寸的圆圈中的当前圆形坐标继续.

Answer 1

问题是拉斐尔无法知道圆圈已经沿着路径走了一段路."开始"功能意味着 - 开始动画.如果它做了其他任何事情,它会被打破.

也就是说,您的用例是有效的,并且可能需要另一个功能 - 某种"暂停".当然,将它放入行李箱可能比你想要等待的时间更长.

从Raphael源代码中,这就是当你调用'stop'时会发生什么.

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