SVG/Attribute/keySplines

Aus SELFHTML-Wiki
< SVG‎ | Attribute
Wechseln zu: Navigation, Suche

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

default-Wert none
erlaubt in animate, animateMotion
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

Weblinks