Einführung in SVG 2D von HTML5: 11-User Interaction (Animation) Einführung und Anwendung

SVG hat eine gute Benutzerinteraktivität, z. B.:

1. SVG kann auf die meisten DOM2 -Ereignisse reagieren.

2. SVG kann die Mausbewegung des Benutzers durch Cursor gut erfassen.

3. Benutzer können leicht Skalierung und andere Effekte erzielen, indem sie den Wert der Zoomandpan -Eigenschaft des SVG -Elements festlegen.

4. Benutzer können einfach Animationen und Ereignisse kombinieren, um einige komplexe Effekte zu vervollständigen.

Durch das Anbringen von Ereignissen an SVG -Elemente können wir einige interaktive Aufgaben mithilfe der Skriptsprache problemlos erledigen. SVG unterstützt die meisten DOM2 -Ereignisse wie Onfocusin, Onfocusou, Onclick, Onmousedown, OnmouseUp, Onmousemove, Onmouseout, Onload, OnResize, Onscroll und andere Ereignisse. Zusätzlich zu diesen bietet SVG auch einzigartige Animations-Events wie: Onroom, On-Tegin, Onrepeat usw.

Jeder ist mit dem Vorfall vertraut, also werde ich nicht darüber sprechen.

SVG verwendet Text, um Grafiken zu definieren, und diese Dokumentstruktur eignet sich sehr zum Erstellen von Animationen. Um die Position, Größe und Farbe der Abbildung zu ändern, müssen Sie nur die entsprechenden Eigenschaften einstellen. Tatsächlich hat SVG Eigenschaften, die speziell für verschiedene Ereignisverarbeitung entwickelt wurden, und viele von ihnen sind sogar maßgeschneidert für Animationen. In SVG gibt es verschiedene Möglichkeiten, Animation zu implementieren:

1. Verwenden Sie die Animationselemente von SVG. Dies wird unten hervorgehoben.

2. Verwenden Sie das Skript. Die Verwendung von DOM -Operationen zum Starten und zur Steuerung von Animationen ist bereits eine ausgereifte Technologie, und nachstehend ist ein kleines Beispiel.

3. Smil (synchronisierte Multimedia -Integrationssprache). Wenn Sie interessiert sind, finden Sie unter: http://www.w3.org/tr/2008/rec-smil3-20081201/.

<SvgViewBox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1">

<desc> Grundlegende Animationselemente </Desc>

<rect x = "1" y = "1"

fill = "keine" stroke = "blau" stroke-width = "2" />

<!-Animation der Rechteckposition und Größe->

<rect id = "rectelement" x = "300" y = "100"

fill = "RGB (255.255,0)">

<Animate Attributename = "x" AttributType = "xml"

begin = "0s" dur = "9s" fill = "frieren" von = "300" bis = "0" />

<Animate Attributename = "y" AttributType = "xml"

begin = "0s" dur = "9s" fill = "frieren" von = "100" bis = "0" />

<Animate Attributename = "width" AttributType = "xml"

begin = "0s" dur = "9s" fill = "frieren" von = "300" bis = "800" />

<Animate AttributeName = "Höhe" AttributType = "xml"

begin = "0s" dur = "9s" fill = "frieren" von = "100" bis = "300" />

</rect>

<!-Erstellen Sie einen neuen Benutzerkoordinatenraum, sodass der Text mit einem neuen (0,0) beginnt, und nachfolgende Transformationen sind für das neue Koordinatensystem->

<g Transform = "Translate (100.100)">

<!- ​​Im Folgenden wird die Sichtbarkeit animiert und dann Animatemotion verwendet.

Animate und Animatetransform ausführen andere Arten von Animationen ->

<text id = "textElement" x = "0" y = "0"

font-family = "Verdana" font-size = "35.27" Visibility = "Hidden">

Es lebt!

<setze AttributeName = "Sichtbarkeit" AttributType = "CSS" to = "sichtbar"

begin = "3s" dur = "6s" fill = "freeze" />

<Animatemotion Path = "M 0 0 L 100 100"

begin = "3s" dur = "6s" fill = "freeze" />

