Introduction to HTML5 SVG 2D 11-introduction and application of user interaction (animation)

Comments: SVG has good user interaction: SVG can respond to most DOM2 events, SVG can capture users' mouse movements through cursor, and so on. Interested friends can understand it, maybe this article will help you learn AnimationInteractivity
SVG has good user interaction, such:
1. SVG can respond to most DOM2 events.
2. SVG can use cursor to capture users' mouse movements.
3. Users can easily achieve scaling and other effects by setting the zoomAndPan attribute value of svg elements.
4. You can easily combine animations and events to achieve complex effects.
By attaching events to SVG elements, we can use the scripting language to conveniently complete some interactive tasks. SVG supports most DOM2 events, such as onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll, and so on. In addition, SVG also provides unique animation-related events, such as onroom, onbegin, onend, and onrepeat.
The events are quite familiar to everyone.

Animation Mode
SVG uses text to define graphics. This document structure is very suitable for animation creation. To change the position, size, and color of the image, you only need to adjust the corresponding attributes. In fact, many of the properties that SVG specifically designed for processing various events are still tailored for animation. In SVG, there are several ways to implement animation:
1. Use SVG animation elements. This topic will be highlighted below.
2. Use scripts. Using DOM operations to start and control animations is already a mature technology, followed by a small example.
3. SMIL (Synchronized Multimedia Integration Language ). For more information, see http://www.w3.org/tr/2008/rec-smil3-20081201 /.
The following example contains several basic animations in SVG.:

The Code is as follows:
<Svg width = "8 cm" height = "3 cm" viewBox = "0 0 800 300"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Desc> basic animation elements </desc>
<Rect x = "1" y = "1" width = "798" height = "298"
Fill = "none" stroke = "blue" stroke-width = "2"/>
<! -- Animation of rectangle position and size -->
<Rect id = "RectElement" x = "300" y = "100" width = "300" height = "100"
Fill = "rgb (255,255, 0)">
<Animate attributeName = "x" attributeType = "XML"
Begin = "0 s" dur = "9 s" fill = "freeze" from = "300" to = "0"/>
<Animate attributeName = "y" attributeType = "XML"
Begin = "0 s" dur = "9 s" fill = "freeze" from = "100" to = "0"/>
<Animate attributeName = "width" attributeType = "XML"
Begin = "0 s" dur = "9 s" fill = "freeze" from = "300" to = "800"/>
<Animate attributeName = "height" attributeType = "XML"
Begin = "0 s" dur = "9 s" fill = "freeze" from = "100" to = "300"/>
</Rect>
<! -- Create a new user coordinate space, so text starts from the new (0, 0), and subsequent transformations are for the new coordinate system -->
<G transform = "translate (100,100)">
<! -- Set is used to animation visibility, and then animateMotion is used,
Animate and animateTransform execute other types of animations -->
<Text id = "TextElement" x = "0" y = "0"
Font-family = "Verdana" font-size = "35.27" visibility = "hidden">
It's alive!
<Set attributeName = "visibility" attributeType = "CSS" to = "visibility"
Begin = "3 s" dur = "6 s" fill = "freeze"/>
<AnimateMotion path = "M 0 0 L 100 100"
Begin = "3 s" dur = "6 s" fill = "freeze"/>
<Animate attributeName = "fill" attributeType = "CSS"
From = "rgb (255,)" to = "rgb (, 0 )"
Begin = "3 s" dur = "6 s" fill = "freeze"/>
<AnimateTransform attributeName = "transform" attributeType = "XML"
Type = "rotate" from = "-30" to = "0"
Begin = "3 s" dur = "6 s" fill = "freeze"/>
<AnimateTransform attributeName = "transform" attributeType = "XML"
Type = "scale" from = "1" to = "3" additive = "sum"
Begin = "3 s" dur = "6 s" fill = "freeze"/>
</Text>
</G>
</Svg>

Put this code in the body of the html document and run it to know the animation effect.

