更新

Question

绘制（一次）并每五秒钟移动对象一次，如图从左到右所示。我进行了搜索，但找不到一种方法来绘制外线并将对象移动到附近。

<animate xlink:href="#blue-rectangle"
         attributeName="x" 
         from="50"
         to="425" 
         dur="5s"
         begin="circ-anim.repeat(2)"
         fill="freeze" 
         id="rect-anim" />

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

Answer 1

使用animateMotion是在路径上连续运动的一种解决方案。如果您需要每隔一段时间停止移动，我将使用javascript。在本书中：Using SVG with CSS3 and HTML5: Vector Graphics for Web Design，您对如何使用JavaScript来模拟animateMotion

有详尽的描述。

为了停止rect，我没有为requestAnimationFrame的回调使用时间戳。在下一个示例中，我每2秒停止一次rect，持续1秒钟。

由于时间戳记一直在运行，因此我需要一种方法来记录时间戳记停止的时刻，以便可以从此处恢复动画。为此，我将lastTime设置为rect停止的最后一次。

请阅读我的代码中的注释。

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;}

<svg viewBox = "0 0 150 200" width="200">
  <path id="track" d="M70,30 Q70,20 80,20L120,20 Q130,20 130,30L130,170.000 Q130,180 120,180L30,180 Q20,180 20,170L20,130 Q20,120 30,120L60,120 Q70,120 70,110Z" />
 <polygon id="rect" points="0,0 -10,0 -10,-10 0,-10 0,0" style="fill: #ff0000;"/> 
</svg>

更新

这就是我使用animateMotion

的方法

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

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

<svg id="svg" viewBox = "0 0 150 200" width="300">
  <path id="track" d="M70,30 Q70,20 80,20L120,20 Q130,20 130,30L130,170.000 Q130,180 120,180L30,180 Q20,180 20,170L20,130 Q20,120 30,120L60,120 Q70,120 70,110Z" />
  <polygon id="rect" points="0,0 10,0 10,10 0,10 0,0" style="fill: #ff0000;">
  <animateMotion id="test" begin= "0s" dur="15s" repeatCount="infinite" rotate="auto" fill="freeze">
    <mpath xlink:href= "#track" />
    </animateMotion></polygon>
</svg>

更新2

这是在路径上移动5个块的方式：唯一的区别是begin的{{1}}属性。

所有

animateMotion

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

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

使用SVG每隔几秒钟移动一次对象

1 个答案:

更新

更新2