Cara Membuat Loader Favicon Animasi dengan JavaScript

Favicons adalah bagian penting dari branding online, mereka memberi isyarat visual kepada pengguna, dan bantu mereka bedakan situs Anda dari orang lain. Meskipun sebagian besar favicons bersifat statis, dimungkinkan untuk buat favicons animasi demikian juga.

Favicon yang terus bergerak tentu menyebalkan bagi sebagian besar pengguna, dan juga merusak aksesibilitas, namun saat itu hanya animasi untuk waktu yang singkat sebagai respons terhadap tindakan pengguna atau peristiwa latar belakang, seperti memuat halaman, itu bisa berikan informasi visual tambahan-karenanya meningkatkan pengalaman pengguna.

Dalam posting ini, saya akan menunjukkan cara membuat pemuat sirkuler animasi di kanvas HTML, dan bagaimana Anda bisa menggunakannya sebagai favicon. Sebuah pemuat animasi favicon adalah alat yang bagus untuk memvisualisasikan kemajuan tindakan apa pun dilakukan pada halaman, seperti mengunggah file atau pemrosesan gambar. Anda dapat melihat demo milik tutorial ini di Github demikian juga.

1. Buat elemen

Pertama, kita perlu buat animasi kanvas bahwa menggambar lingkaran penuh, total 100 persen (Ini akan menjadi penting ketika kita perlu meningkatkan busur).

 Beban  

Saya menggunakan ukuran favicon standar, 16 * 16 piksel, untuk kanvas. Anda dapat menggunakan ukuran yang lebih besar dari itu jika Anda mau, tetapi perhatikan bahwa gambar kanvas akan diperkecil ke 16² area piksel ketika itu diterapkan sebagai favicon.

2. Periksa apakah didukung

Di dalam onload () pengendali acara, kami dapatkan referensi untuk elemen kanvas [CV] menggunakan querySelector () metode, dan rujuk objek konteks gambar 2D-nya [ctx] dengan bantuan getContext () metode.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) / *… * /; 

Kami juga perlu memeriksa jika kanvas didukung oleh UA dengan memastikan bahwa objek konteks gambar [ctx] ada dan tidak terdefinisi. Kami akan menempatkan semua kode milik acara memuat dalam hal ini jika kondisi.

3. Buat variabel awal

Ayo buat tiga variabel global, s Untuk mulai dari busur, tc Untuk id untuk setInterval () pengatur waktu, dan persen Untuk nilai persentase dari timer yang sama. Kode tc = persen = 0 menetapkan 0 sebagai nilai awal Untuk tc dan persen variabel.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ; 

Untuk menunjukkan berapa nilai dari s dihitung, izinkan saya dengan cepat menjelaskan caranya sudut busur kerja.

Sudut busur

Itu sudut subtitle (sudut terdiri dari dua sinar yang menentukan busur) dari keliling lingkaran aku s 2π rad, dimana rad adalah simbol satuan radian. Ini membuat sudut untuk busur seperempat sama dengan 0,5π rad.

Kapan memvisualisasikan kemajuan pemuatan, kami ingin lingkaran di kanvas yang akan digambar dari posisi teratas daripada hak default.

Pergi searah jarum jam (busur arah default digambar di kanvas) dari posisi yang tepat, titik teratas adalah tercapai setelah tiga perempat, yaitu pada sudut 1.5π rad. Karenanya, saya telah membuat variabel s = 1,5 * Math.PI nanti menunjukkan sudut mulai untuk busur untuk ditarik dari atas kanvas.

4. Gaya lingkaran

Untuk objek konteks menggambar, kami mendefinisikan lineWidth dan strokeStyle properti dari lingkaran kita akan menggambar pada langkah selanjutnya. Itu strokeStyle Properti singkatan dari warnanya.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; ; 

5. Gambar lingkaran