Public attributes of animation Elements
Class 1: Specify the target element and attribute
Xlink: href
This should be very familiar, pointing to the elements that execute the animation. This element must be defined in the current SVG document fragment. If this attribute is not specified, the animation is applied to its parent element.
AttributeName = "<attributeName>"
This attribute specifies the attributes of the application animation. If this attribute has a namespace (do not forget that SVG is essentially an XML document), this namespace should also be added. For example, in the following example, different aliases are assigned to xlink. In this example, namespace is used when the animate attribute is specified:

The Code is as follows:
<Svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"
Xmlns: xlink = "http://www.w3.org/1999/xlink">
<Title> Demonstration of the resolution of namespaces for animation </title>
<G xmlns: a = "http://www.w3.org/1999/xlink">
<Animate attributeName = "a: href" xlink: href = "# foo" dur = "2 s" to = "two.png" fill = "freeze"/>
</G>
<G xmlns: B = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">
<Image xml: id = "foo" B: href = "one.png" x = "35" y = "50" width = "410" height = "160"/>
</G>
</Svg>

AttributeType = "CSS | XML | auto (default )"
This attribute specifies the namespace of the attribute values. The meanings of these values are as follows:
CSS: indicates that the attribute specified by attributeName is a CSS attribute.
XML: indicates that the attribute specified by attributeName is the attribute in the default namespace of XML (note that the svg document is essentially an xml document ).
Auto: searches for the attribute specified by attributeName In the CSS attribute. If no attribute is found, the attribute is searched in the default XML namespace.
Category 2: control the animation Time Attributes
The following attributes are animation time attributes. They control the time series of animation execution, including how to start and end the animation, whether to re-execute the animation, and whether to save the animation end state.
Begin = "begin-value-list"
This attribute defines the animation start time. It can be a series of time values separated by semicolons. It can also be the starting value of some other trigger animation. Such as events and shortcuts.
Dur = Clock-value | "media" | "indefinite"
Defines the animation duration. It can be set to the value displayed in the clock format. You can also set it to the following two values:
Media: Specifies the animation duration as the duration of the internal multimedia element.
Indefinite: specifies that the animation time is unlimited.
The clock Format refers to the following valid value formats:

The Code is as follows:
: 30: 03 = 2 hours, 30 minutes and 3 seconds
: 00: 10.25 = 50 hours, 10 seconds and 250 milliseconds
: 33 = 2 minutes and 33 seconds
: 10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
. 2 h = 3.2 hours = 3 hours and 12 minutes
Min = 45 minutes
S = 30 seconds
MS = 5 milliseconds.
. 467 = 12 seconds and 467 milliseconds
. 5 s = 500 milliseconds
: 00.005 = 5 milliseconds

End = "end-value-list"
Defines the animation end time. It can be a series of values separated by semicolons.
Min = Clock-value | "media"
Max = Clock-value | "media"
Specifies the maximum and minimum animation duration.
Restart = "always" | "whenNotActive" | "never"
Specifies whether the animation can be restarted at any time. Always indicates that the animation can start at any time. WhenNotActive indicates that the player can only start again when no video is played, for example, the previous playback has ended. Never indicates that the animation cannot start again.
RepeatCount = numeric value | "indefinite"
Set the number of animation repetitions. Indefinite indicates an infinite number of duplicates.
RepeatDur = Clock-value | "indefinite"
Set the total animation time for repetition. Indefinite indicates an infinite number of duplicates.
Fill = "freeze" | "remove (default )"
Sets the element status after the animation ends. Freeze indicates that the element stays at the final state of the animation after the animation ends. Remove indicates that the element is returned to the state before the animation ends. This is the default value.
Category 3: Define attributes of animation values
These attributes define the values of the attributes of the animation to be executed. In fact, it defines some algorithms for key frames and interpolation.
CalcMode = "discrete | linear (default) | paced | spline"
Defines the animation interpolation method: discrete, non-interpolation; linear: linear interpolation; paced: Step interpolation; spline: spline interpolation. The default value is linear (linear interpolation). However, if the attribute does not support linear interpolation, the discrete interpolation method is used.
Values = "<list>"
Defines the Value List of animation key frames separated by semicolons. Supports vector values.
KeyTimes = "<list>"
Defines the time list of animation key frames separated by semicolons. This corresponds to values one by one. This value is affected by the interpolation algorithm. If it is linear and spline, the first value of keyTimes must be 0, and the last value must be 1. For discrete (discrete) Non-interpolation, the first value of keyTimes must be 0. KeyTimes is obviously not required for step-size interpolation. If the animation duration is set to indefinite, The keyTimes is ignored.
KeySplines = "<list>"
This attribute defines the control points for spline interpolation. Obviously, this attribute takes effect only when the interpolation mode is selected as spline. The value range in this list is 0 to 1.
From = "<value>"
To = "<value>"
By = "<value>"
Defines the starting value, ending value, and step value of the animation attribute. NOTE: If values has a related value, any from/to/by value will be ignored.
Category 4: control whether an animation is an incremental attribute
Sometimes, it is very useful to use the additive attribute if the related value is set not the absolute value but the increment value.
Additive = "replace (default) | sum"
This attribute controls whether the animation is incremental. Sum indicates that the animation has a large property value or other low-priority animations. Replace is the default value, indicating that the animation will overwrite the relevant property value or other low-priority animations. Let's look at a small example:

The Code is as follows:
<Rect width = "20px"...>
<Animate attributeName = "width" from = "0px" to = "10px" dur = "10 s"
Additive = "sum"/>
</Rect>

This example demonstrates the animation effect of increasing the width of a rectangle.
Sometimes, if the repeated animation results are superimposed, it is also very useful. You can use the accumulate attribute to achieve this purpose.
Accumulate = "none (default) | sum"
This attribute controls whether the animation effect is cumulative. None is the default value, indicating that repeated animations do not accumulate. Sum indicates that repeated animation effects are cumulative. This attribute is meaningless for a single animation. Let's look at a small example:

The Code is as follows:
<Rect width = "20px"...>
<Animate attributeName = "width" from = "0px" to = "10px" dur = "10 s"
Additive = "sum" accumulate = "sum" repeatCount = "5"/>
</Rect>

