Today we’ll learn how to make SVG animations without using other kits.

Source: www.zhangxinxu.com/wordpress/2…

SVG animation with SMIL

The use of Synchronized Multimedia Integration Language (SMIL), a W3C standard, enables SVG to work without JavaScript and CSS. It is a pioneer of animation on the Web and inspired Web Animation and CSS Animation. SVG worked with SMIL’s development team to enable SVG to leverage SMIL to do the following:

  1. Animate numeric attributes of elements (x, y values, etc.)
  2. Animate the transform property of the element
  3. Animate element colors
  4. Trajectory Path movement animation, similar to offset-path in CSS

These features alone allow us to combine many kinds of animations without JavaScript or CSS. How to use it is not difficult, just place the following four elements inside an SVG element to manipulate the animation:

  • <set>
  • <animate>
  • <animateTransform>
  • <animateMotion>

Then we will introduce each of these four elements.

SVG Animation Element introduction and demonstration

\<set>

Using the element you can specify that you change an attribute of SVG after a certain amount of time, such as changing Rick’s eyes to look down after 2 seconds:

Doubt? You said he was looking down?

This is because the set will not be executed repeatedly. It is believed to have taken more than 2 seconds from the time you loaded this article to this location, so it is already the result of the execution. I suggest you right-click on -> “Open images in new page” to experience it, or look at the following GIF:

The relevant code is as follows:

Cx = "56.7573" cy = "circle" 92.8179 "r =" 2 "the fill =" black "stroke =" black "stroke - width =" 1 "> < the set AttributeName = "cy to =" 105.7318 "begin" = "2 s" / > < / circle >Copy the code

Place the element in the SVG shape you want to apply the effect to.

AttributeName specifies the attribute you want to change; To stands for change value; Begin indicates when the execution starts after loading.

In addition to attributeName, there is another parameter called attributeType that tells the browser whether the attribute you want to animate belongs to XML (e.g. cy) or CSS (e.g. opacity). If not specified, the browser will guess. However, this parameter has also been deprecated, so we don’t really need it anymore.

<animate>

The animate> element allows you to animate tween effects for a single property change. The same use is in the SVG shape you want to apply the effect to:

Cx = "56.7573" cy = "circle" 92.8179 "r =" 2 "the fill =" black "stroke =" black "stroke - width =" 1 "> < animate AttributeName = "cx" from = = "56.7573" to "64.7573" dur = "2 s" repeatCount = "indefinite" / > < / circle >Copy the code

The ‘from’ attribute specifies which value to start the change from. The ‘dur’ attribute specifies the execution time for the animation. The ‘repeatCount’ attribute specifies how many times the animation is to be repeated.

Use animate to make Rick’s eyes look to the right.

It can also be used to change colors:

An element has been deprecated because it can be used to change the color.

<animateTransform>


can be used to control transform properties, which cannot be done with animate. Just like CSS transform, you can control translation, scaling, Rotation and skewing.

It is possible to make Rick’s head turn (note: animateTransform does not seem to support this on mobile, please use the desktop browser to view this example).

<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" begin="0s" dur="10s" repeatCount="indefinite" />
Copy the code

As mentioned above, you want to control the transform attribute, so attributeName=”transform”, and then the type parameter depends on what type of transform you want, rotate, scale. The rest of the arguments from, to, begin, and dur are the same as the previous ones, which specify the start and end value of the animation, the length of time, and the number of times the animation is executed.

<animateMotion>

The last element, animateMotion, moves the SVG along the path (please page out the new image if you can’t see the effect) :

<! - track - >
<path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="black" stroke-width="2" />

<g> 
<! -- Rick Spaceship SVG --> 
<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" 
dur="10s" repeatCount="indefinite" /> 
</g>
Copy the code

The in the above code is just to make it clear that the path is independent of the path of the actual animation. In practice, if you give an animateMotion a path value, the SVG containing the animateMotion element will follow that path.

The other values are the same as the other elements, but animateMotion has a special attribute value rotate, which specifies whether to rotate the SVG object as it moves along the path. It can be set to auto or auto-reverse:

<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" 
dur="10s" repeatCount="indefinite" rotate="auto" />
Copy the code

In addition to the given path, you can use the existing as the path of the animateMotion, but through the sub-element mpath: 

<! - track - > 
<path id="path1" d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="black" stroke-width="2" /> 

<g>
    <! -- Rick Spaceship SVG --> 
    <animateMotion begin="0s" dur="10s"
    repeatCount="indefinite"> 
    <mpath xlink:href="#path1" /> 
    </animateMotion> 
</g>
Copy the code

Note that if you want to use xlink: href SVG element to specify the connection, in your < SVG > tag must remember on declaration XMLNS: xlink = “http://www.w3.org/1999/xlink”.

<svg width="300" height="200" viewBox="0 0 500 300" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
</svg>
Copy the code

Xlink :href: xlink:href: xlink:href: xlink:href: xlink:href

