


Introduction to SVG 2D in HTML5 11—User interactivity (animation) introduction and application_html5 tutorial skills
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:
xmlns="http://www.w3.org /2000/svg" version="1.1">
animate and animateTransform are used to perform other types of animation-->
It's alive!
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
g>
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:
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:
: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:
< ;/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 =
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:
br />"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" >
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:
br />"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg"
onload="StartAnimation(evt)" version="1.1">
实用参考:
脚本索引: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

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version
Chinese version, very easy to use

WebStorm Mac version
Useful JavaScript development tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.