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

Standard Easing Curve σχεδίασης υλικού

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

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

Η καμπύλη σου

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

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

Αποτέλεσμα

Αυτή η σελίδα ανοίγει τη γεννήτρια με x1=0,4, y1=0, x2=0,2, y2=1 ήδη φορτωμένο — η τυπική καμπύλη χαλάρωσης που δημοσιεύεται στις οδηγίες κίνησης Material Design της Google. Σύρετε είτε τη λαβή είτε επεξεργαστείτε τους αριθμούς και την καμπύλη, τη ζωντανή προεπισκόπηση και την ενημέρωση CSS με δυνατότητα αντιγραφής μαζί.

Το Material Design αποκαλεί αυτήν την καμπύλη "τυπική διευκόλυνση" και τη συνιστά για τις περισσότερες μεταβάσεις στην οθόνη — στοιχεία που είναι ήδη ορατά και απλώς μετακινούνται, αλλάζουν μέγεθος ή ξεθωριάζουν στην ίδια οθόνη. Το σχήμα του επιταχύνεται γρήγορα, μετά επιβραδύνεται απαλά στη θέση του, γι' αυτό τόσες πολλές εφαρμογές Android και διεπαφές ιστού με στιλ υλικού μοιράζονται την ίδια αίσθηση μετάβασης χωρίς κανείς να παρατηρήσει ότι χρησιμοποιούν τους ίδιους τέσσερις αριθμούς.

Ρίξτε το κατευθείαν στη λειτουργία transition-timing-function ή animation-timing-function για συνεπή αίσθηση υλικού ή χρησιμοποιήστε το ως σημείο αναφοράς: Οι οδηγίες του Material ορίζουν επίσης ξεχωριστές καμπύλες "επιβράδυνσης" και "επιτάχυνσης" για στοιχεία που εισέρχονται ή εξέρχονται από την οθόνη, τις οποίες αυτή η ενιαία τυπική καμπύλη δεν προορίζεται να αντικαταστήσει.

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

Τα αρχεία και οι είσοδοι σας δεν φεύγουν ποτέ από αυτήν τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 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 και χρειάζεστε μια έτοιμη καμπύλη μείωσης υπέρβασης για να την αντιγράψετε απευθείας στο φύλλο στυλ σας;