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

Γεννήτρια Καμπύλων Cubic 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 δεν έχουν τέτοιο περιορισμό: σύρτε μια λαβή πάνω από την κορυφή του πλαισίου ή κάτω από τον πυθμένα και η καμπύλη υπερβαίνει την έναρξη ή το τέλος της, που είναι ακριβώς ο τρόπος με τον οποίο δημιουργούνται εφέ ελατηρίου και αναπήδησης από μία μόνο καμπύλη easing.

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

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

Απολαμβάνετε αυτό το εργαλείο; Θεωρείτε αυτό το προϊόν χρήσιμο; Βλέπετε προοπτικές σε αυτό και θέλετε να το υποστηρίξετε;

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

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

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

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

Βασικά Πλεονεκτήματα

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

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

  • • Χρειάζεστε μια προσαρμοσμένη τιμή για την ιδιότητα CSS transition-timing-function ή animation-timing-function αντί για μια από τις προεπιλεγμένες λέξεις-κλειδιά τύπου ease;
  • • Θέλετε να δείτε πώς ακριβώς φαίνεται σε κίνηση το cubic-bezier(0.42, 0, 0.58, 1) – οι πραγματικοί αριθμοί πίσω από τη λέξη-κλειδί ease-in-out της CSS – πριν το παραδώσετε;
  • • Φτιάχνετε ένα κουμπί, modal ή κάρτα με αναπήδηση και χρειάζεστε μια έτοιμη καμπύλη easing με overshoot για να την αντιγράψετε κατευθείαν στο stylesheet σας;