Φανταστείτε αυτό: συμμετέχετε σε ένα νέο έργο, βουτάτε στη βάση κωδικών και μέσα στις πρώτες ώρες, ανακαλύπτετε κάτι απογοητευτικά οικείο. Διάσπαρτα στα φύλλα στυλ, βρίσκετε πολλούς ορισμούς @keyframes για τα ίδια βασικά κινούμενα σχέδια. Τρία διαφορετικά εφέ fade-in, δύο ή τρεις παραλλαγές διαφανειών, μια χούφτα κινούμενα σχέδια με ζουμ και τουλάχιστον δύο διαφορετικά περιστροφικά κινούμενα σχέδια γιατί, γιατί όχι; παλμός @keyframes { από { κλίμακα: 1; } σε { κλίμακα: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { κλίμακα: 1; } 10%, 40% { κλίμακα: 1,2; } }
Εάν αυτό το σενάριο σας φαίνεται γνωστό, δεν είστε μόνοι. Από την εμπειρία μου σε διάφορα έργα, μία από τις πιο συνεπείς γρήγορες νίκες που μπορώ να αποδώσω είναι η ενοποίηση και η τυποποίηση των βασικών καρέ. Έχει γίνει τόσο αξιόπιστο μοτίβο που τώρα ανυπομονώ για αυτήν την εκκαθάριση ως μία από τις πρώτες μου εργασίες σε οποιαδήποτε νέα βάση κώδικα. Η λογική πίσω από το χάος Αυτός ο πλεονασμός είναι απολύτως λογικός όταν το σκεφτείς. Όλοι χρησιμοποιούμε τα ίδια θεμελιώδη κινούμενα σχέδια στην καθημερινή μας εργασία: ξεθωριάζει, διαφάνειες, ζουμ, περιστροφές και άλλα κοινά εφέ. Αυτά τα κινούμενα σχέδια είναι αρκετά απλά και είναι εύκολο να δημιουργήσετε έναν γρήγορο ορισμό @keyframes για να ολοκληρώσετε τη δουλειά. Χωρίς ένα κεντρικό σύστημα κινούμενων εικόνων, οι προγραμματιστές γράφουν φυσικά αυτά τα βασικά καρέ από την αρχή, χωρίς να γνωρίζουν ότι παρόμοια κινούμενα σχέδια υπάρχουν ήδη αλλού στη βάση κώδικα. Αυτό είναι ιδιαίτερα κοινό όταν εργάζεστε σε αρχιτεκτονικές που βασίζονται σε στοιχεία (που οι περισσότεροι από εμάς κάνουμε αυτές τις μέρες), καθώς οι ομάδες συχνά εργάζονται παράλληλα σε διαφορετικά μέρη της εφαρμογής. Το αποτέλεσμα; Χάος κινουμένων σχεδίων. Το Μικρό Πρόβλημα Τα πιο προφανή ζητήματα με την αντιγραφή βασικών καρέ είναι ο χαμένος χρόνος ανάπτυξης και η περιττή διόγκωση κώδικα. Οι ορισμοί πολλαπλών βασικών καρέ σημαίνουν πολλαπλά μέρη για ενημέρωση όταν αλλάζουν οι απαιτήσεις. Θέλετε να προσαρμόσετε το χρόνο του fade animation σας; Θα χρειαστεί να κυνηγήσετε κάθε παρουσία στη βάση κωδικών σας. Θέλετε να τυποποιήσετε τις λειτουργίες easing; Καλή τύχη να βρείτε όλες τις παραλλαγές. Αυτός ο πολλαπλασιασμός των σημείων συντήρησης κάνει ακόμη και τις απλές ενημερώσεις κινούμενων εικόνων μια χρονοβόρα εργασία. Το Μεγαλύτερο Πρόβλημα Αυτή η αντιγραφή βασικών καρέ δημιουργεί ένα πολύ πιο ύπουλο πρόβλημα που κρύβεται κάτω από την επιφάνεια: την παγίδα του παγκόσμιου εύρους. Ακόμη και όταν εργάζεστε με αρχιτεκτονικές που βασίζονται σε στοιχεία, τα βασικά καρέ CSS ορίζονται πάντα στο καθολικό εύρος. Αυτό σημαίνει ότι όλα τα βασικά καρέ ισχύουν για όλα τα στοιχεία. Πάντοτε. Ναι, η κινούμενη εικόνα δεν χρησιμοποιεί απαραίτητα τα βασικά καρέ που ορίσατε στο στοιχείο σας. Χρησιμοποιεί τα τελευταία βασικά καρέ που ταιριάζουν με το ίδιο ακριβώς όνομα που φορτώθηκαν στο καθολικό εύρος. Εφόσον όλα τα βασικά καρέ σας είναι πανομοιότυπα, αυτό μπορεί να φαίνεται ως ένα δευτερεύον ζήτημα. Αλλά τη στιγμή που θέλετε να προσαρμόσετε ένα κινούμενο σχέδιο για μια συγκεκριμένη περίπτωση χρήσης, αντιμετωπίζετε προβλήματα ή χειρότερα, θα είστε αυτός που τα προκαλεί. Είτε η κινούμενη εικόνα σας δεν θα λειτουργήσει επειδή ένα άλλο στοιχείο φορτώθηκε μετά το δικό σας, αντικαθιστώντας τα βασικά καρέ σας, είτε το στοιχείο σας φορτώνεται και αλλάζει κατά λάθος τη συμπεριφορά κινούμενων εικόνων για κάθε άλλο στοιχείο που χρησιμοποιεί το όνομα αυτού του βασικού καρέ και μπορεί να μην το καταλάβετε καν. Ακολουθεί ένα απλό παράδειγμα που δείχνει το πρόβλημα: .component-one { /* στυλ συστατικών */ Κινούμενα σχέδια: παλμός 1s ease-in-out άπειρη εναλλακτική. }
/* αυτός ο ορισμός @keyframes δεν θα λειτουργήσει */ παλμός @keyframes { από { κλίμακα: 1; } σε { κλίμακα: 1,1; } }
/* αργότερα στον κώδικα... */
.συστατικό-δύο { /* στυλ συστατικών */ animation: παλμός 1s ease-in-out infinite. }
/* αυτά τα βασικά καρέ θα εφαρμοστούν και στα δύο στοιχεία */ παλμός @keyframes { 0%, 20%, 100% { κλίμακα: 1; } 10%, 40% { κλίμακα: 1,2; } }
Και τα δύο στοιχεία χρησιμοποιούν το ίδιο όνομα κινούμενης εικόνας, αλλά ο δεύτερος ορισμός @keyframes αντικαθιστά το πρώτο. Τώρα, τόσο το στοιχείο-ένα όσο και το στοιχείο-δύο θα χρησιμοποιούν το δεύτερο βασικό καρέ, ανεξάρτητα από το ποιο στοιχείο καθόρισε ποια βασικά καρέ. Δείτε το Pen Keyframes Tokens - Demo 1 [διχαλωτή] από τον Amit Sheen. Το χειρότερο μέρος; Αυτό συχνά λειτουργεί τέλεια στην τοπική ανάπτυξη, αλλά σπάει μυστηριωδώς στην παραγωγή όταν οι διαδικασίες κατασκευής αλλάζουν τη σειρά φόρτωσης των φύλλων στυλ σας. Καταλήγετε με κινούμενα σχέδια που συμπεριφέρονται διαφορετικά ανάλογα με τα στοιχεία που φορτώνονται και με ποια σειρά. Η λύση: Ενοποιημένα βασικά καρέ Η απάντηση σε αυτό το χάος είναι εκπληκτικά απλή: προκαθορισμένα δυναμικά βασικά καρέ αποθηκευμένα σε ένα κοινόχρηστο φύλλο στυλ. Αντί να αφήνουμε κάθε στοιχείο να ορίζει τις δικές του κινούμενες εικόνες, δημιουργούμε κεντρικά βασικά καρέ που είναι καλά τεκμηριωμένα και εύκολαχρήση, συντηρήσιμο και προσαρμοσμένο στις συγκεκριμένες ανάγκες του έργου σας. Σκεφτείτε το ως διακριτικά βασικών καρέ. Ακριβώς όπως χρησιμοποιούμε διακριτικά για χρώματα και διαστήματα, και πολλοί από εμάς ήδη χρησιμοποιούμε κουπόνια για ιδιότητες κινούμενων εικόνων, όπως η διάρκεια και οι λειτουργίες διευκόλυνσης, γιατί να μην χρησιμοποιήσουμε διακριτικά και για βασικά καρέ; Αυτή η προσέγγιση μπορεί να ενσωματωθεί φυσικά με οποιαδήποτε τρέχουσα ροή εργασίας διακριτικού σχεδιασμού που χρησιμοποιείτε, ενώ επιλύει τόσο το μικρό πρόβλημα (διπλασιασμός κώδικα) όσο και το μεγαλύτερο πρόβλημα (διένεξες παγκόσμιου εύρους) με μια κίνηση. Η ιδέα είναι απλή: δημιουργήστε μια ενιαία πηγή αλήθειας για όλα τα κοινά μας κινούμενα σχέδια. Αυτό το κοινόχρηστο φύλλο στυλ περιέχει προσεκτικά σχεδιασμένα βασικά καρέ που καλύπτουν τα μοτίβα κινούμενων εικόνων που χρησιμοποιεί στην πραγματικότητα το έργο μας. Δεν χρειάζεται πλέον να μαντεύουμε εάν υπάρχει ήδη ένα fade animation κάπου στη βάση κώδικα μας. Όχι πια η κατά λάθος αντικατάσταση κινούμενων εικόνων από άλλα στοιχεία. Αλλά εδώ είναι το κλειδί: αυτά δεν είναι μόνο στατικά κινούμενα σχέδια αντιγραφής-επικόλλησης. Έχουν σχεδιαστεί για να είναι δυναμικά και προσαρμόσιμα μέσω προσαρμοσμένων ιδιοτήτων CSS, επιτρέποντάς μας να διατηρούμε συνέπεια, ενώ παράλληλα έχουμε την ευελιξία να προσαρμόζουμε κινούμενα σχέδια σε συγκεκριμένες περιπτώσεις χρήσης, όπως εάν χρειάζεστε ένα ελαφρώς μεγαλύτερο "παλμικό" animation σε ένα μέρος. Building The First Keyframes Token Ένα από τα πρώτα χαμηλά φρούτα που πρέπει να αντιμετωπίσουμε είναι το "fade-in" animation. Σε ένα από τα πρόσφατα έργα μου, βρήκα πάνω από δώδεκα ξεχωριστούς ορισμούς fade-in, και ναι, όλοι απλώς κινούνταν την αδιαφάνεια από το 0 στο 1. Λοιπόν, ας δημιουργήσουμε ένα νέο φύλλο στυλ, ας το ονομάσουμε kf-tokens.css, ας το εισαγάγουμε στο έργο μας και ας τοποθετήσουμε τα βασικά καρέ μας με τα κατάλληλα σχόλια μέσα σε αυτό. /* keyframes-tokens.css */
/* * Fade In - fade entry animation * Χρήση: animation: kf-fade-in 0,3s ease-out. */ @keyframes kf-fade-in { από { αδιαφάνεια: 0; } σε { αδιαφάνεια: 1; } }
Αυτή η μεμονωμένη δήλωση @keyframes αντικαθιστά όλες αυτές τις διάσπαρτες κινούμενες εικόνες fade-in στη βάση κωδίκων μας. Καθαρό, απλό και παγκοσμίως εφαρμόσιμο. Και τώρα που έχουμε ορίσει αυτό το διακριτικό, μπορούμε να το χρησιμοποιήσουμε από οποιοδήποτε στοιχείο σε όλο το έργο μας: .modal { animation: kf-fade-in 0,3s ease-out. }
.tooltip { animation: kf-fade-in 0,2s ease-in-out. }
.ειδοποίηση { animation: kf-fade-in 0,5s ease-out. }
Δείτε το Pen Keyframes Tokens - Demo 2 [διχαλωτή] από τον Amit Sheen. Σημείωση: Χρησιμοποιούμε ένα πρόθεμα kf- σε όλα τα ονόματα @keyframes. Αυτό το πρόθεμα χρησιμεύει ως χώρος ονομάτων που αποτρέπει τις συγκρούσεις ονομάτων με υπάρχοντα κινούμενα σχέδια στο έργο και καθιστά αμέσως σαφές ότι αυτά τα βασικά καρέ προέρχονται από το αρχείο διακριτικών καρέ κλειδιών. Δημιουργία δυναμικής διαφάνειας Τα βασικά καρέ kf-fade-in λειτουργούν υπέροχα επειδή είναι απλά και υπάρχει ελάχιστος χώρος για να μπερδέψετε τα πράγματα. Σε άλλα κινούμενα σχέδια, ωστόσο, πρέπει να είμαστε πολύ πιο δυναμικοί και εδώ μπορούμε να αξιοποιήσουμε την τεράστια δύναμη των προσαρμοσμένων ιδιοτήτων CSS. Αυτό είναι όπου τα διακριτικά βασικών καρέ λάμπουν πραγματικά σε σύγκριση με τα διάσπαρτα στατικά κινούμενα σχέδια. Ας πάρουμε ένα κοινό σενάριο: κινούμενα σχέδια "slide-in". Αλλά να γλιστρήσετε από πού; 100px από δεξιά; 50% από αριστερά; Πρέπει να μπει από το πάνω μέρος της οθόνης; Ή μήπως επιπλέουν από το κάτω μέρος; Τόσες πολλές δυνατότητες, αλλά αντί να δημιουργούμε ξεχωριστά βασικά καρέ για κάθε κατεύθυνση και κάθε παραλλαγή, μπορούμε να δημιουργήσουμε ένα ευέλικτο διακριτικό που προσαρμόζεται σε όλα τα σενάρια: /* * Slide In - κινούμενα σχέδια διαφανειών με κατεύθυνση * Χρησιμοποιήστε --kf-slide-from για να ελέγξετε την κατεύθυνση * Προεπιλογή: σύρεται από αριστερά (-100%) * Χρήση: * animation: kf-slide-in 0,3s ease-out. * --kf-slide-από: -100px 0; // σύρετε από αριστερά * --kf-slide-από: 100px 0; // σύρετε από δεξιά * --kf-slide-από: 0 -50px; // σύρετε από πάνω */
@keyframes kf-slide-in { από { translate: var(--kf-slide-from, -100% 0); } σε { μετάφραση: 0 0; } }
Τώρα μπορούμε να χρησιμοποιήσουμε αυτό το διακριτικό @keyframes για οποιαδήποτε κατεύθυνση διαφάνειας απλά αλλάζοντας την προσαρμοσμένη ιδιότητα --kf-slide-from: .sidebar { animation: kf-slide-in 0,3s ease-out. /* Χρησιμοποιεί προεπιλεγμένη τιμή: διαφάνειες από αριστερά */ }
.ειδοποίηση { animation: kf-slide-in 0,4s ease-out. --kf-slide-από: 0 -50px; /* σύρετε από την κορυφή */ }
.modal { κινούμενα σχέδια: kf-fade-in 0,5s, kf-slide-in 0,5s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* διαφάνεια από κάτω δεξιά */ }
Αυτή η προσέγγιση μας δίνει απίστευτη ευελιξία διατηρώντας παράλληλα τη συνέπεια. Μία δήλωση βασικού καρέ, άπειρες δυνατότητες. Δείτε το Pen Keyframes Tokens - Demo 3 [διχαλωτή] από τον Amit Sheen. Και αν θέλουμε να κάνουμε τα κινούμενα σχέδια μας ακόμη πιο ευέλικτα, επιτρέποντας επίσης εφέ "slide-out", μπορούμεαπλά προσθέστε μια --kf-slide-σε προσαρμοσμένη ιδιότητα, παρόμοια με αυτή που θα δούμε στην επόμενη ενότητα. Βασικά καρέ διπλής κατεύθυνσης ζουμ Ένα άλλο κοινό κινούμενο σχέδιο που επαναλαμβάνεται στα έργα είναι τα εφέ "zoom". Είτε πρόκειται για μια ανεπαίσθητη κλίμακα για μηνύματα τοστ, μια δραματική μεγέθυνση για τα modals ή ένα απαλό εφέ μείωσης κλίμακας για επικεφαλίδες, τα κινούμενα σχέδια με ζουμ είναι παντού. Αντί να δημιουργήσουμε ξεχωριστά βασικά καρέ για κάθε τιμή κλίμακας, ας δημιουργήσουμε ένα ευέλικτο σύνολο βασικών καρέ kf-zoom:
/* * Ζουμ - κινούμενα σχέδια κλίμακας * Χρησιμοποιήστε --kf-zoom-from και --kf-zoom-to για να ελέγξετε τις τιμές κλίμακας * Προεπιλογή: ζουμ από 80% έως 100% (0,8 σε 1) * Χρήση: * animation: kf-zoom 0,2s ease-out. * --kf-zoom-από: 0,5; --kf-zoom-to: 1; // ζουμ από 50% σε 100% * --kf-zoom-από: 1; --kf-zoom-to: 0; // ζουμ από 100% σε 0% * --kf-zoom-από: 1; --kf-zoom-to: 1,1; // ζουμ από 100% σε 110% */
@keyframes kf-zoom { από { κλίμακα: var(--kf-zoom-from, 0,8); } σε { κλίμακα: var(--kf-zoom-to, 1); } }
Με έναν ορισμό, μπορούμε να επιτύχουμε οποιαδήποτε παραλλαγή ζουμ χρειαζόμαστε: .τοστ { κινούμενα σχέδια: kf-slide-in 0,2s, kf-zoom 0,4s ease-out; --kf-slide-από: 0 100%; /* σύρετε από την κορυφή */ /* Χρησιμοποιεί προεπιλεγμένο ζουμ: κλιμακώνει από 80% έως 100% */ }
.modal { animation: kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-από: 0; /* δραματικό ζουμ από 0% έως 100% */ }
.επικεφαλίδα { κινούμενα σχέδια: kf-fade-in 2s, kf-zoom 2s ease-in. --kf-zoom-από: 1,2; --kf-zoom-to: 0,8; /* απαλή μείωση κλίμακας */ }
Η προεπιλογή του 0,8 (80%) λειτουργεί τέλεια για τα περισσότερα στοιχεία διεπαφής χρήστη, όπως μηνύματα τοστ και κάρτες, ενώ εξακολουθεί να είναι εύκολο να προσαρμόζεται για ειδικές περιπτώσεις. Δείτε το Pen Keyframes Tokens - Demo 4 [διχαλωτή] από τον Amit Sheen. Ίσως έχετε παρατηρήσει κάτι ενδιαφέρον στα πρόσφατα παραδείγματα: συνδυάζουμε κινούμενα σχέδια. Ένα από τα βασικά πλεονεκτήματα της εργασίας με διακριτικά @keyframes είναι ότι έχουν σχεδιαστεί για να ενσωματώνονται απρόσκοπτα μεταξύ τους. Αυτή η ομαλή σύνθεση είναι σκόπιμη, όχι τυχαία. Θα συζητήσουμε τη σύνθεση κινούμενων εικόνων με περισσότερες λεπτομέρειες αργότερα, συμπεριλαμβανομένων των περιοχών που μπορεί να γίνουν προβληματικές, αλλά οι περισσότεροι συνδυασμοί είναι απλοί και εύκολοι στην εφαρμογή τους. Σημείωση: Ενώ έγραφα αυτό το άρθρο, και ίσως λόγω της συγγραφής του, βρήκα τον εαυτό μου να ξανασκέφτεται όλη την ιδέα των κινούμενων εικόνων εισόδου. Με όλες τις πρόσφατες εξελίξεις στο CSS, τα χρειαζόμαστε ακόμα καθόλου; Ευτυχώς, ο Adam Argyle διερεύνησε τις ίδιες ερωτήσεις και τις εξέφρασε έξοχα στο blog του. Αυτό δεν έρχεται σε αντίθεση με όσα γράφονται εδώ, αλλά παρουσιάζει μια προσέγγιση που αξίζει να εξεταστεί, ειδικά εάν τα έργα σας βασίζονται σε μεγάλο βαθμό σε κινούμενα σχέδια εισόδου. Συνεχείς κινούμενες εικόνες Ενώ τα κινούμενα σχέδια εισόδου, όπως το "fade", το "slide" και το "zoom" συμβαίνουν μία φορά και μετά σταματούν, οι συνεχείς κινούμενες εικόνες επαναλαμβάνονται επ' αόριστον για να τραβήξουν την προσοχή ή να υποδείξουν τη συνεχιζόμενη δραστηριότητα. Τα δύο πιο κοινά συνεχή κινούμενα σχέδια που συναντώ είναι το "spin" (για φόρτωση ενδείξεων) και το "pulse" (για την επισήμανση σημαντικών στοιχείων). Αυτά τα κινούμενα σχέδια παρουσιάζουν μοναδικές προκλήσεις όσον αφορά τη δημιουργία διακριτικών βασικών καρέ. Σε αντίθεση με τα κινούμενα σχέδια εισόδου που συνήθως πηγαίνουν από τη μια κατάσταση στην άλλη, τα συνεχή κινούμενα σχέδια πρέπει να είναι εξαιρετικά προσαρμόσιμα στα μοτίβα συμπεριφοράς τους. Ο Spin Doctor Κάθε έργο φαίνεται να χρησιμοποιεί πολλαπλά περιστροφικά κινούμενα σχέδια. Κάποιοι περιστρέφονται δεξιόστροφα, άλλοι αριστερόστροφα. Μερικοί κάνουν μια περιστροφή 360 μοιρών, άλλοι κάνουν πολλαπλές στροφές για πιο γρήγορο αποτέλεσμα. Αντί να δημιουργήσουμε ξεχωριστά βασικά καρέ για κάθε παραλλαγή, ας δημιουργήσουμε ένα ευέλικτο γύρισμα που χειρίζεται όλα τα σενάρια:
/* * Περιστροφή - κινούμενα σχέδια περιστροφής * Χρησιμοποιήστε --kf-spin-from και --kf-spin-to για να ελέγξετε το εύρος περιστροφής * Χρησιμοποιήστε --kf-spin-turns για να ελέγξετε την ποσότητα περιστροφής * Προεπιλογή: περιστρέφεται από 0 μοίρες σε 360 μοίρες (1 πλήρης περιστροφή) * Χρήση: * animation: kf-spin 1s linear infinite. * --kf-spin-στροφές: 2; // 2 πλήρεις περιστροφές * --kf-spin-από: 0deg; --kf-spin-to: 180deg; // μισή περιστροφή * --kf-spin-από: 0deg; --kf-spin-to: -360deg; // αριστερόστροφα */
@keyframes kf-spin { από { περιστροφή: var(--kf-spin-from, 0deg); } σε { περιστροφή: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Τώρα μπορούμε να δημιουργήσουμε οποιαδήποτε παραλλαγή περιστροφής μας αρέσει:
.loading-spinner { animation: kf-spin 1s linear infinite; /* Χρησιμοποιεί προεπιλογή: περιστρέφεται από 0 μοίρες σε 360 μοίρες */ }
.fast-loader { Κινούμενα σχέδια: kf-spin 1.2s ease-in-out infinite εναλλακτικό. --kf-spin-στροφές: 3; /* 3 πλήρεις περιστροφές για κάθε κατεύθυνση ανά κύκλο*/ }
.steped-reverse { animation: kf-spin 1.5s step(8) infinite; --kf-spin-to: -360deg; /* αριστερόστροφα */ }
.subtle-wiggle { animation: kf-spin 2s ease-in-out άπειρη εναλλακτική. --kf-spin-από: -16deg; --kf-spin-to: 32deg; /* κούνημα 36 μοίρες: μεταξύ -18 μοίρες και +18 μοίρες */ }
Δείτε το Pen Keyframes Tokens - Demo 5 [διχαλωτή] από τον Amit Sheen. Η ομορφιά αυτής της προσέγγισης είναι ότι τα ίδια βασικά καρέ λειτουργούν για τη φόρτωση spinners, περιστρεφόμενων εικονιδίων, εφέ περιστροφής και ακόμη και περίπλοκων κινούμενων εικόνων πολλαπλών στροφών. Το παράδοξο του παλμού Τα παλμικά κινούμενα σχέδια είναι πιο δύσκολα επειδή μπορούν να «παλμίσουν» διαφορετικές ιδιότητες. Ορισμένοι παλμώνουν την κλίμακα, άλλοι δίνουν παλμό στην αδιαφάνεια και ορισμένες ιδιότητες χρώματος παλμού όπως φωτεινότητα ή κορεσμός. Αντί να δημιουργούμε ξεχωριστά βασικά καρέ για κάθε ιδιότητα, μπορούμε να δημιουργήσουμε βασικά καρέ που λειτουργούν με οποιαδήποτε ιδιότητα CSS. Ακολουθεί ένα παράδειγμα παλμικού βασικού καρέ με επιλογές κλίμακας και αδιαφάνειας:
/* * Pulse - παλμικό animation * Χρησιμοποιήστε --kf-pulse-scale-from και --kf-pulse-scale-to για να ελέγξετε το εύρος κλίμακας * Χρησιμοποιήστε --kf-pulse-opacity-from και --kf-pulse-opacity-to για να ελέγξετε το εύρος αδιαφάνειας * Προεπιλογή: χωρίς παλμό (όλες οι τιμές 1) * Χρήση: * animation: kf-pulse 2s ease-in-out infinite εναλλακτικό. * --kf-παλμική κλίμακα-από: 0,95; --kf-pulse-scale-to: 1,05; // παλμός κλίμακας * --kf-pulse-opacity-από: 0,7; --kf-pulse-opacity-to: 1; // παλμός αδιαφάνειας */
@keyframes kf-pulse { από { κλίμακα: var(--kf-pulse-scale-from, 1); αδιαφάνεια: var(--kf-pulse-opacity-from, 1); } σε { κλίμακα: var(--kf-pulse-scale-to, 1); αδιαφάνεια: var(--kf-pulse-opacity-to, 1); } }
Αυτό δημιουργεί έναν ευέλικτο παλμό που μπορεί να κινήσει πολλαπλές ιδιότητες: .call-to-action { animation: kf-pulse 0,6s άπειρη εναλλακτική. --kf-παλμός-αδιαφάνεια-από: 0,5; /* παλμός αδιαφάνειας */ }
.notification-dot { animation: kf-pulse 0,6s ease-in-out infinite εναλλακτικό. --kf-παλμική κλίμακα-από: 0,9; --kf-pulse-scale-to: 1.1; /* παλμός κλίμακας */ }
.text-highlight { animation: kf-pulse 1,5s ease-out infinite. --kf-παλμική κλίμακα-από: 0,8; --kf-παλμός-αδιαφάνεια-από: 0,2; /* κλίμακα και παλμός αδιαφάνειας */ }
Δείτε το Pen Keyframes Tokens - Demo 6 [διχαλωτή] από τον Amit Sheen. Αυτό το βασικό καρέ με παλμό kf μπορεί να χειριστεί τα πάντα, από ανεπαίσθητες τραβήξεις προσοχής έως εντυπωσιακά στιγμιότυπα, ενώ είναι εύκολο να το προσαρμόσετε. Προηγμένη χαλάρωση Ένα από τα σπουδαία πράγματα σχετικά με τη χρήση διακριτικών βασικών καρέ είναι το πόσο εύκολο είναι να επεκτείνουμε τη βιβλιοθήκη κινούμενων εικόνων και να παρέχουμε εφέ που οι περισσότεροι προγραμματιστές δεν θα έκαναν τον κόπο να γράψουν από την αρχή, όπως ελαστικό ή αναπήδηση. Ακολουθεί ένα παράδειγμα ενός απλού διακριτικού "αναπήδησης" βασικών καρέ που χρησιμοποιεί μια προσαρμοσμένη ιδιότητα --kf-bounce-from για τον έλεγχο του ύψους άλματος. /* * Αναπήδηση - κινούμενα σχέδια εισόδου που αναπηδούν * Χρησιμοποιήστε το --kf-bounce-from για να ελέγξετε το ύψος άλματος * Προεπιλογή: μεταπηδά από 100vh (εκτός οθόνης) * Χρήση: * animation: kf-bounce 3s ease-in. * --kf-αναπήδηση-από: 200px; // άλμα από ύψος 200 px */
@keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { μετάφραση: 0 0; animation-timing-function: ease-out; } }
Τα κινούμενα σχέδια όπως το "elastic" είναι λίγο πιο δύσκολα λόγω των υπολογισμών μέσα στα βασικά καρέ. Πρέπει να ορίσουμε τα --kf-elastic-from-X και --kf-elastic-from-Y ξεχωριστά (και τα δύο είναι προαιρετικά) και μαζί μας επιτρέπουν να δημιουργήσουμε μια ελαστική είσοδο από οποιοδήποτε σημείο της οθόνης.
/* * Elastic In - elastic animation εισόδου * Χρησιμοποιήστε --kf-elastic-from-X και --kf-elastic-from-Y για να ελέγξετε τη θέση εκκίνησης * Προεπιλογή: εισάγεται από το επάνω κέντρο (0, -100vh) * Χρήση: * animation: kf-elastic-in 2s ease-in-out και τα δύο. * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // εισαγωγή από (-50px, -200px) */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { μετάφραση: 0 0; } }
Αυτή η προσέγγιση καθιστά εύκολη την επαναχρησιμοποίηση και την προσαρμογή προηγμένων βασικών καρέ σε όλο το έργο μας, απλώς αλλάζοντας μια προσαρμοσμένη ιδιότητα.
.bounce-and-zoom { κινούμενα σχέδια: kf-bounce 3s ease-in, kf-zoom 3s γραμμικό; --kf-zoom-από: 0; }
.bounce-and-slide { animation-composition: add; /* Και τα δύο κινούμενα σχέδια χρησιμοποιούν μετάφραση */ κινούμενα σχέδια: kf-bounce 3s ease-in, kf-slide-in 3s ease-out? --kf-slide-από: -200px; }
.elastic-in { animation: kf-elastic-in 2s ease-in-out και τα δύο. }
Δείτε το Pen Keyframes Tokens - Demo 7 [διχαλωτή] από τον Amit Sheen. Μέχρι αυτό το σημείο, έχουμε δει πώς μπορούμε να ενοποιήσουμε βασικά καρέ με έξυπνο και αποτελεσματικό τρόπο. Φυσικά, μπορεί να θέλετε να τροποποιήσετε τα πράγματα για να ταιριάζουν καλύτερα στις ανάγκες του έργου σας, αλλά καλύψαμε παραδείγματα πολλών κοινών κινούμενων εικόνων και περιπτώσεων καθημερινής χρήσης. Και με αυτά τα διακριτικά βασικών καρέ στη θέση τους, έχουμε πλέον ισχυρά δομικά στοιχεία για τη δημιουργία συνεπών, διατηρούμενων κινούμενων εικόνων σε ολόκληρο το έργο. Όχι άλλα διπλότυπα βασικά καρέ, όχι άλλες διενέξεις καθολικού εύρους. Απλώς ένας καθαρός, βολικός τρόπος για να χειριστούμε όλες τις ανάγκες μας για κινούμενα σχέδια. Αλλά το πραγματικό ερώτημα είναι: Πώς συνθέτουμε αυτά τα δομικά στοιχεία μαζί; Βάζοντας τα όλα μαζί Είδαμε ότι ο συνδυασμός βασικών κουπονιών βασικών καρέ είναι απλός. Δεν χρειαζόμαστε τίποτα ιδιαίτερο παρά να ορίσουμε το πρώτο κινούμενο σχέδιο, να ορίσουμε το δεύτερο, να ορίσουμε τις μεταβλητές όπως χρειάζεται και αυτό είναι όλο. /* Fade in + slide in */ .τοστ { κινούμενα σχέδια: kf-fade-in 0,4s, kf-slide-in 0,4s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-από: 0 40px; }
/* Zoom in + fade in */ .modal { κινούμενα σχέδια: kf-fade-in 0,3s, kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-από: 0,7; --kf-zoom-to: 1; }
/* Slide in + pulse */ .ειδοποίηση { κινούμενα σχέδια: kf-slide-in 0,5s, kf-pulse 1.2s ease-in-out άπειρη εναλλακτική. --kf-slide-από: -100px 0; --kf-παλμική κλίμακα-από: 0,95; --kf-pulse-scale-to: 1,05; }
Αυτοί οι συνδυασμοί λειτουργούν όμορφα επειδή κάθε κινούμενη εικόνα στοχεύει μια διαφορετική ιδιότητα: αδιαφάνεια, μετασχηματισμός (μετάφραση/κλίμακα) κ.λπ. Αλλά μερικές φορές υπάρχουν συγκρούσεις και πρέπει να ξέρουμε γιατί και πώς να τις αντιμετωπίσουμε. Όταν δύο κινούμενα σχέδια προσπαθούν να κάνουν κίνηση στην ίδια ιδιότητα — για παράδειγμα, και οι δύο κλίμακα κίνησης ή και οι δύο κινούμενη αδιαφάνεια — το αποτέλεσμα δεν θα είναι αυτό που περιμένετε. Από προεπιλογή, μόνο μία από τις κινούμενες εικόνες εφαρμόζεται πραγματικά σε αυτήν την ιδιότητα, η οποία είναι η τελευταία στη λίστα κινούμενων εικόνων. Αυτός είναι ένας περιορισμός του τρόπου με τον οποίο το CSS χειρίζεται πολλαπλές κινούμενες εικόνες στην ίδια ιδιότητα. Για παράδειγμα, αυτό δεν θα λειτουργήσει όπως προβλεπόταν, επειδή θα ισχύει μόνο η κινούμενη εικόνα kf-pulse. .bad-combo { κινούμενα σχέδια: kf-zoom 0,5s προς τα εμπρός, kf-pulse 1,2s άπειρη εναλλακτική; --kf-zoom-από: 0,5; --kf-zoom-to: 1,2; --kf-παλμική κλίμακα-από: 0,8; --kf-pulse-scale-to: 1.1; }
Προσθήκη κινουμένων σχεδίων Ο απλούστερος και πιο άμεσος τρόπος χειρισμού πολλαπλών κινούμενων εικόνων που επηρεάζουν την ίδια ιδιότητα είναι να χρησιμοποιήσετε την ιδιότητα animation-composition. Στο τελευταίο παράδειγμα παραπάνω, το animation kf-pulse αντικαθιστά το animation kf-zoom, επομένως δεν θα δούμε το αρχικό ζουμ και δεν θα λάβουμε την αναμενόμενη κλίμακα στο 1,2. Ρυθμίζοντας το animation-composition για προσθήκη, λέμε στο πρόγραμμα περιήγησης να συνδυάσει και τα δύο κινούμενα σχέδια. Αυτό μας δίνει το αποτέλεσμα που θέλουμε. .συστατικό-δύο { animation-composition: add; }
Δείτε το Pen Keyframes Tokens - Demo 8 [διχαλωτή] από τον Amit Sheen. Αυτή η προσέγγιση λειτουργεί καλά για τις περισσότερες περιπτώσεις όπου θέλουμε να συνδυάσουμε εφέ στην ίδια ιδιότητα. Είναι επίσης χρήσιμο όταν χρειάζεται να συνδυάσουμε κινούμενα σχέδια με στατικές τιμές ιδιοτήτων. Για παράδειγμα, εάν έχουμε ένα στοιχείο που χρησιμοποιεί την ιδιότητα translate για να το τοποθετήσει ακριβώς εκεί που θέλουμε και μετά θέλουμε να το κάνουμε κίνηση με τα keyframes kf-slide-in, έχουμε ένα δυσάρεστο ορατό άλμα χωρίς animation-composition. Δείτε το Pen Keyframes Tokens - Demo 9 [διχαλωτή] από τον Amit Sheen. Με την προσθήκη κινουμένων σχεδίων-σύνθεσης, η κινούμενη εικόνα συνδυάζεται ομαλά με την υπάρχουσαμετασχηματισμός, ώστε το στοιχείο να παραμένει στη θέση του και να κινείται όπως αναμένεται. Animation Stagger Ένας άλλος τρόπος χειρισμού πολλαπλών κινούμενων εικόνων είναι να τα "κλιμακώσετε" — δηλαδή, να ξεκινήσετε το δεύτερο animation ελαφρώς μετά την ολοκλήρωση του πρώτου. Δεν είναι μια λύση που λειτουργεί για κάθε περίπτωση, αλλά είναι χρήσιμη όταν έχουμε ένα animation εισόδου ακολουθούμενο από ένα συνεχές animation. /* fade in + παλμός αδιαφάνειας */ .ειδοποίηση { κινούμενα σχέδια: kf-fade-in 2s ease-out, kf-pulse 0,5s 2s ease-in-out άπειρη εναλλακτική. --kf-παλμός-αδιαφάνεια-έως: 0,5; }
Δείτε το Pen Keyframes Tokens - Demo 10 [διχαλωτή] από τον Amit Sheen. Θέματα Παραγγελίας Ένα μεγάλο μέρος των κινούμενων εικόνων με τα οποία εργαζόμαστε χρησιμοποιούν την ιδιότητα μετασχηματισμού. Στις περισσότερες περιπτώσεις, αυτό είναι απλώς πιο βολικό. Έχει επίσης ένα πλεονέκτημα απόδοσης καθώς τα κινούμενα σχέδια μετασχηματισμού μπορούν να επιταχυνθούν με GPU. Αλλά αν χρησιμοποιούμε μετασχηματισμούς, πρέπει να αποδεχτούμε ότι η σειρά με την οποία εκτελούμε τους μετασχηματισμούς μας έχει σημασία. Πολλά. Στα βασικά καρέ μας μέχρι στιγμής, έχουμε χρησιμοποιήσει μεμονωμένους μετασχηματισμούς. Σύμφωνα με τις προδιαγραφές, αυτά εφαρμόζονται πάντα με σταθερή σειρά: πρώτα, το στοιχείο γίνεται translate, μετά περιστροφή και μετά κλίμακα. Αυτό είναι λογικό και είναι αυτό που περιμένουμε οι περισσότεροι από εμάς. Ωστόσο, εάν χρησιμοποιήσουμε την ιδιότητα μετασχηματισμού, η σειρά με την οποία γράφονται οι συναρτήσεις είναι η σειρά με την οποία εφαρμόζονται. Σε αυτή την περίπτωση, αν μετακινήσουμε κάτι 100 pixel στον άξονα Χ και μετά το περιστρέψουμε κατά 45 μοίρες, δεν είναι το ίδιο με το να το περιστρέψουμε πρώτα κατά 45 μοίρες και μετά να το μετακινήσουμε κατά 100 pixel. /* Ροζ τετράγωνο: Πρώτα μεταφράστε, μετά περιστρέψτε */ .παράδειγμα-ένα { transform: translateX(100px) rotate(45deg); }
/* Πράσινο τετράγωνο: Πρώτα περιστρέψτε και μετά μεταφράστε */ .παράδειγμα-δύο { transform: rotate(45deg) translateX(100px); }
Δείτε το Pen Keyframes Tokens - Demo 11 [διχαλωτή] από τον Amit Sheen. Αλλά σύμφωνα με τη σειρά μετασχηματισμού, όλοι οι μεμονωμένοι μετασχηματισμοί - όλα όσα έχουμε χρησιμοποιήσει για τα διακριτικά καρέ-κλειδιά - συμβαίνουν πριν από τις συναρτήσεις μετασχηματισμού. Αυτό σημαίνει ότι οτιδήποτε ορίσετε στην ιδιότητα μετασχηματισμού θα συμβεί μετά τα κινούμενα σχέδια. Αλλά αν ορίσετε, για παράδειγμα, τη μετάφραση μαζί με τα βασικά καρέ kf-spin, η μετάφραση θα γίνει πριν από την κινούμενη εικόνα. Μπερδεμένη ακόμα;! Αυτό οδηγεί σε καταστάσεις όπου οι στατικές τιμές μπορούν να προκαλέσουν διαφορετικά αποτελέσματα για την ίδια κινούμενη εικόνα, όπως στην ακόλουθη περίπτωση:
/* Κοινή κινούμενη εικόνα και για τους δύο spinner */ .spinner { animation: kf-spin 1s linear infinite; }
/* Pink spinner: μετάφραση πριν από την περιστροφή (μεμονωμένος μετασχηματισμός) */ .spinner-ροζ { μετάφραση: 100% 50%; }
/* Green spinner: περιστροφή και μετά μετάφραση (σειρά συναρτήσεων) */ .spinner-green { transform: translate(100%, 50%); }
Δείτε το Pen Keyframes Tokens - Demo 12 [διχαλωτή] από τον Amit Sheen. Μπορείτε να δείτε ότι ο πρώτος κλώστης (ροζ) παίρνει μια μετάφραση που συμβαίνει πριν από την περιστροφή του kf-spin, οπότε πρώτα μετακινείται στη θέση του και μετά περιστρέφεται. Ο δεύτερος περιστρεφόμενος (πράσινος) λαμβάνει μια συνάρτηση translate() που συμβαίνει μετά τον μεμονωμένο μετασχηματισμό, οπότε το στοιχείο πρώτα περιστρέφεται, μετά κινείται σε σχέση με την τρέχουσα γωνία του και έχουμε αυτό το φαινόμενο ευρείας τροχιάς. Όχι, αυτό δεν είναι σφάλμα. Είναι μόνο ένα από εκείνα τα πράγματα που πρέπει να γνωρίζουμε για το CSS και να έχουμε κατά νου όταν εργαζόμαστε με πολλαπλά κινούμενα σχέδια ή πολλαπλούς μετασχηματισμούς. Εάν χρειάζεται, μπορείτε επίσης να δημιουργήσετε ένα επιπλέον σύνολο βασικών καρέ kf-spin-alt που περιστρέφουν στοιχεία χρησιμοποιώντας τη συνάρτηση rotate(). Μειωμένη κίνηση Και ενώ μιλάμε για εναλλακτικά βασικά καρέ, δεν μπορούμε να αγνοήσουμε την επιλογή "χωρίς κινούμενη εικόνα". Ένα από τα μεγαλύτερα πλεονεκτήματα της χρήσης διακριτικών βασικών καρέ είναι ότι η προσβασιμότητα μπορεί να δημιουργηθεί και στην πραγματικότητα είναι αρκετά εύκολο να γίνει. Σχεδιάζοντας τα βασικά καρέ μας έχοντας κατά νου την προσβασιμότητα, μπορούμε να διασφαλίσουμε ότι οι χρήστες που προτιμούν μειωμένη κίνηση θα έχουν μια πιο ομαλή, λιγότερο αποσπασματική εμπειρία, χωρίς επιπλέον εργασία ή διπλό κώδικα. Η ακριβής έννοια του "Reduced Motion" μπορεί να αλλάξει λίγο από το ένα animation στο άλλο και από έργο σε project, αλλά εδώ είναι μερικά σημαντικά σημεία που πρέπει να έχετε κατά νου: Σίγαση βασικών καρέ Ενώ ορισμένες κινούμενες εικόνες μπορούν να μειωθούν ή να επιβραδυνθούν, υπάρχουν άλλες που θα πρέπει να εξαφανιστούν εντελώς όταν ζητηθεί μειωμένη κίνηση. Τα παλμικά κινούμενα σχέδια είναι ένα καλό παράδειγμα. Για να βεβαιωθούμε ότι αυτά τα κινούμενα σχέδια δεν εκτελούνται σε λειτουργία μειωμένης κίνησης, μπορούμε απλώς να τα τυλίξουμε στο κατάλληλο ερώτημα μέσων.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { από { κλίμακα: var(--kf-pulse-scale-from, 1); αδιαφάνεια: var(--kf-pulse-opacity-from, 1); } σε { κλίμακα: var(--kf-pulse-scale-to, 1); αδιαφάνεια:var(--kf-pulse-opacity-to, 1); } } }
Αυτό διασφαλίζει ότι οι χρήστες που έχουν ρυθμίσει προτιμήσεις-μειωμένη-κίνηση για μείωση δεν θα δουν την κινούμενη εικόνα και θα αποκτήσουν μια εμπειρία που ταιριάζει με τις προτιμήσεις τους. Instant In Υπάρχουν ορισμένα βασικά καρέ που δεν μπορούμε απλά να αφαιρέσουμε, όπως κινούμενα σχέδια εισόδου. Η τιμή πρέπει να αλλάξει, πρέπει να ζωντανεύει. Διαφορετικά, το στοιχείο δεν θα έχει τις σωστές τιμές. Αλλά σε μειωμένη κίνηση, αυτή η μετάβαση από την αρχική τιμή θα πρέπει να είναι άμεση. Για να το πετύχουμε αυτό, θα ορίσουμε ένα επιπλέον σύνολο βασικών καρέ όπου η τιμή μεταβαίνει αμέσως στην τελική κατάσταση. Αυτά γίνονται τα προεπιλεγμένα βασικά καρέ μας. Στη συνέχεια, θα προσθέσουμε τα κανονικά βασικά καρέ μέσα σε ένα ερώτημα πολυμέσων για προτιμήσεις-μειωμένη-κίνηση που έχει οριστεί σε καμία προτίμηση, όπως στο προηγούμενο παράδειγμα. /* αναδυθείτε αμέσως για μειωμένη κίνηση */ @keyframes kf-zoom { από, προς { κλίμακα: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Πρωτότυπα βασικά καρέ ζουμ */ @keyframes kf-zoom { από { κλίμακα: var(--kf-zoom-from, 0,8); } σε { κλίμακα: var(--kf-zoom-to, 1); } } }
Με αυτόν τον τρόπο, οι χρήστες που προτιμούν μειωμένη κίνηση θα δουν το στοιχείο να εμφανίζεται αμέσως στην τελική του κατάσταση, ενώ όλοι οι άλλοι λαμβάνουν την κινούμενη μετάβαση. Η μαλακή προσέγγιση Υπάρχουν περιπτώσεις όπου θέλουμε να διατηρήσουμε κάποια κίνηση, αλλά πολύ πιο απαλή και ήρεμη από το αρχικό animation. Για παράδειγμα, μπορούμε να αντικαταστήσουμε μια είσοδο αναπήδησης με ένα απαλό fade-in.
@keyframes kf-bounce { /* Μαλακό fade-in για μειωμένη κίνηση */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Πρωτότυπα βασικά καρέ εγκατάλειψης */ } }
Τώρα, οι χρήστες με ενεργοποιημένη μειωμένη κίνηση εξακολουθούν να έχουν μια αίσθηση εμφάνισης, αλλά χωρίς την έντονη κίνηση μιας αναπήδησης ή ελαστικής κίνησης. Με τα δομικά στοιχεία στη θέση τους, το επόμενο ερώτημα είναι πώς να τα κάνετε μέρος της πραγματικής ροής εργασίας. Το να γράφω ευέλικτα βασικά καρέ είναι ένα πράγμα, αλλά το να τα κάνω αξιόπιστα σε ένα μεγάλο έργο απαιτεί μερικές στρατηγικές που έπρεπε να μάθω με τον δύσκολο τρόπο. Στρατηγικές Εφαρμογής & Βέλτιστες Πρακτικές Μόλις έχουμε μια σταθερή βιβλιοθήκη με διακριτικά βασικών καρέ, η πραγματική πρόκληση είναι πώς να τα φέρουμε στην καθημερινή εργασία.
Ο πειρασμός είναι να ρίξω όλα τα βασικά καρέ ταυτόχρονα και να δηλώσω ότι το πρόβλημα έχει λυθεί, αλλά στην πράξη έχω διαπιστώσει ότι τα καλύτερα αποτελέσματα προέρχονται από τη σταδιακή υιοθέτηση. Ξεκινήστε με τα πιο συνηθισμένα κινούμενα σχέδια, όπως fade ή slide. Αυτές είναι εύκολες νίκες που δείχνουν άμεση αξία χωρίς να απαιτούν μεγάλες επαναλήψεις. Η ονομασία είναι ένα άλλο σημείο που αξίζει προσοχής. Ένα σταθερό πρόθεμα ή χώρος ονομάτων καθιστά προφανές ποιες κινούμενες εικόνες είναι διακριτικά και ποιες τοπικές εφάπαξ. Αποτρέπει επίσης τυχαίες συγκρούσεις και βοηθά τα νέα μέλη της ομάδας να αναγνωρίσουν το κοινόχρηστο σύστημα με μια ματιά. Η τεκμηρίωση είναι εξίσου σημαντική με τον ίδιο τον κώδικα. Ακόμη και ένα σύντομο σχόλιο πάνω από κάθε διακριτικό καρέ-κλειδιά μπορεί να εξοικονομήσει ώρες εικασιών αργότερα. Ένας προγραμματιστής θα πρέπει να μπορεί να ανοίξει το αρχείο tokens, να σαρώσει για το εφέ που χρειάζεται και να αντιγράψει το μοτίβο χρήσης κατευθείαν στο στοιχείο του. Η ευελιξία είναι αυτό που κάνει αυτή την προσέγγιση να αξίζει την προσπάθεια. Εκθέτοντας λογικές προσαρμοσμένες ιδιότητες, δίνουμε στις ομάδες χώρο να προσαρμόσουν την κινούμενη εικόνα χωρίς να σπάσουν το σύστημα. Ταυτόχρονα, προσπαθήστε να μην περιπλέκεστε υπερβολικά. Δώστε τα πόμολα που έχουν σημασία και κρατήστε τα υπόλοιπα ενήμερα. Τέλος, θυμηθείτε την προσβασιμότητα. Δεν χρειάζεται κάθε κινούμενο σχέδιο εναλλακτική λύση μειωμένης κίνησης, αλλά πολλά χρειάζονται. Το ψήσιμο σε αυτές τις προσαρμογές νωρίς σημαίνει ότι δεν χρειάζεται ποτέ να τις επανατοποθετήσουμε αργότερα και δείχνει ένα επίπεδο φροντίδας που θα παρατηρήσουν οι χρήστες μας ακόμα κι αν δεν το αναφέρουν ποτέ.
Από την εμπειρία μου, η αντιμετώπιση των κουπονιών βασικών καρέ ως μέρος της ροής εργασίας των κουπονιών σχεδιασμού είναι αυτό που τα κάνει να κολλάνε. Μόλις τοποθετηθούν, παύουν να αισθάνονται σαν ειδικά εφέ και γίνονται μέρος της σχεδιαστικής γλώσσας, μια φυσική επέκταση του τρόπου με τον οποίο το προϊόν κινείται και ανταποκρίνεται. Αναδίπλωση Τα κινούμενα σχέδια μπορεί να είναι ένα από τα πιο χαρούμενα μέρη των διεπαφών κτιρίου, αλλά χωρίς δομή, μπορούν επίσης να γίνουν μια από τις μεγαλύτερες πηγές απογοήτευσης. Αντιμετωπίζοντας τα βασικά καρέ ως διακριτικά, παίρνετε κάτι που είναι συνήθως ακατάστατο και δύσκολο να το διαχειριστείτε και το μετατρέπετε σε ένα σαφές, προβλέψιμο σύστημα. Η πραγματική αξία δεν είναι μόνο η αποθήκευση μερικών γραμμών κώδικα. Είναι σίγουρο ότι όταν χρησιμοποιείτε ένα fade, slide, ζουμ ή περιστροφή, γνωρίζετε ακριβώς πώς θα συμπεριφερθεί σε όλο το έργο. Είναι στην ευελιξία που προέρχεται από προσαρμοσμένες ιδιότητες χωρίς το χάος των ατελείωτων παραλλαγών. Και είναι στην προσβασιμότητα που είναι ενσωματωμένη στο θεμέλιο αντί να προστίθεται ωςμια μεταγενέστερη σκέψη. Έχω δει αυτές τις ιδέες να λειτουργούν σε διαφορετικές ομάδες και διαφορετικές βάσεις κωδικών, και το μοτίβο είναι πάντα το ίδιο. Μόλις τοποθετηθούν τα διακριτικά, τα βασικά καρέ παύουν να είναι μια διάσπαρτη συλλογή κόλπων και γίνονται μέρος της γλώσσας σχεδιασμού. Κάνουν το προϊόν να αισθάνεται πιο σκόπιμο, πιο συνεπές και πιο ζωντανό. Εάν πάρετε ένα πράγμα από αυτό το άρθρο, ας είναι το εξής: τα κινούμενα σχέδια αξίζουν την ίδια φροντίδα και δομή που δίνουμε ήδη στα χρώματα, την τυπογραφία και την απόσταση. Μια μικρή επένδυση σε κουπόνια βασικών καρέ αποδίδει κάθε φορά που μετακινείται η διεπαφή σας.
