Πώς δημιουργώ μια προσαρμοσμένη καμπύλη easing cubic-bezier για CSS;

Σύρετε τις δύο λαβές σημείων ελέγχου στο γράφημα, πληκτρολογήστε ακριβείς τιμές x1, y1, x2, y2 ή επιλέξτε μια προεπιλογή. Στη συνέχεια, επιλέξτε CSS στη Μορφή εξόδου και κάντε κλικ στο Αντιγραφή για να λάβετε την τιμή cubic-bezier() για το transition-timing-function.

Πώς φτιάχνω ένα εφέ αναπήδησης ή υπέρβασης με cubic-bezier;

Σύρετε μια λαβή πάνω ή κάτω από το πλαίσιο έτσι ώστε η τιμή Y της να ξεπεράσει το 0-1. Το Y μπορεί να υπερβεί αυτό το εύρος, ενώ το X παραμένει μεταξύ 0 και 1. Οι προεπιλογές back-out και anticipate είναι έτοιμα σημεία εκκίνησης υπέρβασης.

Μπορώ να λάβω το easing για Tailwind, Framer Motion ή anime.js;

Ναι. Οι καρτέλες μορφής εξόδου είναι CSS, Tailwind, Framer Motion και anime.js. Όλες μορφοποιούν τους ίδιους τέσσερις αριθμούς, οπότε επιλέξτε μια καρτέλα και κάντε κλικ στο Αντιγραφή για να βάλετε το απόσπασμα στο πρόχειρό σας.

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

Επικολλήστε μια τιμή όπως cubic-bezier(.17, .67, .83, .67) στο πλαίσιο εισαγωγής και κάντε κλικ στο Φόρτωση. Εάν δεν μπορούν να διαβαστούν τέσσερις αριθμοί, λαμβάνετε ένα μήνυμα σφάλματος. Η καμπύλη αποθηκεύεται επίσης στη διεύθυνση URL της σελίδας μετά το σύμβολο #, ώστε να μπορεί να κοινοποιηθεί.

Γιατί η προεπισκόπηση φαίνεται πιο αργή από τις πραγματικές μου μεταβάσεις;

Η Προεπισκόπηση κίνησης χρησιμοποιεί μια ρύθμιση Διάρκειας που μπορείτε να αλλάξετε και οι προεπιλογές είναι πιο αργές για να μπορείτε να μελετήσετε την καμπύλη. Μειώστε τη Διάρκεια και μετά χρησιμοποιήστε την Επανάληψη για να δείτε την κίνηση στην ταχύτητα που σκοπεύετε να παραδώσετε.

Είναι πραγματικά δωρεάν;

Ναι. Κάθε εργαλείο είναι δωρεάν στη χρήση, χωρίς λογαριασμό και χωρίς πιστωτική κάρτα. Η εργασία εκτελείται στη συσκευή σας και όχι στους διακομιστές μας, γεγονός που την καθιστά δωρεάν στη λειτουργία της.

Λειτουργεί σε κινητό;

Ναι. Λειτουργεί στα σύγχρονα προγράμματα περιήγησης κινητών σε iOS και Android, χωρίς εγκατάσταση.

📈

Γεννήτρια Καμπύλης Easing CSS Cubic-Bezier δωρεάν

Σχεδιάστε καμπύλες easing CSS σύροντας σημεία ελέγχου, προεπισκοπήστε την κίνηση ζωντανά και αντιγράψτε την τιμή cubic-bezier(). Περιλαμβάνει προεπιλογές overshoot/bounce.

Εκτελείται στο πρόγραμμα περιήγησηςΧωρίς εγγραφή, χωρίς αναδυόμενα παράθυραΔεν απαιτείται σύνδεσηΔωρεάν για πάντα

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί

Σύρετε τις κυκλοκυανές και ρόζ λαβές για διαμόρφωση της καμπύλης

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

x1y1x2y2

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

Διάρκεια1,6 δ

Μετάβαση πλάτους

Τιμή CSS

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

Προεπιλογές

