SVG/Attribut/keySplines

Das keySplines-Attribut legt fest, wie die Geschwindigkeit der Animation abläuft.

Erlaubte Werte

Kontrollpunkte in der Form x1; y1; x2; y2 mit dem Wert zwischen 0 und 1

Standardwert

none

anwendbar auf

animate, animateMotion

Präsentationsattribut

nein

mit CSS animierbar

nein

Beispiel

<animate 
    href="#orange-circle"
    attributeName="cy"
    to="250" 
    dur="3s"
    begin="click"
    values="50; 250; 120;250; 170; 250; 210; 250"
    keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
    keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;"
    fill="freeze" 
    id="circ-anim"/>

Für die einzelnen keyTimes-Attributwerte sind je 4 keySplines-Werte definiert, die den Kreis hüpfen lassen.

Siehe auch

• SMIL#mehrstufige Animationen

Weblinks

• Spezifikation (W3C): keySplines attribute
• MDN: keySplines