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 darstellen, die den Verlauf des Intervalls steuert.

Dieses Attribut wird ignoriert, es sei denn, das calcMode-Attribut ist auf spline gesetzt.

Wenn es Fehler in der keySplines-Spezifikation gibt (schlechte Werte, zu viele oder zu wenige Werte), wird die Animation nicht ausgeführt.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<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 einer Gruppe von vier Werten: x1 y1 x2 y2, die die Bézier-Kontrollpunkte für ein Zeitsegment beschreiben. Die keyTimes-Werte, die das zugehörige Segment definieren, sind die Bézier-"Ankerpunkte", und die keySplines-Werte sind die Kontrollpunkte. Es muss also eine Gruppe von Kontrollpunkten weniger als keyTimes geben.

Die Werte von x1 y1 x2 y2 müssen alle im Bereich von 0 bis 1 liegen.

Safari-Probleme

keyTimes-Werte sollten ohne Leerzeichen davor mit einem Semikolon getrennt werden, z.B.: keyTimes="0; 0.25; 0.5; 0.75; 1"

Spezifikationen

Specification
SVG Animations Level 2 # KeySplinesAttribute

Siehe auch

Bézier-Kurve