<Animate Attributename = "fill" AttributType = "CSS"

von = "RGB (0,0,255)" bis = "RGB (128,0,0)"

begin = "3s" dur = "6s" fill = "freeze" />

<AnimatetRansform Attributename = "Transformation" AttributTypype = "xml"

Typ = "Dreh" von = "-30" bis = "0"

begin = "3s" dur = "6s" fill = "freeze" />

<AnimatetRansform Attributename = "Transformation" AttributTypype = "xml"

Typ = "scale" von = "1" bis = "3" zusätzlich = "sum" "

begin = "3s" dur = "6s" fill = "freeze" />

</text>

</g>

</svg>

Legen Sie diesen Code in den Körper des HTML -Dokuments und führen Sie ihn aus, um die Auswirkung der Animation zu kennen.

XLINK: HREF

Dies sollte sehr vertraut sein und auf die Elemente hinweisen, die die Animation ausführen. Dieses Element muss im aktuellen SVG -Dokumentfragment definiert werden. Wenn dieses Attribut nicht angegeben ist, wird die Animation auf sein übergeordnetes Element angewendet.

Attributename = <Antributename>

Diese Eigenschaft gibt die Eigenschaften an, um die Animation anzuwenden. Wenn diese Eigenschaft einen Namespace hat (nicht vergessen, ist SVG im Wesentlichen ein XML -Dokument), sollte dieser Namespace auch hinzugefügt werden. Zum Beispiel erhält XLink im folgenden Beispiel unterschiedliche Alias. Wenn Animed das Attribut angibt, ist der Namespace enthalten:

<Svg Version = "1.1" xmlns = "http://www.w3.org/2000/svg"

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

<title> Demonstration der Auflösung von Namespaces for Animation </title>

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

<Animate Attributename = "A: href" xlink: href = "#foo" Dur = "2S" to = "Two.png" fill = "Freeze"/>

</g>

<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">

<Bild xml: id = "foo" b: href = "ein.png" x = "35" y = "50"/>

</g>

</svg>

AttributEType = CSS | Xml | Auto (Standardwert)

Diese Eigenschaft gibt den Namespace an, in dem die Eigenschaftswerte aufgenommen werden. Die Bedeutungen dieser Werte sind wie folgt:

CSS: Das im Auftrag des Attributenamen angegebene Attribut ist das CSS -Attribut.

XML: Das durch Attributename angegebene Attribut ist das Attribut im Standard -Namespace von XML (Beachten Sie, dass das SVG -Dokument im Wesentlichen ein XML -Dokument ist).

AUTO: Es bedeutet zuerst nach dem von Attributename im CSS -Attribut angegebenen Attribut. Wenn es nicht gefunden wird, wird nach dem Attribut unter dem Standard -XML -Namespace nach dem Attribut gesucht.

Die folgenden Eigenschaften sind Animationszeitattribute; Sie steuern die Zeitleiste der Animationsausführung, einschließlich der Start und Beendigung der Animation, ob die Animation wiederholt ausgeführt wird, ob die Animation usw. usw.

Beginnen Sie = Beginn-Wert-Liste

Diese Eigenschaft definiert die Startzeit der Animation. Es kann eine Reihe von Zeitwerten sein, die von Semikolonen getrennt sind. Es kann auch ein anderer Wert sein, der den Beginn der Animation auslöst. Zum Beispiel Ereignisse, Abkürzungsschlüssel usw.

Dur = Taktwert | Medien | unbestimmt

Definiert die Dauer der Animation. Kann auf einen im Taktformat angezeigten Wert eingestellt werden. Es kann auch auf die folgenden zwei Werte eingestellt werden:

Medien: Gibt an, dass die Zeit der Animation die Dauer des internen Multimedia -Elements ist.

INDEFINITE: Geben Sie die Animationszeit an, um unendlich zu sein.

Das Taktformat bezieht sich auf die folgenden rechtlichen Wertformate:

: 30: 03 = 2 Stunden, 30 Minuten und 3 Sekunden

: 00: 10,25 = 50 Stunden, 10 Sekunden und 250 Millionen Sekunden

: 33 = 2 Minuten und 33 Sekunden

