SVG круговой путь анимации

Question

SVG круговой путь анимации

1

Я хотел бы создать анимацию с SVG и иметь здесь несколько проблем. Маленький круг должен двигаться по пути большого круга. Может ли кто-нибудь здесь показать мне путь с несколькими подсказками или простым примером? Я попробовал это с помощью css, но это не тот путь.

<!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>

Frank Wisniewski 04 июнь 2017, в 11:09

Источник

Теги:

javascript

svg

1 ответ

Ещё вопросы

Frank Wisniewski · Accepted Answer · 2017-06-04T06-40-00.000Z

хороший день и добро пожаловать,

Я думаю, что способ вычисления точек круга слишком сложный. Легче поворачивать круг с поворотом вращения.

На прошлой неделе я ответил на подобный вопрос на семинаре следующим образом:

(Пожалуйста, прочитайте это интенсивно, а также замечания. Надеюсь, вы понимаете код.)

<!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>

большое спасибо, если нашли getTotalLength() это тоже решение?
Нет, это только для пути. Посмотрите на анимацию пути