0

私は Raphael とコーディング全般に不慣れなので、この質問を読み進める間、ご容赦ください。Raphael でパスのグループをアニメーション化するのに問題があります。私が望む効果は、紙の上を一斉に動きながら個々のアニメーションを実行する一連のパスです。以下に例を示します。

path1 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path2 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path3 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
pathSet = paper.set(path1, path2, path3);
pathSet.animate({transform: "t500,500"}, 1000);

path1.mouseover(function(){path1.animate({transform: "s1.6,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "s1.6,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "s1.6,r10"}, 1000)});

上記の例では、pathSet は本来あるべきようにアニメーション化されますが、個々のパスにマウスを合わせると、その場でスケーリングおよび回転するだけでなく、元の座標 (pathSet アニメーションの前の位置) に変換されます。 ）。変換の相対「t、r、s」パラメーターと絶対「T、R、S」パラメーターに関するドキュメントを読んで、それだと思いましたが、違いはないようです。どんな助けでも大歓迎です！

4

1 に答える 1

0

私が Raphael の最大の弱点の 1 つであると考えていることに気が付きました。変換アニメーションをうまく組み合わせるのが難しいのです!

これは完璧な解決策ではありませんが、常に mouseover/mouseout ハンドラーを使用して、必要な変更を追加/カウンターすることができます。例えば：

path1.mouseover(function(){path1.animate({transform: "...s1.5,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "...s1.5,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "...s1.5,r10"}, 1000)});

path1.mouseout(function(){path1.animate({transform: "...s0.66,r-10"}, 1000)});
path2.mouseout(function(){path2.animate({transform: "...s0.66,r-10"}, 1000)});
path3.mouseout(function(){path3.animate({transform: "...s0.66,r-10"}, 1000)});

追加/カウンター アプローチは、特定の要素からのステートフルな反応を必要としない限り、うまく機能します。それが起こったら、必要に応じて絶対変換を調整して、あるべき場所を追跡するオブジェクトのタイプのラッパークラスを作成する方が理にかなっているように思えます。しかし、あなたはそのようなものを必要としないかもしれません。

于 2012-07-06T17:08:48.943 に答える