Introduction to SVG 2D of HTML5: 11-User Interaction (Animation) Introduction and Application

SVG has good user interactivity, such as:

1. SVG can respond to most DOM2 events.

2. SVG can capture the user's mouse movement well through cursor.

3. Users can easily achieve scaling and other effects by setting the value of the zoomAndPan property of the svg element.

4. Users can easily combine animations and events to complete some complex effects.

By attaching events to SVG elements, we can easily complete some interactive tasks using scripting language. 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 talk about it.

SVG uses text to define graphics, and this document structure is very suitable for creating animations. To change the position, size and color of the figure, 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 tailor-made for animations. In SVG, there are several ways to implement animation:

1. Use SVG's animation elements. This will be highlighted below.

2. Use the script. Using DOM operations to start and control animations is already a mature technology, and 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/.

<svgviewBox="0 0 800 300"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>Basic Animation Elements</desc>

<rect x="1" y="1"

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

<!-- Animation of rectangle position and size-->

<rect id="RectElement" x="300" y="100"

fill="rgb(255,255,0)">

<animate attributeName="x" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="0" />

<animate attributeName="y" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="100" to="0" />

<animate attributeName="width" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="800" />

<animate attributeName="height" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="100" to="300" />

</rect>

<!-- Create a new user coordinate space, so text starts with a new (0,0), and subsequent transformations are for the new coordinate system -->

<g transform="translate(100,100)" >

<!-- The following uses set to animate visibility, and then uses animateMotion,

animate and animateTransform perform 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="visible"

begin="3s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 100 100"

begin="3s" dur="6s" fill="freeze" />

<animate attributeName="fill" attributeType="CSS"

from="rgb(0,0,255)" to="rgb(128,0,0)"

begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"

type="rotate" from="-30" to="0"

begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"

type="scale" from="1" to="3" additional="sum"

begin="3s" dur="6s" fill="freeze" />

</text>

</g>

</svg>

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

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 will be applied to its parent element.

attributeName = <attributeName>

