Γεννήτρια CSS Cubic-Bezier

Τι είναι αυτό το εργαλείο;

Το cubic-bezier() είναι μια συνάρτηση χρονισμού CSS που ελέγχει πώς μια κινούμενη ή μεταβατική τιμή επιταχύνει και επιβραδύνει με τον χρόνο, αντί να κινείται με σταθερό ρυθμό. Ορίζεται από δύο σημεία ελέγχου — (x1, y1) και (x2, y2) — που κάμπτουν μια καμπύλη μεταξύ ενός σταθερού σημείου εκκίνησης (0,0) και σημείου τέλους (1,1). Οι τιμές x πρέπει να παραμένουν μεταξύ 0 και 1, αλλά οι τιμές y μπορούν να ξεπερνούν αυτό το εύρος για να δημιουργήσουν εφέ υπερπήδησης ή αναπήδησης.

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

Πηγή: CSS Easing Functions Level 1, W3C — η προδιαγραφή που ορίζει το cubic-bezier() και τις πέντε ονομαστικές λέξεις-κλειδιά στις οποίες βασίζονται τα προκαθορισμένα αυτού του εργαλείου.

Γιατί να το χρησιμοποιήσετε;

• Ζωντανό γράφημα SVG δείχνει ακριβώς πώς κάμπτεται η καμπύλη σας μεταξύ των σταθερών σημείων εκκίνησης και τέλους, με και τα δύο σημεία ελέγχου και τις λαβές τους σχεδιασμένες για σαφήνεια.
• Το κουμπί αναπαραγωγής κάνει κινούμενη εικόνα ενός στοιχείου προεπισκόπησης σε μια διαδρομή χρησιμοποιώντας την ακριβή καμπύλη σας, ώστε να αισθανθείτε την κίνηση, όχι μόνο να δείτε ένα στατικό γράφημα.
• Προκαθορισμένα με ένα κλικ για τις πέντε τυπικές ονομαστικές συναρτήσεις εξομάλυνσης — ease, ease-in, ease-out, ease-in-out και linear — όπως τεκμηριώνονται στην προδιαγραφή CSS Easing Functions.
• Οι τιμές Y μπορούν να πάνε κάτω από 0 ή πάνω από 1, επιτρέποντάς σας να χτίσετε εφέ εξομάλυνσης τύπου υπερπήδησης/αναπήδησης που οι ονομαστικές λέξεις-κλειδιά δεν μπορούν να παράγουν.
• Παράγει CSS transition-timing-function έτοιμο προς επικόλληση — η ίδια τιμή λειτουργεί επίσης για animation-timing-function.
• Τρέχει εξ ολοκλήρου στον περιηγητή σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά. Δωρεάν, χωρίς εγγραφή.

Πώς χρησιμοποιείται

1. Σύρετε τους ολισθητές x1/y1 για να ορίσετε το πρώτο σημείο ελέγχου, που διαμορφώνει πώς ξεκινά η κινούμενη εικόνα.
2. Σύρετε τους ολισθητές x2/y2 για να ορίσετε το δεύτερο σημείο ελέγχου, που διαμορφώνει πώς τελειώνει η κινούμενη εικόνα.
3. Παρακολουθήστε τη μαύρη καμπύλη στο γράφημα — μια καμπύλη που φουσκώνει πάνω από τη διαγώνιο νωρίς σημαίνει ότι η κίνηση ξεκινά γρήγορα, μια που παραμένει κάτω από αυτήν σημαίνει ότι η κίνηση ξεκινά αργά.
4. Κάντε κλικ στο Play για να δείτε ένα στοιχείο προεπισκόπησης να κινείται σε μια διαδρομή χρησιμοποιώντας την καμπύλη σας ως transition-timing-function.
5. Δοκιμάστε ένα προκαθορισμένο (ease, ease-in, ease-out, ease-in-out, linear) ως σημείο εκκίνησης, και μετά μετακινήστε τους ολισθητές από εκεί.
6. Αντιγράψτε το παραγόμενο CSS και επικολλήστε το σε κανόνα transition ή animation.

Παράδειγμα

Είσοδος

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Έξοδος

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Αυτή είναι η τυπική λέξη-κλειδί ease της CSS γραμμένη ως ρητά σημεία ελέγχου — γρήγορη εκκίνηση, απότομη επιτάχυνση, μετά σταδιακή επιβράδυνση προς το τέλος.

Γιατί οι τιμές y μπορούν να ξεπεράσουν το 0–1

Σε αντίθεση με τον άξονα x, που αντιπροσωπεύει τον χρόνο και πρέπει να τρέχει από 0 έως 1, ο άξονας y αντιπροσωπεύει την πρόοδο της κινούμενης τιμής και δεν έχει τέτοιο όριο. Ορίζοντας το y1 κάτω από 0 ή το y2 πάνω από 1 κάνει την καμπύλη να βυθίζεται πέρα από την αρχική τιμή ή να ξεπερνά την τελική τιμή πριν σταθεροποιηθεί — η βάση των εφέ υπερπήδησης και προσδοκίας που χρησιμοποιούνται σε πατήματα κουμπιών, εμφανίσεις modal και παιχνιδιάρικες μικρο-αλληλεπιδράσεις UI. Καμία από τις πέντε ονομαστικές λέξεις-κλειδιά (ease, ease-in, ease-out, ease-in-out, linear) δεν μπορεί να το παραγάγει αυτό· χρειάζεστε προσαρμοσμένο cubic-bezier() για αυτό.

transition-timing-function έναντι animation-timing-function

Η τιμή cubic-bezier() που παράγει αυτό το εργαλείο λειτουργεί πανομοιότυπα και στις δύο ιδιότητες. Χρησιμοποιήστε transition-timing-function όταν η κίνηση ενεργοποιείται από αλλαγή κατάστασης (όπως ένα hover ή εναλλαγή κλάσης), και animation-timing-function μέσα σε κανόνα κινούμενης εικόνας οδηγούμενο από @keyframes όταν χρειάζεστε το ίδιο αίσθημα εξομάλυνσης εφαρμοσμένο αυτόματα ή σε βρόχο.

Συνηθισμένα μοτίβα εξομάλυνσης

• Σβέλτη ανατροφοδότηση UI (κουμπιά, διακόπτες): κρατήστε τα σημεία ελέγχου κοντά στη διαγώνιο με ελαφριά τάση ease-out, π.χ. cubic-bezier(0.4, 0, 0.2, 1).
• Η τυπική καμπύλη του Material Design: cubic-bezier(0.4, 0, 0.2, 1) — γρήγορη εκκίνηση, ήπιο τέλος, ευρέως χρησιμοποιούμενη για μεταβάσεις πάνελ και καρτών.
• Αναπήδηση/υπερπήδηση: σπρώξτε το y2 πάνω από 1, π.χ. cubic-bezier(0.34, 1.56, 0.64, 1), για παιχνιδιάρικο αίσθημα εμφάνισης.
• Προσδοκία πριν την κίνηση: σπρώξτε το y1 κάτω από 0 ώστε το στοιχείο να τραβιέται ελαφρώς προς τα πίσω πριν κινηθεί εμπρός.
• Ομαλή ease-in-out για επαναλαμβανόμενες κινούμενες εικόνες: κρατήστε την καμπύλη κοντά σε συμμετρική γύρω από το κέντρο.

Συνδυασμός με άλλα εργαλεία CSS

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

→ Δημιουργός Box Shadow · Δημιουργός Border Radius

Συχνές ερωτήσεις