Move object every few seconds using svg

Question

Draw(one time) and move objects every five seconds as shown in figures left to right. I searched but not able to find a way to draw outer lines and move objects near to it.

ref : https://css-tricks.com/guide-svg-animations-smil/

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

enxaneta · Accepted Answer

Using animateMotion would be a solution for a continuous motion on the path. If you need to stop the movement at intervals I would use javascript. In this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design you have a thorough description of how to use javascript to emulate animateMotion

In order to stop the rect I'n using the timestamp for the requestAnimationFrame's callback. In the next example I'm stopping the rect every 2 seconds for 1 second.

Since the timestamp is running continuously I need a way to record the moment when it stops so that I can resume the animation from here. For this I'm setting lastTime as the last time when the rect has stopped.

Please read the comments in my code.

let rid;//the request animation frame id
let track = document.getElementById("track"),
  trackLength = track.getTotalLength(),//the total length of the track
  dur = 15000; //duration of one loop of track, in ms
 
let lastTime = 0;//last time when the rect has stopped
let flag = false; 

let interval = 5000;


function update(time) {
  rid = requestAnimationFrame(update);
    // to stop the rect every 5 seconds
    var deltaT = time%interval;
    //during 1 second
    if (deltaT < interval/2){
    flag = false;
  var t = ((deltaT + lastTime) % dur) / dur, // position in repeat cycle
    distance, // distance along the path for this rect
    point, // SVGPoint for that distance
    point2; // SVGPoint for a slightly different distance

  distance = trackLength * (t % 1);
  point = track.getPointAtLength(distance);
  point2 = track.getPointAtLength((distance + 2) % trackLength);
  angle = Math.atan2(point.y - point2.y, point.x - point2.x);

  rect.setAttribute(
    "transform",
    "translate(" +
      [point.x, point.y] +
      ")" +
      "rotate(" +
      angle * 180 / Math.PI +
      ")"
  );

 }else{if(flag==false){lastTime += interval/2; flag = true;}}
  
}
rid = requestAnimationFrame(update);

svg{border:1px solid;}
path{fill:none; stroke:black;}

UPDATE

And this is how I would do it using animateMotion

setInterval(()=>{ svg.pauseAnimations(); 
                  setTimeout(()=>{svg.unpauseAnimations()},1000)
                },2000);

svg{border:1px solid;}
path{fill:none; stroke:black;}

UPDATE 2

Here is how you move 5 blocks on the path: The only difference is the begin attribute for the animateMotion.

all the

setInterval(()=>{ svg.pauseAnimations(); 
                  setTimeout(()=>{svg.unpauseAnimations()},1500)
                },3000);

svg{border:1px solid;}
path{fill:none; stroke:black;}

Move object every few seconds using svg

Answers (1)

UPDATE

UPDATE 2

Related Questions