8 Βιβλιοθήκες JavaScript για να Animate SVG
Το SVG είναι γραφικό ανεξάρτητο από την ανάλυση. Αυτό σημαίνει ότι θα το κάνει φαίνονται καλά σε οποιοδήποτε τύπο οθόνης χωρίς να υποστούν οποιαδήποτε απώλεια ποιότητας. Πέρα από αυτό, μπορείτε επίσης να κάνετε το SVG ζωντανό με κάποια εφέ κίνησης.
Σε μία από τις θέσεις της σειράς SVG που διαθέτουμε προηγουμένως, σας δείξαμε πώς λειτουργεί η κινούμενη εικόνα SVG με το
Περισσότερα για το Hongkiat.com:
- Animate.css - Βιβλιοθήκη CSS3 για εύκολη δημιουργία κινούμενων σχεδίων
- Εύκολα ζωντανέψτε το κείμενο με το Textillate.js
- Πώς να μετατρέψετε το κείμενο του Photoshop σε SVG
- Animate για να αποκρύψετε και να σύρετε περιεχόμενο με το jQuery
1. Vivus
Το Vivus είναι μια βιβλιοθήκη JavaScript που δίνει στο SVG σας την εμφάνιση του να σχεδιάζεται. Το Vivus λειτουργεί από το κουτί χωρίς να χρειάζεται εξαρτήσεις (π.χ. jQuery). Απλά συμπεριλάβετε το .js αρχείο στο HTML σας και ορίστε το στοιχείο SVG που θέλετε να ζωντανέψετε, μαζί με ορισμένες προρυθμισμένες επιλογές για να ξεκινήσετε αμέσως την κινούμενη εικόνα.
Για παράδειγμα:
νέο Vivus ('svg-στοιχείο', type: 'oneByOne', διάρκεια: 200). Τα παραπάνω θα ζωντανέψουν το στοιχείο SVG που έχει το svg-στοιχείο ID σε 200 χιλιοστά του δευτερολέπτου. Κάθε στοιχείο αυτού του SVG θα τραβηχτεί το ένα μετά το άλλο εντός αυτού του χρονικού πλαισίου.
2. Μπονσάι
Το Bonsai είναι μια ισχυρή βιβλιοθήκη JavaScript που σας επιτρέπει να σχεδιάζετε, να μορφοποιείτε και να ζωντανεύετε γραφικά στοιχεία σε ιστοσελίδες. Υποστηρίζει και τον τύπο γραφικών HTML5 του Canvas και το SVG. Με το μπονσάι, μπορείτε να χτίσετε ένα απλό ορθογώνιο ή ένα κύκλο ή αν θέλετε, α γεμάτο με πολλούς παίκτες κινούμενο παιχνίδι όπως αυτό. Μπορείτε να χρησιμοποιήσετε την Orbit για να νιώσετε πώς λειτουργεί το Bonsai σε ζωντανή δράση ή να δείτε μερικά από αυτά τα εντυπωσιακά παραδείγματα για να αντλήσετε έμπνευση από.
3. Ταχύτητα
Η ταχύτητα είναι μια βιβλιοθήκη JavaScript που έχει σχεδιαστεί για γρήγορες κινούμενες εικόνες. Η ταχύτητα της ταχύτητας κατά την απόδοση της κινούμενης εικόνας είναι εξαιρετικά γρήγορη. Υπερβαίνει το jQuery, ακόμα και το CSS, σε σύγκριση. Το API της Velocity λειτουργεί παρόμοια με το animation στο jQuery εκτός από το ότι χρησιμοποιεί το ψευδώνυμο λέξεων-κλειδιών $ .velocity () αντί $ .animate (). Εκτός αυτού, μπορείτε να χρησιμοποιήσετε ακριβώς τις ίδιες λέξεις-κλειδιά κινούμενων εικόνων, όπως ξεθωριάζω και fadeOut.
4. Ραφαήλ
Το RaphaelJS είναι μια βιβλιοθήκη που σας επιτρέπει να σχεδιάζετε καθώς και animate φορέα SVG γραφικών στις ιστοσελίδες. Υποστηρίζει ένα ευρύ φάσμα προγραμμάτων περιήγησης μέχρι το IE6, το οποίο καθιστά την Raphael την πιο αξιόπιστη βιβλιοθήκη JavaScript στη θέση. Με το RaphaelJS, μπορείτε να δημιουργήσετε διαδραστικά διαγράμματα αναλύσεων, παγκόσμιους χάρτες και αλληλεπιδράσεις παιχνιδιών παρόμοια με αυτά του Counter Strike.
5. Προσκόλληση
Το SnapSVG είναι μια άλλη δημοφιλής βιβλιοθήκη JavaScript για animation SVG που αναπτύχθηκε από τον προγραμματιστή Raphael, Dmitry Baranovskiy, μαζί με το Adobe Web Platform Team από την αρχή. Αντίθετα με τον Raphael, το SnapSVG προορίζεται μόνο για τα πιο πρόσφατα προγράμματα περιήγησης. Αυτό επιτρέπει στη βιβλιοθήκη να είναι σημαντικά μικρότερη από την Raphael και να υποστηρίζει τις λειτουργίες SVG, όπως η αποκοπή και η κάλυψη.
6. Lazy Line Ζωγράφος
Το Lazy Line Painter είναι ένα plugin jQuery για την κίνηση των διαδρομών SVG για την κίνηση της ακολουθίας σχεδίων, παρόμοια με αυτή του Vivus. Τα κακά νέα είναι ότι αυτό το πρόσθετο κάνει μόνο αυτό το πολύ συγκεκριμένο πράγμα. Επομένως, όταν εισάγετε SVG από εφαρμογές όπως Illustrator ή Inkscape, βεβαιωθείτε ότι δεν υπάρχει αριστερόχρωμο χρώμα στο SVG σας, μόνο οι διαδρομές.
7. SVG.js
Το SVG.js είναι μια ελαφριά βιβλιοθήκη για χειρισμό και animation του SVG. Με αυτήν τη βιβλιοθήκη, θα μπορείτε να ζωντανέψετε το μέγεθος, τη θέση ή το χρώμα στο στοιχείο SVG. Δεν ζωντανεύει μόνο. μπορείτε επίσης να εφαρμόσετε πρόσθετα πρόσθετα για να προσθέσετε πρόσθετες λειτουργίες. Αυτό το παράδειγμα χρησιμοποιεί την προσθήκη svg.filter.js για την εφαρμογή φίλτρων όπως η γκάουσις θολούρα, ο κορεσμός, η αντίθεση, η σέπια κλπ. Στην εικόνα.
8. Διάδρομος
Ο διάδρομος υποστηρίζει τρία είδη στοιχείων, μονοπάτι, γραμμή, και πολυγραμμή που χρησιμοποιείται για την εξαγωγή γραμμών SVG. Ακολουθεί ένα παράδειγμα από το Polygon που δείχνει την κινούμενη γραμμή της κονσόλας κονσόλας PlayStation 4.
