Introduction to SVG 2D in HTML5 11—User interactivity (animation) introduction and application_html5 tutorial skills

Interactivity
SVG has good user interactivity, such as:
1. SVG can respond to most DOM2 events.
2. SVG can well capture the movement of the user's mouse through cursor.
3. Users can easily achieve zoom and other effects by setting the value of the zoomAndPan attribute of the svg element.
4. Users can easily combine animations with events to complete some complex effects.
By attaching events to SVG elements, we can use scripting language to easily complete some interactive tasks. SVG supports most DOM2 events, such as onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll and other events. In addition to these, SVG also provides unique animation-related events, such as: onroom, onbegin, onend, onrepeat, etc.
Everyone is familiar with the incident, so I won’t go into details.

Animation method
SVG uses text to define graphics. This document structure is very suitable for creating animations. To change the position, size and color of graphics, you only need to adjust the corresponding properties. In fact, SVG has properties specially designed for various event processing, and many of them are even specially tailored for animation. In SVG, there are several ways to implement animation:
1. Use SVG animation elements. This will be highlighted below.
2. Use scripts. Using DOM operations to start and control animations is already a mature technology. There is a small example below.
3. SMIL (Synchronized Multimedia Integration Language). If you are interested, please refer to: http://www.w3.org/TR/2008/REC-SMIL3-20081201/.
The following example contains several of the most basic animations in SVG:

Copy code

The code is as follows:

xmlns="http://www.w3.org /2000/svg" version="1.1">
Basic animation elements
fill="none" stroke="blue" stroke-width="2" />

fill="rgb(255,255,0)">
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
begin="0s" dur="9s" fill="freeze" from="100" to="300" />



animate and animateTransform are used to perform other types of animation-->
font-family="Verdana" font-size="35.27" visibility="hidden">
It's alive!
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze" />
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />

Put this code into the body of the html document and run it to see the effect of the animation.

Public attributes of animated elements
Category 1: Specifying target elements and attributes
xlink:href
This should be familiar , pointing to the element on which the animation is performed. This element must be defined in the current SVG document fragment. If this attribute is not specified, the animation will be applied to its parent element.
attributeName = ""
This attribute specifies the attribute to which animation is applied. If the attribute has a namespace (don't forget, SVG is essentially an XML document), this namespace must also be added. For example, in the following example, different aliases are given to xlink. Here, animate uses namespace when specifying attributes:

Copy code

The code is as follows:

xmlns:xlink="http ://www.w3.org/1999/xlink">

attributeType = "CSS | XML | auto (default value)"
This attribute specifies the namespace of the attribute value. This The meanings of several values ​​are as follows:
CSS: Represents that the attribute specified by attributeName is a CSS attribute.
XML: The attribute specified by attributeName is an attribute under the XML default namespace (note that svg documents are essentially xml documents).
auto: means first searching for the attribute specified by attributeName in the CSS attribute. If not found, the attribute will be searched for in the default XML namespace.
Category 2: Attributes that control animation time
The following attributes are all animation time attributes; they control the timeline of animation execution, including how to start and end the animation, and whether to repeat the animation. Whether to save the end state of the animation, etc.
begin = "begin-value-list"
This attribute defines the start time of the animation. Can be a series of time values ​​separated by semicolons. It can also be some other value that triggers the animation to start. Such as events, shortcut keys, etc.
dur = Clock-value | "media" | "indefinite"
defines the duration of the animation. Can be set to a value displayed in clock format. It can also be set to the following two values:
media: Specifies that the animation time is the duration of the internal multimedia element.
indefinite: Specify the animation time to be infinite.
The clock format refers to the following legal value formats:

Copy code

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
.2h= 3.2 hours = 3 hours and 12 minutes
min = 45 minutes
s = 30 seconds
ms = 5 milliseconds
. 467= 12 seconds and 467 milliseconds
.5s = 500 milliseconds
:00.005 = 5 milliseconds

end = "end-value-list"
defines the end time of the animation. Can be a series of values ​​separated by semicolons.
min = Clock-value | "media"
max = Clock-value | "media"
Sets the maximum and minimum value of the animation duration.
restart = "always" | "whenNotActive" | "never"
Set whether the animation can be restarted at any time. always means the animation can start at any time. whenNotActive means it can only be restarted when it is not playing, for example, the previous playback has ended. never means the animation cannot be restarted.
repeatCount = numeric value | "indefinite"
Set the number of times the animation repeats. Indefinite represents infinite repetition.
repeatDur = Clock-value | "indefinite"
Set the total animation time of repetition. Indefinite represents infinite repetition.
fill = "freeze" | "remove(default value)"
Sets the state of the element after the animation ends. Freeze means that the element stays in the final state of the animation after the animation ends. remove means that after the animation ends, the element returns to the state before the animation. This is the default value.
Category 3: Attributes that define animation values ​​
These attributes define the values ​​of the attributes being animated. In fact, it defines some algorithms for key frames and interpolation.
calcMode = "discrete | linear (default value) | paced | spline"
defines the animation interpolation method: discrete: discrete, no interpolation; linear: linear interpolation; paced: step interpolation; spline: sample Strip interpolation. The default is linear (linear interpolation), but if the attribute does not support linear interpolation, discrete interpolation will be used.
values ​​= ""
defines a semicolon-separated list of values ​​for animation keyframes. Support vector value.
keyTimes = ""
Defines a semicolon-separated list of animation keyframe times. This corresponds to values ​​one-to-one. This value is affected by the interpolation algorithm. If it is linear and spline interpolation, the first value of keyTimes must be 0 and the last value must be 1. For discrete non-interpolation methods, the first value of keyTimes must be 0. For the step interpolation method, it is obvious that keyTimes is not needed. And if the animation's duration is set to infinite, keyTimes are ignored.
keySplines = ""
This attribute defines the control points during spline interpolation (Bessel interpolation). Obviously, it only works when the interpolation mode is selected as spline. The values ​​in this list range from 0 to 1.
from = ""
to = ""
by = ""
Define the start value, end value and step value of the animation attribute . Note here: if values ​​have already been specified, any from/to/by values ​​will be ignored.
Category 4: Properties that control whether the animation is incremental
Sometimes, it is very useful if the relevant value is not set to an absolute value, but to an incremental value, using additive Properties can serve this purpose.
additive = "replace(default value) | sum"
This attribute controls whether the animation is incremental. sum means that the animation will be larger on related attribute values ​​or other low-priority animations. replace is the default value, which means that the animation will overwrite related attribute values ​​or other low-priority animations. Look at a small example:

Copy the code

The code is as follows:

additive="sum"/>
< ;/rect>

This example demonstrates the animation effect of increasing rectangular width.
Sometimes, it is also very useful if the repeated animation results are superimposed. This can be achieved by using the accumulate attribute.
accumulate = "none (default value) | sum"
This attribute controls whether the animation effect is cumulative. None is the default value, which means repeated animations are not accumulated. sum means that repeated animation effects are cumulative. For single execution animations, this property has no meaning. Let’s look at a small example:

Copy the code

The code is as follows:

additive="sum" accumulate="sum" repeatCount= "5"/>

This example demonstrates that the length of the rectangle increases with each iteration.
Summary of animation elements
SVG provides the following animation elements:
1. animate element
This is the most basic animation element and can be directly used for related animation elements. Properties provide values ​​at different points in time.
2. set element
This is the abbreviation of animate element and supports all attribute types, which is especially convenient when animating non-numeric attributes (such as visibility). The set element is non-incremental and the related attributes have no effect on it. The animation end value type specified by to must conform to the value type of the attribute.
3. animateMotion element
Lu Jin animation element. Most of the attributes of this element are the same as above, with only the following few differences:
calcMode = "discrete | linear | paced | spline"
The default value of this attribute is different. The default in this element is paced. .
path = ""
The path along which the animation element moves, the format is consistent with the format of the value of the d attribute of the path element.
keyPoints = ""
The value of this attribute is a series of floating point values ​​separated by semicolons, and the value range of each value is 0~1. These values ​​represent the distance moved at the corresponding time point specified by the keyTimes attribute. The specific distance here is determined by the browser itself.
rotate = | auto | auto-reverse"
This attribute specifies the angle of rotation when the element moves. The default value is 0, the number represents the angle of rotation, and auto means rotating in the direction of the road. Object. Auto-reverse means turning in the opposite direction to the moving direction.
In addition, the values ​​of from, by, to, and values ​​of the animateMotion element are composed of coordinate pairs; the x value and the y value are separated by commas or spaces. Each coordinate pair is separated by a semicolon. For example, from="33,15" means that the starting point x coordinate is 33 and the y coordinate is 15.
There are two ways to specify the motion path: one is to directly give the path attribute. Assignment, one is to use mpath element as the child element of animateMotionde. If both methods are used, the priority of using mpath element is higher than values, from, by, to. 🎜>Look at a small example:

Copy the code The code is as follows:

< ?xml version="1.0" standalone="no"?>
"http://www.w3. org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http:// www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
fill="none" stroke="blue" stroke-width="2" />
fill="none" stroke="blue" stroke-width="7.06"/>


< circle cx="400" cy="250" r="17.64" fill="blue"/>
fill="yellow" stroke="red" stroke-width="7.06">

< mpath xlink:href="#path1"/>

4. animateColor element color animation element. This is an outdated element. Basically all functions can be replaced by animate, so don’t use it anymore.

5. animateTransform element Transform animation element. Take a look at some special attributes:
type = "translate | scale | rotate | skewX | skewY"
This attribute specifies the type of transformation, translate is the default value.
The values ​​of from, by and to are corresponding parameters of the transformation. This is consistent with the transformation mentioned above. values ​​is a series of values ​​separated by semicolons.
Elements and attributes that support animation effects
Basically all graphic elements (path, rect, ellipse, text, image...), container elements (svg, g, defs, use, switch, clipPath, mask. ..) all support animation. Basically most properties support animation effects. Please refer to the official documentation for detailed instructions.

Use DOM to implement animation SVG animation can also be completed using scripts. The details of DOM will be introduced later. Here is a simple example:

Copy codeThe code is as follows:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg"
onload="StartAnimation(evt)" version="1.1">

fill="none" stroke="blue" stroke-width="2"/>

SVG

实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/

SVG动画技术：http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx