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

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

: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