CSS3-Animation - Erstellen eines Fan-Outs mit Bounce-Effekt mithilfe einer Bezier-Kurve
Wussten Sie das? geometrische Transformationen HTML-Elementen hinzugefügt mit verwandeln
CSS-Eigenschaften wie Skalieren, Neigen und Drehen können animiert werden? Sie können mit dem animiert werden Übergang
Eigentum und @keyframes
Animationen, aber was noch cooler ist, ist, dass animierte Transformationen durch Hinzufügen von ein wenig mehr erreicht werden können Bounce-Effekt, Verwendung der Kubik-Bezier ()
Timing-Funktion.
In einer Nussschale, Kubik-Bezier ()
(in CSS) ist a Zeitfunktion für Übergänge. Es gibt die Geschwindigkeit des Übergangs an und kann unter anderem auch verwendet werden Bouncing-Effekt in Animationen erstellen.
In diesem Beitrag gehen wir zuerst auf Erstellen Sie eine einfache Transformationsanimation zu dem wir später füge hinzu ein Kubik-Bezier ()
Timing-Funktion. Am Ende dieses Lernprogramms erfahren Sie, wie Sie eine Animation erstellen, die verwendet wird ein Fan-Out- und ein Bounce-Effekt. Hier ist das Endergebnis (klicken Sie, um den Effekt zu sehen).
Die Demo ist inspiriert von diesem schönen Dribbble, der von Christopher Jones über eine animierte Ortsmarkierung gedreht wurde.
1. Erstellen der Blätter
Die Form der Ortsmarkierung besteht aus fünf Blättern (nennen wir sie). So erstellen Sie die ovale Form eines Blattes verwenden wir die Grenzradius
CSS-Eigenschaft Das Grenzradius
von einer einzigen Ecke ist bestehend aus zwei Radien, horizontal und vertikal, wie unten gezeigt.
Das Grenzradius
Eigenschaft hat viele verschiedene Syntax. Wir werden eine kompliziertere für die Form der Markierung verwenden:
border-radius: htl htr hbr hbl / vtl vtr vbr vbl;
In dieser Syntax werden horizontale und vertikale Radien zusammen gruppiert; h
& v
repräsentieren horizontale und vertikale Radien und t
, l
, b
& r
repräsentieren die oberen, linken, unteren und rechten Ecken. Zum Beispiel, vbl
steht für den vertikalen Radius der linken unteren Ecke.
Wenn du gibst nur ein Wert Für die horizontale oder vertikale Seite wird dieser Wert vom Browser in alle anderen horizontalen oder vertikalen Radien kopiert.
Zu Erstellen Sie eine vertikale ovale Form, Halten Sie die horizontalen Radien bei 50%
für alle Ecken und stellen Sie die vertikalen ein, bis die gewünschte Form sichtbar ist. Das horizontale Seite wird nur einen Wert verwenden: 50%
.
Das vertikale Radien der oberen linken und rechten oberen Ecken werden angezeigt 30%
, während die untere linke und die rechte untere Ecke die 70%
Wert.
HTML
CSS
.pinStarLeaf width: 60px; Höhe: 120px; Grenzradius: 50% / 30% 30% 70% 70%; Hintergrundfarbe: # B8F0F5;
2. Multiplizieren Sie die Blätter
Da der Marker mit fünf Blättern auffächert, erstellen wir vier weitere Exemplare des Blattes in verschiedenen Farben und mit absoluter Positionierung, um sie aufeinander zu stapeln.
HTML
CSS
#pinStarWrapper width: 300px; Höhe: 300px; Position: relativ; .pinStarLeaf width: 60px; Höhe: 120px; Position: absolut; Grenzradius: 50% / 30% 30% 70% 70%; links: 0; rechts: 0; oben: 0; unten: 0; Marge: auto; Deckkraft: .5; .pinStarLeaf: nth-of-type (1) Hintergrundfarbe: # B8F0F5; .pinStarLeaf: nth-of-type (2) Hintergrundfarbe: # 9CF3DC; .pinStarLeaf: nth-of-type (3) Hintergrundfarbe: # 94F3B0; .pinStarLeaf: nth-of-type (4) Hintergrundfarbe: # D2F8A1; .pinStarLeaf: nth-of-type (5) Hintergrundfarbe: # F3EDA2;
3. Erfassen von Klickereignissen und Verbesserung der Ästhetik
Lasst uns fügen Sie ein Kontrollkästchen hinzu mit dem #pinStarCenterChkBox
Bezeichner zum Erfassen des Klickereignisses. Wenn das Kontrollkästchen aktiviert ist, werden die Blätter aufgefächert (gedreht). Wir müssen auch eine hinzufügen weißer Kreis mit dem #pinStarCenter
Kennung für Ästhetik. Es wird auf der Markierung positioniert und ist das Mittelstück der Positionsmarkierung.
HTML
Wir setzen das Kontrollkästchen vor und den weißen Kreis nach den Blättern:
CSS
Zuerst legen wir die Grundstile für das Kontrollkästchen und den Abdeckkreis fest:
#pinStarCenter, #pinStarCenterChkBox width: 45px; Höhe: 50px; Position: absolut; links: 0; rechts: 0; oben: -60px; unten: 0; Marge: auto; Hintergrundfarbe: #fff; Grenzradius: 50%; Cursor: Zeiger; #pinStarCenter, .pinStarLeaf pointer-events: none; #pinStarCenter> input [type = "Ankreuzfeld"] width: 100%; Höhe: 100%; Cursor: Zeiger;
Da jedes Blatt sich entlang der Z-Achse drehen wird in verschiedenen Winkeln, wir müssen das einstellen umwandeln: drehenz ();
Eigentum entsprechend eine Sternform erstellen. Wir wenden auch das an Übergang
Eigentum für den Rotationseffekt (genauer verwenden wir die Übergang: 1s linear umwandeln
Regel für die Blätter).
#pinStarCenterChkBox: markiert ~ .pinStarLeaf Übergang: 1s linear transformieren; #pinStarCenterChkBox: überprüft ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: überprüft ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: überprüft ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: überprüft ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: überprüft ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Wenn Sie sich das CSS oben ansehen, können Sie anhand der #pinStarCenterChkBox: ~ geprüft
allgemeiner Geschwisterwähler, den wir nur hinzufügen Übergang
und verwandeln
Eigenschaften Wenn das Kontrollkästchen aktiviert ist (wenn der Benutzer die Markierung anklickte).
4. Ändern der Mitte der Rotation
Standardmäßig ist der Mittelpunkt der Rotation positioniert in der Mitte des gedrehten Elements, In unserem Fall in der Mitte der Blätter. Wir müssen das Zentrum der Transformation zum inneren Ende der Blätter bewegen. Wir können dies mit der Ursprung verwandeln
CSS-Eigenschaft das ändert die Position der transformierten Elemente.
Damit der Rotationseffekt ordnungsgemäß funktioniert, fügen Sie die beiden folgenden Regeln zum hinzu .pinStarLeaf
Selektor in unserer CSS-Datei:
.pinStarLeaf transform-origin: 30px 30px; Übergang: 1s linear transformieren;
Lassen Sie uns unsere Fan-Animation in Aktion sehen - zu diesem Zeitpunkt ohne den Bounce-Effekt. Klicken Sie auf den weißen Kreis über der Markierung.
Verstehen, wie ubic-Bezier () funktioniert
Um den Bounce-Effekt hinzuzufügen, müssen wir den linear
Zeitfunktion mit Kubik-Bezier ()
in dem Übergang
Deklarationen in unserer CSS-Datei.
Aber zuerst wollen wir das verstehen Logik hinter dem Kubik-Bezier ()
Timing-Funktion So können Sie den Bounce-Effekt leicht verstehen.
Die Syntax für die Kubik-Bezier ()
Funktion ist die folgende, d
und t
sind Entfernung und Zeit, und ihre Werte liegen typischerweise zwischen 0 und 1:
Kubik-Bezier (t1, d1, t2, d2)
Obwohl es CSS erklärt Kubik-Bezier ()
In Bezug auf Entfernung und Zeit ist dies nicht genau, es ist viel einfacher, es auf diese Weise zu verstehen.
Angenommen, es gibt eine Box, die sich von Punkt A nach B bewegt in 6 Sekunden. Lass uns folgendes verwenden Kubik-Bezier ()
Zeitfunktion für den Übergang mit der t1 = 0
und d1 = 1
Werte.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / Kubik-Bezier (0,1,0,0)
In kürzester Zeit bewegt sich die Box von A zum Mittelpunkt und der Rest der Zeit reicht bis B.
Versuchen wir den gleichen Übergang mit Werten t1 = 1
und d1 = 0
.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / Kubik-Bezier (1,0,0,0)
In den ersten drei Sekunden bewegt sich die Box nicht viel, und dann springt sie fast zur Mitte und bewegt sich stetig in Richtung B.
Wie du siehst, d1
steuert die Abstand zwischen A & die Mitte, und t1
das Zeit, um den Mittelpunkt von A zu erreichen.
Lass uns benutzen d2
und t2
jetzt. Beide t1
und d1
wird 1 sein und t2 = 1
und d2 = 0
.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubischer Bezier (1,1,0,1)
Die Box bewegt sich in 3 Sekunden fast um die Hälfte (aufgrund von t1 = 1
, d1 = 1
) und springt in kürzester Zeit zu Punkt B.
Das letzte Beispiel tauscht die vorherigen Werte von t2
und d2
:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / Kubik-Bezier (1,1,1,0)
Die Box bewegt sich in 3 Sekunden fast um die Hälfte (aufgrund von t1 = 1
, d1 = 1
), bewegt sich für 3 weitere Sekunden nicht viel, bevor Sie zu Punkt B springen.
Diese Beispiele zeigen das d2
und t2
Kontrollieren Sie die Entfernung und die Zeit, die die Box benötigt Gehen Sie von Mitte zu Punkt B.
Obwohl Sie wahrscheinlich nicht diese lange (noch spärliche) Erklärung von brauchten Kubik-Bezier ()
An diesem Punkt glaube ich, dass Sie diese Funktion besser verstehen können. Nun, wo kommt der Absprung in all dem her??
5. Hinzufügen des Bounce-Effekts mit Cubic-Bezier ()
Das Schlüsselparameter für den Bounce-Effekt sind die Entfernungen, d1
und d2
. EIN d1
Wert von weniger als 1 nimmt die Box hinter Punkt A bevor Sie zu Beginn der Animation in Richtung B fortfahren.
EIN d2
Wert von mehr als 1 nimmt die Box jenseits von Punkt B bevor Sie sich am Ende der Animation in B wieder ausruhen. Daher der hin und her springende Effekt.
Ich füge jetzt das hinzu Kubik-Bezier ()
Werte direkt zu unserer Demo anstelle der ehemaligen linear
Wert des Übergang
Eigenschaft, und lassen Sie sich die Ergebnisse sehen.
#pinStarCenterChkBox: markiert ~ .pinStarLeaf Übergang: transformiere 1s Cubic-Bezier (.8, -. 5, .2,1.4);
Hier ist das Endergebnis, eine reine CSS-Fan-Out-Animation mit Bounce-Effekt:
Zum Vergleich und um den Bounce-Effekt besser zu verstehen, hier wie Kubik-Bezier ()
Der Wert der Animation verhält sich, wenn er auf unser Beispielfeld angewendet wird: