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のソースコードから、「stop」を呼び出すと次のようになります。

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

これにより、アニメーションの総数が減り、そのアニメーションがリストから削除されます。'pause'関数は次のようになります。

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

一時停止を解除します。スコープ条件を考えると、これら2つの関数を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 に答える