1

注: ここでデモ コードを参照してください: http://jsfiddle.net/ginja/5yp7D/

青い四角をクリックすると回転する一連のオブジェクトがありますが、これは正常に機能します。セット内の各オブジェクトにはホバー イベントが関連付けられており、オブジェクトの色の変化とスケールをアニメートして、マウスが出入りするときにオブジェクトが拡大または縮小する印象を与えます。ただし、デモからわかるように、スケーリングによってオブジェクトが元の位置にリセットされ、オブジェクトが以前にホバーされていた場合は回転に興味深い効果が生じます。

私の質問は、オブジェクトのセットを回転させても、元の位置にリセットせずに回転後にオブジェクトのスケール効果を維持できるかということです。方向私は最も感謝しています。

編集新しいフィドルリンク...

4

1 に答える 1

1

これについてさらに調査した後、私は問題を理解していると思います。

Raphael でパスを描画すると、キャンバス上の設定された位置になり、回転を実行すると、その設定された位置の上に適用された変換になります。ホバー イベントがトリガーされ、スケール変換が適用されます。これにより、以前の変換がクリアされます。これが、オブジェクトが元の場所に戻る理由です。

私が思いついた解決策は、ホバーアニメーションを実行するときに、現在適用されている回転も実行する必要があり、回転するときにスケーリングがリセットされていることを確認する必要があるということです。また、回転中にブロックにカーソルを合わせると奇妙なアニメーションが発生し、回転中はホバーを無効にする必要がある場合があることにも気付きました。

更新されたコードについては、jsFiddle リンクhttp://jsfiddle.net/ginja/5yp7D/を参照してください。変更の概要を以下に示します...

回転:

blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

マウスオーバー：

this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

マウスアウト:

this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

これが正しい方法かどうかはわかりませんが、追加するものやより良い解決策がある場合は、コメントまたは回答を投稿してください

于 2012-10-03T12:05:22.333 に答える