CODEWITHSUNDEEP
animationsvgfrontend
crg
crg

Reputation: 4557

How to reverse animate motion?

Why my animation doesn't start from the top to the bottom ? How to reverse it correctly ? I don't know what I should change. (I tried keyPoints="1;0" keyTimes="0;1" which didn't work)

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350"><path d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"></path><rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect><animateMotion xlink:href="#circle" from="50" to="450" dur="5s" begin="0s" repeatCount="1" rotate="auto" fill="freeze"><mpath xlink:href="#motionPath"></mpath></animateMotion></svg>

Upvotes: 1

Views: 431

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14545

It is necessary to remove from =" 50 " to =" 450 " since the length of the path of movement is determined by the length of the path mpath

The direction of movement of an object along a path depends on two parameters

keyPoints="1;0" - movement from start to finish
keyTimes="0;1"    

keyPoints="0;1" - movement from end to start
keyTimes="0;1"

In the example below, JS is used only to handle the event of pressing the control buttons: forward and back

var animation1 = document.getElementById("forward")
function forwardSVG(){
     animation1.beginElement();
} 

var animation2 = document.getElementById("back")
function backSVG(){
     animation2.beginElement();
}
<div id="pathContainer4">
        <button id="btn1" onclick="forwardSVG()">forward</button />
        <button id="btn2" onclick="backSVG()">Back</button />
</div>  
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="50 0 500 350">
<path id="motionPath" d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" >
 </path>
   <rect id="circle" x="0" y="-25" rx="15" ry="15" width="50" height="50"></rect>
   
   <!-- Forward motion animation -->
    <animateMotion id="forward"
     xlink:href="#circle"
      dur="5s"
      begin="indefinite"
      rotate="auto"
      fill="freeze"
       repeatCount="1"
       keyPoints="1;0"
       keyTimes="0;1"
       calcMode="linear">
      <mpath xlink:href="#motionPath"></mpath>
     </animateMotion> 
 
 <!-- Backward motion animation  -->
    <animateMotion id="back"
     xlink:href="#circle"
      dur="5s"
      begin="indefinite"
      rotate="auto"
      fill="freeze"
       repeatCount="1"
       keyPoints="0;1"
       keyTimes="0;1"
       calcMode="linear">
      <mpath xlink:href="#motionPath"></mpath>
     </animateMotion>
    </svg>

Upvotes: 2

Mohamed Bdr
Mohamed Bdr

Reputation: 975

Here is the reverse you want.
I modified the shape a little but you can modify it back again.
Hope that this is the solution to your problem.
you can make it freeze too if you want.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350">
  <g>
    <path stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"
          d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"/>
        
    <rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="60" fill="black"
            stroke="black" stroke-width="1" transform="translate(-25,-10)">
 
      <animateMotion path="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"
                     begin= "0s" dur="5s" repeatCount="1" rotate="auto" fill="freeze"
                     keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
    </rect>
  </g>
</svg>

Upvotes: 2

Related Questions