Utilia
Κατηγορίες ▾
Γλώσσα: el ▾

Επεξεργαστής Cubic-Bezier

Σχεδιάστε καμπύλες easing CSS με επεξεργαστή cubic-bezier, συγκρίνετέ τες με το linear σε ζωντανή κίνηση και αντιγράψτε τον κώδικα.

Σύρετε τις δύο λαβές (P1 και P2). Ο χρόνος τρέχει από αριστερά προς τα δεξιά, η πρόοδος από κάτω προς τα πάνω· οι λαβές μπορούν να ανέβουν πάνω από το 1 ή να κατέβουν κάτω από το 0 για εφέ αναπήδησης. Με επιλεγμένη λαβή, χρησιμοποιήστε τα βελάκια (με Shift ανά 0,1).

Σημεία ελέγχου

Προεπισκόπηση κίνησης

Η καμπύλη σας
linear

Η ίδια καμπύλη δειγματοληπτημένη ως easing CSS linear() (Chrome 113+, Firefox 112+, Safari 17.2+). Περισσότερα σημεία ακολουθούν πιο πιστά την καμπύλη.

Πώς να χρησιμοποιήσετε τον επεξεργαστή cubic-bezier

  1. Σύρετε τις δύο λαβές στο γράφημα. Το P1 (το πρώτο σημείο ελέγχου) διαμορφώνει την αρχή της κίνησης, το P2 το τέλος. Ο χρόνος τρέχει από αριστερά προς τα δεξιά και η πρόοδος από κάτω προς τα πάνω.
  2. Ή πληκτρολογήστε μια τιμή στο Τιμή cubic-bezier(): ένα πλήρες cubic-bezier(0.4, 0, 0.2, 1), τέσσερις αριθμούς ή μια λέξη-κλειδί όπως ease-in-out. Τα πεδία x1, y1, x2 και y2 επεξεργάζονται μία συντεταγμένη κάθε φορά.
  3. Ξεκινήστε από το μενού Προεπιλογές (λέξεις-κλειδιά CSS, οι οικογένειες από sine έως back και οι καμπύλες Material Design) ή από τα κουμπιά των λέξεων-κλειδιών. Όταν η καμπύλη σας ταιριάζει με μια προεπιλογή, το όνομά της εμφανίζεται δίπλα στα κουμπιά.
  4. Παρακολουθήστε την Προεπισκόπηση κίνησης: η τελεία στην Η καμπύλη σας και η τελεία στο linear διανύουν την ίδια απόσταση στην ίδια Διάρκεια. Χρησιμοποιήστε Παύση/Αναπαραγωγή και Επανεκκίνηση για να τις συγκρίνετε.
  5. Αντιγράψτε το αποτέλεσμα από τη Συνάρτηση χρονισμού CSS ή αντιγράψτε την Προσέγγιση linear() και επιλέξτε τον αριθμό των Τμήματα.

Πληκτρολόγιο: επιλέξτε μια λαβή και χρησιμοποιήστε τα βελάκια για να τη μετακινήσετε κατά 0,01 ή κατά 0,1 με Shift.

Αν το σύστημά σας έχει ρυθμιστεί για μειωμένη κίνηση, η κίνηση ξεκινά σε παύση. Πατήστε Αναπαραγωγή αν θέλετε να εκτελεστεί παρ’ όλα αυτά.

Τι σημαίνει το cubic-bezier()

Μια συνάρτηση easing του CSS αντιστοιχίζει τον χρόνο που έχει περάσει σε μια μετάβαση (0 έως 1) στην πρόοδό της (0 έως 1). Το cubic-bezier(x1, y1, x2, y2) περιγράφει αυτή την αντιστοίχιση με μια κυβική καμπύλη Bézier που ξεκινά από το (0, 0), καταλήγει στο (1, 1) και τραβιέται από δύο σημεία ελέγχου, P1 = (x1, y1) και P2 = (x2, y2).

  • Οι τιμές x είναι χρόνοι και πρέπει να μένουν ανάμεσα στο 0 και στο 1, αλλιώς η συνάρτηση δεν θα ήταν έγκυρη καμπύλη χρονισμού. Ο επεξεργαστής τις κρατά εντός ορίων.
  • Οι τιμές y είναι πρόοδος και μπορούν να πέσουν κάτω από το 0 ή να ανέβουν πάνω από το 1. Ένα y πάνω από το 1 κάνει την κίνηση να ξεπεράσει τον στόχο της και να γυρίσει πίσω, όπως οι καμπύλες Back· κάτω από το 0, η κίνηση πρώτα πηγαίνει προς τα πίσω.
  • Μια απότομη κλίση σημαίνει γρήγορη κίνηση, μια επίπεδη κλίση αργή κίνηση. Το ease-out ξεκινά γρήγορα και τελειώνει αργά, κάτι που φαίνεται φυσικό για στοιχεία που μπαίνουν στην οθόνη. Το ease-in κάνει το αντίθετο και ταιριάζει σε στοιχεία που φεύγουν.

Οι λέξεις-κλειδιά του CSS είναι συντομεύσεις: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) και linear = (0, 0, 1, 1).

Η προσέγγιση linear()

Η νεότερη συνάρτηση linear() απαριθμεί τιμές προόδου σε ισαπέχοντες χρόνους, για παράδειγμα linear(0, 0.25, 0.5, 0.75, 1), και τις ενώνει με ευθείες γραμμές. Το εργαλείο παίρνει δείγματα της καμπύλης σας (λύνει την Bézier για κάθε χρονικό βήμα) και γράφει αυτές τις τιμές με τρία δεκαδικά. Με 20 έως 40 τμήματα το αποτέλεσμα είναι οπτικά πανομοιότυπο με την καμπύλη. Το πραγματικό όφελος του linear() αφορά καμπύλες που μια Bézier δεν μπορεί να σχεδιάσει, όπως αναπηδήσεις και ελατήρια, αλλά σας επιτρέπει επίσης να μοιράζεστε μία σύνταξη. Λειτουργεί σε Chrome και Edge 113+, Firefox 112+ και Safari 17.2+, οπότε κρατήστε την τιμή cubic-bezier() ως εναλλακτική.

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

Πού χρησιμοποιώ την τιμή;

Στα transition-timing-function και animation-timing-function ή στη συντομογραφία: transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);. Το Web Animations API τη δέχεται ως easing.

Ποιες διάρκειες είναι καλές;

Οι μικρές αλλαγές διεπαφής διαρκούν συνήθως 150 έως 300 ms· οι μεγάλες κινήσεις στην οθόνη 300 έως 500 ms. Οι μεγαλύτερες κινήσεις γρήγορα φαίνονται αργές.

Γιατί δεν μπορώ να σύρω μια λαβή πέρα από την αριστερή ή τη δεξιά άκρη;

Επειδή το x είναι ο χρόνος και ο χρόνος δεν γυρίζει πίσω: το CSS απορρίπτει τιμές x εκτός του 0–1.

Ποιες καμπύλες χρησιμοποιεί το Material Design;

Η κλασική τυπική καμπύλη είναι η cubic-bezier(0.4, 0, 0.2, 1), με παραλλαγές επιβράδυνσης, επιτάχυνσης και απότομης κίνησης. Το Material 3 προσθέτει τις καμπύλες έμφασης· όλες βρίσκονται στο μενού Προεπιλογές.

Πώς να χειριστώ τη μειωμένη κίνηση;

Σεβαστείτε το @media (prefers-reduced-motion: reduce) στο CSS σας: συντομεύστε ή αφαιρέστε τις μεγάλες κινήσεις και κρατήστε απλά fade.

Σχετικά εργαλεία