Einführung in SVG 2D in HTML5 11 – Einführung in die Benutzerinteraktivität (Animation) und Tutorial-Kenntnisse für application_html5

Interaktivität
SVG verfügt über eine gute Benutzerinteraktivität, wie zum Beispiel:
1. SVG kann auf die meisten DOM2-Ereignisse reagieren.
2. SVG kann die Bewegung der Maus des Benutzers durch den Cursor gut erfassen.
3. Benutzer können problemlos Zoom- und andere Effekte erzielen, indem sie den Wert des zoomAndPan-Attributs des SVG-Elements festlegen.
4. Benutzer können Animationen problemlos mit Ereignissen kombinieren, um einige komplexe Effekte zu erzielen.
Durch das Anhängen von Ereignissen an SVG-Elemente können wir die Skriptsprache verwenden, um einige interaktive Aufgaben einfach auszuführen. SVG unterstützt die meisten DOM2-Ereignisse, wie z. B. onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll und andere Ereignisse. Darüber hinaus bietet SVG auch einzigartige Animationsereignisse, wie zum Beispiel: onroom, onbegin, onend, onrepeat usw.
Jeder ist mit dem Vorfall vertraut, daher werde ich nicht auf Details eingehen.

Animationsmethode
SVG verwendet Text zum Definieren von Grafiken. Diese Dokumentstruktur eignet sich sehr gut zum Erstellen von Animationen. Um die Position, Größe und Farbe von Grafiken zu ändern, müssen Sie lediglich die entsprechenden Eigenschaften anpassen. Tatsächlich verfügt SVG über Eigenschaften, die speziell für die Verarbeitung verschiedener Ereignisse entwickelt wurden, und viele davon sind sogar speziell auf Animationen zugeschnitten. In SVG gibt es mehrere Möglichkeiten, Animationen zu implementieren:
1. Verwenden Sie SVG-Animationselemente. Dies wird im Folgenden hervorgehoben.
2. Verwenden Sie Skripte. Die Verwendung von DOM-Operationen zum Starten und Steuern von Animationen ist bereits eine ausgereifte Technologie. Nachfolgend finden Sie ein kleines Beispiel.
3. SMIL (Synchronisierte Multimedia-Integrationssprache). Bei Interesse besuchen Sie bitte: http://www.w3.org/TR/2008/REC-SMIL3-20081201/.
Das folgende Beispiel enthält einige der grundlegendsten Animationen in SVG:

Code kopieren

Der Code lautet wie folgt:

xmlns="http://www.w3 .org /2000/svg" version="1.1">
Grundlegende Animationselemente
fill="none" Stroke="blue" Stroke-width="2" />!-- Animation der Rechteckposition und -größe--< rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)"> x " attributeType="XML"
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" />
space , also beginnt der Text beim neuen (0,0) und nachfolgende Transformationen gelten für das neue Koordinatensystem--animate und animateTransform verwendet, um andere Arten von Animationen durchzuführen-->text id="TextElement" x="0" y=" 0"
font-family="Verdana" font-size="35.27" sichtbarkeit="hidden">
Es lebt!
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" />

Fügen Sie diesen Code in den Textkörper des HTML-Dokuments ein und führen Sie ihn aus, um den Effekt der Animation zu sehen.

Öffentliche Attribute animierter Elemente
Kategorie 1: Zielelemente und -attribute angeben
xlink:href
Dies sollte Ihnen bekannt sein und darauf hinweisen das Element, auf dem die Animation ausgeführt wird. Dieses Element muss im aktuellen SVG-Dokumentfragment definiert sein. Wenn dieses Attribut nicht angegeben ist, wird die Animation auf das übergeordnete Element angewendet.
attributeName = ""
Dieses Attribut gibt das Attribut an, auf das die Animation angewendet wird. Wenn das Attribut einen Namensraum hat (nicht vergessen, SVG ist im Wesentlichen ein XML-Dokument), muss dieser Namensraum ebenfalls hinzugefügt werden. Im folgenden Beispiel werden xlink beispielsweise verschiedene Aliase zugewiesen. Hier verwendet animate den Namensraum, wenn Attribute angegeben werden:

