raphael - ラファエル アニメーションの初心者向けの質問

Question

私はラファエルの初心者です。ここで問題が発生しました。

私はパスを定義しました：

var c = paper.path('M '+p1.x+' '+p1.y+'L '+p2.x+' '+p2.y);

ここでp1、p2はパスの 2 つの終点です。

パスをマウスでクリックすると、p2 が p1 に折りたたまれ、最後に p2 がオーバーラップするときに「p1 で非表示」になるアニメーション機能が必要です。どうやってするか？

Answer 1

私の知る限り、パス プロパティをアニメーション化することはできません。異なるプロパティでパスを再描画するのが最善です。したがって、p1 の変数を「アニメーション化」し、それらの変数でパスを再描画します。

p1 パラメータを変更するタイマー関数が必要です。そのため、例では 0.1 秒ごとに p1 パラメータが p2 パラメータに近づきます。

var p1x = 10;
var p1y = 10;

var p2x = 20;
var p2y = 20;

var t = setTimeout("timer()", 100);
var p = paper.path(...);

function timer()
{
   p1x++;
   p1y++;

   p.remove();
   p = paper.path(with new variables);

   if(p1x == p2x) clearTimeout(t);
}

他の誰かが苦労しています: http://japhr.blogspot.com/2010/09/cant-animate-raphael-path-positions.html