Benutzer:Bertie/Vergleich Animationsmethoden

Vergleich von Animationsmethoden

Beim Thema Animationen werden im Wiki immer wieder die Begriffe CSS, WAAPI und SMIL genannt. Hier eine Beispiel-Animation, die zum Vergleich mit allen drei Methoden umgesetzt wurde.

Die Animation zeigt, wie der Satz des Pythagoras mit einfachen Mitteln praktisch angewendet werden kann, indem man z.B. auf dem Feld drei Schnur-Stücke auf 3, 4 und 5 beliebige Längeneinheiten zurecht schneidet, denn 3² + 4² = 5².

Die Ausgangslage im grafischen SVG-Editor sind diese Elemente:

In den Quelltexten der Vergleich für #linie_3, die 3 Einheiten lange Linie (Kathete) links. Sie fliegt als Letzte der drei Linien von oben in den sichtbaren Bereich (viewBox) herein, rotiert währenddessen und setzt auf die Grundlinie (Hypotenuse) auf. Dann eine kurze Pause, während Zahlen und Radien eingeblendet werden. Anschliessend rotiert sie pendelnd bis zu ihrer Endposition im rechtwinkligen Dreieck.

In der SMIL-Version werden diese beiden Rotationen separat definiert und addieren sich.

In CSS und WAAPI werden hier für bessere Les- und Wartbarkeit jeweils 2 separate Rotations-Angaben geschrieben (man könnte diese 2 Werte auch summieren und nur je 1 Wert angeben).

Damit ist im CSS sichtbar, dass sich Linie 3 zuerst von @keyframes 23% bis 42% gegen den Uhrzeiger von 0 auf -90 Grad dreht (während sie mittels translate gleichzeitig herein fliegt), in einer zweiten Rotation von @keyframes 50% bis 83% dann zusätzlich von 0 Grad über 50 Grad und 21 Grad pendelt bis zur Endposition von 36.87 Grad.

In der WAAPI-Version sind die beiden Rotationen (rotA und rotB) in der Definition der Konstanten const line3KF = [] ebenfalls gut sichtbar.

Animation per SMIL (im SVG Code):

Animation Pythagoras mit SMIL ansehen …

<line id="linie_3" style="transform-origin:0% 100%" x1="10" y1="-30" x2="40" y2="-30">
  <animateTransform type="translate" additive="sum" attributeName="transform"
  values="0 0;0 80" begin="start.begin+2s" dur="3s" fill="freeze"/>
  <animateTransform type="rotate" additive="sum" attributeName="transform"
  values="0;-90" begin="start.begin+2.8s" dur="2.2s" fill="freeze"/>
  <animateTransform type="rotate" additive="sum" attributeName="transform"
  values="0;50;21;36.87" begin="start.begin+6s" dur="4s" fill="freeze" keyTimes="0;0.3;0.6;1"/>
</line>

Animation per CSS:

Animation Pythagoras mit CSS ansehen …

@keyframes linie3 {
  0%   { transform: translate(0px, 0px)  rotate(0deg)   rotate(0deg); }
  17%  { transform: translate(0px, 0px)  rotate(0deg)   rotate(0deg); }
  23%  { transform: translate(0px, 21px) rotate(0deg)   rotate(0deg); }
  42%  { transform: translate(0px, 80px) rotate(-90deg) rotate(0deg); }
  50%  { transform: translate(0px, 80px) rotate(-90deg) rotate(0deg); }
  60%  { transform: translate(0px, 80px) rotate(-90deg) rotate(50deg); }
  70%  { transform: translate(0px, 80px) rotate(-90deg) rotate(21deg); }
  83%  { transform: translate(0px, 80px) rotate(-90deg) rotate(36.87deg); }
  100% { transform: translate(0px, 80px) rotate(-90deg) rotate(36.87deg); }
}

Animation per WAAPI (im JavaScript Code):

Animation Pythagoras mit WAAPI ansehen …

const line3KF = [
  { t: 0.0,  tx: 0, ty: 0,  rotA: 0,   rotB: 0 },
  { t: 2.0,  tx: 0, ty: 0,  rotA: 0,   rotB: 0 },
  { t: 2.8,  tx: 0, ty: 21, rotA: 0,   rotB: 0 },
  { t: 5.0,  tx: 0, ty: 80, rotA: -90, rotB: 0 },
  { t: 6.0,  tx: 0, ty: 80, rotA: -90, rotB: 0 },
  { t: 7.2,  tx: 0, ty: 80, rotA: -90, rotB: 50 },
  { t: 8.4,  tx: 0, ty: 80, rotA: -90, rotB: 21 },
  { t: 10.0, tx: 0, ty: 80, rotA: -90, rotB: 36.87 },
];
animations.push(
  el("linie_3").animate(
    line3KF.map(k => ({
      transform: `${T(k.tx, k.ty)} ${R(k.rotA + k.rotB)}`,
      offset: k.t / 10.0
    })),
    { duration: ms(10), delay: 0, fill: "forwards", easing: "linear" }
  )
);