Πώς να δημιουργήσετε όμορφες κινήσεις SVG Εύκολα

Τελική έκδοση αυτού που θα δημιουργήσουμε!

Η κίνηση στο διαδίκτυο δεν ήταν ποτέ πιο απλή. Το SVG (Scalable Vector Graphics) χρησιμοποιεί σήμανση XML για να συμβάλει στην εμφάνιση των πραγμάτων στο πρόγραμμα περιήγησης. Ακολουθεί ένα παράδειγμα. Εάν κάνατε λήψη ενός png ή ενός jpeg θα πάρετε μόνο την εικόνα που θα έπρεπε να κάνετε με το πρόγραμμα περιήγησης χρησιμοποιώντας μια ετικέτα . Τίποτα δεν είναι κακό με αυτό, αλλά αν ήθελα να το κάνω ζωντανό είμαι πολύ περιορισμένος. Πώς αλλάζει αυτό το SVG;


 

Ακολουθεί ένα δείγμα SVG. Χρησιμοποιεί XML που είναι πολύ παρόμοια με το HTML. Για την κίνηση, αυτό κάνει τα πράγματα πολύ απλά.

Για να ζωντανέψετε, χρειαζόμαστε πρώτα 2 βιβλιοθήκες, το TweenMax και το TimelineMax από το GSAP. Ακολουθούν περισσότερες πληροφορίες σε περίπτωση που δεν έχετε ακούσει γι 'αυτούς. Για τους τεμπέλης, εδώ είναι το CDN.

Για χάρη του σεμιναρίου, δεν πρόκειται να δημιουργήσουμε τα δικά μας SVG. Θα πάμε μόνο ένα από online. Ένα από τα αγαπημένα μου sites για εικόνες και όμορφες εικόνες είναι Flaticon. Έχουν πολλές διαφορετικές επιλογές αλλά από τη στιγμή που είμαστε κωδικοποιητές επέλεξα μια οθόνη. Πραγματικό πρωτότυπο, ξέρω.

Το Flaticon μας αγκαλιάζει με SVG επειδή γνωρίζουν ότι θέλουμε να ζωντανέψουμε

Αφού έχετε κατεβάσει το αρχείο, ανοίξτε το και αντιγράψτε τον κώδικα σε έναν ιστότοπο όπως το CodePen ή το JSfiddle ... ή αν δεν εμπιστεύεστε αυτούς τους σκληρούς ιστοτόπους, τότε μπορείτε απλά να χρησιμοποιήσετε τον δικό σας επεξεργαστή κώδικα. Πάμε!!

Ρίχνοντας σε ένα μικρό μακιγιάζ

Αυτό το βήμα είναι προαιρετικό, αλλά προσωπικά μισώ (Λυπάμαι, ισχυρή λέξη) πως ο SVG δεν είναι κεντραρισμένος. Το χρώμα του φόντου δεν είναι τόσο ωραίο. Ας το αλλάξουμε. Αλλάξτε το σώμα σε οποιοδήποτε χρώμα θέλετε και στη συνέχεια προσθέστε αυτές τις ιδιότητες CSS στο αναγνωριστικό του στοιχείου SVG (στην περίπτωσή μου ονομάζεται "Layer_1"). Για να κεντράρετε, προσθέτετε την οθόνη: μπλοκ? και περιθώριο: 0 αυτόματα.

Περιμένετε λίγο, αυτό φαίνεται οικείο ....

Αναλύοντας το SVG μας

Στην τελευταία ενότητα, ίσως παρατηρήσατε ότι χρησιμοποιήσαμε το CSS για να κεντράρουμε το SVG μας. Ας ρίξουμε μια ματιά στο αρχείο SVG μας πραγματικά γρήγορα ...



 
 

Ενδιαφέρουσες ... Μπορούμε να εφαρμόσουμε αναγνωριστικά σε μεμονωμένα στοιχεία SVG ... αλλά τι αντιπροσωπεύουν;

Περιμένετε ένα λεπτό ... αυτό είναι να μοιάζει πολύ με τον κώδικα HTML ...

Οι υπολογισμοί μου ήταν σωστοί ... όλα αυτά τα πολύγωνα και τα μονοπάτια είναι διαφορετικά στοιχεία μέσα στην εικόνα SVG. Αυτό σίγουρα θα κάνει τα πράγματα πολύ πιο εύκολα. Αν έχετε παρατηρήσει στην gif, έχω εντοπίσει όλα τα μονοπάτια και τα πολύγωνα και να τα ορίσετε αντίστοιχα. Για παράδειγμα, το πρώτο στοιχείο διαδρομής ήταν η βάση για την οθόνη, οπότε την ονόμασα στάση. Για χάρη του σεμιναρίου, θα σας πω τι ονομάζω κάθε στοιχείο, έτσι λειτουργεί εάν ακολουθείτε.

