keySplines
Das keySplines-Attribut definiert eine Reihe von Bézier-Kurven Kontrollpunkten, die mit der keyTimes-Liste verbunden sind und eine kubische Bézier-Funktion definieren, die das Intervall-Tempo steuert.
Dieses Attribut wird ignoriert, es sei denn, das calcMode-Attribut ist auf spline gesetzt.
Wenn es irgendwelche Fehler in der keySplines-Spezifikation gibt (schlechte Werte, zu viele oder zu wenige Werte), wird die Animation nicht ausgeführt.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Beispiel
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="10" r="10">
<animate
attributeName="cx"
dur="4s"
calcMode="spline"
repeatCount="indefinite"
values="60; 110; 60; 10; 60"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
<animate
attributeName="cy"
dur="4s"
calcMode="spline"
repeatCount="indefinite"
values="10; 60; 110; 60; 10"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
</circle>
</svg>
Nutzungshinweise
| Wert |
<control-point> [ ;
<control-point> ]* ;?
|
|---|---|
| Standardwert | Keiner |
| Animierbar | Nein |
Der Attributwert ist eine durch Semikolons getrennte Liste von Kontrollpunktbeschreibungen.
<control-point>-
Jede Kontrollpunktbeschreibung besteht aus vier Werten:
x1 y1 x2 y2, die die Bézier-Kontrollpunkte für ein Zeitintervall beschreiben. DiekeyTimes-Werte, die das zugehörige Segment definieren, sind die Bézier-„Ankerpunkte“, und diekeySplines-Werte sind die Kontrollpunkte. Daher muss es eine Kontrollpunktmenge weniger geben als eskeyTimesgibt.Die Werte von
x1 y1 x2 y2müssen alle im Bereich von 0 bis 1 liegen. - Safari-Probleme
-
keyTimes-Werte sollten ohne Leerzeichen davor mit Semikolon getrennt sein, zum Beispiel:keyTimes="0; 0.25; 0.5; 0.75; 1"
Spezifikationen
| Specification |
|---|
| SVG Animations Level 2 # KeySplinesAttribute |