AnimateMotion Following a Path

Ashwani Tyagi
11y
4.9k
0
0

Article

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 end point 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 end points 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:

<!DOCTYPE html>

<head>

<title>Moving an element along alinear path</title>

</head>

<body>

<h2>Linear Path</h2>

<rect fill="purple" stroke="black" stroke-width="3px"

x="0px" y="0px" width="100px" height="100px">

<animateMotion

from="0,0" to="100,100"

dur="4s" fill="freeze"/>

</rect>

</svg>

</body>

</html>

Output

When the rectangle is at the origin:

When the rectangle is at the Destination:

Moving an element along a Curved Path

Representation of a path

The available commands are:

M: move (Move);
L: 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:

<!DOCTYPE html>

<head>

<title>SVG SMIL Animate with Path</title>

</head>

<body>

<h1>SVG SMIL Animate with Path</h1>

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<desc>Example animMotion01 - demonstrate motion animation computations</desc>

<!-- Draw the outline of the motion path in blue, along

with three small circles at the start, middle and end. -->

<!-- Here is a triangle which will be moved about the motion path.

It is defined with an upright orientation with the base of

the triangle centered horizontally just above the origin. -->

</animateMotion>

</path>

</svg>

</body>

</html>

Output

Triangle at Starting Position:

Triangle at Middle Position:

Triangle at Last Position:

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all