Κινώντας το πρώτο στοιχείο μας

Ας ξεκινήσουμε απλά με το στοιχείο που ορίσαμε το αναγνωριστικό για. Βεβαιωθείτε ότι έχετε εισαγάγει τις 2 βιβλιοθήκες GSAP. Πρώτα ας ξεκινήσουμε μια χρονική στιγμή. Δείτε πώς μπορείτε να το κάνετε στο αρχείο JavaScript:

var tl = νέα TimelineMax ();

Τώρα που έχουμε μια χρονική στιγμή. Ας το χρησιμοποιήσουμε.

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})

Αυτό θα το κάνει αυτό:

Η οθόνη δεν εκτελέστηκε σωστά στο λογισμικό gif μου. Μην ανησυχείτε!

Πρωτοποριακή κίνηση! Ας δούμε τι έχει κάνει ο κώδικας μέχρι τώρα.

var tl = νέα TimelineMax ();

Αυτό προετοιμάζει ένα χρονοδιάγραμμα για τη μεταβλητή tl.

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})

Χρησιμοποιούμε τη μεταβλητή tl για να προσθέσουμε κινούμενα σχέδια στη χρονολογική σειρά. Έχει κάποιες παραμέτρους που πρέπει να εισάγουμε.

tl.from από τη λειτουργία ας καθορίσετε πού ξεκινάει η κινούμενη εικόνα και θα ζωντανεύει στο σημείο όπου το πρόγραμμα περιήγησης παρέδωσε το SVG πριν εμφανιστεί το JavaScript. Μια άλλη δημοφιλής επιλογή είναι tl.to αλλά αυτό είναι για άλλη μια μέρα. Σκεφτείτε τον αριθμό από τον ορισμό ενός αγωνιστικού αυτοκινήτου στη γραμμή εκκίνησης προτού αρχίσει μια ήδη καθορισμένη γραμμή τερματισμού.