Kita tambahkan event handler klik ke tombol Load [#lbtn] yang memicu timer setInterval 60 milidetik, yang mengeksekusi fungsi yang bertanggung jawab untuk menggambar lingkaran [updateLoader ()] setiap 60 ms hingga lingkaran sepenuhnya ditarik.

Itu setInterval () metode mengembalikan id penghitung waktu untuk mengidentifikasi timer yang ditugaskan untuk tc variabel.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; 

6. Buat updateLoader () fungsi kustom

Saatnya untuk membuat custom updateLoader () fungsi yang akan terjadi dipanggil oleh setInterval () metode ketika tombol diklik (acara dipicu). Mari saya tunjukkan kodenya dulu, lalu kita bisa melanjutkan penjelasannya.

 function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) clearInterval (tc); kembali;  persen ++;  

Itu clearRect () metode membersihkan area persegi panjang kanvas didefinisikan oleh parameternya: koordinat (x, y) dari sudut kiri atas. Itu clearRect (0, 0, 16, 16) baris menghapus semuanya di kanvas 16 * 16 piksel yang telah kami buat.

Itu beginPath () metode menciptakan jalur baru untuk menggambar, dan pukulan() metode melukis di jalan yang baru dibuat.

Di akhir updateLoader () fungsi, yang jumlah persentase [persen] bertambah 1, dan sebelum kenaikan kita periksa apakah sama dengan 100. Ketika 100 persen, maka setInterval () pengatur waktu (diidentifikasi oleh id timer, tc) dibersihkan dengan bantuan clearInterval () metode.

Tiga parameter pertama dari busur() metode adalah (x, y) koordinat tengah busur dan jari-jarinya. Parameter keempat dan kelima mewakili mulai dan akhiri sudut di mana gambar busur dimulai dan berakhir.

Kami sudah memutuskan titik awal dari lingkaran loader, yang berada di sudut s, dan itu akan menjadi sama di semua iterasi.

Namun sudut ujung akan kenaikan dengan jumlah persen, kita dapat menghitung ukuran kenaikan dengan cara berikut. Katakan 1% (nilai 1 dari 100) adalah setara dengan sudut α dari 2π dalam lingkaran (2π = sudut dari seluruh keliling), maka hal yang sama dapat ditulis sebagai persamaan berikut:

1/100 = α/ 2π

Saat menyusun ulang persamaan:

 α = 1 * 2π / 100 α = 2π/ 100 

Jadi, 1% setara dengan sudut 2π/ 100 dalam lingkaran. Jadi, sudut ujung selama setiap kenaikan persen adalah dihitung dengan mengalikan 2π/ 100 dengan nilai persentase. Maka hasilnya adalah ditambahkan ke s (sudut mulai), jadi busurnya diambil dari posisi awal yang sama setiap saat. Ini sebabnya kami menggunakan persen * 2 * Math.PI / 100+ s rumus untuk menghitung sudut ujung dalam cuplikan kode di atas.

7. Tambahkan favicon

Mari kita tempatkan a elemen tautan favicon ke dalam HTML bagian, baik secara langsung atau melalui JavaScript.

Dalam updateLoader () fungsi, pertama kita ambil favicon menggunakan querySelector () metode, dan tetapkan ke lnk variabel. Maka kita perlu ekspor gambar kanvas setiap kali busur ditarik menjadi gambar yang disandikan dengan menggunakan toDataURL () metode, dan menetapkan konten URI data sebagai gambar favicon. Ini menciptakan favicon animasi yang merupakan sama dengan pemuat kanvas.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('tautan [rel = "ikon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); if (pct === 100) clearTimeout (tc); kembali;  persen ++;  

Anda dapat melihat kode lengkapnya pada Github.

Bonus: Gunakan loader untuk acara async

Saat Anda perlu menggunakan animasi kanvas ini bersama dengan aksi pemuatan di halaman web, tetapkan updateLoader () fungsi sebagai pengendali acara untuk kemajuan() acara aksi.

Misalnya, JavaScript kami akan berubah seperti ini dalam AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = XMLHttpRequest () baru; xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; function updateLoader (evt) ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');  

Dalam busur() metode, ganti nilai persentase [persen] dengan sarat properti acara-ini menunjukkan berapa banyak file telah dimuat, dan sebagai gantinya 100 menggunakan total milik ProgressEvent, yang menunjukkan jumlah total yang akan dimuat.

Ada tidak perlu untuk setInterval () dalam kasus tersebut, seperti kemajuan() acara adalah dipecat secara otomatis saat pemuatan berlangsung.