svgサークルパスアニメーション

私はSVGを使ってアニメーションを作成したいと思いますが、いくつかの問題があります。小さな円は大きな円の経路に沿って動くはずです。ここで誰かがヒントや簡単な例を示してくれますか？私はCSSで試しましたが、これは正しい方法ではありません。svgサークルパスアニメーション

<!doctype html> 
<html lang="en"> 
<head> 
</head> 
<body> 
    <svg> 
    <circle id="c1" cx="100" cy="100" r="90" stroke="#ccc" stroke-width="2" fill="none"/> 
    <circle id ="c2" cx="100" cy="10" r="8" stroke="#f00" stroke-width="3" fill="#fff"/> 
    </svg> 
    <script> 
    circle1=document.getElementById("c1"); 
    circle2=document.getElementById("c2"); 

    for (i=1;i<60;i++){ 
     // here is must calc the points 
     //of the path of the circle 
     //that is difficult but not such a problem 
     //but i don´t see an animation 
     //but I see no animation 
     circle2.setAttribute("cx",100+i); 
     circle2.setAttribute("cy",100+i); 
    } 
    </script> 
</body> 
</html>

出典

2017-06-04 Anonymous

[CSS（Animation）でSVGを回転する]の複製があります（https://stackoverflow.com/questions/17029384/rotating-a-svg-with-css-animation） –

良い一日と歓迎、

私はサークルのポイントを計算する方法があまりにも精巧だと思います。変換回転でサークルを回転する方が簡単です。次のように

先週、私はセミナーに同様の質問に答え：

（。集中的にそれを読んでも発言してください私はあなたのコードを理解してほしい。）

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <svg id = "mySVG" width="200" height="200" viewBox="0 0 200 200"> 
 
    <circle id = "myCirclePath" cx="100" cy="100" r="90" stroke="#ccc" stroke-width="2" fill="none"/> 
 
    <circle id = "myAniCircle" cx="100" cy="10" r="8" stroke="#f00" stroke-width="3" fill="#fff"/> 
 
    </svg> 
 
    <script> 
 
    var animateAtCircle = function (elementToAnimate, circlePath, duration, callback){ 
 
     //I would see: 
 
     var imagesPerSecond = 60; 
 
     //and calculate the sum of steps i need: 
 
     var sumSteps = duration/(1000/imagesPerSecond); 
 
     //an circle has 360 degrees 
 
     //so my stepwidth is: 
 
     var stepWidth = 360/sumSteps 
 
     //let us begin with step 1 
 
     var step = 1; 
 
     //before, i need a Variable to store my Timeout 
 
     var pathAnim; 
 
     //and begin with our animation function 
 
     var anim=function(){ 
 
     //rotate the circle relative 
 
     //to the midpoint of circlePath 
 
     elementToAnimate.setAttribute("transform",`rotate(
 
      ${step*stepWidth}, 
 
      ${circlePath.getAttribute('cx')}, 
 
      ${circlePath.getAttribute('cy')} 
 
     )`); 
 
     //until step smaller then sumSteps 
 
     if (step < sumSteps){ 
 
      //set step to next step 
 
      step ++ 
 
      //and wait for creating next rotation an call anim again... 
 
      pathAnim = setTimeout(anim, 1000/imagesPerSecond); 
 
     } else { 
 
      //animation is finished; 
 
      clearTimeout(pathAnim); 
 
      //call callback function 
 
      if (callback) return callback(); 
 
     } 
 
     } 
 
     //now call our anim loop function 
 
     anim(); 
 
    } 
 
    //now call our Aimation at circle... 
 
    animateAtCircle(myAniCircle,myCirclePath,5000, function(){console.log('finished');}); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-06-04 09:05:10

「getTotalLength ） 'これも解決策ですか？ –

これはパスのためのものではありません。 [パスアニメーション]（https://stackoverflow.com/questions/44346278/svg-how-can-i-draw-a-brush-stain/44346558#44346558）を見てください。 –

svgサークルパスアニメーション

答えて

関連する問題