Πριν ξεκινήσω την καριέρα μου στην ανάπτυξη, έκανα πολλές δουλειές με κινούμενα γραφικά στο After Effects. Αλλά ακόμα και με αυτό το υπόβαθρο, εξακολουθούσα να έβρισκα την κίνηση στον Ιστό αρκετά μπερδεμένη.
Τα γραφικά βίντεο σχεδιάζονται σε μια συγκεκριμένη αναλογία και στη συνέχεια εξάγονται. Ολοκληρώθηκε! Αλλά δεν υπάρχουν "ρυθμίσεις εξαγωγής" στον ιστό. Απλώς προωθούμε τον κώδικα στον κόσμο και τα κινούμενα σχέδια μας πρέπει να προσαρμοστούν σε οποιαδήποτε συσκευή προσγειώνονται.
Ας μιλήσουμε λοιπόν για responsive animation! Πώς προσεγγίζουμε καλύτερα την κινούμενη εικόνα στον άγριο ιστό; Θα καλύψουμε ορισμένες γενικές προσεγγίσεις, ορισμένες συμβουλές για το GSAP και ορισμένες αρχές κίνησης. Ας ξεκινήσουμε με λίγο καδράρισμα…
Πώς θα χρησιμοποιηθεί αυτό το κινούμενο σχέδιο;
Το άρθρο του Zach Saucier για το responsive animation συνιστά να κάνετε ένα βήμα πίσω για να σκεφτείτε το τελικό αποτέλεσμα πριν μεταβείτε στον κώδικα.
Το animation θα είναι μια ενότητα που θα επαναλαμβάνεται σε πολλά μέρη της εφαρμογής σας; Χρειάζεται καθόλου κλίμακα; Το να έχετε αυτό υπόψη σας μπορεί να σας βοηθήσει να προσδιορίσετε τη μέθοδο με την οποία θα πρέπει να κλιμακωθεί ένα κινούμενο σχέδιο και να σας αποτρέψει από τη σπατάλη προσπάθειας.
Αυτή είναι εξαιρετική συμβουλή. ΕΝΑ τεράστιος μέρος του σχεδιασμού responsive animation είναι να γνωρίζουμε εάν και πώς πρέπει να κλιμακωθεί αυτό το animation και, στη συνέχεια, να επιλέξουμε τη σωστή προσέγγιση από την αρχή.
Τα περισσότερα κινούμενα σχέδια εμπίπτουν στις ακόλουθες κατηγορίες:
- Σταθερός: Κινούμενα σχέδια για πράγματα όπως εικονίδια ή προγράμματα φόρτωσης που διατηρούν το ίδιο μέγεθος και λόγο διαστάσεων σε όλες τις συσκευές. Δεν υπάρχει τίποτα να ανησυχείτε εδώ! Κωδικοποιήστε σκληρά ορισμένες τιμές pixel εκεί και συνεχίστε τη μέρα σας.
- Υγρό: Κινούμενα σχέδια που πρέπει να προσαρμόζονται ομαλά σε διαφορετικές συσκευές. Τα περισσότερα κινούμενα σχέδια διάταξης εμπίπτουν σε αυτήν την κατηγορία.
- Στοχευμένες: Κινούμενα σχέδια που είναι συγκεκριμένα για μια συγκεκριμένη συσκευή ή μέγεθος οθόνης ή αλλάζουν ουσιαστικά σε ένα συγκεκριμένο σημείο διακοπής, όπως κινούμενα σχέδια μόνο για επιτραπέζιους υπολογιστές ή αλληλεπιδράσεις που βασίζονται σε αλληλεπίδραση συγκεκριμένης συσκευής, όπως το άγγιγμα ή το δείκτη του ποντικιού.
Τα ρευστά και στοχευμένα κινούμενα σχέδια απαιτούν διαφορετικούς τρόπους σκέψης και λύσεις. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ…
Ρευστό κινούμενο σχέδιο
As Άντι Μπελ λέει: Γίνετε ο μέντορας του προγράμματος περιήγησης, όχι ο μικροδιαχειριστής του — δώστε στο πρόγραμμα περιήγησης ορισμένους σταθερούς κανόνες και συμβουλές και, στη συνέχεια, αφήστε το να λάβει τις σωστές αποφάσεις για τα άτομα που το επισκέπτονται.
(Εδώ είναι τις διαφάνειες από αυτή την παρουσίαση.)
Το Fluid animation έχει να κάνει με το να αφήνουμε το πρόγραμμα περιήγησης να κάνει τη σκληρή δουλειά. Πολλά κινούμενα σχέδια μπορούν εύκολα να προσαρμοστούν σε διαφορετικά περιβάλλοντα χρησιμοποιώντας τις κατάλληλες ενότητες από την αρχή. Εάν αλλάξετε το μέγεθος αυτού του στυλό, μπορείτε να δείτε ότι το animation χρησιμοποιεί μονάδες θέασης κλιμακώνεται ομαλά καθώς το πρόγραμμα περιήγησης προσαρμόζει:
Το μωβ πλαίσιο αλλάζει ακόμη και πλάτος σε διαφορετικά σημεία διακοπής, αλλά καθώς χρησιμοποιούμε ποσοστά για να το μετακινήσουμε, το κινούμενο σχέδιο κλιμακώνεται μαζί του.
Κίνηση ιδιοτήτων διάταξης όπως left και top μπορεί να προκαλέσει εκ νέου ροές διάταξης και ταραχώδη κινούμενα σχέδια, οπότε, όπου είναι δυνατόν, επιμείνετε σε μετασχηματισμούς και αδιαφάνεια.
Ωστόσο, δεν περιοριζόμαστε μόνο σε αυτές τις μονάδες — ας ρίξουμε μια ματιά σε μερικές άλλες δυνατότητες.
Μονάδες SVG
Ένα από τα πράγματα που μου αρέσει να δουλεύω με το SVG είναι ότι μπορούμε να χρησιμοποιήσουμε μονάδες χρήστη SVG για κινούμενα σχέδια που ανταποκρίνονται εξαρχής. Η ιδέα είναι πραγματικά στο όνομα - Επεκτάσιμα διανυσματικό γραφικό. Στο SVG-land, όλα τα στοιχεία σχεδιάζονται σε συγκεκριμένες συντεταγμένες. Ο χώρος SVG είναι σαν ένα άπειρο κομμάτι γραφικού χαρτιού όπου μπορούμε να τακτοποιήσουμε στοιχεία. ο viewBox ορίζει τις διαστάσεις του γραφικού χαρτιού που μπορούμε να δούμε.
viewBox="0 0 100 50”Σε αυτό το επόμενο demo, το SVG μας viewBox is 100 μονάδες πλατιά και 50 μονάδες ψηλό. Αυτό σημαίνει αν κινούμε το στοιχείο με 100 μονάδες κατά μήκος του άξονα x, θα κινείται πάντα κατά όλο το πλάτος του μητρικού SVG του, ανεξάρτητα από το πόσο μεγάλο ή μικρό είναι αυτό το SVG! Δώστε στο demo ένα μέγεθος για να το δείτε.
Η κίνηση ενός θυγατρικού στοιχείου με βάση το πλάτος ενός γονικού κοντέινερ είναι ένα μικρό κόλπο στη χώρα HTML. Μέχρι τώρα, έπρεπε να αρπάξουμε το πλάτος του γονέα με JavaScript, κάτι που είναι αρκετά εύκολο όταν κάνετε κινούμενες εικόνες from μια μεταμορφωμένη θέση, αλλά λίγο πιο τρελή όταν κάνετε εμψύχωση to κάπου όπως μπορείτε να δείτε στο παρακάτω demo. Εάν το τελικό σημείο σας είναι μια μετασχηματισμένη θέση και αλλάξετε το μέγεθος της οθόνης, θα πρέπει να προσαρμόσετε χειροκίνητα αυτήν τη θέση. Ακατάστατο… 🤔
Εάν προσαρμόσετε τις τιμές στην αλλαγή μεγέθους, θυμηθείτε να το κάνετε αναπήδηση, ή ακόμα και ενεργοποιήστε τη λειτουργία μετά την ολοκλήρωση της αλλαγής μεγέθους του προγράμματος περιήγησης. Οι ακροατές αλλαγής μεγέθους ενεργοποιούν έναν τόνο συμβάντων κάθε δευτερόλεπτο, επομένως η ενημέρωση ιδιοτήτων σε κάθε συμβάν είναι πολύ δουλειά για το πρόγραμμα περιήγησης.
Όμως, αυτή η ταχύτητα κινουμένων σχεδίων θα αποτελέσει σύντομα παρελθόν! Drum roll παρακαλώ… 🥁
Μονάδες κοντέινερ! Υπέροχα πράγματα. Τη στιγμή που το γράφω αυτό, λειτουργούν μόνο σε Chrome και Safari — αλλά ίσως μέχρι να το διαβάσετε αυτό, θα έχουμε και τον Firefox. Δείτε τα σε δράση σε αυτό το επόμενο demo. Κοιτάξτε αυτά τα μικρά παιδιά που πάνε! Δεν είναι αυτό συναρπαστικό, κινούμενο σχέδιο που σχετίζεται με τα μητρικά στοιχεία!
Αυτά τα δεδομένα υποστήριξης προγράμματος περιήγησης προέρχονται από Μπορώ να χρησιμοποιήσω, το οποίο έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη δυνατότητα σε αυτήν την έκδοση και νεότερη.
Υπολογιστής
| Chrome | Firefox | IE | άκρη | Safari |
|---|---|---|---|---|
| 105 | Οχι | Οχι | 105 | 16.0 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Οχι | 106 | 16.0 |
Ρευστοποιημένες μεταβάσεις διάταξης με FLIP
Όπως αναφέραμε προηγουμένως, στο SVG-land κάθε στοιχείο τοποθετείται τακτοποιημένα σε ένα πλέγμα και είναι πολύ εύκολο να μετακινηθεί με απόκριση. Στη χώρα HTML είναι πολύ πιο περίπλοκο. Προκειμένου να δημιουργήσουμε διατάξεις με απόκριση, χρησιμοποιούμε μια δέσμη διαφορετικών μεθόδων τοποθέτησης και συστημάτων διάταξης. Μία από τις κύριες δυσκολίες της κίνησης στον Ιστό είναι αυτή πολύ των αλλαγών στη διάταξη είναι αδύνατο να ζωντανεύουν. Ίσως ένα στοιχείο πρέπει να μετακινηθεί από τη θέση του relative προς την fixed, ή ορισμένα παιδιά ενός εύκαμπτου κοντέινερ πρέπει να ανακατευτούν ομαλά γύρω από το παράθυρο προβολής. Ίσως ένα στοιχείο πρέπει ακόμη και να δημιουργηθεί εκ νέου και να μετακινηθεί σε μια εντελώς νέα θέση στο DOM.
Δύσκολο, ε;
Καλά. Η τεχνική FLIP είναι εδώ για να σώσει την ημέρα. μας επιτρέπει να ζωντανεύουμε εύκολα αυτά τα αδύνατα πράγματα. Η βασική προϋπόθεση είναι:
- Όνομα: Πιάστε την αρχική θέση των στοιχείων που εμπλέκονται στη μετάβαση.
- Επίθετο: Μετακινήστε τα στοιχεία και πιάστε την τελική θέση.
- Αντιστροφή: Επεξεργαστείτε τις αλλαγές μεταξύ της πρώτης και της τελευταίας κατάστασης και εφαρμόστε μετασχηματισμούς για να αντιστρέψετε τα στοιχεία πίσω στην αρχική τους θέση. Αυτό το κάνει να φαίνεται ότι τα στοιχεία είναι ακόμα μέσα πρώτα θέση αλλά στην πραγματικότητα δεν είναι.
- Δοκιμάστε να παίξετε: Αφαιρέστε τους ανεστραμμένους μετασχηματισμούς και κάντε κίνηση σε αυτούς παραπλανητική πρώτα κράτος στο τελευταία κατάσταση.
Ακολουθεί μια επίδειξη που χρησιμοποιεί το πρόσθετο FLIP του GSAP που κάνει όλα τα βαριά για εσάς!
Αν θέλετε να καταλάβετε λίγο περισσότερα για την εφαρμογή της βανίλιας, κατευθυνθείτε στο Paul Lewis ανάρτηση — είναι ο εγκέφαλος πίσω από την τεχνική FLIP.
SVG με ρευστή κλιμάκωση
Με καταλάβατε… δεν είναι πραγματικά μια συμβουλή κινουμένων σχεδίων. Αλλά το να στήσεις σωστά τη σκηνή είναι επιτακτική ανάγκη για καλό animation! Το SVG κλιμακώνεται εξαιρετικά όμορφα από προεπιλογή, αλλά μπορούμε να ελέγξουμε πώς κλιμακώνεται ακόμη περισσότερο preserveAspectRatio, που είναι πολύ βολικό όταν ο λόγος διαστάσεων του στοιχείου SVG και το viewBox ο λόγος διαστάσεων είναι διαφορετικός. Λειτουργεί πολύ με τον ίδιο τρόπο όπως το background-position και background-size ιδιότητες σε CSS. Η δήλωση αποτελείται από μια τιμή ευθυγράμμισης (background-position) Και Γνωρίστε or Φέτα αναφορά (background-size).
Όσο για αυτές τις αναφορές Meet and Slice — slice είναι σαν background size: cover, να meet είναι σαν background-size: contain.
preserveAspectRatio="MidYMax slice"— Ευθυγραμμίστε στο μέσο του άξονα x, στο κάτω μέρος του άξονα y και αυξήστε την κλίμακα για να καλύψετε ολόκληρη τη θύρα προβολής.preserveAspectRatio="MinYMin meet"— Ευθυγραμμίστε προς τα αριστερά του άξονα x, στην κορυφή του άξονα y και κλιμακώστε προς τα επάνω διατηρώντας παράλληλα ολόκληροviewBoxορατό
Tom Miller κάνει αυτό ένα βήμα παραπέρα χρησιμοποιώντας overflow: visible σε CSS και ένα στοιχείο που περιέχει για να αποκαλύψει το "στάδιο αριστερά" και το "στάδιο δεξιά" διατηρώντας το ύψος περιορισμένο:
Για αποκριτικά κινούμενα σχέδια SVG, μπορεί να είναι χρήσιμο να χρησιμοποιήσετε το πλαίσιο προβολής SVG για να δημιουργήσετε μια προβολή που περικόπτει και κλιμακώνεται κάτω από ένα συγκεκριμένο πλάτος προγράμματος περιήγησης, ενώ επίσης αποκαλύπτει περισσότερα από τα κινούμενα σχέδια SVG δεξιά και αριστερά όταν το πρόγραμμα περιήγησης είναι ευρύτερο από αυτό κατώφλι. Μπορούμε να το πετύχουμε αυτό προσθέτοντας υπερχείλιση ορατή στο SVG και ομαδοποιώντας το με ένα
max-heightπεριτύλιγμα για να αποτρέψετε την υπερβολική κατακόρυφη κλιμάκωση του SVG.
Καμβάς με ρευστή κλίμακα
Ο καμβάς είναι πολύ πιο αποτελεσματικός για πολύπλοκα κινούμενα σχέδια με πλήθος κινούμενων μερών από την κίνηση SVG ή HTML DOM, αλλά είναι εγγενώς πιο πολύπλοκο. Πρέπει να δουλέψεις για αυτά τα κέρδη απόδοσης! Σε αντίθεση με το SVG που έχει υπέροχες μονάδες απόκρισης και κλιμάκωση εκτός συσκευασίας, πρέπει να είναι αφεντικό και μικροδιαχείριση λίγο.
Μου αρέσει να στήνω το δικό μου έτσι ώστε να λειτουργεί με τον ίδιο τρόπο όπως το SVG (μπορεί να είμαι προκατειλημμένος) με ένα υπέροχο σύστημα μονάδας που λειτουργεί εντός και μια σταθερή αναλογία διαστάσεων. Πρέπει επίσης να επανασχεδιάζεται κάθε φορά που αλλάζει κάτι, γι' αυτό θυμηθείτε να καθυστερήσετε την επανασχεδίαση έως ότου ολοκληρωθεί η αλλαγή μεγέθους του προγράμματος περιήγησης ή η αναπήδηση!
Τζορτζ Φράνσις συνδυάστε και αυτό όμορφη μικρή βιβλιοθήκη που σας επιτρέπει να ορίσετε έναν Καμβά viewBox χαρακτηριστικό και preserveAspectRatio — ακριβώς όπως το SVG!
Στοχευμένο animation
Μπορεί μερικές φορές να χρειαστεί να ακολουθήσετε μια λιγότερο ρευστή και πιο κατευθυνόμενη προσέγγιση στο κινούμενο σχέδιο σας. Οι φορητές συσκευές έχουν πολύ λιγότερη ακίνητη περιουσία και λιγότερη απόδοση κινουμένων σχεδίων από μια επιτραπέζια μηχανή. Επομένως, είναι λογικό να προβάλλουμε μειωμένες κινούμενες εικόνες σε χρήστες κινητών, ενδεχομένως ακόμη και χωρίς κινούμενα σχέδια:
Μερικές φορές το καλύτερο responsive animation για κινητά δεν είναι καθόλου animation! Για το φορητό UX, δώστε προτεραιότητα στο να αφήσετε τον χρήστη να καταναλώνει γρήγορα περιεχόμενο έναντι της αναμονής για την ολοκλήρωση των κινούμενων εικόνων. Τα κινούμενα σχέδια για κινητά θα πρέπει να βελτιώνουν το περιεχόμενο, την πλοήγηση και τις αλληλεπιδράσεις αντί να το καθυστερούν. Έρικ βαν Χολτζ
Για να το κάνουμε αυτό, μπορούμε να χρησιμοποιήσουμε ερωτήματα πολυμέσων για να στοχεύσουμε συγκεκριμένα μεγέθη θυρών προβολής, όπως ακριβώς κάνουμε όταν κάνουμε στυλ με CSS! Ακολουθεί μια απλή επίδειξη που δείχνει μια κινούμενη εικόνα CSS που χειρίζεται με τη χρήση ερωτημάτων πολυμέσων και μια κινούμενη εικόνα GSAP που χειρίζεται με gsap.matchMedia():
Η απλότητα αυτού του demo κρύβει ένα σωρό μαγεία! Τα κινούμενα σχέδια JavaScript απαιτούν λίγο περισσότερη ρύθμιση και καθαρισμό προκειμένου να λειτουργούν σωστά μόνο σε ένα συγκεκριμένο μέγεθος οθόνης. Έχω δει τρόμους στο παρελθόν όπου οι άνθρωποι απλώς έκρυβαν το animation από το CSS opacity: 0, αλλά το κινούμενο σχέδιο εξακολουθεί να σβήνει στο παρασκήνιο χρησιμοποιώντας πόρους. 😱
Εάν το μέγεθος της οθόνης δεν ταιριάζει πλέον, η κινούμενη εικόνα πρέπει να σκοτωθεί και να κυκλοφορήσει για συλλογή σκουπιδιών και τα στοιχεία που επηρεάζονται από την κινούμενη εικόνα πρέπει να απαλειφθούν από τυχόν ενσωματωμένα στυλ που εισάγονται από την κίνηση, προκειμένου να αποφευχθούν συγκρούσεις με άλλα στυλ. Μέχρις ότου gsap.matchMedia(), αυτή ήταν μια τρελή διαδικασία. Έπρεπε να παρακολουθούμε κάθε κινούμενη εικόνα και να τα διαχειριζόμαστε χειροκίνητα.
gsap.matchMedia() Αντίθετα, σας επιτρέπει να τοποθετείτε εύκολα τον κώδικα κινούμενης εικόνας σε μια συνάρτηση που εκτελείται μόνο όταν μια συγκεκριμένη ερώτημα μέσων σπίρτα. Στη συνέχεια, όταν δεν ταιριάζει πλέον, όλα τα κινούμενα σχέδια GSAP και ScrollTriggers σε αυτήν τη λειτουργία επαναφέρονται αυτόματα. Το ερώτημα πολυμέσων στο οποίο εμφανίζονται τα κινούμενα σχέδια κάνει όλη τη σκληρή δουλειά για εσάς. Είναι στο GSAP 3.11.0 και αλλάζει το παιχνίδι!
Δεν περιοριζόμαστε μόνο στα μεγέθη οθόνης. Υπάρχουν ένα ένας τόνος χαρακτηριστικών πολυμέσων εκεί έξω να κολλήσει!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Στο παρακάτω demo προσθέσαμε μια επιταγή για prefers-reduced-motion έτσι ώστε οι χρήστες που βρίσκουν τα κινούμενα σχέδια αποπροσανατολιστικά να μην ενοχλούνται από τα πράγματα που τρέχουν.
Και ρίξτε μια ματιά στο άλλο διασκεδαστικό demo του Tom Miller όπου χρησιμοποιεί την αναλογία διαστάσεων της συσκευής για να προσαρμόσει την κινούμενη εικόνα:
Σκέψη έξω από το κουτί, πέρα από τα μεγέθη οθόνης
Υπάρχουν πολλά περισσότερα στο να σκεφτόμαστε τα responsive animation παρά μόνο μεγέθη οθόνης. Διαφορετικές συσκευές επιτρέπουν διαφορετικές αλληλεπιδράσεις και είναι εύκολο να μπλέξετε λίγο όταν δεν το λάβετε υπόψη αυτό. Εάν δημιουργείτε καταστάσεις αιώρησης σε CSS, μπορείτε να χρησιμοποιήσετε το hover δυνατότητα πολυμέσων για να ελέγξετε εάν είναι του χρήστη πρωταρχικός Ο μηχανισμός εισόδου μπορεί να αιωρείται πάνω από στοιχεία.
@media (hover: hover) {
/* CSS hover state here */
}Μερικές συμβουλές από Τζέικ Γουάιτλι:
Πολλές φορές βασίζουμε τα κινούμενα σχέδια μας στο πλάτος του προγράμματος περιήγησης, κάνοντας την αφελή υπόθεση ότι οι χρήστες επιτραπέζιων υπολογιστών θέλουν καταστάσεις αιώρησης. Προσωπικά είχα πολλά ζητήματα στο παρελθόν όπου θα άλλαζα σε διάταξη επιφάνειας εργασίας >1024 εικονοστοιχεία, αλλά μπορεί να κάνω ανίχνευση αφής σε JS – οδηγώντας σε αναντιστοιχία όπου η διάταξη ήταν για επιτραπέζιους υπολογιστές, αλλά το JS για κινητά. Αυτές τις μέρες ακουμπάω στο δείκτη του ποντικιού και του δείκτη για να διασφαλίσω την ισοτιμία και να χειρίζομαι τα Pros του iPad ή τις επιφάνειες των παραθύρων (που μπορούν να αλλάξουν τον τύπο του δείκτη ανάλογα με το αν το κάλυμμα είναι κάτω ή όχι)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Στη συνέχεια, θα συνδυάσω τα ερωτήματα διάταξης CSS και τα ερωτήματα JavaScript, οπότε θεωρώ τη συσκευή εισόδου ως τον κύριο παράγοντα υποστηρίζονται κατά πλάτος και όχι το αντίθετο.
Συμβουλές ScrollTrigger
Εάν χρησιμοποιείτε GSAP Πρόσθετο ScrollTrigger, υπάρχει ένα εύχρηστο μικρό βοηθητικό πρόγραμμα στο οποίο μπορείτε να συνδέσετε για να διακρίνετε εύκολα τις δυνατότητες αφής της συσκευής: ScrollTrigger.isTouch.
0- καμια επαφη (μόνο δείκτης/ποντίκι)1- μόνο αφής συσκευή (όπως ένα τηλέφωνο)2– η συσκευή μπορεί να δεχθεί αφή είσοδος και ποντίκι/δείκτη (όπως τα tablet Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Μια άλλη συμβουλή για κινούμενα σχέδια με απόκριση με κύλιση…
Η παρακάτω επίδειξη μετακινεί μια συλλογή εικόνων οριζόντια, αλλά το πλάτος αλλάζει ανάλογα με το μέγεθος της οθόνης. Εάν αλλάξετε το μέγεθος της οθόνης όταν βρίσκεστε στα μισά του δρόμου μιας καθαρισμένης κινούμενης εικόνας, μπορεί να καταλήξετε με κατεστραμμένα κινούμενα σχέδια και μπαγιάτικες τιμές. Αυτό είναι ένα συνηθισμένο speedbump, αλλά λύνεται εύκολα! Μετατρέψτε τον υπολογισμό που εξαρτάται από το μέγεθος της οθόνης σε μια λειτουργική τιμή και ορίστε invalidateOnRefresh:true. Με αυτόν τον τρόπο, το ScrollTrigger θα υπολογίσει εκ νέου αυτήν την τιμή για εσάς όταν αλλάξει το μέγεθος του προγράμματος περιήγησης.
Μπόνους GSAP nerd tip!
Σε κινητές συσκευές, η γραμμή διευθύνσεων του προγράμματος περιήγησης συνήθως εμφανίζεται και κρύβεται καθώς κάνετε κύλιση. Αυτό μετράει ως συμβάν αλλαγής μεγέθους και θα ενεργοποιηθεί α ScrollTrigger.refresh(). Αυτό μπορεί να μην είναι ιδανικό καθώς μπορεί να προκαλέσει άλματα στο κινούμενο σχέδιο σας. Προστέθηκε το GSAP 3.10 ignoreMobileResize. Δεν επηρεάζει τη συμπεριφορά της γραμμής του προγράμματος περιήγησης, αλλά αποτρέπει ScrollTrigger.refresh() από το πυροβολισμό για μικρές κατακόρυφες αλλαγές μεγεθών σε συσκευές μόνο αφής.
ScrollTrigger.config({
ignoreMobileResize: true
});Αρχές κίνησης
Σκέφτηκα να σας αφήσω μερικές βέλτιστες πρακτικές που πρέπει να λάβετε υπόψη όταν εργάζεστε με κίνηση στον Ιστό.
Απόσταση και χαλάρωση
Ένα μικρό αλλά σημαντικό πράγμα που ξεχνιέται εύκολα με το responsive animation είναι η σχέση μεταξύ ταχύτητας, ορμής και απόστασης! Καλό κινούμενο σχέδιο πρέπει να μιμείται τον πραγματικό κόσμο για να αισθάνεστε πιστευτοί και χρειάζεται περισσότερος χρόνος στον πραγματικό κόσμο για να καλύψετε μεγαλύτερη απόσταση. Δώστε προσοχή στην απόσταση που διανύει η κινούμενη εικόνα σας και βεβαιωθείτε ότι η διάρκεια και η ευκολία που χρησιμοποιούνται έχουν νόημα σε σχέση με άλλα κινούμενα σχέδια.
Μπορείτε επίσης συχνά να εφαρμόσετε πιο δραματική χαλάρωση σε στοιχεία με περαιτέρω μετακίνηση για να δείξετε την αυξημένη ορμή:
Για ορισμένες περιπτώσεις χρήσης μπορεί να είναι χρήσιμο να προσαρμόσετε τη διάρκεια πιο δυναμικά με βάση το πλάτος της οθόνης. Σε αυτό το επόμενο demo χρησιμοποιούμε gsap.utils για να σφίξουμε την τιμή που παίρνουμε πίσω από το ρεύμα window.innerWidth σε ένα εύλογο εύρος, τότε αντιστοιχίζουμε αυτόν τον αριθμό σε μια διάρκεια.
Διάστημα και ποσότητα
Ένα άλλο πράγμα που πρέπει να έχετε κατά νου είναι η απόσταση και η ποσότητα των στοιχείων σε διαφορετικά μεγέθη οθόνης. Παράθεση Στίβεν Σο:
Εάν έχετε κάποιο είδος περιβαλλοντικής κινούμενης εικόνας (παράλλαξη, σύννεφα, δέντρα, κομφετί, διακοσμητικά κ.λπ.) που βρίσκονται σε απόσταση γύρω από το παράθυρο, βεβαιωθείτε ότι κλιμακώνουν ή/και προσαρμόζουν την ποσότητα ανάλογα με το μέγεθος της οθόνης. Οι μεγάλες οθόνες χρειάζονται πιθανώς περισσότερα στοιχεία απλωμένα παντού, ενώ οι μικρές οθόνες χρειάζονται μόνο λίγα για το ίδιο εφέ.
Λατρεύω το πώς Όφερ Βίσνια σκέφτεται το animation ως σκηνή. Η προσθήκη και η αφαίρεση στοιχείων δεν χρειάζεται απλώς να είναι τυπικότητα, αλλά μπορεί να είναι μέρος της συνολικής χορογραφίας.
Όταν σχεδιάζετε κινούμενα σχέδια με απόκριση, η πρόκληση δεν είναι πώς να στριμώξετε το ίδιο περιεχόμενο στη θύρα προβολής ώστε να «ταιριάζει», αλλά μάλλον πώς να επιμεληθείτε το σύνολο του υπάρχοντος περιεχομένου ώστε να επικοινωνεί την ίδια πρόθεση. Αυτό σημαίνει να κάνετε μια συνειδητή επιλογή των κομματιών που θα περιέχουν και ποια θα αφαιρέσετε. Συνήθως στον κόσμο των κινουμένων σχεδίων τα πράγματα δεν εμφανίζονται μόνο μέσα ή έξω από το κάδρο. Είναι λογικό να σκεφτόμαστε στοιχεία που εισέρχονται ή εξέρχονται από τη «σκηνή», ζωντανεύοντας αυτή τη μετάβαση με τρόπο που να έχει οπτικό και θεματικό νόημα.
Και αυτό είναι το πολύ. Εάν έχετε περισσότερες συμβουλές για την απόκριση κινούμενων σχεδίων, βάλτε τις στην ενότητα σχολίων. Αν υπάρχει κάτι εξαιρετικά χρήσιμο, θα το προσθέσω σε αυτήν τη συλλογή πληροφοριών!
προσθήκη
Μια ακόμη σημείωση από Tom Miller καθώς ετοίμαζα αυτό το άρθρο:
Πιθανότατα άργησα πολύ με αυτήν την συμβουλή για το ανταποκρινόμενο άρθρο κινούμενων εικόνων, αλλά συνιστώ ανεπιφύλακτα "οριστικοποιήστε όλα τα κινούμενα σχέδια πριν από τη δημιουργία". Αυτήν τη στιγμή προσαρμόζω εκ των υστέρων ορισμένες κινούμενες εικόνες τοποθεσιών με "εκδόσεις για κινητά". Δόξα τω Θεώ για
gsap.matchMedia… αλλά σίγουρα θα ήθελα να ξέραμε ότι θα υπήρχαν ξεχωριστές διατάξεις/κινούμενα σχέδια για κινητά από την αρχή.
Νομίζω ότι όλοι εκτιμούμε ότι αυτή η συμβουλή για «προγραμματισμό» ήρθε την τελευταία στιγμή. Ευχαριστώ, Tom, και καλή τύχη με αυτές τις μετασκευές.
