Κινούμενα σχέδια CSS

Παρουσίαση Css

Πηγή: Διαδικτυακό πρόγραμμα

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

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

Τι είναι τα κινούμενα σχέδια;

Ο κόσμος των κινούμενων σχεδίων

Πηγή: Όλοι οι παίκτες

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

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

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

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

Τύποι κινουμένων σχεδίων

Υπάρχουν διάφοροι τύποι κινουμένων σχεδίων:

Κινούμενα σχέδια ή παραδοσιακά κινούμενα σχέδια

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

Σταματήστε την κίνηση

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

Pixelation

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

Ροτοσκόπηση

Αποτελείται από το άμεσο σχέδιο ενός άλλου σχεδίου, όπως η ιχνηλάτηση ενός σχεδίου σε άλλο σχέδιο ή ενός πραγματικού προσώπου. Θεωρείται πρόδρομος του mocap, δηλαδή του motion capture που χρησιμοποιείται για την αναδημιουργία ψηφιακών χαρακτήρων στον κόσμο του κινηματογράφου.

Animation by Cutouts ή Cut out Animation

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

Κινούμενα σχέδια 3D

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

Επί του παρόντος υπάρχουν και άλλες τεχνικές όπως: η ζωγραφική σε γυαλί, το animation της άμμου, η οθόνη των gujas και η ζωγραφική στο σελιλόιντ. 

Τι είναι το CSS;

Css διεπαφή ενός προγράμματος

Πηγή: Rosario Session Studio Web Design

Τώρα που γνωρίζετε λίγα περισσότερα για τον κόσμο των κινούμενων εικόνων, ήρθε η ώρα να σας παρουσιάσουμε τον κόσμο των ακρωνύμιων CSS.

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

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

Σε τι χρησιμεύει το CSS;

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

Κανονικά, για να καταλάβετε καλύτερα περί τίνος πρόκειται για αυτό το εργαλείο, οι ειδικοί του ψηφιακού μάρκετινγκ είναι οι πρώτοι που το καταλαβαίνουν αυτό, καθώς είναι αυτοί που τους χειρίζονται.

Κίνηση σε CSS

Λοιπόν, τώρα που γνωρίζετε λίγα πράγματα για τον κόσμο των κινούμενων εικόνων και του CSS. Ήρθε η ώρα να ξεκινήσετε το σεμινάριο.

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

Κάθε ένα από αυτά τα κινούμενα σχέδια έχει μια σειρά από πλεονεκτήματα:

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

Ρυθμίσεις κινούμενων εικόνων

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

Οι επιμέρους ιδιότητες είναι:

κινούμενα σχέδια - καθυστέρηση

Χρόνος καθυστέρησης μεταξύ της στιγμής φόρτωσης του στοιχείου και της έναρξης της ακολουθίας κινούμενων εικόνων.

κινούμενα σχέδια - σκηνοθεσία

Υποδεικνύει εάν η κινούμενη εικόνα θα πρέπει να επιστρέψει στο αρχικό πλαίσιο στο τέλος της ακολουθίας ή εάν θα πρέπει να ξεκινήσει από την αρχή όταν φτάσει στο τέλος.

κινούμενα σχέδια - διάρκεια

Υποδεικνύει το χρόνο που χρειάζεται η κινούμενη εικόνα για να ολοκληρώσει τον κύκλο της (τη διάρκεια)

animation - επανάληψη - μέτρηση

Πόσες φορές επαναλαμβάνεται. Μπορούμε να υποδείξουμε άπειρος για να επαναλάβετε το κινούμενο σχέδιο επ' αόριστον.

κινούμενα σχέδια - όνομα

Χρησιμοποιείται για τον καθορισμό του ονόματος που περιγράφει καθένα από τα καρέ της κινούμενης εικόνας.

animation - play - state

Σας επιτρέπει να μπορείτε να κάνετε παύση και να συνεχίσετε την ακολουθία κινούμενων εικόνων.

animation - timing- λειτουργία

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

animation - fill - mode

Καθορίζει ποιες τιμές θα έχουν οι ιδιότητες μετά το τέλος της κινούμενης εικόνας.

Ρυθμίστε τη σειρά με καρέ

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

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

Για να υποδείξετε το χρόνο και ρυθμό, το πλαίσιο χρησιμοποιεί ποσοστό και από και προςΧάρη σε αυτό, μπορούμε να υποδείξουμε πότε γίνεται η αρχή με 0% και το τέλος με 100%.

Κινούμενα σχέδια καρέ και κειμένου

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

75% γραμματοσειρά - μέγεθος: 300%; περιθώριο - αριστερά: 25%; πλάτος: 150%;

Με αυτόν τον κωδικό, προτείνουμε στο πρόγραμμα περιήγησης ότι στο 75% της ακολουθίας, η κεφαλίδα έχει αριστερό περιθώριο 25% και μέγεθος 200% με πλάτος 150%.

Επανάληψη κινουμένων σχεδίων

Για να επαναλάβετε μια κινούμενη εικόνα, είναι απαραίτητο να χρησιμοποιήσετε την ακόλουθη ιδιότητα animation - επανάληψη - μέτρηση και πρέπει να αναφέρουμε πόσες φορές θέλουμε να επαναληφθεί. Μπορούμε επίσης να χρησιμοποιήσουμε άπειρος ώστε να επαναλαμβάνεται πάντα.

Συμπέρασμα

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

Έχεις τολμήσει ήδη;


Γίνε ο πρώτος που θα σχολιάσει

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.