This example demonstrates that the length of the rectangle is increased in each iteration.
Animation element Summary
SVG provides the following animation elements:
1. animate Element
This is the most basic animation element and can directly provide values of different time points for relevant attributes.
2. set Element
This is a short form of the animate element. It supports all attribute types, especially when it is convenient to animation non-numeric attributes (such as visibility. The set element is non-incremental and the related attributes are invalid. To specify the animation end value type must comply with the attribute value type.
3. animateMotion Element
Animated element. Most of the attributes of this element are the same as above, and only the following are slightly different:
CalcMode = "discrete | linear | paced | spline"
The default value of this attribute is different. In this element, the default value is paced.
Path = "<path-data>"
The path to which the animation element moves. The format is the same as that of the value of the d attribute of the path element.
KeyPoints = "<list-of-numbers>"
The value of this attribute is a series of floating point values given by semicolons. The value range of each value is 0 ~ 1. These values represent the moving distance of the corresponding time point specified by the keyTimes attribute. The actual distance is determined by the browser.
Rotate = <number> | auto-reverse"
This attribute specifies the rotation angle when an element moves. The default value is 0, and the number indicates the rotation angle. auto indicates that the object is rotated in the direction of the path strength. Auto-reverse indicates the opposite direction of movement.
In addition, the values of the from, by, to, and values of the animateMotion elements are composed of coordinate pairs. The values of x and y are separated by commas or spaces, separated by semicolons, for example, from = "33,15" indicates that the starting point x coordinate is 33, and the y coordinate is 15.
There are two ways to specify a motion path: one is to directly assign a value to the path attribute, and the other is to specify a path using the mpath element as a sub-element of the animateMotionde. If both methods are used, the mpath element has a higher priority. These two methods have higher priority than values, from, by, and.
Let's look at a small example:

The Code is as follows:
<? Xml version = "1.0" standalone = "no"?>
<! DOCTYPE svg PUBLIC "-// W3C // dtd svg 1.1 // EN"
Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd>
<Svg width = "5 cm" height = "3 cm" viewBox = "0 0 500 300"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1"
Xmlns: xlink = "http://www.w3.org/1999/xlink">
<Rect x = "1" y = "1" width = "498" height = "298"
Fill = "none" stroke = "blue" stroke-width = "2"/>
<Path id = "path1" d = "M100, 250 C 400,250, 50"
Fill = "none" stroke = "blue" stroke-width = "7.06"/>
<Circle cx = "100" cy = "250" r = "17.64" fill = "blue"/>
<Circle cx = "250" cy = "100" r = "17.64" fill = "blue"/>
<Circle cx = "400" cy = "250" r = "17.64" fill = "blue"/>
<Path d = "M-25,-12.5 L25,-12.5 L 0,-87.5 z"
Fill = "yellow" stroke = "red" stroke-width = "7.06">
<AnimateMotion dur = "6 s" repeatCount = "indefinite" rotate = "auto">
<Mpath xlink: href = "# path1"/>
</AnimateMotion>
</Path>
</Svg>

4. animateColor Element
Color animation elements. This is an out-of-date element. Basically, all functions can be replaced by animate, so do not use it.
5. animateTransform Element
Transform the animation element. Take a look at some special attributes:
Type = "translate | scale | rotate | skewX | skewY"
This attribute specifies the conversion type. The default value is translate.
The values of from, by, and to correspond to the corresponding transformation parameters, which is consistent with the preceding transformation. Values is a series of values separated by group numbers.
Elements and attributes supporting animation Effects
Basically all graph elements (path, rect, ellipse, text, image ...), container elements (svg, g, defs, use, switch, clipPath, mask ...) all support animation. Most attributes Support Animation effects. For more information, see the official documentation.
Use DOM for animation
SVG animations can also be completed using scripts. The details of DOM are described later. Here is a simple example:

The Code is as follows:
<? Xml version = "1.0" standalone = "no"?>
<! DOCTYPE svg PUBLIC "-// W3C // dtd svg 1.1 // EN"
Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd>
<Svg width = "4 cm" height = "2 cm" viewBox = "0 0 400 200"
Xmlns = "http://www.w3.org/2000/svg"
Onload = "StartAnimation (evt)" version = "1.1">
<Script type = "application/ecmascript"> <! [CDATA [
Var timevalue = 0;
Var timer_increment = 50;
Var max_time = 5000;
Var text_element;
Function StartAnimation (evt ){
Text_element = evt.tar get. ownerDocument. getElementById ("TextElement ");
ShowAndGrowElement ();
}
Function ShowAndGrowElement (){
Timevalue = timevalue + timer_increment;
If (timevalue> max_time)
Return;
// Scale the text string gradually until it is 20 times larger
Scalefactor = (timevalue * 20.)/max_time;
Text_element.setAttribute ("transform", "scale (" + scalefactor + ")");
// Make the string more opaque
Opacityfactor = timevalue/max_time;
Text_element.setAttribute ("opacity", opacityfactor );
// Call ShowAndGrowElement again <timer_increment> milliseconds later.
SetTimeout ("ShowAndGrowElement ()", timer_increment)
}
Window. ShowAndGrowElement = ShowAndGrowElement
]> </Script>
<Rect x = "1" y = "1" width = "398" height = "198"
Fill = "none" stroke = "blue" stroke-width = "2"/>
<G transform = "translate (50,150)" fill = "red" font-size = "7">
<Text id = "TextElement"> SVG </text>
</G>
</Svg>

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/

SVG animation technology: http://msdn.microsoft.com/zh-cn/library/gg589525 (v = vs.85). aspx