: 10,5 = 10,5 Sekunden = 10 Sekunden und 500 Millionen Sekunden

.2H = 3,2 Stunden = 3 Stunden und 12 Minuten

min = 45 Minuten

S = 30 Sekunden

MS = 5 Millionen Sekunden

.467 = 12 Sekunden und 467 Millionen Sekunden

.5s = 500 Millionen Sekunden

: 00.005 = 5 Millionen Sekunden

Ende = Endwertliste

Definiert die Endzeit der Animation. Kann eine Reihe von Werten sein, die durch Semikolonen getrennt sind.

min = Taktwert | Medien

max = Taktwert | Medien

Legt den maximalen und minimalen Wert der Animationsdauer fest.

neu starten = immer | WANNOTACTACTAVE | niemals

Richten Sie die Animation so ein, dass sie jederzeit von vorne beginnen. Immer bedeutet, dass die Animation jederzeit beginnen kann. Wenn es nicht aktiv ist, dass Sie nur dann von vorne beginnen können, wenn keine Wiedergabe vorliegt, z. B. die vorherige Wiedergabe endet. Niemals bedeutet, dass die Animation nicht wieder gestartet werden kann.

repepcount = numerischer Wert | unbestimmt

Legen Sie die Häufigkeit fest, mit der die Animation wiederholt wird. Unbestimmtes steht für unendliche Wiederholung.

repepdur = Taktwert | unbestimmt

Legt die Gesamtanimationszeit der wiederholten Animation fest. Unbestimmtes steht für unendliche Wiederholung.

FILL = Freeze | entfernen (Standard)

Legt den Zustand des Elements fest, nachdem die Animation fertig ist. Freeze bedeutet, dass das Element nach Ablauf der Animation im letzten Zustand der Animation bleibt. Entfernen bedeutet, dass das Element vor der Animation nach dem Ende der Animation in den Status zurückkehrt, was der Standardwert ist.

Kategorie 3: Definieren Sie die Attribute von Animationswerten

Diese Eigenschaften definieren den Wert der ausgeführten Eigenschaften. Tatsächlich definieren einige Algorithmen, die Keyframes und Interpolation definieren.

calcMode = diskrete | linear (Standard) | Tempo | Spline

Definieren Sie die Methode der Animationsinterpolation: diskret: diskret, keine Interpolation; linear: lineare Interpolation; Tempo: Schrittgröße Interpolation; Spline: Spline -Interpolation. Die Standardeinstellung ist linear (lineare Interpolation), aber wenn das Attribut keine lineare Interpolation unterstützt, wird diskrete Interpolation verwendet.

values ​​= <list>

Definiert eine Liste von Werten für Animationsschlüsselframes, die durch Semikolons getrennt sind. Vektorwert unterstützen.

KeyTimes = <List>

Definiert eine Zeitliste von Animations -Keyframes, die durch Semikolons getrennt sind. Dies entspricht den Werten nacheinander. Dieser Wert wird durch den Interpolationsalgorithmus beeinflusst. Wenn es sich um eine lineare und Spline-Interpolation handelt, muss der erste Wert von KeyTimes 0 sein und der letzte Wert muss 1 betragen. Bei einer diskreten Nicht-Interpolation muss der erste Wert von Keytimes 0 sein. Bei der Interpolation der Schrittgröße ist es offensichtlich, dass keine Keytimes erforderlich ist. Und wenn die Dauer der Animation auf unbestimmt eingestellt ist, werden Keytimes ignoriert.

keysplines = <List>

Diese Eigenschaft definiert den Kontrollpunkt, wenn die Spline -Interpolation (Betzel -Interpolation) und offensichtlich nur dann funktioniert, wenn der Interpolationsmodus als Spline ausgewählt wird. Die Werte in dieser Liste liegen von 0 bis 1.

von = <wert>

to = <wert>

von = <wert>

Definiert die Start-, End- und Stufenwerte des Animationsattributs. Beachten Sie hier: Wenn Werte die relevanten Werte bereits formuliert haben, werden alle von/bis/nach Wert ignoriert.

