与Raphael路径的SVG动画 [英] SVG animation along path with Raphael

问题描述

我对SVG动画有一个相当有趣的问题。

I have a rather interesting issue with SVG animation.

我使用Raphael在循环路径上制作动画

I am animating along a circular path using 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路径表示法中的圆路径：

The circlePath method is one I have created myself to generate the circle path in SVG path notation:

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

So far, so good - everything works. I have my object (obj) animating along the circular path.

但是：

动画仅在以下情况下有效我在与路径本身相同的X，Y坐标处创建对象。

The animation only works if I create the object at the same X, Y coords as the path itself.

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

If I start the animation from any other coordinates (say, half-way along the path) the object animates in a circle of the correct radius, however it starts the animation from the object X,Y coordinates, rather than along the path as it is displayed visually.

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

Ideally I would like to be able to stop/start the animation - the same problem occurs on restart. When I stop then restart the animation, it animates in a circle starting from the stopped X,Y.

更新

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

I created a page that demonstrates the issue: http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

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

Click "start" to start the animation. When you stop and re-start the animation, it continues from the current circle coords in a circle of the correct dimensions.

推荐答案

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

The problem is that Raphael has no way of knowing that the circle is already part-way along the path. The "start" function means just that -- start an animation. imo it would be broken if it did anything else.

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

That said, your use case is a valid one, and might warrant another function -- a 'pause' of some sort. Of course, getting that into trunk would take longer probably than you want to wait.

来自拉斐尔源代码，这是当你打电话给'停止'时会发生什么。

From the Raphael source code, here's what happens when you call 'stop'.

Element[proto].stop = function () {
    animationElements[this.id] && animationElements[length]--;
    delete animationElements[this.id];
    return this;
};

这会减少动画的总数，并从列表中删除该动画。以下是暂停功能的样子：

This decrements the total number of animations, and removes that animation from the list. Here's what the 'pause' function might look like:

Element[proto].pause = function () {
    animationElements[this.id] && animationElements[length]--;
    this._paused_anim = animationElements[this.id];
    delete animationElements[this.id];
    return this;
};

这可以保存以后恢复的动画。那么

this saves the animation to be resumed later. then

Element[proto].unpause = function () {
    this._paused_anim && (animationElements[this.id]=this._paused_anim);
    ++animationElements[length] == 1 && animation();
    return this;
};

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

would unpause. Given scoping conditions, these two functions might need to be injected right into the Raphael source code (it's core hacking, I know but sometimes there's no alternative). I would put it right below the "stop" function shown above.

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

Try that, and tell me how it goes.

====编辑====

====EDIT====

好的，所以看起来你必须修改animationElements的start属性[this。 id] ......类似于：

Ok, so it looks like you'll have to modify the "start" attribute of animationElements[this.id]... something like:

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动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！