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

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

Η λειτουργία DevTools τόσο του Google Chrome όσο και του Firefox συνοδεύεται από τη δυνατότητα επιθεώρησης των κινούμενων εικόνων σας. Μάθετε πώς να χρησιμοποιείτε αυτήν τη δυνατότητα για να βελτιώσετε τα δικά σας κινούμενα σχέδια και να δημιουργήσετε αντίστροφη μηχανική των αγαπημένων σας κινούμενων εικόνων στον Ιστό.

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

instagram viewer

Ο κώδικας για αυτά τα παραδείγματα είναι διαθέσιμος στο ένα αποθετήριο GitHub.

Καθορισμός κινούμενων εικόνων με HTML και CSS

Η παρακάτω HTML αποδίδει μια σελίδα με δύο στοιχεία: α και ένα. Η σελίδα εισάγει επίσης ένα αρχείο CSS με όνομα στυλ.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

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

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

Αυτά τα στυλ δημιουργούν δύο στοιχεία:

  • Ένα απλό πλαίσιο που περιστρέφεται και αλλάζει χρώμα όταν φορτώνεται η σελίδα.
  • Ένα κουμπί που αλλάζει το χρώμα του φόντου του όταν τοποθετείτε το δείκτη του ποντικιού πάνω του.

Σημειώστε ότι το κόκκινο πλαίσιο ενεργοποιείται χρησιμοποιώντας το Οδηγία CSS @keyframe, ενώ το κουμπί χρησιμοποιεί μια μετάβαση. Αυτό σας επιτρέπει να συγκρίνετε τις δύο προσεγγίσεις χρησιμοποιώντας τα DevTools του προγράμματος περιήγησης.

Για πρόσβαση στο Κινούμενα σχέδια καρτέλα στο Chrome DevTools:

  1. Κάντε δεξί κλικ στη σελίδα σας για να εμφανιστεί το μενού περιβάλλοντος.
  2. Κάντε κλικ Ελέγχω.
  3. Κάντε κλικ στις τριπλές κουκκίδες στην επάνω δεξιά γωνία.
  4. Πλοηγηθείτε στο Περισσότερα Εργαλεία > Κινούμενα σχέδια.

Αυτό θα ανοίξει το συρτάρι κινούμενων σχεδίων στο κάτω τμήμα.

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

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

Τα DevTools εμφανίζουν όλα τα κινούμενα σχέδια που σχετίζονται με το στοιχείο που επιλέγετε. Επειδή υπάρχει μόνο ένα κινούμενο σχέδιο που έχει οριστεί για το κόκκινο πλαίσιο—rotateAndChangeColor—θα δείτε απλώς τις λεπτομέρειες του.

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

Όταν επιθεωρείτε τη μετάβαση του κουμπιού, το DevTools θα εμφανίσει τις επιμέρους ιδιότητες της μετάβασης: το χρώμα και το χρώμα του φόντου.

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

Παραδείγματα κινούμενων σχεδίων για προχωρημένους

Ξεκινήστε αντικαθιστώντας τη σήμανση εντός του HTML σας ετικέτα με την ακόλουθη σήμανση:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Στη συνέχεια, αντικαταστήστε όλα τα στυλ στο δικό σας στυλ.css αρχείο με αυτό:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

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

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

Αν ανοίξετε το Κινούμενα σχέδια καρτέλα στο DevTools και ανανεώστε τη σελίδα, θα βρείτε όλες τις πληροφορίες που σχετίζονται με αυτά τα κινούμενα σχέδια:

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

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

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

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

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

Ως προγραμματιστής ιστού, θα πρέπει να είστε εξοικειωμένοι με τη λειτουργία DevTools του προγράμματος περιήγησής σας ή την αντίστοιχη λειτουργία της.