Πώς να δημιουργήσετε: Εικονίδια αニματίας

Μάθετε πώς να χρησιμοποιείτε εικονίδια για να δημιουργήσετε εφέ αニματίας.

Φόρτιση μπαταρίας

Παράδειγμα

Πρώτο βήμα - Προσθήκη HTML:

<div id="charging" class="fa"></div>

Δεύτερο βήμα - Ενσωμάτωση της βιβλιοθήκης εικονιδίων Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Στο Εκμάθηση Font Awesome Για περισσότερες πληροφορίες σχετικά με το Font Awesome.

Τρίτο βήμα - Προσθήκη JavaScript:

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

Παράδειγμα

Αναγνώριση παραδείγματος:

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

Μια συνάρτηση με το όνομα chargebattery() Η συνάρτηση είναι υπεύθυνη για την αντικατάσταση και την εμφάνιση όλων των εικονιδίων.

Η συνάρτηση αυτή εμφανίζει πρώτα το εικονίδιο ενός κενής μπαταρίας:

Μετά ένα δευτερόλεπτο, το εικονίδιο αντικαθιστάται από ένα νέο εικονίδιο:

Κάθε δευτερόλεπτο αντικαθιστάται από μια νέα εικονίδιο του τρέχοντος εικονιδίου μέχρι να εμφανιστεί το εικονίδιο "μπαταρία γεμάτη":

Αυτός ο διαδικασία επαναλαμβάνεται κάθε 5 δευτερόλεπτα, δίνοντας την αίσθηση ότι η μπαταρία φορτίζεται.

更多动画图标

Περισσότερα εικονίδια κίνησης

Παράδειγμα

Περισσότερα εικονίδια κίνησης

Παράδειγμα

Περισσότερα εικονίδια κίνησης

Παράδειγμα

Περισσότερα εικονίδια κίνησης

Παράδειγμα

Περισσότερα εικονίδια κίνησης

Παράδειγμα

Περισσότερα εικονίδια κίνησης

Παράδειγμα