Post
Ask Question

AnimateMotion Following a Path

SVG Animation Path Element

 
The <amimatemotion> element allows us to animate an element position and rotation according to a path. The path is defined the same way as in path. You can set the attribute to define whether the object rotates following a tangent of the path. 
 
The effect of a motion path animation is to add a supplementary transformation matrix that causes a translation along the x- and y-axis of the current user coordinate system by the computed X and Y values computed over time.
 
The "animateMotion" causes the displacement of an element along a motion path.
 
Animation following a path:
  • Linear Motion
  • Curved Motion

Moving an element along a Linear Path

 
Linear path animation is almost always the easiest form of animation, in that you only need to specify a beginning and endpoint and move the element between the two points over a specified period of time.
 
The animation in this article is handled by the animatemotion element. In this example, once more a rectangle element is created with some optional style attributes, and its starting x and y coordinates are set to 0,0 (the top-left corner, or origin).
 
Now use the "animateMotion" tag to specify the beginning and endpoints of the animation, along with setting the duration of the animation to 4s. The fill attribute is then set to "freeze" so that the last frame of the animation is retained on-screen after the animation is finished.
 
Example of Linear Path:
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Moving an element along alinear path</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Linear Path</h2>  
  9.     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
  10.     <rect fill="purple" stroke="black" stroke-width="3px"  
  11.      x="0px" y="0px" width="100px" height="100px">  
  12.     <animateMotion  
  13.         from="0,0" to="100,100"  
  14.         dur="4s" fill="freeze"/>  
  15.     </rect>  
  16. </svg>  
  17. </body>  
  18. </html> 
Output
 
When the rectangle is at the origin:
 
linear1.jpg
 
When the rectangle is at the Destination:
 
linear2.jpg
 

Moving an element along a Curved Path

 

Representation of a path

 
The available commands are:
  • M: move (Move);
  • L: the creation of a line
  • H: creating a horizontal line
  • V: Creating a vertical line
  • C: Creating a curve
  • S: creation of a smooth curve
  • Q: Creating a bezier curve;
  • T: Creating a smoothed bezier curve
  • A: creation of an arc;
  • Z: termination of the road or path.
Example of Curved Path:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>SVG SMIL Animate with Path</title>  
  6.     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">  
  7. </head>  
  8. <body>  
  9.     <h1>SVG SMIL Animate with Path</h1>  
  10.     <?xml version="1.0" encoding="UTF-8" standalone="no" ?>  
  11.     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  12.     <svg width="5cm" height="3cm" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  
  13.   <desc>Example animMotion01 - demonstrate motion animation computations</desc>  
  14.   <rect x="1" y="1" width="498" height="298" fill="green" stroke="blue" stroke-width="2"/>  
  15.    
  16.   <!-- Draw the outline of the motion path in blue, along  
  17.           with three small circles at the start, middle and end. -->  
  18.   <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"/>  
  19.   <circle cx="100" cy="250" r="17.64" fill="black"/>  
  20.   <circle cx="250" cy="100" r="17.64" fill="black"/>  
  21.   <circle cx="400" cy="250" r="17.64" fill="black"/>  
  22.    
  23.   <!-- Here is a triangle that will be moved about the motion path.  
  24.        It is defined with an upright orientation with the base of  
  25.        the triangle centered horizontally just above the origin. -->  
  26.   <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">  
  27.    
  28.     <!-- Define the motion path animation -->  
  29.     <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">  
  30.        <mpath xlink:href="#path1"/>  
  31.     </animateMotion>  
  32.   </path>  
  33. </svg>  
  34. </body>  
  35. </html> 
Output
 
Triangle at Starting Position:
 
curved.jpg
 
Triangle at Middle Position:
 
curved1.jpg
 
The triangle at Last Position:
 
curved2.jpg
 


Similar Articles