Pembuatan favicon animasi

Artikel ini menunjukkan cara membuat favicon animasi menggunakan javascript, html<canvas></canvas> , dan sedikit geometri. Favicon, ikon kecil yang dipaparkan di sebelah tab laman web, boleh dikemas kini secara dinamik untuk menunjukkan kemajuan pemuatan. Ini amat berguna apabila melakukan tugas panjang di latar belakang, seperti memuat naik foto.

Kuncinya adalah untuk memanfaatkan<canvas></canvas> elemen untuk melukis animasi dan kemudian mengemas kini favicon dengan imej yang diberikan. Artikel ini menyediakan panduan langkah demi langkah:

1. Persediaan HTML: Tambahkan a<canvas></canvas> elemen dan tersembunyi<link> Elemen untuk Favicon ke HTML anda. The<canvas></canvas> elemen akan digunakan untuk melukis animasi, dan<link> Elemen akan dikemas kini untuk memaparkan animasi sebagai favicon. Kedua -duanya bersaiz 32x32 piksel, saiz favicon standard. Untuk tujuan demonstrasi, butang ditambah untuk mencetuskan animasi.

<link href="" rel="icon" type="image/png" width="32px">
<canvas height="32" hidden="" width="32"></canvas>
<button>Beban</button>

2. JavaScript Animation: Kod JavaScript pertama memeriksa sokongan kanvas. Pengendali acara klik butang memulakan animasi menggunakan setInterval untuk memanggil fungsi drawLoader pada selang 60ms.

 Onload = () => {
  kanvas = document.queryselector ('kanvas'),
  konteks = kanvas.getContext ('2d');
  jika (!! konteks) {
      // kanvas disokong
  }
};

butang = document.QuerySelector ('butang');
Button.AdDeventListener ('klik', fungsi () {
    n = 0;
    LoadingInterVal = setInterVal (DrawLoader, 60);
});

3. Gaya dan Lukisan: Kecerunan linear ditakrifkan untuk garis animasi. Fungsi drawLoader membersihkan kanvas, kemudian menarik sebahagian persegi, secara bertahap meningkatkan garis-garis yang ditarik lebih dari empat fasa 25-interval. Selepas setiap selang, kandungan kanvas ditukar kepada PNG dan ditetapkan sebagai favicon.

 biarkan kecerunan = context.CreeateLineArGradient (0, 0, 32, 32);
Gradient.AddColorStop (0, '#c7f0fe');
Gradient.AddColorStop (1, '#56D3C9');
context.StrokeStyle = Gradient;
context.LineWidth = 8;

fungsi drawloader () {
  dengan (konteks) {
    ClearRect (0, 0, 32, 32);
    permulaan ();
    // ... (Lukisan Logik - Lihat Artikel Asal untuk Kod Lengkap) ...
  }
  // ... (logik kemas kini Favicon - lihat artikel asal untuk kod lengkap) ...
}

Logik lukisan lengkap menggunakan geometri mudah untuk mengira titik akhir garis untuk setiap fasa animasi. Artikel ini menyediakan formula matematik dan kod yang sepadan. Langkah terakhir melibatkan menukarkan kandungan kanvas ke url data dan mengemas kini atribut href<link> elemen untuk memaparkan animasi sebagai favicon.

Kod penuh boleh didapati di GitHub (pautan yang disediakan dalam artikel asal). Teknik ini boleh disesuaikan untuk menggunakan bentuk yang berbeza dan mengisi gaya untuk kesan animasi yang berbeza -beza.

Atas ialah kandungan terperinci Pembuatan favicon animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!