Code kopieren

Der Code lautet wie folgt:

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

attributeType = "CSS | XML | auto (Standardwert)"
Dieses Attribut gibt den Namensraum des Attributwerts an. Dies Die Bedeutung mehrerer Werte ist wie folgt:
CSS: Stellt dar, dass das durch attributeName angegebene Attribut ein CSS-Attribut ist.
XML: Das durch attributeName angegebene Attribut ist ein Attribut im XML-Standardnamespace (beachten Sie, dass SVG-Dokumente im Wesentlichen XML-Dokumente sind).
auto: bedeutet, dass zuerst nach dem durch attributeName im CSS-Attribut angegebenen Attribut gesucht wird. Wenn das Attribut nicht gefunden wird, wird im Standard-XML-Namespace gesucht.

Kategorie 2: Attribute, die die Animationszeit steuern Die folgenden Attribute sind allesamt Animationszeitattribute. Sie steuern die Zeitleiste der Animationsausführung, einschließlich der Art und Weise, wie die Animation gestartet und beendet wird und ob sie wiederholt wird die Animation, ob der Endzustand der Animation usw. gespeichert werden soll.
begin = "begin-value-list"
Dieses Attribut definiert die Startzeit der Animation. Kann eine Reihe von Zeitwerten sein, die durch Semikolons getrennt sind. Es kann auch ein anderer Wert sein, der den Start der Animation auslöst. Wie Ereignisse, Tastenkombinationen usw.
dur = Clock-value |. „media“ |. „indefinite“
definiert die Dauer der Animation. Kann auf einen im Uhrformat angezeigten Wert eingestellt werden. Es kann auch auf die folgenden zwei Werte eingestellt werden:
Medien: Gibt an, dass die Animationszeit die Dauer des internen Multimedia-Elements ist.
unbestimmt: Geben Sie die Animationszeit als unendlich an.
Das Uhrformat bezieht sich auf die folgenden gesetzlichen Wertformate:

Code kopierenDer Code lautet wie folgt:

:30:03= 2 Stunden, 30 Minuten und 3 Sekunden
:00:10.25 = 50 Stunden, 10 Sekunden und 250 Millisekunden
:33 = 2 Minuten und 33 Sekunden
:10,5 = 10,5 Sekunden = 10 Sekunden und 500 Millisekunden
.2h= 3,2 Stunden = 3 Stunden und 12 Minuten
min = 45 Minuten
s = 30 Sekunden
ms = 5 Millisekunden
. 467= 12 Sekunden und 467 Millisekunden
.5s = 500 Millisekunden
:00,005 = 5 Millisekunden