tl.from ('# stand' Εδώ στοχεύουμε το στοιχείο που θέλουμε να ζωντανέψουμε. Στην περίπτωση αυτή είναι το στοιχείο με το stand stand ID.

tl.from ('# stand', 0.5) Αυτό καθορίζει το μήκος της κινούμενης εικόνας. Στην περίπτωση αυτή, είναι μισό δευτερόλεπτο.

tl.from ('# stand', 0.5, {} Τα πάντα μέσα σε αυτές τις σγουρές τιράντες είναι οι παράμετροι κινούμενων εικόνων. Μέσα σε αυτές τις παραμέτρους έχουμε ...

{scaleY: 0 ζυγίζει το στοιχείο για να εξαφανιστεί με εξαιρετική λεπτότητα.

{scaleY: 0, transformOrigin: "bottom" Το τμήμα transformOrigin σας λέει σε ποια θέση του στοιχείου θέλετε να μετασχηματιστεί. Για παράδειγμα, εάν δεν επιλέξαμε ποτέ την κάτω επιλογή τότε θα τεντωθεί από την κορυφή που καταστρέφει την ψευδαίσθηση το ίδιο το κτίριο υπολογιστών.

Και τελευταίο αλλά όχι λιγότερο εύκολο: Power2.easeOut. Αυτό είναι πολύ διασκεδαστικό στη χρήση. Η παράμετρος ευκολία ας σας καθορίσει την ευκολία του πώς παρουσιάζεται. Παρατηρήστε πώς έφτασε σιγά-σιγά στο τέλος αντί να κάνετε 100% στάση; Λίγο δύσκολο να εξηγηθεί, αλλά το GSAP έχει ένα εργαλείο απεικόνισης ευκολίας για να σας βοηθήσει με αυτό.

Και ακόμη και σας δίνει κωδικό για να αντιγράψετε !!!!

Προχωράω…

Πω πω ήταν πολλά που έπιασατε ... Ρεαλιστικά, τώρα έχετε όλα όσα πρέπει να ξέρετε για την κίνηση του SVG. Τώρα πρόκειται να ολοκληρώσουμε το έργο μας και να το ονομάσουμε μια μέρα μαζί. Έχω μερικά ακόμα καθαρά κόλπα που νομίζω ότι πρόκειται να σκάψετε. Ας προχωρήσουμε σε λαούς!

Χρησιμοποιήστε τα εργαλεία dev του φυλλομετρητή σας για να εντοπίσετε το πίσω μέρος της βάσης. Έβαλα το αναγνωριστικό για standback όπως στο standBack επειδή αυτά τα κινούμενα σχέδια πρόκειται να φυσήξουν το μυαλό σου.

Αυτή η κινούμενη εικόνα είναι επίσης αρκετά απλή, καθώς θα κάνουμε ακριβώς την ίδια κίνηση με την τελευταία φορά. Αυτή τη φορά χρησιμοποιούμε την ευκολία αναπήδησης. Νομίζω ότι μοιάζει πραγματικά cartoonish που είναι το vibe πηγαίνω για. Για να δείξετε πώς λειτουργεί το χρονοδιάγραμμα. Θα επικολλήσω τον τελικό κώδικα αυτού του βήματος:

var tl = νέα TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Bounce.easeOut})

Για να παίξετε μια κινούμενη εικόνα αμέσως μετά την άλλη, απλά χρησιμοποιήστε μια άλλη λειτουργία .from κάτω από αυτήν. Δεν χρειάζεται καν να κάνετε κάποια λειτουργία επανάκλησης ή οτιδήποτε άλλο.

Ένα άλλο όμορφο κινούμενο σχέδιο. Η φίλη μου θα ήταν τόσο περήφανη!

Μετασχηματισμός προέλευσης

Αν δεν καταλαβαίνετε το τμήμα transformOrigin, τότε αυτό θα το καταστήσει σαφέστερο. Παρατηρήστε πώς τα τελευταία 2 κινούμενα σχέδια έχουν εκκαθαριστεί από κάτω προς τα πάνω; Για αυτό το κινούμενο σχέδιο θέλω το κάτω μέρος της οθόνης να τεντωθεί από τη μέση προς τις πλευρές. Αυτό είναι όπου το transformOrigin μπαίνει στο παιχνίδι πριν κάνουμε την τιμή κάτω, αλλά αυτή τη φορά θα κάνουμε το κέντρο. Δεδομένου ότι το τεντώσουμε επίσης κάθετα και όχι οριζόντια, θα χρησιμοποιήσουμε και τη μέθοδο scaleX. Αυτό είναι αυτονόητο. Έβαλα το αναγνωριστικό για αυτό το στοιχείο για το monitorBottom

var tl = νέα TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Bounce.easeOut})
. από ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "κέντρο", ευκολία: Bounce.easeOut})
Ουάου! Πληρώνετε πάνω από 100 χιλιάδες ευρώ ετησίως για να το γνωρίζετε αυτό;

Λαμβάνοντας Breather

Εντάξει αυτά τα κινούμενα σχέδια ήταν πάρα πολύ δροσερά για την πρόσληψη του ανθρώπου. Χρειαζόμαστε λίγο καθυστέρηση από την επόμενη κινούμενη εικόνα, αλλιώς μπορεί να έχω μια κρίση πανικού. Ευτυχώς η GSAP μας καλύπτει. Τώρα θα ζωντανέψουμε την οθόνη.

Ας δώσουμε στην οθόνη ένα αναγνωριστικό οθόνης. Θα χρησιμοποιήσουμε τώρα αυτόν τον κώδικα για να το ζωντανέψουμε.

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Bounce.easeOut})
  . από ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "κέντρο", ευκολία: Bounce.easeOut})
  .from ('# οθόνη', 0.6, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Circ.easeOut, καθυστέρηση: 0.4})

Όλα είναι αρκετά απλά. Ωστόσο, προσθέσαμε μια άλλη παράμετρο ... τι θα μπορούσε να είναι; Καθυστέρηση! Αυτή η λειτουργία καθυστέρησης θα ενεργοποιήσει το χρόνο που πρέπει να περιμένετε προτού εκτελέσετε αυτήν την κινούμενη εικόνα. Το έβαλα σε 0,4 δευτερόλεπτα. Ας δούμε τι φαίνεται αυτό.

Ένα κομμάτι μιας καθυστέρησης προστέθηκε! Δόξα τω θεώ.

Δεν χρειάζεται να είναι πολύπλοκο

Ας ζωντανέψουμε τώρα το κίτρινο κιβώτιο. Για αυτό το κινούμενο σχέδιο, θέλω μόνο να εμφανιστεί. Ωστόσο, η προσθήκη πολλών διαφορετικών παραμέτρων για κάθε στοιχείο γίνεται κουραστική ... αν ήταν απλή. Ας ορίσουμε την ταυτότητα του κίτρινου κουτιού στο κίτρινο κουτί