Οι ρόζ και κυκλοκυανές λαβές μπορούν να τραβηχτούν πάνω ή κάτω από το πλαίσιο (Y εκτός 0–1) για εφέ υπερπήδησης / αναπήδησης όπως back-out και anticipate. Το X παραμένει εντός 0–1 (ο χρόνος δεν αντιστρέφεται).

Συνηθισμένες χρήσεις

Προσαρμοσμένη CSS μετάβαση έκπτωσηςΣχεδιάστε φυσικά αισθητή έκπτωση για εφέ κατά τη σίτιση, μενού και μεταβάσεις αριθμητικού πληκτρολογίου.
Bounce και Overshoot AnimationsΔημιουργήστε παιχνιδιάρικη κίνηση ελατηρίου/αναπήδησης τραβώντας σημεία ελέγχου πέρα από το κουτί.
Easing για @keyframes AnimationsΕπιλέξτε τη σωστή συνάρτηση animation-timing-function για CSS keyframe animations.
Easing Values για JS Animation LibrariesΛάβετε τιμές cubic-bezier για GSAP, Framer Motion, anime.js και άλλα.
Κατανοήστε πώς λειτουργεί η έκπτωσηΔείτε τη σχέση μεταξύ μιας καμπύλης bezier και της κίνησης που παράγει.

Πώς λειτουργεί

Ο επεξεργαστής είναι φτιαγμένος εξ ολοκλήρου στον browser με React state και SVG — καμία βιβλιοθήκη δεν χειρίζεται τα μαθηματικά της καμπύλης. Δύο σημεία ελέγχου που σύρονται ορίζουν μια κυβική διαδρομή Bezier σε SVG, και η ίδια η μηχανή κίνησης CSS του browser εκτελεί την προεπισκόπηση εισάγοντας την τιμή cubic-bezier() απευθείας σε κανόνα @keyframes.

1
Σύρετε ή πληκτρολογήστε σημεία ελέγχου
Δύο λαβές (P1 σε πετρόλ, P2 σε ροζ) βρίσκονται σε καμβά SVG. Το σύρσιμο χρησιμοποιεί το Pointer Events API με setPointerCapture, ώστε η λαβή να ακολουθεί το δάχτυλο ή τον κέρσορα ακόμη κι έξω από τα όρια του SVG. Μπορείτε επίσης να μετακινείτε τις λαβές με τα βέλη ή να πληκτρολογείτε ακριβείς τιμές στα πεδία x1/y1/x2/y2.
2
Το SVG σχεδιάζει την καμπύλη σε πραγματικό χρόνο
Η καμπύλη είναι ένα μοναδικό στοιχείο SVG <path> του οποίου η εντολή C (κυβική Bezier) υπολογίζεται ξανά από τις τέσσερις συντεταγμένες σημείων ελέγχου σε κάθε ενημέρωση state. Χωρίς canvas ή εξωτερική βιβλιοθήκη — ο renderer SVG του browser σχεδιάζει απευθείας τη διαδρομή.
3
Η μηχανή CSS του browser προβάλλει την επιτάχυνση
Τρεις ζωντανές κινήσεις (μια κουκκίδα που γλιστρά, μια μετάβαση πλάτους και μια κλιμάκωση) εκτελούν CSS @keyframes με την τιμή cubic-bezier() ενσωματωμένη. Η ίδια η μηχανή κίνησης του browser ερμηνεύει την καμπύλη, οπότε ό,τι βλέπετε είναι ακριβώς ό,τι θα παράγει το CSS σας στην παραγωγή.
4
Αντιγράψτε το απόσπασμα στη σύνταξη του framework σας
Οι καρτέλες μορφοποιούν τους ίδιους τέσσερις αριθμούς ως CSS transition-timing-function, κλάση arbitrary-value του Tailwind, πίνακα ease του Framer Motion ή συμβολοσειρά easing του anime.js. Το απόσπασμα γράφεται στο πρόχειρο με navigator.clipboard. Η καμπύλη κωδικοποιείται επίσης στο hash του URL (#b=x1,y1,x2,y2) ώστε να μπορείτε να τη μοιραστείτε ή να την αποθηκεύσετε.