<circle id="eyes" cx="56.7573" cy="92.8179" r="2" fill="black" stroke="black" stroke-width="1"> 
</circle> 

<set xlink:href="#eyes" attributeName="cy" to="105.7318" begin="2s" />
Copy the code

So far, we have introduced four SVG animation elements. In addition to using each element individually, these elements can be combined by applying the corresponding animate element individually to the desired SVG shape. You can rotate Rick while the hair color changes and the eyes move (right-click the SVG source code and find multiple animate elements) :

This section describes the key parameters of SVG SMIL Animation

In the Demo above, we can see that there are many parameters of SVG animate element, and only a few of them are used in the example. However, there are many different values for each parameter. Recommended reference – https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/ to write this article very good very detailed.

from, to, by, values

“From” and “to” are seen in the previous example, and the function is literally defined as a movement interval for animation changes from one value to another. Instead of telling the SVG what to change to, we can use BY to tell the SVG “how much” to change. For example, in the previous animateTransform example, we can change it to:

<animateTransform attributeName="transform"
type="rotate" from="0 0 0" by="360" 
begin="0s" dur="10s" repeatCount="indefinite" />
Copy the code

You’ll notice here that by and to are a little bit repetitive, so they have precedence over each other, and if you specify both to and by, they only apply to the value of to.

Take a look at values, which didn’t appear in the previous example. Its function is to complement from, to, and by. The problem is that “from”, “to”, and “by” can only specify the change between two values, from a to b, whereas “values” can be given multiple values, using a semicolon. A -> b -> c -> b -> a

<animateTransform attributeName="transform" 
type="translate" values="20; 120; 20" begin="0s" dur="3s" 
repeatCount="indefinite" />
Copy the code

begin, end

Begin and end are used to control when to start animation and when to stop animation, respectively. In the example above, we only use time, such as begin=”2s”, but there are many types of values that can be assigned to these two arguments, and they can be assigned to multiple values just like values. Separate can: begin =

|

|

|

|

|

For a detailed introduction to each type, I recommend looking directly at the online collation

I’m just going to mention a few that I think are practical.

The first is<syncbase-value>.

Use the begin/end values of the other animate elements to add and subtract.

<g> 
 <animateTransform attributeName="transform"
     type="scale" 
     values="1. 1.2; 1" 
     begin="ship.end" 
     dur="3s" 
     repeatCount="indefinite" /> 
</g> 

<! -- spaceship --> 
<g> 
    <animateTransform id="ship"
    attributeName="transform" 
    type="translate" 
    values="20; 120; 20" 
    begin="0s" dur="3s" /> 
</g>
Copy the code

In this example, there are two animate elements in the SVG. Given an ID value of SHIP for the element that is animating the spacecraft, then use begin=”ship.end” on Rick’s animation element to animate Rick’s head until after the animation of the spacecraft is complete. The effect is as follows:

Another value that I think is useful is event-value, which can be used to start or end an animation based on an event. It is used in the same way as syncbase-value. Given an element ID, you can begin or end the animation based on the event that that element triggers. Almost all events supported by DOM elements can be used

Finally, indefinite. If your begin value is indefinite, which means an infinite wait, you need to trigger it with the animate element. BeginElement (), Or use the tag xlink:href=”#[animate element ID]” to start.

calcMode, keyTimes, keySplines

These three parameters allow you to adjust the speed of the animation more subtly.

CalcMode has four modes: discrete, linear, paced, and spline.

Discrete is discrete as the name implies, and jumps from values to values are not tween; Not the same thing as an average or linear paced animation. Spline uses a shell curve, which is paired with keyTimes and keySplines.

KeyTimes is the key shadow. Like values mentioned earlier, it can accept multiple values separated by semicolons, define the key time points of the animation, and use different calcmodes to have different speed effects at different time points.

KeySpline is what defines the four control points of a Bay curve when your calcMode is set to spline.

Interested friends can directly see the article: https://www.zhangxinxu.com/study/201408/svg-animation-calcmode.html

additive

By the end, you are wondering: what if I want to make multiple consecutive changes to the same attribute of the same SVG shape?

For example, use animateTransform to enlarge and then shift a pattern.

This is where the additive comes in. The additive tells the SVG whether to sum or replace the animation. The default is replace.

Example:

<animateTransform attributeName="transform" 
type="scale" 
by="1.1" 
begin="0s" dur="5s"
repeatCount="indefinite" 
additive="sum" /> 

<animateTransform attributeName="transform" type="rotate" 
from="0 0 0" to="360 0 0"
begin="0s" dur="5s" 
repeatCount="indefinite" 
additive="sum" />
Copy the code

conclusion

Today I spent a lot of time introducing SVG SMIL Animation, thank you for watching, the process of making the Demo was very interesting for me, I also learned how to draw SVG, and I also found a lot of detailed information from other resources on the Internet, I gained a lot! Hopefully, this article will inspire you to try your hand at animations in SVG, in addition to the usual Web animation and CSS animation.

Source: www.zhangxinxu.com/wordpress/2…