Introduction to SVG 2D in HTML5 11—User interactivity (animation) introduction and application_html5 tutorial skills
WBOY
Release： 2016-05-16 15:50:08
Original
1487 people have browsed it
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" />
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"> Demonstration of the resolution of namespaces for animation
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:
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:
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 animationSVG animation can also be completed using scripts. The details of DOM will be introduced later. Here is a simple example:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
