Miten luoda: animaatioikoni

Opit, miten käyttää kuvakkeita animaation luomiseen.

Akun lataaminen

Kokeile itse

Ensimmäinen vaihe - Lisää HTML:

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

Toinen vaihe - Sisällytä Font Awesome-kuvakkeiden kirjasto:

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

Meillä on Font Awesome -opas Lue lisää Font Awesomesta täältä.

Kolmas vaihe - Lisää 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>

Kokeile itse

Esimerkki selitys:

Tämä esimerkki antaa vaikutelman, että akku ladataan, mutta todellisuudessa näytetään viisi eri kuvaketta.

Nimeltään chargebattery() Funktio vastaa kaikkien kuvakkeiden korvaamisesta ja näyttämisestä.

Tämä funktio näyttää ensin tyhjän akun kuvakkeen:

Yhden sekunnin kuluttua kuvake korvataan uudella kuvakkeella:

Jokaisessa sekunnissa korvataan nykyinen ikoni uudella kuvakkeella, kunnes 'akku on täynnä':

Tämä prosessi toistuu joka viisi sekuntia, mikä tekee akusta tuntuvan, että se ladataan.

Lisää animaatiokuvakkeita

Esimerkki

Kokeile itse

Esimerkki

Kokeile itse

Esimerkki

Kokeile itse

Esimerkki

Kokeile itse

Esimerkki

Kokeile itse

Esimerkki

Kokeile itse