Επεξεργαστής Επιτάχυνσης Cubic-Bézier

Όλα τα εργαλεία

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

Επεξεργαστής καμπύλης
1 2 0 1 0 1 Χρόνος Πρόοδος

Σύρετε τις δύο λαβές για να διαμορφώσετε την καμπύλη επιτάχυνσης.

Προεπισκόπηση κίνησης
Με επιτάχυνση
Γραμμική
Γέμισμα
1.2s
Σημεία ελέγχου
Σημείο 1
Σημείο 2
Προεπιλογές
Τιμή
cubic-bezier(0, 0, 1, 1)
Έξοδος CSS
transition-timing-function: —; animation-timing-function: —;

Όλα εκτελούνται στο πρόγραμμα περιήγησής σας — τίποτα δεν μεταφορτώνεται.

Σχετικά με το Επεξεργαστής Επιτάχυνσης Cubic-Bézier

Ο Cubic-Bézier Easing Editor σχεδιάζει προσαρμοσμένες συναρτήσεις χρονισμού για μεταβάσεις και κινούμενα σχέδια CSS. Σύρετε τις δύο λαβές ελέγχου στον καμβά καμπύλης και η τιμή cubic-bezier(x1, y1, x2, y2) ενημερώνεται ζωντανά· μια προεπισκόπηση κινούμενου σχεδίου αναπαράγει το easing δίπλα σε μια γραμμική αναφορά ώστε να νιώσετε τη διαφορά, με ρυθμιζόμενη διάρκεια και άμεση επανάληψη.

Δέκα προεπιλογές καλύπτουν το κοινό λεξιλόγιο — το τυπικό ease, ease-in, ease-out και ease-in-out, καθώς και εκφραστικές καμπύλες όπως back και anticipate που ξεπερνούν τα σημεία τερματισμού τους, και ράμπες επιτάχυνσης και επιβράδυνσης σε στιλ material. Χρησιμοποιήστε τες ως έχουν ή ως σημεία εκκίνησης για να τις σύρετε σε κάτι δικό σας.

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

Πώς να χρησιμοποιήσετε το Επεξεργαστής Επιτάχυνσης Cubic-Bézier

  1. Σύρετε τις δύο λαβές στον επεξεργαστή καμπύλης για να διαμορφώσετε το easing.
  2. Κάντε κλικ στο Replay και συγκρίνετε το κινούμενο σχέδιο με easing έναντι της γραμμικής αναφοράς, προσαρμόζοντας τη διάρκεια αν χρειάζεται.
  3. Δοκιμάστε τις προεπιλογές — ease, back, anticipate, material και άλλα — για ένα γρήγορο σημείο εκκίνησης.
  4. Ρυθμίστε με ακρίβεια με τις αριθμητικές εισόδους σημείων ελέγχου για ακριβείς τιμές.
  5. Αντιγράψτε την τιμή cubic-bezier() ή το πλήρες απόσπασμα CSS.

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

Είναι οι συντεταγμένες των δύο σημείων ελέγχου: x1, y1, x2, y2. Ο άξονας x είναι ο χρόνος (0 έως 1) και ο άξονας y είναι η πρόοδος του κινούμενου σχεδίου. Σημεία τραβηγμένα ψηλά νωρίς κάνουν την κίνηση να ξεκινά γρήγορα· τραβηγμένα χαμηλά, ξεκινά αργά.

Οι τιμές y μπορούν. Ένα y πάνω από 1 κάνει το κινούμενο σχέδιο να ξεπερνά τον στόχο του και να επανέρχεται — οι προεπιλογές "back" και "anticipate" κάνουν ακριβώς αυτό. Οι τιμές x πρέπει να παραμένουν μεταξύ 0 και 1, επειδή ο χρόνος δεν μπορεί να τρέξει προς τα πίσω.

Σε οποιοδήποτε transition-timing-function ή animation-timing-function CSS, και στην επιλογή easing του Web Animations API. Αντικαθιστά λέξεις-κλειδιά όπως το ease-in-out με μια καμπύλη προσαρμοσμένη στη διεπαφή σας.

Χρησιμοποιήστε το ease-out (γρήγορη εκκίνηση, ήπιο σταμάτημα) για στοιχεία που μπαίνουν στην οθόνη ή ανταποκρίνονται σε είσοδο — νιώθει άμεσο. Χρησιμοποιήστε το ease-in για στοιχεία που φεύγουν από την οθόνη. Το ease-in-out ταιριάζει σε κινήσεις όπου και τα δύο άκρα είναι ορατά.

Ναι, είναι δωρεάν χωρίς να απαιτείται λογαριασμός, και εκτελείται εντελώς στον browser σας — τίποτα από όσα σχεδιάζετε δεν ανεβαίνει.
Κοινοποίηση
Σχετικά Εργαλεία
Δημιουργός Υπογραφής Email Σχεδιάστε μια επαγγελματική υπογραφή email HTML από 30 πρότυπα, προσαρμόστε την και αποθηκεύστε την. Δωρεάν
Εικονίδιο σε PNG Μετατρέψτε Bootstrap Icons, Font Awesome και άλλα σε προσαρμοσμένες PNG εικόνες — δωρεάν, στον περιηγητή σας. Δωρεάν
Δημιουργός εικονιδίων εφαρμογών Δημιουργήστε ένα πλήρες, έτοιμο για δημοσίευση σετ εικονιδίων εφαρμογής για το App Store και το Google Play — εξαιρετικά φόντα διαβάθμισης, mesh και μοτίβων, φτιαγμένα από το λογότυπό σας. Δωρεάν
Δημιουργός Favicon Δημιουργήστε ένα πλήρες πακέτο favicon από ένα λογότυπο, ένα εικονίδιο γραμματοσειράς ή ένα μονόγραμμα — favicon.ico, σύγχρονα PNG, εικονίδιο Apple touch, εικονίδια PWA, manifest ιστού και απόσπασμα HTML. Δωρεάν
Γεννήτρια CSS Box Shadow Δημιουργήστε CSS box-shadows πολλαπλών επιπέδων με ζωντανούς ολισθητές για offset, blur, spread, χρώμα, αδιαφάνεια και inset — κάντε προεπισκόπηση σε πραγματικό στοιχείο και αντιγράψτε έτοιμο CSS άμεσα. Δωρεάν
Γεννήτρια CSS Border Radius Σχεδιάστε οπτικά το CSS border-radius με ζωντανή προεπισκόπηση και αντιγράψτε έτοιμο για παραγωγή κώδικα. Δωρεάν
Δημοφιλείς αναζητήσεις
επεξεργαστής επιτάχυνσης cubic bezier γεννήτρια cubic-bezier css γεννήτρια συνάρτησης επιτάχυνσης css συνάρτηση χρονισμού transition css επεξεργαστής καμπύλης επιτάχυνσης κίνησης προσαρμοσμένη καμπύλη bezier css ease-in-out cubic bezier
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.