Οποιοσδήποτε μηχανικός front-end αξίζει το αλάτι του, γνωρίζει τις προκλήσεις που φέρνει το κατακερματισμένο οικοσύστημα συσκευών. Διαφορετικά μεγέθη οθόνης, αναλύσεις και αναλογίες διαστάσεων καθιστούν δύσκολη την παροχή μιας συνεπούς εμπειρίας. Επιπλέον, για όσους θέλουν να προσφέρουν μια τέλεια εμπειρία pixel.

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

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

Οδηγός powerpivot excel 2013 pdf

Επεκτάσιμα διανυσματικά γραφικά

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

ο Προδιαγραφές SVG είναι ένα ανοιχτό πρότυπο που αναπτύχθηκε από το World Wide Web Consortium (W3C) το 1999.

Όλα τα μεγάλα προγράμματα περιήγησης ιστού είχαν Υποστήριξη απόδοσης SVG εδώ και κάποιο καιρό.

Δεδομένου ότι τα γραφικά SVG είναι έγγραφα XML, τα προγράμματα περιήγησης ιστού παρέχουν API βασισμένα σε κόμβους DOM που μπορούν να χρησιμοποιηθούν για την αλληλεπίδραση με τις εικόνες. Μιλήστε για να ζωντανέψετε φωτογραφίες!

Διαδρομές SVG

Εάν υπάρχει ένα υπερδύναμο στοιχείο στο SVG, αυτό θα ήταν το στοιχείο.

Το στοιχείο διαδρομής είναι ένα βασικό σχήμα που μπορεί να χρησιμοποιηθεί για τη δημιουργία σχεδόν κάθε προηγμένου σχήματος 2D που μπορείτε να φανταστείτε.

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

Μπορείτε να σκεφτείτε ένα εικονικό στυλό που αντλεί στην οθόνη και τα σχόλια σχεδίασης στο στοιχείο διαδρομής ελέγχουν απλώς την πένα. Στο παραπάνω παράδειγμα, η πένα έχει οδηγίες να μετακινηθεί στη θέση (10, 10) (M10 10), για να σχεδιάσετε μια γραμμή στο (75, 10) (L75 10), για να σχεδιάσετε μια γραμμή στο (75, 75) L75 75 και μετά για να κλείσετε τη διαδρομή επιστρέφοντας στο σημείο εκκίνησης (Z).

Χρησιμοποιώντας άλλες εντολές σχεδίασης, όπως τόξα (A), τετραγωνικές καμπύλες bezier (Q), κυβικές καμπύλες bezier (C) κ.λπ. μπορείτε να δημιουργήσετε πολύ πιο περίπλοκα σχήματα και γραφικά στο SVG .

Μπορείτε να μάθετε περισσότερα για το στοιχείο διαδρομής εδώ .

Διαδρομές SVG και CSS

«Εντάξει Juan, το καταλαβαίνω. Τα μονοπάτια είναι ισχυρά, αλλά πώς μπορώ να τα ζωολογήσω; ' λες.

Για την πρώτη μας τεχνική, θα εκμεταλλευτούμε δύο χαρακτηριστικά SVG: stroke-dasharray και stroke-dashoffset.

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

Με τις εικόνες SVG να αποτελούν μέρος του DOM του προγράμματος περιήγησης ιστού και το stroke-dasharray να είναι ένα στοιχείο παρουσίασης, το χαρακτηριστικό μπορεί επίσης να οριστεί χρησιμοποιώντας CSS.

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

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

Πάρτε αυτήν την τετραγωνική καμπύλη bezier, για παράδειγμα:

div.ball

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

Στη συνέχεια, θα ορίσουμε το dash offset, χρησιμοποιώντας το χαρακτηριστικό stroke-dashoffset, σε 0. Αυτό θα κάνει τη διαδρομή να εμφανίζεται στην οθόνη ως σταθερή καμπύλη (ουσιαστικά κοιτάζουμε την πρώτη παύλα και έχουμε ήδη κάνει κάθε παύλα να καλύπτει ολόκληρη μήκος της καμπύλης). Ρυθμίζοντας το όριο της παύλας ίσο με το μήκος της καμπύλης, θα καταλήξουμε σε μια αόρατη καμπύλη (τώρα βλέπουμε την καμπύλη να αποδίδεται ως ένα ολόκληρο κενό - το τμήμα που ακολουθεί αμέσως μια παύλα).

Τώρα, κινούμενος την ιδιότητα stroke-dashoffset, μπορείτε να κάνετε την καμπύλη να εμφανίζεται σταδιακά στην οθόνη.

Δείτε το στυλό ApeeScape - διαδρομές SVG & CSS από το ApeeScape Blog ( @toptalblog ) επί CodePen .

Όπως μπορείτε να δείτε, η καμπύλη είναι πάντα εκεί. Αλλάζουμε μόνο τη μετατόπιση παύλας για να κάνουμε το διακεκομμένο μέρος να εμφανίζεται λίγο-λίγο.

Μπορείτε να το κάνετε αυτό ένα βήμα παραπέρα χρησιμοποιώντας την ίδια αρχή αλλά με περισσότερες διαδρομές:

Δείτε το στυλό ApeeScape - διαδρομές SVG & CSS από το ApeeScape Blog ( @toptalblog ) επί CodePen .

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

Το Stroke-dasharray και το stroke-dashoffset είναι δύο πολύ ισχυρά χαρακτηριστικά που μπορούν να χρησιμοποιηθούν για την εφαρμογή πληθώρας κινούμενων εικόνων και εφέ στις διαδρομές SVG σας. Μπορείτε να δοκιμάσετε Αυτό εύχρηστο εργαλείο που μπορείτε να χρησιμοποιήσετε για να πειραματιστείτε με τα δύο χαρακτηριστικά.

Κινούμενα αντικείμενα κατά μήκος διαδρομών SVG

Με τα SVG και CSS, ένα άλλο ωραίο πράγμα που μπορείτε να κάνετε είναι να κινήσετε αντικείμενα ή στοιχεία που ακολουθούν μια διαδρομή.

Υπάρχουν 2 χαρακτηριστικά SVG που πρόκειται να χρησιμοποιήσουμε για την κινούμενη εικόνα:

• offset-path: Η ιδιότητα CSS offset-path καθορίζει τη διαδρομή offset όπου τοποθετείται το στοιχείο.

• offset-απόσταση: Η ιδιότητα CSS offset-απόστασης καθορίζει μια θέση κατά μήκος μιας διαδρομής όφσετ.

Συνδυάζοντας αυτές τις δύο ιδιότητες, μπορείτε να βρείτε εύκολα κινούμενες εικόνες όπως:

Δείτε το στυλό ApeeScape - διαδρομές SVG & CSS από το ApeeScape Blog ( @toptalblog ) επί CodePen .

Όπως μπορείτε να δείτε, έχουμε ένα νέο στοιχείο path.getTotalLength().

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

SVG Animations χρησιμοποιώντας JavaScript

Εάν όλα αυτά δεν είναι αρκετά φανταχτερά ήδη, μπορείτε πάντα να καταφύγετε σε JavaScript.

Η δημιουργία στοιχείων SVG με JavaScript μπορεί να μοιάζει πολύ με την κίνηση στοιχείων DOM. Ωστόσο, με το JavaScript, μπορείτε να επιτύχετε τις τεχνικές κινούμενων σχεδίων που έχουμε ελέγξει παραπάνω, αλλά πιο εύκολα.

Προηγουμένως, έπρεπε να κωδικοποιήσουμε τα μήκη διαδρομής στο CSS μας. Με τη βοήθεια της λειτουργίας JavaScript .animate({}) είναι δυνατόν να υπολογίσετε το μήκος της διαδρομής εν κινήσει και να τη χρησιμοποιήσετε όπως απαιτείται. Μπορείτε να μάθετε περισσότερα για αυτό εδώ .

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

Snap.svg Όχι μόνο διευκολύνει τη σχεδίαση εικόνων SVG χρησιμοποιώντας JavaScript, αλλά καθιστά την κινούμενη εικόνα τόσο απλή όσο η κλήση

|_+_|

.

Μια άλλη βιβλιοθήκη, anime.js , σας επιτρέπει να κάνετε ένα στοιχείο div να ακολουθεί μια διαδρομή SVG με ένα μόνο λίγες γραμμές κώδικα .

Αν ψάχνετε για μια βιβλιοθήκη που κάνει περισσότερα από μόνη της αλλά κάνει τα αποτελέσματα να φαίνονται ακόμα εντυπωσιακά, τότε ζωή είναι αυτό που ψάχνετε. Χρειάζεται μια διαφορετική, περισσότερο καθοδηγούμενη από τη διαμόρφωση προσέγγιση στο SVG path animation. Με αυτήν τη βιβλιοθήκη, πρέπει απλώς να προσθέσετε ένα αναγνωριστικό στο στοιχείο SVG που θέλετε να σχεδιάσετε και να ορίσετε ένα αντικείμενο Vivus με αυτό το αναγνωριστικό. Το Vivus θα φροντίσει τα υπόλοιπα.

Περαιτέρω ανάγνωση

Ακολουθεί μια λίστα με πόρους που μπορεί να σας φανούν χρήσιμοι όταν ασχολείστε με εικόνες SVG και κινούμενες εικόνες:

Για να δείτε περισσότερα σε βάθος με το SVG animation, μπορείτε να διαβάσετε αυτό το σύντομο άρθρο στο τρεις τρόποι κίνησης του SVG εικόνες και παρακολουθήστε την προβολή βίντεο από CSS Tricks.

Ένα πράγμα που δεν καλύπτει αυτό το άρθρο είναι η κινούμενη εικόνα SVG με συγχρονισμένη γλώσσα ενοποίησης πολυμέσων (SMIL). Ενώ η χρήση CSV για SVG σάς δίνει το πλεονέκτημα να εργάζεστε με κάτι που γνωρίζετε ήδη, το SMIL μεταφέρει τα πράγματα στο επόμενο επίπεδο.

Με το SMIL, μπορείτε να εφαρμόσετε προηγμένα εφέ κινούμενης εικόνας, όπως μορφοποίηση μορφής χρησιμοποιώντας μόνο SVG. Ένας σύντομος, αλλά αποτελεσματικός οδηγός για τη χρήση SMIL για τέτοια εφέ είναι διαθέσιμος εδώ .

Αν και, η υποστήριξη για SMIL είναι κομμάτι νευρικός αυτή τη στιγμή (δεν προορίζεται το παν).

Κινούμενα σχέδια χωρίς συμβιβασμούς για τον Ιστό

Σε αυτό το άρθρο, έχετε διαβάσει διάφορους τρόπους με τους οποίους μπορείτε να κινούσετε στοιχεία SVG χρησιμοποιώντας CSS ή HTML σε διαδρομές SVG.

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

Και αυτό είναι! Ας ελπίσουμε ότι βρήκατε αυτό το σεμινάριο SVG animation χρήσιμο και σας άρεσε να το διαβάσετε.

Κατανόηση των βασικών

Ποια είναι τα χαρακτηριστικά του stroke-dasharray και του stroke-dashoffset;

Το χαρακτηριστικό stroke-dasharray καθορίζει το μοτίβο των παύλων και των κενών που θα χρησιμοποιηθούν ως διαδρομή για μια διαδρομή SVG. Η διαδρομή-dashoffset καθορίζει την απόσταση στο μοτίβο από το οποίο θα ξεκινήσει η διαδρομή της διαδρομής.

Πώς μπορείτε να προσδιορίσετε το ακριβές μήκος μιας διαδρομής SVG;

Για να προσδιορίσετε το ακριβές μήκος μιας διαδρομής SVG, μπορείτε να χρησιμοποιήσετε τη συνάρτηση path.getTotalLength (), όπου η διαδρομή είναι ο κόμβος DOM για το στοιχείο.