SVG - 円弧アニメーションジャンプステップ

Question

私はパスのsvgアニメーションを作ろうとしています。スタート結果と最終結果は罰金ですが、いくつかの理由のために中間の位置が存在しない（アニメーションだけの期間の後に、最初から最後までジャンプ

これは私が使用しているコードです：。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title> 
<path 
    id="p1" 
    class="cls-1" 
     d=" 
      M 20 40 A 20 20 0 1 0 40 20 
     " 
/> 
<animate xlink:href="#p1" 
     attributeName="d" 
     attributeType="XML" 
     from="M 20 40 A 20 20 0 1 0 40 20" 
     to="M 50 57.32050807568877 A 20 20 0 0 0 40 20" 
     dur="10s" 
/> 
</svg> 

Answer 1

私はあなたがアークアニメーションをやりたいの困難にもかかわらず、正しくあなたを理解していれば。

アーク式

<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />  

Large-arc-flagおよびsweep-flagは、整数定数で、「0」または「1」の2つの値しか取らず、アニメーションを円滑にするためのものではありません。

Large-arc-flag = 1小円弧の場所以下の例で

Large-arc-flag = 0小円弧には、赤破線で示されている場合。あなたが大円弧から離散遷移アニメーションを作ることができます

大小の円弧の開始と終了の座標が一致し、「0 『から』 1」のフラグ `大円弧フラグの値のみ

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> 
 
<defs> 
 
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} 
 
</style> 
 
</defs> 
 
<title>percentage-green</title> 
 
<g transform="scale(2)"> 
 
<path id="p1" 
 
    class="cls-1" 
 
     d="M 20 40 A 20 20 0 1 0 40 20"> 
 
<animate 
 
     attributeName="d" 
 
     attributeType="XML" 
 
\t \t repeatCount="5" 
 
     begin="Layer_1.mouseover"  
 
\t from="M 20 40 A 20 20 0 1 0 40 20" 
 
     to="M 20 40 A 20 20 0 0 0 40 20" 
 
     dur="2s" > 
 
\t \t </animate> 
 
</path> 
 
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" /> 
 
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 
</g> 
 
</svg>

カーソル

第二の例

を置くとアニメーションが始まります

あなたに似です - パッチのパラメータ「d」はlarge-arc-flag = 1（大アーク）の一定の値で、滑らかに変化するカーソル

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> 
 
<defs> 
 
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} 
 
</style> 
 
</defs> 
 
<title>percentage-green</title> 
 
<g transform="scale(2)"> 
 
<path id="p1" 
 
    class="cls-1" 
 
     d="M 20 40 A 20 20 0 1 0 40 20"> 
 
<animate xlink:href="#p1" 
 
     attributeName="d" 
 
     attributeType="XML" 
 
\t \t repeatCount="5" 
 
     values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"  
 
\t begin="Layer_1.mouseover" 
 
     dur="3s" 
 
    restart="whenNotActive" \t \t > 
 
\t \t </animate> 
 
</path> 
 
<circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" /> 
 
<path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 
</g> 
 
</svg>

を置くと

アニメーションが始まります