end = "end-value-list"
definiert den Endzeitpunkt der Animation. Kann eine Reihe von Werten sein, die durch Semikolons getrennt sind.
min = Clock-value |. "media"
max = Clock-value |.
Legt den maximalen und minimalen Wert der Animationsdauer fest.
restart = "always" |. "whenNotActive" | "never"
Legen Sie fest, ob die Animation jederzeit neu gestartet werden kann. bedeutet immer, dass die Animation jederzeit beginnen kann. whenNotActive bedeutet, dass es nur dann neu gestartet werden kann, wenn es nicht abgespielt wird, beispielsweise wenn die vorherige Wiedergabe beendet wurde. nie bedeutet, dass die Animation nicht neu gestartet werden kann.
repeatCount = numerischer Wert |. "unbestimmt"
Legen Sie fest, wie oft die Animation wiederholt wird. Unbestimmt steht für unendliche Wiederholung.
repeatDur = Clock-value |. "indefinite"
Legen Sie die Gesamtanimationszeit der Wiederholung fest. Unbestimmt steht für unendliche Wiederholung.
fill = "freeze" |. "remove(default value)"
Legt den Zustand des Elements fest, nachdem die Animation endet. Einfrieren bedeutet, dass das Element nach dem Ende der Animation im Endzustand der Animation verbleibt. Entfernen bedeutet, dass das Element nach dem Ende der Animation in den Zustand vor der Animation zurückkehrt. Dies ist der Standardwert.
Kategorie 3: Attribute, die Animationswerte definieren
Diese Attribute definieren die Werte der Attribute, die animiert werden. Tatsächlich definiert es einige Algorithmen für Schlüsselbilder und Interpolation.
calcMode = "diskret | linear (Standardwert) | stimuliert | Spline"
definiert die Animationsinterpolation: diskret: diskret, keine Interpolation; linear: schrittweise Interpolation; Der Standardwert ist linear (lineare Interpolation). Wenn das Attribut jedoch keine lineare Interpolation unterstützt, wird die diskrete Interpolation verwendet.
values ​​= ""
definiert eine durch Semikolons getrennte Liste von Werten für Animations-Keyframes. Unterstützungsvektorwert.
keyTimes = ""
Definiert eine durch Semikolons getrennte Liste von Animations-Keyframe-Zeiten. Dies entspricht Werten eins zu eins. Dieser Wert wird durch den Interpolationsalgorithmus beeinflusst. Wenn es sich um eine lineare und Spline-Interpolation handelt, muss der erste Wert von keyTimes 0 und der letzte Wert 1 sein. Für diskrete Nicht-Interpolationsmethoden muss der erste Wert von keyTimes 0 sein. Für die Schrittinterpolationsmethode ist es offensichtlich, dass keyTimes nicht benötigt wird. Und wenn die Dauer der Animation auf unendlich eingestellt ist, werden keyTimes ignoriert.
keySplines = ""
Dieses Attribut definiert die Kontrollpunkte während der Spline-Interpolation (Bessel-Interpolation). Offensichtlich funktioniert es nur, wenn der Interpolationsmodus als Spline ausgewählt ist. Die Werte in dieser Liste reichen von 0 bis 1.
from = ""
to = ""
by = ""
Definieren Sie den Startwert, den Endwert und den Schrittwert des Animationsattributs . Beachten Sie hier: Wenn bereits Werte angegeben wurden, werden alle Von-/Bis-/Von-Werte ignoriert.
Kategorie 4: Eigenschaften, die steuern, ob die Animation inkrementell ist
Manchmal ist es sehr nützlich, wenn der relevante Wert nicht auf einen absoluten Wert, sondern auf einen inkrementellen Wert gesetzt wird, indem additive Eigenschaften verwendet werden kann diesem Zweck dienen.
additive = "replace(default value) | sum"
Dieses Attribut steuert, ob die Animation inkrementell ist. Summe bedeutet, dass die Animation bei verwandten Attributwerten oder anderen Animationen mit niedriger Priorität größer ist. Ersetzen ist der Standardwert, was bedeutet, dass die Animation verwandte Attributwerte oder andere Animationen mit niedriger Priorität überschreibt. Schauen Sie sich ein kleines Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Dieses Beispiel zeigt den Animationseffekt einer zunehmenden rechteckigen Breite.
Manchmal ist es auch sehr nützlich, wenn die wiederholten Animationsergebnisse überlagert werden. Dies kann durch die Verwendung des Attributs „akkumulieren“ erreicht werden.
accumulate = "none (Standardwert) | sum"
Dieses Attribut steuert, ob der Animationseffekt kumulativ ist. „Keine“ ist der Standardwert, was bedeutet, dass wiederholte Animationen nicht akkumuliert werden. Summe bedeutet, dass wiederholte Animationseffekte kumulativ sind. Für Einzelausführungsanimationen hat diese Eigenschaft keine Bedeutung. Schauen wir uns ein kleines Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Dieses Beispiel zeigt, dass die Länge des Rechtecks ​​mit jeder Iteration zunimmt.
Zusammenfassung der Animationselemente
SVG bietet die folgenden Animationselemente:
1. Animationselement
Dies ist das grundlegendste Animationselement und kann direkt sein Wird für verwandte Animationselemente verwendet und liefert Werte zu verschiedenen Zeitpunkten.
2. set element
Dies ist die Abkürzung für animate element und unterstützt alle Attributtypen, was besonders praktisch ist, wenn nicht-numerische Attribute (z. B. Sichtbarkeit) animiert werden. Das Set-Element ist nicht inkrementell und die zugehörigen Attribute haben keine Auswirkung darauf. Der durch to angegebene Animationsendwerttyp muss mit dem Werttyp des Attributs übereinstimmen.
3. animateMotion-Element
Lu Jin-Animationselement. Die meisten Attribute dieses Elements sind die gleichen wie oben, mit nur den folgenden wenigen Unterschieden:
calcMode = "discrete | linear | Paced | spline"
Der Standardwert dieses Attributs ist anders Element ist getaktet.
path = ""
Der Pfad, entlang dem sich das Animationselement bewegt. Das Format stimmt mit dem Format des Werts des d-Attributs des Pfadelements überein.
keyPoints = ""
Der Wert dieses Attributs ist eine Reihe von durch Semikolons getrennten Gleitkommawerten, und der Wertebereich jedes Werts liegt zwischen 0 und 1. Diese Werte stellen die zurückgelegte Distanz zum entsprechenden Zeitpunkt dar, der durch das Attribut keyTimes angegeben wird. Die spezifische Distanz wird hier vom Browser selbst bestimmt.
rotate = |. auto-reverse"
Dieses Attribut gibt den Drehwinkel an, wenn sich das Element bewegt. Der Standardwert ist 0, die Zahl stellt den Drehwinkel dar und auto bedeutet Drehung nach innen Die Richtung der Straße. Auto-Reverse bedeutet Drehen in die entgegengesetzte Richtung zur Bewegungsrichtung. Darüber hinaus setzen sich die Werte von „von“, „nach“ und „Werte“ des animateMotion-Elements zusammen Koordinatenpaare; der x-Wert und der y-Wert werden durch Kommas oder Leerzeichen getrennt. Beispielsweise bedeutet from="33,15", dass die x-Koordinate des Startpunkts 33 ist und die y-Koordinate 15.
Es gibt zwei Möglichkeiten, den Bewegungspfad anzugeben: Eine besteht darin, das Pfadattribut direkt zuzuweisen, eine andere darin, das mpath-Element als untergeordnetes Element von animateMotionde zu verwenden Element ist höher als die Werte from, by, to. 🎜>Sehen Sie sich ein kleines Beispiel an:

