CSS3 Animation - Δημιουργία ενός Fan-Out με Effect Bounce χρησιμοποιώντας Bezier Curve

Ξέρατε ότι γεωμετρικοί μετασχηματισμοί προστέθηκε σε στοιχεία HTML με το μεταμορφώνωΗ ιδιότητα CSS, όπως η κλίμακα, η κλίση και η περιστροφή, μπορούν να κινούνται? Μπορούν να κινούνται χρησιμοποιώντας το μετάβαση ιδιοκτησία και @keyframes κινούμενα σχέδια, αλλά αυτό που είναι ακόμη πιο δροσερό είναι ότι οι κινούμενοι μετασχηματισμοί μπορούν να πάρουν μια εγκοπή με την προσθήκη λίγο αναπήδηση, χρησιμοποιώντας το cubic-bezier () λειτουργία χρονισμού.

Με λίγα λόγια, cubic-bezier () (στο CSS) είναι a λειτουργία χρονισμού για μεταβάσεις. Καθορίζει την ταχύτητα της μετάβασης και, μεταξύ άλλων, μπορεί επίσης να χρησιμοποιηθεί δημιουργούν αναπήδηση σε κινούμενα σχέδια.

Σε αυτή τη θέση, πρώτα θα πάμε δημιουργήστε ένα απλό animation μετασχηματισμού στην οποία αργότερα πρόσθεσε ένα cubic-bezier () λειτουργία χρονισμού. Στο τέλος αυτού του σεμιναρίου, θα καταλάβετε πώς να δημιουργήσετε μια κινούμενη εικόνα που χρησιμοποιεί τόσο ένα fan-out και ένα εφέ αναπήδησης. Εδώ είναι το τελικό αποτέλεσμα (κάντε κλικ για να δείτε αποτέλεσμα).

Το demo είναι εμπνευσμένο από αυτό το όμορφο Dribbble πυροβόλησε ο Christopher Jones για έναν κινούμενο δείκτη τοποθεσίας.

1. Δημιουργία των φύλλων

Το σχήμα του δείκτη τοποθεσίας αποτελείται από πέντε φύλλα (ας τα ονομάσουμε). Για να δημιουργήσετε το οβαλ σχημα ενός φύλλου, ας χρησιμοποιήσουμε το ακτίνα ακρόασης Ιδιότητα CSS. ο ακτίνα ακρόασης από μια μόνο γωνία είναι αποτελούμενη από δύο ακτίνες, οριζόντια και κάθετη, όπως φαίνεται παρακάτω.

ο ακτίνα ακρόασης η ιδιοκτησία έχει πολλές διαφορετικές συνταγές. Θα χρησιμοποιήσουμε ένα πιο περίπλοκο για το σχήμα του δείκτη:

 ακτίνα-πλαισίου: htl htr hbr hbl / ντλ vtr vbr vbl. 

Σε αυτή τη σύνταξη, οι οριζόντιες και κάθετες ακτίνες ομαδοποιούνται. h & & v αντιπροσωπεύουν οριζόντια και κάθετη ακτίνα, και t, μεγάλο, σι & & r αντιπροσωπεύουν τις κορυφαίες, τις αριστερές, τις κάτω και τις δεξιά γωνίες. Για παράδειγμα, vbl αντιπροσωπεύει την κατακόρυφη ακτίνα της κάτω αριστεράς γωνίας.

Αν δώσετε μόνο μία τιμή για την οριζόντια ή την κάθετη πλευρά, η τιμή αυτή θα αντιγραφεί σε όλες τις άλλες οριζόντιες ή κάθετες ακτίνες από το πρόγραμμα περιήγησης.

Προς το δημιουργήστε ένα κατακόρυφο ωοειδές σχήμα, κρατήστε την οριζόντια ακτίνα στο 50% για όλες τις γωνίες και ρυθμίστε τις κάθετες, μέχρι να εμφανιστεί το επιθυμητό σχήμα. ο οριζόντια πλευρά θα χρησιμοποιήσει μόνο μία τιμή: 50%.

ο κατακόρυφες ακτίνες των άνω και αριστερά γωνιών θα είναι 30%, ενώ οι κάτω γωνίες κάτω και κάτω δεξιά θα χρησιμοποιήσουν το 70% αξία.

HTML

CSS

.pinStarLeaf πλάτος: 60px; ύψος: 120px; ακραία ακτίνα: 50% / 30% 30% 70% 70%. φόντο-χρώμα: # B8F0F5; 

2. Πολλαπλασιασμός των φύλλων

Δεδομένου ότι ο δείκτης θα ανεμιστήρα έξω που δείχνει πέντε φύλλα, δημιουργούμε τέσσερα περισσότερα αντίγραφα του φύλλου σε διαφορετικά χρώματα και με απόλυτη τοποθέτηση για να στοιβάζονται μεταξύ τους.

HTML

CSS

#pinStarWrapper πλάτος: 300px; ύψος: 300px; θέση: σχετική.  .pinStarLeaf πλάτος: 60px; ύψος: 120px; θέση: απόλυτη; ακραία ακτίνα: 50% / 30% 30% 70% 70%. αριστερά: 0; δεξιά: 0; αρχή: 0; κάτω: 0; περιθώριο: αυτόματη; αδιαφάνεια: .5;  .pinStarLeaf: nth-of-type (1) χρώμα-φόντου: # B8F0F5; . pinStarLeaf: nth-of-type (2) χρώμα φόντου: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) χρώμα φόντου: # 94F3B0;  .pinStarLeaf: nth-of-type (4) χρώμα-φόντου: # D2F8A1;  .pinStarLeaf: nth-of-type (5) χρώμα-φόντου: # F3EDA2;  

3. Συλλογή Συμβάντων Click & Βελτίωση Αισθητικής

Ας είναι προσθέστε ένα πλαίσιο ελέγχου με το #pinStarCenterChkBox αναγνωριστικό για την καταγραφή του συμβάντος κλικ. Όταν το πλαίσιο ελέγχου είναι επιλεγμένο, τα φύλλα θα εκτοξευθούν (περιστρέφονται). Πρέπει επίσης να προσθέσουμε ένα λευκό κύκλο με το #pinStarCenter αναγνωριστικό για την αισθητική. Θα τοποθετηθεί πάνω από το δείκτη και θα είναι το κεντρικό κομμάτι του δείκτη θέσης.

HTML

Τοποθετούμε το πλαίσιο ελέγχου πριν και τον άσπρο κύκλο μετά τα φύλλα:

CSS

Αρχικά, ορίσαμε τα βασικά στυλ για το πλαίσιο ελέγχου και τον κύκλο κάλυψης:

 #pinStarCenter, #pinStarCenterChkBox πλάτος: 45px; ύψος: 50px; θέση: απόλυτη; αριστερά: 0; δεξιά: 0; κορυφή: -60px; κάτω: 0; περιθώριο: αυτόματη; χρώμα φόντου: #fff; ακτίνα ακτίνας: 50%. δρομέας: δείκτης;  #pinStarCenter, .pinStarLeaf δείκτης-συμβάντα: κανένα.  #pinStarCenter> εισαγωγή [type = "πλαίσιο ελέγχου"] πλάτος: 100%; ύψος: 100%. δρομέας: δείκτης;  

Καθώς κάθε φύλλο θα περιστραφεί κατά μήκος του άξονα z σε διαφορετικές γωνίες, πρέπει να ρυθμίσουμε το μετασχηματισμός: rotatez (); ιδιοκτησίας αναλόγως, προς δημιουργήστε ένα σχήμα αστεριών. Εφαρμόζουμε επίσης το μετάβαση ιδιοκτησία για το αποτέλεσμα περιστροφής (πιο συγκεκριμένα χρησιμοποιούμε το μετάβαση: μετασχηματισμός 1s γραμμική κανόνας για τα φύλλα).

 #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf μετάβαση: μετασχηματισμός 1s γραμμική;  #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf: nth-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf: nth-of-type (4) μετασχηματισμός: rotatez (105deg);  #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf: nth-of-type (3) μετασχηματισμός: rotatez (180deg);  #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf: nth-of-type (2) μετασχηματισμός: rotatez (255deg);  #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf: nth-of-type (1) μετασχηματισμός: rotatez (325deg);  

Αν έχετε δει το CSS παραπάνω, μπορείτε να δείτε από την παρουσία του #pinStarCenterChkBox: ελέγχεται ~ γενικός επιλογέας αδερφού που προσθέτουμε μόνο μετάβαση και μεταμορφώνω ιδιότητες όταν το πλαίσιο ελέγχου είναι επιλεγμένο (όταν ο χρήστης έκανε κλικ στον δείκτη).

4. Τροποποίηση του κέντρου περιστροφής

Από προεπιλογή, το κέντρο της περιστροφής είναι τοποθετημένο στο κέντρο του περιστρεφόμενου στοιχείου, στην περίπτωσή μας, στο κέντρο των φύλλων. Πρέπει να μετακινήσουμε το κέντρο του μετασχηματισμού στο εσωτερικό άκρο των φύλλων. Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας το μετασχηματισμού-προέλευσης CSS ιδιότητα ότι αλλάζει τη θέση των μετασχηματισμένων στοιχείων.

Για να λειτουργήσει σωστά η λειτουργία περιστροφής, προσθέστε τους δύο ακόλουθους κανόνες στο .pinStarLeaf επιλογέα στο αρχείο CSS:

 .pinStarLeaf μετασχηματισμός-προέλευση: 30px 30px; μετάβαση: μετασχηματισμός 1s γραμμική?  

Ας δούμε το fan animation σε δράση - σε αυτό το σημείο, χωρίς την επίδραση αναπήδησης ακόμα. Κάντε κλικ στον άσπρο κύκλο, στην κορυφή του δείκτη.

Κατανόηση του τρόπου λειτουργίας του ubic-Bezier ()

Τώρα, για να προσθέσετε το εφέ αναπήδησης, πρέπει να αντικαταστήσουμε το γραμμικός λειτουργία χρονισμού με cubic-bezier () στο μετάβαση δηλώσεις στο αρχείο CSS.

Αλλά πρώτα, ας καταλάβουμε το λογική πίσω από το cubic-bezier () λειτουργία χρονισμού έτσι ώστε να μπορείτε εύκολα να κατανοήσετε την επίδραση αναπήδησης.

Η σύνταξη για το cubic-bezier () είναι η ακόλουθη, ρε και t είναι απόσταση και χρόνος, και οι τιμές τους τυπικά κυμαίνονται μεταξύ 0 και 1:

κυβικό-bezier (t1, d1, t2, d2)

Παρόλο που εξηγεί το CSS cubic-bezier () από την άποψη της απόστασης και του χρόνου δεν είναι ακριβής, είναι πολύ πιο εύκολο να το καταλάβουμε με αυτόν τον τρόπο.

Υποθέστε ότι υπάρχει ένα κιβώτιο που κινείται από το σημείο Α στο Β σε 6 δευτερόλεπτα. Ας χρησιμοποιήσουμε τα παρακάτω cubic-bezier () λειτουργία χρονισμού για τη μετάβαση με το t1 = 0 και d1 = 1 αξίες.

 / t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / κυβικά-bezier (0,1,0,0) 

Σε ελάχιστο χρόνο, το κουτί μετακινείται από το Α στο μέσο και παίρνει τον υπόλοιπο χρόνο φτάνοντας στο Β.

Ας δοκιμάσουμε την ίδια μετάβαση με τις τιμές t1 = 1 και d1 = 0.

 / t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / κυβικά-bezier (1,0,0,0) 

Για τα πρώτα τρία δευτερόλεπτα, το κουτί δεν κινείται πολύ, και αργότερα σχεδόν μεταβαίνει στο μέσο σημείο και αρχίζει να κινείται σταθερά προς το Β.

Οπως βλέπεις, d1 ελέγχει το απόσταση μεταξύ A & & το μέσο, και t1 ο ο χρόνος που χρειάζεται για να φτάσετε στο μέσο σημείο από το A.

Ας χρησιμοποιήσουμε d2 και t2 τώρα. Και τα δυο t1 και d1 θα είναι 1, και t2 = 1 και d2 = 0.

 / t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / κυβικά-bezier (1,1,0,1) 

Το κιβώτιο κινείται σχεδόν στο μισό σε 3 δευτερόλεπτα (λόγω t1 = 1, d1 = 1) και σε καμία περίπτωση δεν μεταβαίνει στο σημείο Β.

Το τελευταίο παράδειγμα ανταλλάσσει τις προηγούμενες τιμές του t2 και d2:

 / t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / κυβικά-bezier (1,1,1,0) 

Το κιβώτιο κινείται σχεδόν στο μισό σε 3 δευτερόλεπτα (λόγω t1 = 1, d1 = 1), τότε για άλλα 3 δευτερόλεπτα δεν κινείται πολύ πριν πηδήσετε στο σημείο Β.

Αυτά τα παραδείγματα δείχνουν ότι d2 και t2 ελέγχει την απόσταση και το χρόνο που χρειάζεται το κουτί πηγαίνετε από το μέσο σημείο στο σημείο Β.

Παρόλο που πιθανώς δεν χρειάστηκε αυτή η μακρά (αλλά αραιή) εξήγηση cubic-bezier () σε αυτό το σημείο, νομίζω ότι θα σας βοηθήσει να καταλάβετε καλύτερα αυτή τη λειτουργία. Τώρα, πού έρχεται η αναπήδηση σε όλα αυτά?

5. Προσθήκη του αποτελέσματος αναπήδησης με το Cubic-Bezier ()

ο βασικές παραμέτρους για την επίδραση αναπήδησης είναι οι αποστάσεις, d1 και d2. ΕΝΑ d1 αξία του λιγότερο από 1 παίρνει το κουτί πίσω από το σημείο Α πριν προχωρήσετε προς το Β στην αρχή της κινούμενης εικόνας.

ΕΝΑ d2 αξία του περισσότερο από 1 παίρνει το κουτί πέρα από το σημείο Β πριν επιστρέψετε για να ξεκουραστείτε στο Β στο τέλος της κινούμενης εικόνας. Εξ ου και η επίδραση αναπήδησης προς τα εμπρός και πίσω.

Θα προσθέσω τώρα το cubic-bezier () αξίζει άμεσα στο demo μας στη θέση του πρώτου γραμμικός αξία του μετάβαση ιδιοκτησίας και σας δίνουν τη δυνατότητα να δείτε τα αποτελέσματα.

 #pinStarCenterChkBox: ελέγχεται ~ .pinStarLeaf μετάβαση: μετασχηματισμός 1s cubic-bezier (.8, - .5, .2,1.4);  

Εδώ είναι το τελικό αποτέλεσμα, ένα κινούμενο με fan-out CSS κινούμενο με εφέ αναπήδησης:

Για σύγκριση και καλύτερη κατανόηση του αποτελέσματος αναπήδησης, εδώ είναι το πώς cubic-bezier () η αξία της κινούμενης εικόνας συμπεριφέρεται όταν εφαρμοστεί στο παράδειγμά μας: