Κίνηση γραμμής SVG για τους απλούς

Σήμερα, πρόκειται να δημιουργήσουμε μια εικόνα που δημιουργήθηκε στο Adobe Illustrator, χρησιμοποιώντας το SVG και το CSS. Θα χρησιμοποιήσουμε μια τεχνική δημοφιλή από τον Polygon στις αναθεωρήσεις τους για το Playstation 4 και το Xbox One. Αυτά είναι εξαιρετικά παραδείγματα του τι είναι δυνατό, αλλά πρόκειται να εργαστούμε με κάτι πολύ απλούστερο.

Ένα σπήλαιο.

Προετοιμασία του αρχείου σας

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

Ονομάστε τα επίπεδα σας

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

Ονομάζοντας τα (υπο) στρώματά σας πριν από την εξαγωγή θα σας εξοικονομήσει έναν τεράστιο πονοκέφαλο.

Εξαγωγή

Έχω την τάση να εξάγετε τον επιλεγμένο διάνυσμα χρησιμοποιώντας το File> Export Selection ... Αυτό εξασφαλίζει ότι το αρχείο θα περικοπεί στα όρια του έργου σας και όχι στον πίνακα γραφικών σας. Εδώ είναι οι προτιμώμενες ρυθμίσεις εξαγωγής μου:

Παραγωγή

Θυμηθείτε όταν ονομάσαμε τα στρώματά μας πριν την εξαγωγή; Αυτό είναι που είναι χρήσιμο.

Παρατηρήστε τα στοιχεία ταυτότητας; Φανταστείτε να προσπαθείτε να υπολογίσετε ποια διαδρομή είναι η οποία διαβάζοντας την περιγραφή της διαδρομής (d = "M4808.8.395 ..."). Από τεχνική άποψη, θα μπορούσατε αν ήσαστε μασόχτης με βαθιά κατανόηση της σύνταξης της διαδρομής.

Βελτιστοποίηση

Συνήθως, είναι καλή πρακτική να βελτιστοποιήσετε τα εργαλεία SVG που χρησιμοποιείτε όπως το SVGO, αλλά σε μια περίπτωση όπως αυτή όπου εργάζεστε απευθείας με τη σήμανση, θα θέλετε να διατηρήσετε την αρχική σας απόδοση σε τακτά χρονικά διαστήματα. Τα περισσότερα εργαλεία βελτιστοποίησης θα μειώσουν και θα απογυμνώσουν το αρχείο των id, καθιστώντας δύσκολη την εργασία τους.

Για περισσότερες πληροφορίες σχετικά με τον τρόπο βελτιστοποίησης των SVG σας, ρίξτε μια ματιά στην εξαιρετική θέση του Sara Soueidan, Συμβουλές SVG για σχεδιαστές.

Κινώντας τη Γραμμή

Πριν ξεκινήσουμε, είναι σημαντικό να κατανοήσουμε δύο ιδιότητες: εγκεφαλικό επεισόδιο-dasharray και εγκεφαλικό επεισόδιο-dashoffset.

Πίνακας παύσης εγκεφαλικού

Η ιδιότητα εγκεφαλικού επεισόδιο-dasharray δημιουργεί παύλες στο κτύπημα σας. Στο παρακάτω παράδειγμα έχω γραμμή 200px. Όπως μπορείτε να δείτε, η ρύθμιση της τιμής δημιουργεί ομοιόμορφα διαχωρισμένες παύλες και κενά.

Οριζόντια μετατόπιση διαδρομής

Η ιδιότητα εγκεφαλικού επεισοδίου-dashoffset καθορίζει την απόσταση στη διαδρομή, το μοτίβο θα ξεκινήσει. Μην ανησυχείτε πάρα πολύ για τις ρυθμίσεις εγκεφαλικού επεισοδίου που έχω εφαρμόσει. Το μόνο που κάνει είναι η εναλλαγή του μήκους των παύσεων και των κενών (5px dash, 10px gap, 30px dash, 10px gap). Έχω αυξήσει τη δεύτερη παύλα στα 30 εικονοστοιχεία για να συμβολίσει το τι συμβαίνει.

Η ιδιότητα εγκεφαλικού επεισοδίου-dashoffset καθορίζει την απόσταση στη διαδρομή, το μοτίβο θα ξεκινήσει.

Όπως μπορείτε να δείτε, προσαρμόζοντας τη διαδρομή-dashoffset, επανατοποθετεί ή εκτοπίζει τη θέση εκκίνησης (μετακινώντας την προς τα πίσω) της ακολουθίας ταμπλό. Στο παράδειγμα το έχω αντισταθμίσει κατά 15px, το ποσό της πρώτης παύλας και της διαφοράς συνδυασμένα, ξεκινώντας το εγκεφαλικό επεισόδιο στη δεύτερη παύλα των 30px.

Κινούμενο με το Offset

Εδώ είναι όπου τα πράγματα γίνονται διασκεδαστικά.

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

Γλύκανση του Popsicle

Τώρα ας εφαρμόσουμε αυτό που έχουμε μάθει στο popsicle μας.

Θα θελήσετε να υπολογίσετε το μήκος κάθε διαδρομής. Δεν χρειάζεται να είναι ακριβής. Μπορείτε να το κάνετε αυτό, μαντεύοντας (συνήθως αυξάνω κατά 100 έως ότου ολοκληρωθεί η διαδρομή) αλλά εάν θέλετε έναν ακριβέστερο αριθμό μπορείτε να περιηγηθείτε στον πίνακα πληροφοριών εγγράφων στο Illustrator και να επιλέξετε μια διαδρομή, θα εμφανίσει το μήκος του.

Παράθυρο> Πληροφορίες εγγράφου> Αντικείμενα> Διαδρομές

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

Εδώ είναι τι παίρνουμε.

Αυτό φαίνεται καλό, αλλά μπορούμε να το κάνουμε καλύτερα.

Τελικά κουτάβια

Με την αύξηση των τιμών του πίνακα, μπορούμε να επιταχύνουμε την κίνηση ορισμένων εγκεφαλικών επεισοδίων. Αυτό οφείλεται στο γεγονός ότι έχει μια περαιτέρω απόσταση για να ταξιδέψει, αλλά ακόμα μόνο 2 δευτερόλεπτα για να το ολοκληρώσει, το οποίο καθορίσαμε στο animation μας "offset". Μπορούμε επίσης να καθυστερήσουμε όταν ξεκινάνε κάποιες κινήσεις, χρησιμοποιώντας την καθυστέρηση της κινούμενης εικόνας. Η μεταβολή των ταχυτήτων και ο καθορισμός καθυστερήσεων σε διαφορετικά εγκεφαλικά επεισόδια θα δημιουργήσει ένα πιο ενδιαφέρον αποτέλεσμα.

Και εκεί το έχουμε. Αν θέλετε να δείτε τον κωδικό πρόσβασης, μπορείτε να το βρείτε εδώ.

Μια τελευταία σημείωση: Αυτό δεν θα λειτουργήσει με ενσωματωμένα SVG. Αν σκοπεύετε να χρησιμοποιήσετε αυτό σε ένα έργο, θα χρειαστεί να τοποθετήσετε τα SVG σας, είτε με το χέρι είτε με τη βοήθεια ενός εργαλείου. Είμαστε οπαδός της αντίδρασης-inlinesvg, αλλά αν δεν χρησιμοποιείτε την αντίδραση, υπάρχουν πολλά άλλα που μπορείτε να βρείτε χωρίς υπερβολική προσπάθεια.

Ενημέρωση: 11/19/16

Μια σημείωση σχετικά με τη συμβατότητα του προγράμματος περιήγησης

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

Microsoft Edge

Αυτή η τεχνική υποστηρίζεται. Η άκρη απαιτεί τη χρήση μιας ρητής μονάδας για τις τιμές της ιδιοκτησίας σας. Επομένως, στην περίπτωσή μας, πρέπει απλά να προσαρμόσουμε όλες τις ιδιότητες του εγκεφαλικού μας προκειμένου να χρησιμοποιήσουμε 'px' ως μονάδα του. Έχω ενημερώσει το στυλό για να τις συμπεριλάβω.

Internet Explorer

Δυστυχώς, ο Internet Explorer δεν υποστηρίζει την κίνηση της ιδιότητας stroke-dashoffset χρησιμοποιώντας το css.

Η απλούστερη σύσταση θα ήταν να απενεργοποιήσετε την κινούμενη εικόνα στο IE και να δώσετε προτεραιότητα στην προβολή του περιεχομένου σας. Εάν θέλετε να υποστηρίξετε τον Internet Explorer, υπάρχουν στη διάθεσή σας δύο λύσεις javascript.

  1. Ένας χρήστης του StackOverflow περιγράφει μια λύση που ενημερώνει την μετατόπιση για κάθε πλαίσιο της κινούμενης εικόνας.
  2. Vivus είναι ένα δημοφιλές plugin που έρχεται με μια ποικιλία από κινούμενα σχέδια και επιλογές από το κουτί.

Τεράστια χάρη στην CSS Tricks και την Vox για την εργασία τους πάνω στο θέμα. Μάθετε περισσότερες πληροφορίες σχετικά με την τεχνική, επισκεπτόμενοι αυτούς τους συνδέσμους.