Κύρια σημεία
- 01Σύρτε τις δύο λαβές σημείου ελέγχου για να σχεδιάσετε την καμπύλη διευκόλυνσης οπτικά αντί να μαντέψετε αριθμητικές τιμές.
- 02Μια ζωντανή κινούμενη σχήμα μπάλας παίζει πίσω τον χρόνο έτσι ώστε να μπορείτε να αισθανθείτε την κίνηση πριν δεσμευθείτε σε αυτήν.
- 03Όλες τις πέντε CSS ενσωματωμένες προεπιλογές (ease, linear, ease-in, ease-out, ease-in-out) είναι διαθέσιμες ως σημεία εκκίνησης.
- 04Η τιμή cubic-bezier() ενημερώνεται ζωντανά με δυο-δεκαδικό ακρίβειας, έτοιμη να επικολληθεί σε κάθε CSS ιδιοκτησία.
Γιατί Προσαρμοσμένες Καμπύλες Διευκόλυνσης Σημαίνει για UI Motion
Οι ενσωματωμένες λειτουργίες χρόνου CSS — ease, ease-in-out, linear — καλύπτουν πολύ έδαφος, αλλά κάθε UI έχει στιγμές όπου η προεπιλογή αισθάνεται ελαφρώς λάθος. Μια λεζάντα που εμφανίζεται πολύ γρήγορα, ένα modal που υπερβαίνει σε ανοίγματι, μια γραμμή προόδου που αισθάνεται μηχανική. Οι καμπύλες Cubic-bezier σας επιτρέπουν να λαμβάνετε κίνηση για να αισθανθούν φυσικό αντί μηχανικό, αλλά οι τέσσερις αριθμοί σε cubic-bezier(0.4, 0, 0.2, 1) είναι σχεδόν αδύνατο να λογιστούν για ευθέως.
Ο cubic-bezier editor της Handytool μετατρέπει αυτούς τους αριθμούς σε μια οπτική καμπύλη με δύο σύρσιμο λαβές. Μετακινήστε μια λαβή και η κινούμενη σχήμα μπάλας παίζει πίσω αμέσως, έτσι μπορείτε να επαναλαμβάνετε μέχρι η κίνηση να ταιριάζει τη σκοπό σας. Στη συνέχεια αντιγράψτε την τιμή και ρίξτε την στο CSS σας — έγινε.
Πώς να Σχεδιάσετε ένα CSS Easing Curve
- 01
Ξεκινήστε από μια προεπιλογή
Επιλέξτε ease, linear, ease-in, ease-out ή ease-in-out ως βάση. Οι λαβές σταματούν στις σωστές θέσεις για κάθε προεπιλογή.
- 02
Σύρτε τις λαβές σημείου ελέγχου
Κάθε λαβή ελέγχει ένα άκρο της καμπύλης — η λαβή εκκίνησης σχεδιάζει την αρχική επιτάχυνση, η λαβή τέλους σχεδιάζει τη τελική αποκατάσταση. Μετακίνηση ενός χεριού τετραγώνου μεταχέρισης αυτόματα.
- 03
Παρακολουθήστε την κινούμενη σχήμα μπάλας
Μια μπάλα κινείται από αριστερά προς δεξιά χρησιμοποιώντας την καμπύλη σας. Προσαρμόστε τον ρυθμό διάρκειας για προεπισκοπή αργών έναντι γρήγορων μεταβάσεων.
- 04
Πειράματα με overshoot
Σύρτε μια λαβή Y-axis πάνω από 1 ή κάτω από 0 για να δημιουργήσετε overshoot και undershoot — το αποτέλεσμα «bouncy» που κάνει ένα menu snap open energetically.
- 05
Αντιγράψτε την τιμή CSS
Κάντε κλικ Αντιγραφή για να λάβετε την κορδέλα cubic-bezier() και επικολλήστε την σε transition-timing-function ή animation-timing-function στο φύλλο στυλ σας.
Τρέχει Εξ Ολοκλήρου στο Φυλλομετρητή σας
Ο editor είναι ένα ένα-περιεχόμενο εργαλείο φυλλομετρητή — χωρίς γραμμές, χωρίς δοσολογίες και δεν φορτώνονται δεδομένα μετά το άνοιγμα της σελίδας. Σύρεση λαβών και κινούμενες σχήμα κινήσεων λειτουργεί offline. Ο cubic-bezier τύπος που χρησιμοποιείται για την προεπισκοπία μπάλας είναι το ίδιο που χρησιμοποιούν οι φυλλομετρητές για CSS μεταβάσεις, έτσι αυτό που βλέπετε στο editor είναι ακριβώς αυτό που θα παράγει το φύλλο στυλ σας.
Δεν υπάρχει τίποτα για εγκατάσταση και τίποτα για εγγραφή. Η έξοδος είναι μια ενιαία τιμή CSS — επικολλήστε την και τελειώσατε.
Cubic-Bezier Editor FAQ
Τι είναι μια cubic-bezier καμπύλη διευκόλυνσης;
Είναι μια μαθηματική καμπύλη που ορίζεται από δύο σημεία ελέγχου που προσδιορίζουν πώς μια CSS μετάβαση ή κινούμενη σχήμα επιταχύνεται με το χρόνο. Οι τέσσερις αριθμοί σε cubic-bezier(x1, y1, x2, y2) ορίζουν τις θέσεις αυτών των σημείων ελέγχου.
Γιατί μπορούν οι τιμές Y να φύγουν πάνω από 1 ή κάτω από 0;
Οι τιμές Y έξω από 0–1 παράγουν overshoot και undershoot — η καμπύλη πηγαίνει πέρα από το τέλος της πριν ταξινόμηση. Αυτό δημιουργεί κινούμενες σχήμα 'bouncy'. Οι τιμές X πρέπει να παραμείνουν σε 0–1.
Πώς χρησιμοποιώ την έξοδο;
Αντιγράψτε την κορδέλα cubic-bezier(...) και επικολλήστε την σε κάθε τιμή CSS transition-timing-function ή animation-timing-function. Λειτουργεί σε κάθε σύγχρονο φυλλομετρητή.
Τι σημαίνει το ease-in-out;
Ease-in-out ξεκινά αργά, επιταχύνει στη μέση και επιβραδύνει στο τέλος — cubic-bezier(0.42, 0, 0.58, 1). Δείχνει πώς αληθινά αντικείμενα επιταχύνουν και αποκατασκευάζουν και είναι η προεπιλογή επιλογή για τα περισσότερα γλυκά UI κινούμενα σχήματα.
Είναι η προεπισκοπία μπάλας κινούμενη σχήμα ακριβής στο CSS;
Ναι — η προεπισκοπία χρησιμοποιεί τον ίδιο cubic bezier τύπο που εφαρμόζουν οι φυλλομετρητές σε CSS μεταβάσεις. Ο ρυθμός διάρκειας σας αφήνει να αισθάνεστε αργό έναντι γρήγορων καμπυλών πριν δεσμευθείτε.