This property specifies the properties to apply the animation. If this property has a namespace (don't forget, SVG is essentially an XML document), this namespace should also be added. For example, in the following example, xlink is given different alias. Here, when animate specifies the attribute, namespace is included:

<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="2s" 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"/>

</g>

</svg>

attributeType = CSS | XML | auto (default value)

This property specifies the namespace where the property values ​​are taken. The meanings of these values ​​are as follows:

CSS: The attribute specified on behalf of attributeName is the CSS attribute.

XML: The attribute specified by attributeName is the attribute under the default namespace of XML (note that the svg document is essentially an XML document).

auto: It means to first look for the attribute specified by attributeName in the CSS attribute. If it is not found, it will look for the attribute under the default XML namespace.

The following properties are animation time attributes; they control the timeline of animation execution, including how to start and end the animation, whether the animation is executed repeatedly, whether the animation ends, etc.

begin = begin-value-list

This property defines the start time of the animation. It can be a series of time values ​​separated by semicolons. It can also be some other value that triggers the start of the animation. For example, 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 time of the animation 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:

:30:03= 2 hours, 30 minutes and 3 seconds

:00:10.25 = 50 hours, 10 seconds and 250 million seconds

:33 = 2 minutes and 33 seconds

:10.5 = 10.5 seconds = 10 seconds and 500 million seconds

.2h= 3.2 hours = 3 hours and 12 minutes

min = 45 minutes

s = 30 seconds

ms = 5 million seconds

.467= 12 seconds and 467 millionseconds

.5s = 500 million seconds

:00.005 = 5 million seconds

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 up the animation to start over at any time. Always means that animation can start at any time. WhenNotActive means that you can only start over when there is no playback, such as the previous playback ends. never means that the animation cannot be started again.

repeatCount = numeric value | indefinite

Set the number of times the animation is repeated. indefinite stands for infinite repetition.

repeatDur = Clock-value | indefinite

Sets the total animation time of repeated. indefinite stands for infinite repetition.

fill = freeze | remove(default)

Sets the state of the element after the animation is finished. freeze means that the element stays in the last state of the animation after the animation is over. remove means that the element returns to the state before the animation after the end of the animation, which is the default value.

Category 3: Define the attributes of animation values

These properties define the value of the properties that are executed. In fact, some algorithms that define keyframes and interpolation.

calcMode = discrete | linear (default) | paced | spline

Define the method of animation interpolation: discrete: discrete, no interpolation; linear: linear interpolation; paced: step size interpolation; spline: spline interpolation. The default is linear (linear interpolation), but if the attribute does not support linear interpolation, discrete interpolation will be used.

values ​​= <list>

Defines a list of values ​​for animation keyframes separated by semicolons. Support vector value.

keyTimes = <list>

Defines a time list of animation keyframes separated by semicolons. This corresponds to values ​​one by 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, the first value of keyTimes must be 0. For step size interpolation, it is obvious that keyTimes are not needed. And if the duration of the animation is set to indefinite, keyTimes are ignored.

keySplines = <list>

This property defines the control point when spline interpolation (Betzel interpolation), and obviously only works if the interpolation mode is selected as spline. The values ​​in this list range from 0 to 1.

from = <value>

to = <value>

by = <value>

Defines the start, end, and step values ​​of the animation attribute. Note here: If values ​​have already formulated the relevant values, any from/to/by value will be ignored.

Sometimes, it is very useful to set the relevant value instead of the absolute value, but the incremental value, using the additive property can achieve this goal.

additive = replace (default value) | sum

This property controls whether the animation is incremental. sum means that the animation will have a larger related attribute value or other low priority animations. replace is the default value, indicating that the animation will overwrite the relevant attribute value or other low priority animations. See a small example:

<rect ...>

<animate attributeName="width" from="0px" to="10px" dur="10s"

additive="sum"/>

</rect>

This example demonstrates the animation effect of incrementing rectangle width.

Sometimes, it is also very useful if the repeated animation results are superimposed, and using the accumulate property can achieve this goal.

accumulate = none(default) | sum

This property controls whether the animation effect is cumulative. none is the default value, indicating that duplicate animations do not accumulate. sum means that the repeated animation effects are accumulated. For a single-execute animation, this property has no meaning. See a small example:

<rect ...>

<animate attributeName="width" from="0px" to="10px" dur="10s"

additional="sum" accumulation="sum" repeatCount="5"/>

</rect>

This example demonstrates that the length of the rectangle increases in each iteration.

SVG provides the following animation elements:

This is the most basic animation element, which can directly provide the values ​​of different time points for related attributes.

This is the abbreviation of the animate element and supports all attribute types, especially when animate attributes (such as visibility). The set element is non-incremental, and the relevant attributes are invalid. The specified animation end value type must conform to the value type of the attribute.

Lu Jin animation elements. Most of the properties of this element are the same as above, with only the following slightly different differences:

calcMode = discrete | linear | paced | spline

The default value of this property is different, and the default value in this element is paced.

path = <path-data>

The path of the animation element moving is the same as the format of the value of the path element's d attribute.

keyPoints = <list-of-numbers>

The value of this property is a series of floating point values ​​given by semicolons, and the value range of each value is 0~1. These values ​​represent the distance at which the corresponding time point is moved specified by the keyTimes attribute. The specific distance here is determined by the browser itself.

rotate = <number> | auto | auto-reverse

This property specifies the angle at which the element rotates when it moves. The default value is 0, the number represents the rotation angle, and auto represents the animal body rotating in the direction of the road force. auto-reverse indicates the direction in which the steering is opposite to the direction of movement.

In addition, the values ​​of the animateMotion element from, by, to, values ​​are composed of coordinate pairs; the x value and the y value are separated by commas or spaces, and each coordinate pair is separated by a semicolon, such as from=33, 15, which means 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 to use the mpath element as a child element of animateMotionde. If you use both methods, the mpath element has a high priority. Both methods have higher priority than values, from, by, to.

See a small example:

<?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">

<svgviewBox="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"

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

<path id="path1" d="M100,250 C 100,50 400,50 400,250"

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="6s" repeatCount="indefinite" rotate="auto" >

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

</animateMotion>

</path>

</svg>

Color animation elements. This is an outdated element, and basically all functions can be replaced by animate, so don't use it.

Transform animation elements. Take a look at some special properties:

type = translate | scale | rotate | skewX | skewY

This property specifies the type of the transformation, and translate is the default value.

The values ​​from, by and to correspond to the parameters of the transformation, which is consistent with the transformation mentioned above. values ​​are a set of semicolon-separated values.

Elements and properties that support animation effects

Basically all graphic elements (path, rect, ellipse, text, image...) and container elements (svg, g, defs, use, switch, clipPath, mask...) support animation. Basically most properties support animation effects. For detailed instructions, please refer to the official documentation.

SVG animation can also be completed using scripts. The detailed content of DOM will be introduced later. Here is a brief example:

<?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 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.target.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> millionseconds later.

setTimeout("ShowAndGrowElement()", timer_increment)

}

window.ShowAndGrowElement = ShowAndGrowElement

]]></script>

<rect x="1" y="1"

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

<g transform="translate(50,150)" fill="red" font-size="7">

<text id="TextElement">SVG</text>

</g>

</svg>

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/

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