Manchmal ist es sehr nützlich, den relevanten Wert anstelle des Absolutwerts festzulegen, aber der inkrementelle Wert kann dieses Ziel erreichen.

additive = ersetzen (Standardwert) | Summe

Diese Eigenschaft steuert, ob die Animation inkrementell ist. Summe bedeutet, dass die Animation einen größeren verwandten Attributwert oder andere Animationen mit niedriger Priorität aufweist. Ersetzen ist der Standardwert, der angibt, dass die Animation den relevanten Attributwert oder andere Animationen mit niedriger Priorität überschreibt. Siehe ein kleines Beispiel:

<Rect ...>

<Animate Attributename = "width" von = "0px" bis = "10px" Dur = "10S"

additive = "sum"/>

</rect>

Dieses Beispiel zeigt den Animationseffekt der Inkrementierung der Rechteckbreite.

Manchmal ist es auch sehr nützlich, wenn die wiederholten Animationsergebnisse überlagert sind und die Verwendung der akkumulierten Eigenschaft dieses Ziel erreichen kann.

akkumulieren = keine (Standard) | Summe

Diese Eigenschaft steuert, ob der Animationseffekt kumulativ ist. Keiner ist der Standardwert, der angibt, dass sich doppelte Animationen nicht ansammeln. Summe bedeutet, dass die wiederholten Animationseffekte akkumuliert werden. Für eine einzelne Animation hat diese Eigenschaft keine Bedeutung. Siehe ein kleines Beispiel:

<Rect ...>

<Animate Attributename = "width" von = "0px" bis = "10px" Dur = "10S"

zusätzlich = "Summe" akkumulation = "sum" repuolCount = "5"/>

</rect>

Dieses Beispiel zeigt, dass die Länge des Rechtecks ​​in jeder Iteration zunimmt.

SVG liefert die folgenden Animationselemente:

Dies ist das grundlegendste Animationselement, das die Werte verschiedener Zeitpunkte für verwandte Attribute direkt liefern kann.

Dies ist die Abkürzung des animierten Elements und unterstützt alle Attributtypen, insbesondere wenn animierte Attribute (wie Sichtbarkeit). Das festgelegte Element ist nicht inkrementell und die relevanten Attribute sind ungültig. Der angegebene Endwerttyp der Animation muss dem Werttyp des Attributs entsprechen.

Lu Jin Animationselemente. Die meisten Eigenschaften dieses Elements sind die gleichen wie oben, nur die folgenden leicht unterschiedlichen Unterschiede:

calcMode = diskrete | linear | Tempo | Spline

Der Standardwert dieser Eigenschaft ist unterschiedlich und der Standardwert in diesem Element ist weitergeschnitten.

path = <path-data>

Der Pfad des sich bewegenden Animationselements entspricht dem Format des Wertes des D -Attributs des Pfadelements.

tastePoints = <Liste der Zahlen>

Der Wert dieser Eigenschaft ist eine Reihe von schwimmenden Punktwerten, die von Semikolonen angegeben sind, und der Wertbereich jedes Werts beträgt 0 ~ 1. Diese Werte repräsentieren die Entfernung, in der der entsprechende Zeitpunkt durch das KeyTimes -Attribut angegeben wird. Der spezifische Abstand hier wird durch den Browser selbst bestimmt.

rotate = <nummer> | Auto | automatisch umgekehrt

Diese Eigenschaft gibt den Winkel an, in dem sich das Element beim Bewegungen dreht. Der Standardwert beträgt 0, die Zahl repräsentiert den Rotationswinkel und das Auto repräsentiert den tierischen Körper, der sich in Richtung der Straßenkraft dreht. Die automatische Umkehr zeigt die Richtung an, in der die Lenkung der Bewegungsrichtung entgegengesetzt ist.

Zusätzlich bestehen die Werte des Animatemotion -Elements von bis zu, bis zu den Werten aus Koordinatenpaaren; Der X -Wert und der Y -Wert werden durch Kommas oder Räume getrennt, und jedes Koordinatenpaar wird durch ein Semikolon getrennt, wie z.

