⭐ 0
🔍
Κείμενο Εικόνα PDF & Έγγραφα Ήχος Μουσική Ηλεκτρονικά Χρόνος Βοηθητικά προγράμματα Επικυρωτές Εσωτερισμός Παιχνίδια

Γεννήτρια κυβικών Bezier

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

Σύρετε την πορτοκαλί λαβή (P1) και την κόκκινη λαβή (P2) για να αλλάξετε το σχήμα της καμπύλης — τα πλήκτρα βέλους λειτουργούν επίσης. Το X παραμένει σφιγμένο μεταξύ 0 και 1 όπως απαιτεί το CSS. σύρετε μια λαβή πάνω ή κάτω από το πλαίσιο για να στείλετε το y πέρα ​​από αυτό το εύρος για εφέ υπέρβασης και αναπήδησης.

Η καμπύλη σου

Γραμμική (για σύγκριση)

Επεξεργασία... 0%

Αποτέλεσμα

Η πληκτρολόγηση cubic-bezier (x1, y1, x2, y2) με το χέρι και η επαναφόρτωση της σελίδας για να ελέγξετε την αίσθηση είναι ένας αργός τρόπος για να συντονίσετε μια κινούμενη εικόνα. Αυτή η γεννήτρια κλείνει αυτόν τον βρόχο: σύρετε είτε τη λαβή του σημείου ελέγχου στην καμπύλη ή πληκτρολογήστε ακριβείς αριθμούς στα πεδία x1/y1/x2/y2 και η καμπύλη, η αντιγραφή συμβολοσειρά CSS και η ζωντανή κινούμενη εικόνα κάνουν προεπισκόπηση όλες τις ενημερώσεις σε κάθε αλλαγή — χωρίς βήμα κατασκευής, χωρίς επαναφόρτωση.

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

Το να βλέπετε έναν αριθμό δεν είναι το ίδιο με το να βλέπετε την κίνηση, επομένως η προεπισκόπηση εκτελεί δύο ίδιες μπάλες δίπλα-δίπλα σε έναν βρόχο: η μία κινείται χρησιμοποιώντας την προσαρμοσμένη καμπύλη σας, η άλλη κινείται με έναν απλό σταθερό γραμμικό ρυθμό. Παρακολουθώντας τους να αγωνίζονται είναι ο πιο γρήγορος τρόπος για να διαπιστώσετε εάν μια καμπύλη χαλάρωσης δημιουργεί πραγματικά την αίσθηση που θέλετε, πριν φτάσει ποτέ σε ένα φύλλο στυλ. Οι προκαθορισμένες σελίδες - οι πραγματικοί αριθμοί πίσω από τη λέξη-κλειδί ease-in-out της ίδιας της CSS, μια ειλικρινής προσέγγιση υπέρβασης που ορισμένοι αποκαλούν αναπήδηση και η δημοσιευμένη τυπική καμπύλη Material Design της Google - είναι έτοιμα σημεία εκκίνησης από τα οποία μπορείτε να σύρετε αντί για κενά σημεία ελέγχου.

Τα πάντα εκτελούνται τοπικά στο πρόγραμμα περιήγησής σας: καμία μεταφόρτωση, κανένας λογαριασμός, κανένας διακομιστής μετ' επιστροφής και η γεννήτρια συνεχίζει να λειτουργεί εκτός σύνδεσης μετά τη φόρτωση της σελίδας.

🛡️
Εκτελείται στο πρόγραμμα περιήγησης

Τα αρχεία και οι είσοδοι σας δεν φεύγουν ποτέ από αυτήν τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 100% ασφαλής.

Αποδεκτές Μορφές & Κανόνες

  • Σύρσιμο πρόγραμμα επεξεργασίας καμπυλών SVG με δύο λαβές (P1 και P2) συν επεξεργάσιμες εισόδους αριθμών x1/y1/x2/y2 για ακριβείς τιμές pixel.
  • Προεπισκόπηση κινούμενης εικόνας με βρόχο συγκρίνοντας τον προσαρμοσμένο χρονισμό cubic-bezier() με μια γραμμική σφαίρα αναφοράς, ώστε να μπορείτε να δείτε τη χαλάρωση, όχι απλώς να τη διαβάσετε.
  • Αντιγράψιμη συμβολοσειρά κυβικών bezier (x1, y1, x2, y2) έτοιμη για λειτουργία transition-timing ή animation-timing-function, συν προκαθορισμένες σελίδες για ευκολία εισόδου, αναπήδηση και την τυπική καμπύλη του Material Design.

Βασικά Οφέλη

✓ Σύρετε είτε τη λαβή του σημείου ελέγχου και παρακολουθήστε την καμπύλη, τη ζωντανή προεπισκόπηση κινούμενων εικόνων και τη συμβολοσειρά CSS με δυνατότητα αντιγραφής να ενημερώνονται όλα μαζί — δεν χρειάζεται να απομνημονεύσετε τα μαθηματικά συντεταγμένων.
✓ Το Y μπορεί να ξεπεράσει το 0 και το 1 για εφέ ελατηρίου και αναπήδησης, ενώ το X παραμένει στερεωμένο στο εύρος 0–1 που απαιτεί το CSS, επομένως κάθε τιμή που αντιγράφετε είναι έγκυρη τη στιγμή που την επικολλάτε.
✓ Η προεπισκόπηση side-by-side ανταποκρίνεται στην προσαρμοσμένη καμπύλη σας με μια απλή γραμμική αναφορά, έτσι ώστε η διαφορά στην αίσθηση κίνησης - ο πλήρης λόγος χρήσης του easing - είναι προφανής με μια ματιά, όχι μόνο με έξοδο κώδικα.

Περιπτώσεις χρήσης

  • • Χρειάζεστε μια προσαρμοσμένη τιμή CSS transition-timing-function ή animation-timing-function αντί για μία από τις ενσωματωμένες λέξεις-κλειδιά ease;
  • • Θέλετε να δείτε ακριβώς πώς φαίνεται το cubic-bezier(0,42, 0, 0,58, 1) — οι πραγματικοί αριθμοί πίσω από τη λέξη-κλειδί ease-in-out της ίδιας της CSS — σε κίνηση προτού το στείλετε;
  • • Δημιουργείτε ένα bouncy button, modal ή card animation και χρειάζεστε μια έτοιμη καμπύλη μείωσης υπέρβασης για να την αντιγράψετε απευθείας στο φύλλο στυλ σας;