Πώς να δημιουργήσετε το SVG Animation χρησιμοποιώντας το CSS
Η αναπαραγωγή του SVG μπορεί να γίνει μέσω εγγενών στοιχείων όπως
Το CSS Animation θα μπορούσε επίσης να είναι ένας εναλλακτικός τρόπος χρήσης της βιβλιοθήκης JavaScript, όπως το SnapSVG. Σε αυτή την ανάρτηση θα δούμε τι μπορούμε να παραδώσουμε με CSS Animation στο SVG.
1. Δημιουργία των σχημάτων
Πρώτα απ 'όλα, θα πρέπει να σχεδιάσουμε τα σχήματα και τα αντικείμενα που θέλουμε να ζωντανέψουμε. Μπορείτε να χρησιμοποιήσετε εφαρμογές όπως Σκίτσο, Adobe Illustrator, ή Inkscape για να δημιουργήσετε ένα.
Για αυτό το παράδειγμα, έχω τραβήξει ένα συννεφιασμένο ουρανό ως σκηνικό, και ένα πυραυλικό πλοίο γυρίζοντας προς τα πάνω, οι φλόγες περιλάμβαναν:
Αφού γίνει με το σχέδιο, πρέπει να εξάγουμε κάθε αντικείμενο που έχουμε δημιουργήσει σε SVG.
Θα χρησιμοποιήσω το Σκίτσο ως παράδειγμα για αυτό το βήμα. Επιλέξτε το αντικείμενο που θέλετε να μετατραπεί σε μορφή SVG. Στο κάτω δεξιό μέρος του παραθύρου, κάντε κλικ στο κουμπί Κάντε εξαγώγιμη. Επιλέξτε μορφή SVG και στη συνέχεια κάντε κλικ στην επιλογή Εξαγωγή όνομα-αντικειμένου. Πρέπει να κάνετε αυτό το ένα αντικείμενο τη φορά.
2. Εισαγάγετε το SVG σε HTML
Όταν ανοίγετε το αρχείο SVG σε ένα πρόγραμμα επεξεργασίας κώδικα, θα διαπιστώσετε ότι οι κώδικες SVG είναι αρκετά ακατάστατοι. Επομένως, πριν αναπτύξουμε το αρχείο SVG, ας τακτοποιήσουμε τον κώδικα και να το βελτιστοποιήσουμε με αυτό το εργαλείο γραμμής εντολών που ονομάζεται SVGO.
Εκτόξευση Τερματικό ή Γραμμή εντολών, και εγκαταστήστε το SVGO με αυτήν τη γραμμή εντολών:
[sudo] npm install -g svgo
Συντομεύστε την εντολή, svgo, στο αρχείο SVG χρησιμοποιώντας --αρκετά για την παραγωγή αναγνώσιμου κώδικα SVG:
svgo rocket.svg --pretty
Εάν έχετε πολλά SVG σε έναν κατάλογο, μπορείτε να τα βελτιστοποιήσετε όλα μαζί, ταυτόχρονα. Υποθέτοντας ότι ο κατάλογος έχει ονομαστεί / εικόνες, τότε από τον γονικό κατάλογο χρησιμοποιήστε αυτήν την εντολή:
svgo -f εικόνες - πρόνοια
Ας δούμε τη διαφορά πριν και μετά τη χρήση του SVGO.
Αντιγράψτε τον κώδικα μέσα στο αρχείο SVG και επικολλήστε το σε ένα αρχείο HTML. Θα δουλέψουμε σε ένα χώρο εργασίας πλάτους 800px με 600px, οπότε ας μην ξεχνάμε να ορίσουμε το πλάτος στο στοιχείο SVG.
Το SVG έχει οριστεί στο αρχείο HTML. Θα χρειαστεί να ορίσουμε ένα αναγνωριστικό για κάθε αντικείμενο, ώστε να μπορέσουμε αργότερα να το επιλέξουμε στο CSS.
Για αυτό το σεμινάριο, πρέπει να ορίσουμε την ταυτότητα για τον πυραύλο και τις φλόγες, και μερικά από τα σύννεφα. Προκειμένου τα αντικείμενα να χειριστούν αργότερα το στάδιο κινούμενων εικόνων, πρέπει να προσθέσουμε ταυτότητα - μπορείτε επίσης να χρησιμοποιήσετε τάξη - σε κάθε αντικείμενο. Σε αυτό το στάδιο, ο κώδικας θα φαίνεται ως εξής:
3. Ζωντανή χρήση του CSS
Τώρα ας διασκεδάσουμε. Το σχέδιο είναι να ενισχυθεί ο πυραύλος στο διάστημα. Ο πυραύλος χωρίζεται σε δύο ομάδες. τον ίδιο τον πυραύλο και τη φλόγα.
Πρώτα απ 'όλα, τοποθετούμε τη ρουκέτα στη μέση του χώρου εργασίας, ως εξής:
#rocket μετασχηματισμός: μετάφραση (260px, 200px);
Αυτό που βλέπετε είναι αυτό:
Τώρα για να φανεί η ρουκέτα σαν να πηγαίνει προς τα πάνω, πρέπει να δημιουργήσουμε την ψευδαίσθηση των πτώσεων των νεφών. Το CSS που χρησιμοποιούμε για αυτό είναι:
# cloud1 animation: πτώση 1s γραμμικό άπειρο? @framesframes fall από transform: translateY (-100px); για να μετατρέψει: translateY (1000px)
Για να το φανεί πιο ρεαλιστικό, αφήστε τα τέσσερα σύννεφα κινούμενα και δημιουργήστε τα “πτώση” σε διαφορετικές ταχύτητες. Επίσης, θα τα τοποθετήσουμε διαφορετικά από τον άξονα Χ.
Το δεύτερο σύννεφο θα έχει κώδικα όπως αυτό:
# cloud2 animation: fall-2 2s γραμμικό άπειρο? @framesframes fall-2 από μετασχηματισμός: μετάφραση (200px, -100px); για να μετατρέψει: μεταφράσει (200px, 1000px)
Σημειώστε ότι έχουμε μετακινήσει το σύννεφο # 2 λίγο προς τα δεξιά, από 200px με μεταφράζω. Σε αυτό το στάδιο, το αποτέλεσμα θα πρέπει να μοιάζει με αυτό.
Στη συνέχεια, ας φτιάξουμε τον πυραυλοβολισμό. Θα αναθέσουμε ένα βασικό πλαίσιο κινούμενης εικόνας, ως εξής:
#rocket animation: popup 1s ευκολία άπειρη? popup_keyframes 0% μετασχηματισμός: μετάφραση (260px, 200px); 50% μετασχηματισμός: μετάφραση (260px, 240px); 100% μετασχηματισμός: μετάφραση (260px, 200px);
Και προσθέστε κινούμενα σχέδια στη φλόγα πυραύλων επίσης:
#flame animation: shake .2s γραμμική απεριόριστη; @keyframes κουνήσουν το 0% transform: μεταφράστε (55px, 135px) περιστρέψτε (7deg); 20% μετασχηματισμός: μετάφραση (55px, 135px) περιστροφή (0deg); 40% μετασχηματισμός: μετάφραση (55px, 135px) περιστροφή (-7deg); 60% μετασχηματισμός: μετάφραση (55px, 135px) περιστροφή (0deg); 100% μετασχηματισμός: μετάφραση (55px, 135px) περιστροφή (0deg);
Σωστά! Τώρα που οι κωδικοί μας έχουν οριστεί, η κινούμενη εικόνα πρέπει να λειτουργεί με το SVG μας.
Ρίξτε μια ματιά στην εκτόξευση πυραύλων στο διάστημα.
Τελική σκέψη
Η κινούμενη εικόνα δεν είναι το ευκολότερο χαρακτηριστικό στο CSS να κατανοήσει. Αλλά ελπίζουμε ότι θα βρείτε αυτό το σεμινάριο ως ένα καλό σημείο εκκίνησης για να εξερευνήσετε περαιτέρω το CSS Animation στο SVG. θα εκπλαγείτε να μάθετε τι μπορεί να επιτευχθεί με το CSS Animation στο χέρι.
Εάν θέλετε να ξεκινήσετε με τα βασικά στοιχεία, μπορείτε να ξεκινήσετε εδώ με αυτή την ανάρτηση: Μια ματιά σε: Κινούμενη γραφική παράσταση (SVG) Animation ή ακολουθήστε την υπόλοιπη σειρά SVG.
- Προβολή επίδειξης
- Λήψη πηγής
