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）沿圆形路径动画。

BUT：

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

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

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

更新

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

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

Answer 1

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

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

从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源代码（它是核心黑客，我知道但有时候别无选择）。我会把它放在上面显示的“停止”功能的正下方。

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

==== EDIT ====

好的，所以看起来你必须修改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

与Raphael路径的SVG动画

1 个答案: