javascript - Raphael 沿着路径的 SVG 动画

Question

我有一个关于 SVG 动画的有趣问题。

我正在使用 Raphael 沿着圆形路径制作动画

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 开始循环播放。

更新

我创建了一个页面来演示这个问题: http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

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

Answer 1

问题是拉斐尔无法知道圆圈已经在路径的中途。 “开始”功能的意思就是——开始一个动画。 imo 如果它做了任何其他事情，它就会被破坏。

也就是说，您的用例是一个有效的用例，并且可能需要另一个功能——某种“暂停”。当然，将其放入后备箱所花费的时间可能比您想等待的时间要长。

来自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;
};

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

试试看，然后告诉我结果如何。

====编辑====

好吧，看起来你必须修改 animationElements[this.id] 的“开始”属性...像这样:

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