10

我对 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

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

4

1 回答 1

6

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

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

在Raphael 源代码中，当您调用“停止”时会发生以下情况。

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

于 2010-04-18T00:13:06.453 回答