<div> </div>

 gsap.to ('. Ball', {
  Dauer: 1,
  x: 200,
  Skala: 2
})

In diesem Fall sagen wir Greensock (GSAP), das Element mit der Klasse von.ballmove it.to () ein paar verschiedene Eigenschaften zu nehmen. Wir haben die CSS -Eigenschaften von TRANSFORMFORMEN verkürzt: Translatex (200px) auf einen Streamlinedx: 200 (beachten Sie, dass die Einheiten nicht erforderlich sind, aber Sie k?nnen sie als Zeichenfolge übergeben). Wir sind auch nicht writingTransform: scale (2). Hier ist eine Referenz der Transformationen, die Sie m?glicherweise mit Animationen und ihrer entsprechenden CSS -Syntax verwenden m?chten:

 X: 100 // Transformation: Translatex (100px)
Y: 100 // Transformation: Translatey (100px)
Z: 100 // Transformation: TranslateZ (100px)
// Sie ben?tigen nicht den Null -Transformation -Hack oder die Hardware -Beschleunigung, sie ist eingebacken
// Force3d: True. Wenn Sie dies verunreinigen m?chten, Force3D: False
Skala: 2 // Transformation: Skala (2)
Scalex: 2 // Transformation: Scalex (2)
Skalig: 2 // Transformation: Skalyy (2)
scalez: 2 // transformation: scalez (2)
SCEW: 15 // Transformation: SCEW (15DEG)
SEWWX: 15 // Transformation: SEWWX (15de)
schief: 15 // transformation: sugwy (15deg)
Rotation: 180 // Transformation: Drehen (180 Grad)
rotationx: 180 // Transformation: rotatex (180de)
Rotation: 180 // Transformation: Rotatey (180 Grad)
Rotationz: 180 // Transformation: Rotatez (180 Grad)
Perspektive: 1000 // Transformation: Perspektive (1000px)
Transformorigin: '50% 50% '// Transformation-Origin: 50% 50%

Dauer ist das, was Sie vielleicht denken: Es ist ein Zeitabschnitt von ein Sekunde.

Also, ok, wie würden wir sagen, ein SVG? Betrachten wir denselben Code oben als SVG:

 <svg viewbox="0 0 500 400">
  <kreis cx="80" cy="80" r="80"></kreis>
</svg>

 gsap.to ('. Ball', {
  Dauer: 1,
  x: 200,
  Skala: 2
})

Aus Sicht der Animation ist es tats?chlich genau das gleiche . Es greift das Element mit der Klasse. BALLON IT und übersetzt diese Eigenschaften. Da SVGs buchst?blich Dom -Elemente sind, k?nnen wir eine Klasse auf einen von ihnen schlagen und sie genauso animieren!

Gro?artig! Wir kochen mit Gas.

Erleichtert

Ich habe bereits erw?hnt, dass die Erleichterungen eine meiner Lieblingsfunktionen sind. Schauen wir uns an, wie wir sie verwenden würden.

Nehmen wir den ursprünglichen Ball. Vielleicht m?chten wir einen dieser einzigartigeren Sprungbrüche probieren. Es würde so gehen:

 gsap.to ('. Ball', {
  Dauer: 1.5,
  x: 200,
  Skala: 2,
  Leichtigkeit: 'Spring'
})

Das war's! In dieser Version von Greensock geht davon aus, dass Sie die Ease-Outtiming verwenden m?chten (was für Eing?nge besser ist), daher gilt sie als Standard. Alles, was Sie tun müssen, ist, "Bounce" als Zeichenfolge anzugeben und Sie sind zu den Rennen.

Vielleicht haben Sie bemerkt, dass wir auch die Dauer ein wenig verl?ngert haben. Das liegt daran, dass der Ball zwischen den Anfangs- und Endstaaten mehr ?Arbeit“ leisten muss. Eine ein Sekunden lange Dauer, obwohl es sch?n für linear oder eine Sinus-Lockerung ist, ist für einen Sprung oder eine elastische Leichtigkeit etwas zu schnell.

Verz?gerungen und Zeitpl?ne

Ich habe erw?hnt, dass die Defaultase-Outtiming-Funktion gut für Eing?nge ist. Was ist mit Anease-Inor-E-in-Out-Ausgang? Lass uns das auch machen.

 gsap.to ('. Ball', {
  Dauer: 1.5,
  x: 200,
  Skala: 2,
  Leichtigkeit: 'Spring'
})

gsap.to ('. Ball', {
  Dauer: 1.5,
  Verz?gerung: 1.5,
  x: 0,
  Skala: 1,
  Leichtigkeit: 'zurück.inout (3)' '
})

Vielleicht haben Sie ein paar Dinge bemerkt, die passieren. Zum Beispiel haben wir nicht gebraucht. Stattdessen haben wir eine andere Leichtigkeit namensbackForease-In-Out verwendet. Wir haben auch eine Konfigurationsoption übergeben, da wir, wie Sie mit Greensock Visualizer -Tool sehen k?nnen, nicht nur auf die Standardkonfiguration beschr?nkt sind. Wir k?nnen es an unsere Bedürfnisse anpassen. Sauber!

M?glicherweise haben Sie auch bemerkt, dass wir die Animationen mit einer Verz?gerung verkettet haben. Wir haben die Dauer der ersten Animation übernommen und dafür gesorgt, dass die n?chste eine Verz?gerung entspricht. Nun, das funktioniert hier, aber das ist ziemlich spr?de. Was ist, wenn wir die L?nge des ersten ?ndern wollen? Nun, jetzt müssen wir wieder durchgehen und die folgende Verz?gerung ?ndern. Und was ist, wenn wir danach eine andere Animation haben? Und danach noch ein? Nun, wir müssten zurückkehren und alle anderen Verz?gerungen auf der ganzen Linie berechnen. Das ist eine Menge manueller Arbeit.

Wir k?nnen diese Arbeit auf den Computer laden. Einige meiner komplexeren Animationen sind Hunderte von geketteten Animationen! Wenn ich meine Arbeit beende und am Anfang etwas anpassen m?chte, m?chte ich nicht alles durchgehen müssen. Timelines eingeben:

 GSAP
  .Timeline ()
  .to ('. Ball', {
    Dauer: 1.5,
    x: 200,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball', {
    Dauer: 1.5,
    x: 0,
    Skala: 1,
    Leichtigkeit: "zurück. (3)"
  });

Dies instanziiert eine Zeitleiste und kleidet dann die beiden Animationen davon.

Aber wir haben immer noch ein bisschen Wiederholung, wo wir in jeder Animation immer wieder die gleiche Dauer verwenden. Erstellen wir einen Standard dafür als Option, die an die Zeitleiste übergeben wird.

 GSAP
  .Timeline ({{
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .to ('. Ball', {
    x: 200,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball', {
    x: 0,
    Skala: 1,
    Leichtigkeit: "zurück. (3)"
  });

Das ist ziemlich cool! Okay, Sie beginnen wahrscheinlich zu sehen, wie die Dinge auf diese Weise aufgebaut werden. Obwohl es in einer Animation so einfach keine gro?e Sache ist, k?nnen Standards und Zeitpl?ne in wirklich komplexen Animationen den Code wirklich aufrechterhalten.

Was ist, wenn wir diese Bewegung mit dem Ball in die andere Richtung spiegeln wollen und einfach ... weitermachen wollen? Mit anderen Worten, was ist, wenn wir eine Schleife wollen? Dann addrepeat: -1, das entweder auf eine einzelne Animation oder auf die gesamte Zeitleiste angewendet werden kann.

 GSAP
  .Timeline ({{
    Wiederholen: -1,
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .to ('. Ball', {
    x: 200,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball', {
    x: 0,
    Skala: 1,
    Leichtigkeit: "zurück. (3)"
  })
  .to ('. Ball', {
    x: -200,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball', {
    x: 0,
    Skala: 1,
    Leichtigkeit: "zurück. (3)"
  });

Wir konnten es auch nicht nur wiederholen lassen, sondern auch wiederholen und wiedergeben, wie ein Yoyo. Deshalb nennen wir das Yoyo: wahr. Um den Punkt klar zu machen, werden wir dies nur mit der ersten Animation zeigen. Sie k?nnen sehen, dass es nach vorne spielt, und dann spielt es umgekehrt.

 GSAP
  .Timeline ({{
    Wiederholen: -1,
    Yoyo: wahr,
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .to ('. Ball', {
    x: 200,
    Skala: 2,
    Leichtigkeit: "Spring"
  })

überlappungen und Beschriftungen

Es ist gro?artig, dass wir Animationen mühelos anketten k?nnen, aber die Bewegung im wirklichen Leben funktioniert nicht genau auf diese Weise. Wenn Sie durch den Raum gehen, um eine Tasse Wasser zu bekommen, gehen Sie nicht. Dann stoppen Sie. Dann das Wasser aufnehmen. Dann trinken Sie es. Es ist wahrscheinlicher, dass Sie Dinge in einer kontinuierlichen Bewegung tun. Lassen Sie uns also kurz darüber sprechen, wie man die Bewegung überlappt und die Dinge gleichzeitig ins Feuer bringen.

Wenn wir sicher sein m?chten, dass die Dinge in einer Zeitleiste vor und nacheinander feuern, k?nnen wir einen Inkrementierer oder Dekrementierer verwenden. Wenn wir das folgende Beispiel nehmen, das drei B?lle nacheinander anzeigt, fühlt es sich ein wenig steif an.

 GSAP
  .Timeline ({{
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .to ('. Ball', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball2', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball3', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  })

Die Dinge werden reibungsloser, wenn wir die Bewegung mit diesen Decrementern als Saiten überlappen:

 GSAP
  .Timeline ({{
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .to ('. Ball', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  })
  .to ('. Ball2', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, '-= 1')
  .to ('. Ball3', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, '-= 1')

Eine andere M?glichkeit, dies zu tun, besteht darin, etwas zu verwenden, das als Etikett bezeichnet wird. Etiketten stellen sicher, dass die Dinge zu einem bestimmten Zeitpunkt im Spielkopf der Animation abfeuern. Es sieht so aus: .Add ('LabelName')

 GSAP
  .Timeline ({{
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .add ('Start')
  .to ('. Ball', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'Start')
  .to ('. Ball2', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'Start')
  .to ('. Ball3', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'Start') 

Wir k?nnen sogar vom Etikett inkrementieren und abnehmen. Ich mache das tats?chlich viel in meinen Animationen. Es sieht so aus, als w?re dieser Start = 0,25 '.

 GSAP
  .Timeline ({{
    Standardeinstellungen: {
      Dauer: 1.5
    }
  })
  .add ('Start')
  .to ('. Ball', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'Start')
  .to ('. Ball2', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'start = 0,25')
  .to ('. Ball3', {
    x: 300,
    Skala: 2,
    Leichtigkeit: "Spring"
  }, 'start = 0,5') 
 

Puh! Wir k?nnen so viel damit anfangen! Hier ist ein Beispiel für eine Animation, die viele dieser R?umlichkeiten zusammenstellt, mit etwas Interaktion mit Vanille -JavaScript. Klicken Sie auf die Glocke.

Wenn Sie mehr nach rahmenbasierter Animation mit Greensock suchen, schrieb ich hier an Anartikel, das dies in Vue abdeckt, und Atalk i Gavethat-Adressen reagieren-es ist ein paar Jahre alt, aber die Basisgel?nde gelten immer noch.

Aber es gibt immer noch so viel, dass wir nicht abgeholt haben, einschlie?lich Staggers, Morphing SVG, Zeichnen von SVG, Werfen von Dingen um den Bildschirm, das Verschieben von Dingen auf einem Pfad, das Animieren von Text ... Sie nennen es! Ich würde vorschlagen, über die Dokumentation von Togreensock für diese Details zu gehen. Ich habe auch Scheck an Frontend Mastershat deckt all dies in viel mehr Tiefe ab und die Materialien sind auf meinem Github. Ich habe auch viele Pendel, die Sie für Sie für Sie gabt und spielen k?nnen.

Ich hoffe, dass Sie mit der Arbeit mit Animation im Internet arbeiten k?nnen! Ich kann es kaum erwarten zu sehen, was Sie machen!