Es gibt zwei Möglichkeiten, einen Bewegungspfad anzugeben: Einer besteht darin, dem Pfadattribut einen Wert direkt zuzuweisen, und der andere besteht darin, einen Pfad anzugeben, um das MPATH -Element als untergeordnetes Element der Animatemotionde zu verwenden. Wenn Sie beide Methoden verwenden, hat das MPATH -Element eine hohe Priorität. Beide Methoden haben eine höhere Priorität als Werte von, durch, bis zu.

Siehe ein kleines Beispiel:

<? xml Version = "1.0" Standalone = "no"?>

<! DocType svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<SvgViewBox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1"

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

<rect x = "1" y = "1"

fill = "keine" stroke = "blau" stroke-width = "2" />

<path id = "path1" d = "M100,250 C 100,50 400,50 400,250"

fill = "Keine" Stroke = "Blue" Stroke-Width = "7.06"/>

<Kreis cx = "100" Cy = "250" r = "17,64" fill = "blau"/>

<Kreis cx = "250" Cy = "100" r = "17,64" fill = "blau"/>

<Kreis cx = "400" Cy = "250" r = "17,64" fill = "blau"/>

<Pfad d = "M-25, -12,5 L25, -12,5 l 0, -87,5 Z"

fill = "gelb" stroke = "rot" stroke-width = "7.06">

<animatemotion dur = "6s" repualtCount = "Indefinite" rotate = "auto">

<mpath xlink: href = "#path1"/>

</animatemotion>

</path>

</svg>

Farbanimationselemente. Dies ist ein veraltetes Element, und im Grunde können alle Funktionen durch Animate ersetzt werden. Verwenden Sie es also nicht.

Animationselemente verwandeln. Schauen Sie sich einige besondere Eigenschaften an:

Typ = übersetzen | Skala | drehen | Versecken | schief

Diese Eigenschaft gibt den Typ der Transformation an, und Translate ist der Standardwert.

Die Werte von, nach und um den Parametern der Transformation zu entsprechen, was mit der oben genannten Transformation übereinstimmt. Werte sind ein Satz von mit Semikolon getrennten Werten.

Elemente und Eigenschaften, die Animationseffekte unterstützen

Grundsätzlich alle grafischen Elemente (Pfad, Rechtek, Ellipse, Text, Bild ...) und Containerelemente (SVG, G, Defs, Verwendung, Schalter, Clippath, Maske ...) unterstützen Animation. Grundsätzlich unterstützen die meisten Eigenschaften Animationseffekte. Ausführliche Anweisungen finden Sie in der offiziellen Dokumentation.

Die SVG -Animation kann auch mit Skripten abgeschlossen werden. Der detaillierte Inhalt von DOM wird später eingeführt. Hier ist ein kurzes Beispiel:

<? xml Version = "1.0" Standalone = "no"?>

<! DocType svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<SVG ViewBox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

Onload = "StartAnimation (EVT)" Version = "1.1">

<script type = "application/ecmascript"> <! [cdata [

var timeValue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

Funktion startanimation (evt) {

text_element = evt.target.ownerDocument.getElementById ("textElement");

ShowandGrowelement ();

}

FunktionshowandAndGrowElement () {

timeValue = timeValue + timer_increment;

if (TimeValue> max_time)

zurückkehren;

// skalieren Sie die Textzeichenfolge nach und nach, bis sie 20 -mal größer ist

ScaleFactor = (TimeValue * 20.) / max_time;

text_element.setattribute ("Transformation", "scale (" + scaleFactor + ")");

// Machen Sie die Zeichenfolge undurchsichtiger

opacityFactor = timeValue/max_time;

text_element.setattribute ("opazität", opacityFactor);

// NOT ShowandGrowelement erneut <Timer_increments> Millionseconds später.

setTimeout ("showandGrowElement ()", Timer_increment)

}

window.showandGrowelement = showand und Growelement

]]> </script>

<rect x = "1" y = "1"

fill = "keine" stroke = "blau" stroke-width = "2"/>

<g transform = "translate (50,150)" fill = "rot" font-size = "7">

<text id = "textElement"> svg </text>

</g>

</svg>

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/

SVG-Animationstechnologie: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx