CSS3-Animation - Erstellen eines Fan-Outs mit Bounce-Effekt mithilfe einer Bezier-Kurve

Wussten Sie das? geometrische Transformationen HTML-Elementen hinzugefügt mit verwandelnCSS-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: