Ένας οδηγός για αρχάριους για κινούμενα σχέδια SVG με CSS

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

Πώς όμως φτιάχνεις ένα SVG animation; Ξεκινήστε με ένα σχήμα SVG, κινήστε το χρησιμοποιώντας CSS και βασιστείτε σε αυτές τις αρχές για να χρησιμοποιήσετε το animation στη δική σας δουλειά.

Κινούμενη κίνηση SVG με HTML και CSS

Παρόλο που μπορείτε να χρησιμοποιήσετε JavaScript για να κάνετε κινούμενα σχέδια SVG μέσω προγραμματισμού, το CSS έχει τώρα καλή υποστήριξη και για κινούμενα σχέδια. Μπορείτε να βρείτε όλο το δείγμα κώδικα το CodePen για αυτό το έργο.

Δημιουργία εικόνας SVG μέσα σε HTML

Το πρώτο βήμα σε αυτή τη διαδικασία είναι η δημιουργία της εικόνας SVG με την οποία θα εργαστείτε. Μπορείτε να βρείτε τη σήμανση SVG στον πίνακα HTML στο CodePen.

Δομή SVG

Ενώ τα SVG μοιράζονται παρόμοια μορφή με το HTML, οι ετικέτες που χρησιμοποιείτε για τη δημιουργία τους είναι διαφορετικές. Ένα SVG έχει ετικέτες ανοίγματος και κλεισίματος () που μπορεί να περιέχει μια ποικιλία διαφορετικών ιδιοτήτων. Στην περίπτωσή μας, χρησιμοποιούμε ταυτότητα και πλαίσιο προβολής ιδιότητες. Η ιδιότητα id λειτουργεί όπως κάθε άλλο αναγνωριστικό HTML, παρέχοντάς σας ένα μοναδικό αναγνωριστικό για χρήση στο CSS/JS σας. Η ιδιότητα viewBox ορίζει το μέγεθος του SVG μας.

<!-- SVG με μέγεθος απόκρισης -->
<svg id="MUOSVGanimation" ViewBox="0 0 800 600">
<!-- Περιεχόμενο SVG -->
</svg>

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

 SVG με μέγεθος στατικό 
<svg id="MUOSVGanimation" πλάτος="800" ύψος="600">
<!-- Περιεχόμενο SVG -->
</svg>

Σχήματα SVG

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

• SVG Ellipse: Αυτό είναι ένα κυκλικό/οβάλ εργαλείο. Καθορίζει ιδιότητες για την ακτίνα του άξονα y/x (rx/ry), το χρώμα πλήρωσης και το πλάτος διαδρομής. Είναι σημαντικό να θυμάστε ότι η ακτίνα που θα επιλέξετε με αυτό το εργαλείο θα είναι η μισή της διαμέτρου του σχήματος.

<έλλειψη id="κύκλος" rx="100" ry="100" γεμίζω="#ffed00" stroke-width="0"/>

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

<rect id="τετράγωνο" πλάτος="200" ύψος="200" μεταμόρφωση="μετάφραση (300 200)" γεμίζω="#05στ"
 stroke-width="0"/>

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

<πολύγωνο id="τρίγωνο" πόντοι="15,-97 115,102 -84,102 15,-97"
 μεταμόρφωση="μετάφραση (0,0)" γεμίζω="#f00" stroke-width="0"/>

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

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

• Κύκλος SVG: Αυτό το σχήμα μοιάζει με έλλειψη, αλλά έχει πάντα ίσες ακτίνες Χ και Υ.
• Γραμμή SVG: Μια γραμμή SVG είναι ένα μονό ευθύγραμμο τμήμα με δύο σημεία, ένα σε κάθε άκρο.
• SVG Polyline: Οι πολύγραμμες είναι σαν τις βασικές γραμμές, μόνο που μπορούν να έχουν περισσότερα από δύο σημεία.
• Πολύγωνο SVG: Τα πολύγωνα SVG μοιάζουν με ορθογώνια, μόνο που μπορούν να έχουν περισσότερα από τέσσερα σημεία, καθιστώντας δυνατά πολύπλοκα σχήματα.
• Διαδρομή SVG: Οι διαδρομές SVG λειτουργούν παρόμοια με το εργαλείο στυλό στο Adobe Photoshop. Οι γραμμές μπορούν να συνδέονται σαν πολύγραμμο/πολύγωνο, αλλά μπορούν επίσης να έχουν καμπύλες που εφαρμόζονται σε αυτές.

Πώς να κάνετε κίνηση SVG με CSS

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

Μετακίνηση του κύκλου χρησιμοποιώντας το Transform and Translate

Ο κύκλος στο παράδειγμα SVG μετακινείται από το κάτω μέρος προς το επάνω μέρος της οθόνης κατά τη διάρκεια του κύκλου κινούμενης εικόνας. Πρέπει να αντιστοιχίσετε μια κινούμενη εικόνα στον κύκλο για να μπορέσει να μετακινηθεί, μέσω μιας ιδιότητας CSS:

#κύκλος {
 animation: circle_anim 2000ms γραμμικές άπειρες κανονικές εμπρός
}

Η πρώτη λέξη στην αξία, κύκλος_ανιμ, είναι ένα όνομα για το κινούμενο σχέδιο. Λειτουργεί για δύο δευτερόλεπτα (2000 ms). Εχει ένα γραμμικός καμπύλη που διατηρεί την ταχύτητά της σταθερή και έχει ρυθμιστεί να τρέχει ένα άπειρος πολλές φορές στο εμπρός κατεύθυνση. Μπορείτε να χρησιμοποιήσετε βασικά καρέ για να ορίσετε μεμονωμένες φάσεις της κινούμενης εικόνας:

@keyframes κύκλος_ανιμ {
 0% { μεταμορφώνω: μεταφράζω(155 εικονοστοιχεία, 305 εικονοστοιχεία) }
 45% { μεταμορφώνω: μεταφράζω(155 εικονοστοιχεία, -123 εικονοστοιχεία) }
 50% { μεταμορφώνω: μεταφράζω(-123 εικονοστοιχεία, -123 εικονοστοιχεία) }
 55% { μεταμορφώνω: μεταφράζω(-123 εικονοστοιχεία, 728 εικονοστοιχεία) }
 60% { μεταμορφώνω: μεταφράζω(155 εικονοστοιχεία, 728 εικονοστοιχεία) }
 100% { μεταμορφώνω: μεταφράζω(155 εικονοστοιχεία, 305 εικονοστοιχεία) }
}

Υπάρχουν έξι βασικά καρέ σε αυτό το κινούμενο σχέδιο, επομένως ο κύκλος θα μετακινηθεί σε έξι διαφορετικές τοποθεσίες σε κάθε κύκλο. ο μετασχηματίζω: μεταφράζω Η ιδιότητα ορίζει τη θέση του κύκλου σε κάθε στάδιο. Στο 0% ο κύκλος βρίσκεται στη μέση της οθόνης και μετακινείται προς τα πάνω και εκτός προβολής κατά 45%. Κατά 50% έχει μετακινηθεί αριστερά από την οθόνη πριν μετακινηθεί κάτω από τη θύρα προβολής στο 55%. Ο κύκλος επιστρέφει στην οριζόντια θέση του κατά 60% και η κινούμενη εικόνα ολοκληρώνεται στο 100% με τον κύκλο πίσω στη μέση της οθόνης.

Ζωντανέψτε την ιδιοκτησία της ακτίνας συνόρων του Square

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

#τετράγωνο { κινουμένων σχεδίων: Square_anim 2000 ms ease-in-out άπειρες κανονικές εμπρός }

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

@keyframes Square_anim {
 0% { rx: 0 εικονοστοιχεία; ry: 0 εικονοστοιχεία }
 45% { rx: 40 εικονοστοιχεία; ry: 40 εικονοστοιχεία }
 55% { rx: 40 εικονοστοιχεία; ry: 40 εικονοστοιχεία }
 100% { rx: 0 εικονοστοιχεία; ry: 0 εικονοστοιχεία }
}

Όπως μπορείτε να δείτε, αυτό το κινούμενο σχέδιο έχει τέσσερα βασικά καρέ. Η ακτίνα συνόρων X και Y αλλάζει από 0px σε 40px μεταξύ 0% και 45%, με παύση στα 40px έως το 55%. Στη συνέχεια, επιστρέφει σε 0 px για κάθε ακτίνα μέχρι τη στιγμή που η κινούμενη εικόνα φτάσει το 100%.

Περιστρέψτε το τρίγωνο SVG με μετασχηματισμό

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

#τρίγωνο { κινουμένων σχεδίων: triangle_anim 2000 ms διευκόλυνση άπειρων κανονικών εμπρός }

Αυτό το κινούμενο σχέδιο έχει δύο βασικά καρέ, το ένα στο 0% και το άλλο στο 100%. Η ιδιότητα Μετασχηματισμός περιστροφής μετατρέπει το τρίγωνο από 0 μοίρες στο 0% σε 360 μοίρες στο 100%, δημιουργώντας μια πλήρη περιστροφή.

@keyframes triangle_anim {
 0% { μεταμορφώνω: μεταφράζω(644 εικονοστοιχεία, 297 εικονοστοιχεία) γυρίζω(0 μοίρες) }
 100% { μεταμορφώνω: μεταφράζω(644 εικονοστοιχεία, 297 εικονοστοιχεία) γυρίζω(360 μοίρες) }
}

Πώς να ενεργοποιήσετε άλλες ιδιότητες

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

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

Δημιουργήστε τα δικά σας κινούμενα σχέδια SVG

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

10 μοτίβα φόντου CSS που μπορείτε να χρησιμοποιήσετε στον ιστότοπό σας

Διαβάστε Επόμενο