var tl = νέα TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Bounce.easeOut})
  . από ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "κέντρο", ευκολία: Bounce.easeOut})
  .from ('# οθόνη', 0.6, {scaleY: 0, transformOrigin: "κάτω", ευκολία: Circ.easeOut, καθυστέρηση: 0.4})
.from ('# yellowBox', 0,5, {κλίμακα: 0})

Περιμένετε, αυτό είναι; Σίγουρα δεν πρέπει να λειτουργήσει !?

Εύκολο Peasy Lemon Squeezy.

Υποθέτω ότι είναι τόσο απλό.

Ποιότητα σε ποσότητες

Έτσι κινούμαστε κάθετα με κάθε ξεχωριστό στοιχείο ... τώρα βρισκόμαστε στην τελευταία στιγμή με όλες τις κόκκινες γραμμές. Αυτό θα με πάρει για πάντα ...

Κρατήστε τον φίλο σας, μην είστε τόσο απαισιόδοξοι ακόμα, υπάρχει ένας εύκολος τρόπος να ζωντανέψετε όμορφα αυτές τις κόκκινες γραμμές με μία μόνο γραμμή κώδικα. Επιτρέψτε μου να σας πω τη διαδικασία. Πρώτα ας πάμε στα dev εργαλεία μας και να βρούμε τον επιλογέα για αυτά τα κόκκινα μονοπάτια.

Ενισχύω!!!

Ενδιαφέρον, έτσι φαίνεται ότι όλες οι κόκκινες γραμμές έχουν γονικό στοιχείο . Χρησιμοποιώντας τα εργαλεία dev θα αντιγράψω τον επιλογέα που είναι:

# Layer_1> g: nth-child (1)> g

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

# Layer_1> g: nth-child (1)> g διαδρομή

Μεγάλος. Τώρα έχουμε μια λίστα με όλα τα στοιχεία που βρίσκονται κάτω από κόκκινο.

Τώρα θα μπορούσαμε να χρησιμοποιήσουμε τη λειτουργία tl.from για να ζωντανέψουμε αυτά αλλά θα τα ζωντανέψουμε όλα ταυτόχρονα. Δεν θα ήταν δροσερό αν όλοι ζωντανόταν σε μια διαφορετική εποχή με συνέπεια; Πιθανώς βλέπετε αυτήν την τάση των ρητορικών μου ερωτήσεων μέχρι τώρα. tl.staggerFrom θα κάνει ακριβώς αυτό! Ας δούμε το τελευταίο αυτό μέρος του κώδικα μαζί.

.staggerFrom ('# Layer_1> g: nth-child (1)> g διαδρομή', 0,2, {scaleX: 0}, -0.1)

Όπως μπορείτε να δείτε είναι αρκετά απλή. Βάλουμε στον επιλογέα που εντοπίσαμε πριν, ρυθμίσαμε τη διάρκεια, προσθέσαμε επίσης τις ιδιότητες, αλλά περιμένουμε, τι είναι αυτό; -0.1; Τι σημαίνει αυτό?

Από τη συνάρτηση .staggerFrom, πρέπει να καθορίσουμε σε ποιο σημείο θέλουμε κάθε διαδρομή να ζωντανεύει μετά το άλλο. Σε αυτή την περίπτωση, θα κάνουμε 0.1 δευτερόλεπτα. Ο λόγος που προσθέσαμε το - ήταν να το κάνουμε να πηγαίνει από αριστερά προς τα δεξιά παρά το αντίστροφο. Ας δούμε πώς φαίνεται αυτό όταν υλοποιείται.

Τώρα αυτό είναι όμορφο, αλλά όχι τόσο όμορφο σαν εσένα.

Ουάου, αυτό είναι τέλειο. Αυτό που κάνει το GSAP τόσο καταπληκτικό είναι ότι μπορείτε να κάνετε τέτοιες εκπληκτικές κινήσεις με στοιχεία HTML καθώς και στοιχεία SVG γρήγορα. Μόλις καταλάβετε τη σύνταξη, κάτι τέτοιο σας παίρνει μόνο 10 λεπτά.

Πιέστε το στυλό και το DM μου στο Twitter για να μου δείξετε τι κάνατε εσείς.

CodePen

Κελάδημα

Αν σας άρεσε αυτό το post και το βρήκε χρήσιμο! Δώσε μερικά χτυπήματα! Μη διστάσετε να με ακολουθήσετε στο Twitter και στο Medium! Ευχαριστώ