2

3 回跳ね返って壁にぶつかって戻る円をアニメーション化する必要があります。指定されたパスをたどる必要があります。で試してみましたanimateMotion。今まではこんな感じで、

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>animation</title>

 <!--<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">-->
     <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
     </circle>
   <!--</rect>-->
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,
       -31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12 Z"
       stroke-width="5" stroke="#000000" fill="none"/>
</svg>

実際、私はこの分野に不慣れなため、次のようなことを期待しています。ガイダンスやサポートに感謝します。

ここに画像の説明を入力

4

2 に答える 2

0

円にパスをたどらせたい場合は、円の位置を (0,0) にする必要があります。これは、モーション アニメーションが円の現在の位置に対して相対的になるためです。 <circle cx="0" cy="0"...

rotate="auto"この場合は何の役にも立たないので、削除することもできます。

jsfiddleを参照してください

于 2014-08-26T12:48:30.970 に答える