Kopieren Sie den Code Der Code lautet wie folgt:

< ?xml version="1.0" standalone="no"?> 1.1//EN"

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


M-25,-12,5 L25,-12,5 L 0,-87,5 z"
fill="gelb" Stroke="red" Stroke-width="7.06">
/svg>



4. animateColor-Element

Farbanimationselement. Dies ist ein veraltetes Element. Grundsätzlich können alle Funktionen durch animate ersetzt werden. Verwenden Sie es daher nicht mehr.

5. animateTransform-Element

Animationselement transformieren. Schauen Sie sich einige spezielle Attribute an: type = "translate | scale | rotation | skewX | skewY" Dieses Attribut gibt den Typ der Transformation an, translator ist der Standardwert.
Die Werte von from, by und to sind entsprechende Parameter der Transformation. Dies steht im Einklang mit der oben erwähnten Transformation. Werte sind eine Reihe von Werten, die durch Semikolons getrennt sind.
Elemente und Attribute, die Animationseffekte unterstützenGrundsätzlich alle Grafikelemente (Pfad, Rechteck, Ellipse, Text, Bild...), Containerelemente (SVG, G, Defs, Use, Switch, ClipPath, Maske. . .) unterstützen alle Animationen. Grundsätzlich unterstützen die meisten Eigenschaften Animationseffekte. Detaillierte Anweisungen finden Sie in der offiziellen Dokumentation.
Verwenden Sie DOM, um Animationen zu implementieren

SVG-Animationen können auch mithilfe von Skripten vervollständigt werden. Die Details von DOM werden später vorgestellt:



Code kopieren


Der Code lautet wie folgt:

"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