Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the introduction and application of interactive animation for SVG users in HTML5. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Interactivity

SVG has good user interaction, 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 effects such as zooming by setting the value of the zoomAndPan attribute of the svg element.

4. Users can easily combine animation and events to achieve some complex effects.

By attaching events to the SVG element, we can easily accomplish some interactive tasks using the scripting language. SVG supports most DOM2 events, such as onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll, etc. In addition to these, SVG also provides unique animation-related events, such as onroom,onbegin,onend,onrepeat and so on.

We are familiar with the incident, so we won't say much about it.

The way of animation

SVG uses text to define graphics, and this document structure is ideal for creating animations. To change the position, size, and color of the graphic, you only need to adjust the corresponding properties. In fact, SVG has properties specifically designed for a variety of event handling, and even many are tailor-made for animation. In SVG, you can implement animation in the following ways:

1. Use the animation elements of SVG. This will be highlighted below.

two。 Use scripts. The use of DOM operation to start and control animation, this is a mature technology, there is a small example.

3. SMIL (Synchronized Multimedia Integration Language) For those who are interested, please refer to: http://www.w3.org/TR/2008/REC-SMIL3-20081201/.

The following example contains some of the most basic animations in SVG:

The code is as follows:

Basic animation elements

It's alive!

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

Common attributes of animation elements

The first category: specify target elements and attributes

Xlink:href

This should be familiar, pointing to the element that executes 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 own parent element.

AttributeName = ""

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

The code is as follows:

Demonstration of the resolution of namespaces for animation

AttributeType = "CSS | XML | auto (default)"

This property specifies the namespace for the values of the attribute, which have the following meanings:

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

XML: the attributes specified by attributeName are those under the default namespace of XML (note that svg documents are essentially xml documents).

Auto: it means to look for the attribute specified by attributeName in the CSS attribute first, and if it is not found, look for it under the default XML namespace.

Category 2: attributes that control the time of animation

The following properties are animation time attributes; they control the timeline of the execution of the animation, including how to start and end the animation, whether to repeat the animation, whether to save the end state of the animation, and so on.

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 start of the animation. Such as events, keyboard shortcuts and so on.

Dur = Clock-value | "media" | "indefinite"

Defines the duration of the animation. Can be set to a value displayed in clock format. You can also set to the following two values:

Media: specifies that the time of the animation is the duration of the internal multimedia element.

Indefinite: specify an infinite animation time.

The clock format refers to the following legal value formats:

The code is as follows:

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

: 00milliseconds 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 = 500milliseconds

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

The maximum and minimum value of the animation duration is set.

Restart = "always" | "whenNotActive" | "never"

Whether the animation can be restarted at any time. Always means that animation can be started at any time. WhenNotActive representatives can only start over when they are not playing, such as when the previous playback is over. Never indicates that the animation cannot be restarted.

RepeatCount = numeric value | "indefinite"

Sets the number of times the animation is repeated. Indefinite stands for infinite repetition.

RepeatDur = Clock-value | "indefinite"

Sets the total animation time for repetition. Indefinite stands for infinite repetition.

Fill = "freeze" | "remove (default)"

Sets the state of the element after the animation ends. Freeze indicates that the element stays in the final state of the animation after the animation ends. Remove means that the element returns to its pre-animation state after the end of the animation, which is the default value.

The third category: defining the properties of animation values

These properties define the value of the property to be animated. It is actually some algorithms that define keyframes and interpolation.

CalcMode = "discrete | linear (default) | paced | spline"

Define the way 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 is used.

Values = ""

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

KeyTimes = ""

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, and if it is linear (linear) and spline interpolation (spline), the first value of keyTimes must be 0 and the last value must be 1. For discrete (discrete) non-interpolation methods, the first value of keyTimes must be 0. For step-size interpolation, it is clear that keyTimes is not required. And if the duration of the animation is set to indefinite, keyTimes is ignored.

KeySplines = ""

This attribute defines the control points for spline interpolation (Bezier interpolation), which obviously works only if 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 size value of the animation attribute. It is important to note here that if values has already set the relevant value, any from/to/ by value will be ignored.

The fourth category: control whether animation is an incremental attribute

Sometimes it is useful to use the additive property if the relevant value is set to an incremental value instead of an absolute value.

Additive = "replace (default) | sum"

This property controls whether the animation is incremental. Sum indicates that the animation will have larger related attribute values or other low-priority animations. Replace is the default value, indicating that the animation overrides the relevant attribute values or other low-priority animations. Look at a small example:

The code is as follows:

This example demonstrates the animation effect of rectangular width increment.

Sometimes, if the repeated animation results are superimposed, it is also useful to use the accumulate attribute to achieve this.

Accumulate = "none (default) | sum"

This property controls whether the animation effect is cumulative. None is the default value, which means that repeated animation does not accumulate. Sum indicates that repeated animation effects are cumulative. This property has no meaning for a single execution of the animation. Look at a small example:

The code is as follows:

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

Summary of animation elements

SVG provides the following animation elements:

1. Animate element

This is the most basic animation element and can directly provide values at different points in time for related attributes.

2. Set element

This is the shorthand form of the animate element and supports all attribute types, especially when animating non-numeric attributes such as visibility. The set element is non-incremental and the associated attribute is not valid for it. The end of animation value type specified by to must match the value type of the attribute.

3. AnimateMotion element

Lu Jin animation elements. Most of the attributes of this element are the same as above, except for the following slightly different attributes:

CalcMode = "discrete | linear | paced | spline"

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

Path = ""

The path to which the animation element moves, in the same format as the value of the d attribute of the path element.

KeyPoints = ""

The value of this property is a series of semicolon-opened floating-point values, each with a range of 0-1. These values represent the distance of movement at the corresponding point in time specified by the keyTimes attribute, which is determined by the browser itself.

Rotate = | auto | auto-reverse "

This attribute specifies the angle at which the element rotates as it moves. The default value is 0, the number represents the angle of rotation, and auto represents the rotation of the object in the direction of the road force. Auto-reverse means to turn in a direction opposite to the direction of movement.

In addition, the from,by,to,values values of animateMotion elements are made up of coordinate pairs; the values of x and y are separated by commas or spaces, and each pair of coordinates is separated by a semicolon such as from= "33Magne15" to indicate that the starting point x is 33 and the coordinate of y is 15.

There are two ways to specify a motion path: one is to assign a value directly to the path attribute, and the other is to specify a path for a child element that uses the mpath element as an animateMotionde. If you use both methods, the use of the mpath element has a high priority. Both methods have higher priority than values,from,by,to.

Look at a small example:

The code is as follows:

4. AnimateColor element

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

5. AnimateTransform element

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

Type = "translate | scale | rotate | skewX | skewY"

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

The values of from,by and to correspond to the parameters of the corresponding transformation, which is consistent with the transformation mentioned earlier. Values is a series of values separated by semicolons.

Elements and attributes that support animation effects

Basically all graphical elements (path,rect,ellipse,text,image...), container elements (svg, g, defs, use, switch, clipPath, mask...) All support animation. Basically, most properties support animation. Please refer to the official documentation for detailed instructions.

Using DOM to realize Animation

SVG animation can also be done by script. The details of DOM will be described later. Here's a simple example:

The code is as follows:

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 milliseconds later.

SetTimeout ("ShowAndGrowElement ()", timer_increment)

}

Window.ShowAndGrowElement = ShowAndGrowElement

]] >

SVG

After reading the above, do you have any further understanding of the introduction and application of interactive animation for SVG users in HTML5? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.