RaphaelJSに問題があります。図面で説明します。
基本的に、赤い点が動くとき、パスはそれに接続され続け、それはそれに沿って動くはずです。私が最初に試していたのは、赤い点でanimateを使用し、パスでanimateWithを使用することでした。うまくいきませんでした。
誰かが私を正しい方向に向けることができますか？タイマーなどで自分だけのアニメーションを作りたいのですが、いいアイデアかどうかチェックしたいです。
また、ある時点ですべてのドットが移動し、それらの間のパスは接続されたままになります。私はそれを理解する方法がわかりません。
ありがとう
この場合の秘訣は、a）特定の時間枠ですべての円がどこにあるかを知り、b）path円と同じ時間スパンでコネクタラインの属性をアニメーション化することです。したがって、中心の円が（nx、ny）にアニメーション化され、衛星の円が（cx、cy）にアニメーション化される場合は、次のように対応するコネクタをアニメーション化する必要があります。
cl.animate( { path: [ "M", nx, ny, "L", cx, cy } }, duration, easing_method );
ただし、継続時間とイージング方法を同じに保つように注意する必要があります。そうしないと、スロープになります。
明らかに、使用できる状態管理戦略はいくつもあります。コードがないと、推測するのは困難です。しかし、私はここで1つの可能な解決策をモックアップしました。