Bagaimana Membuat Pembuat Favicon Animasi dengan JavaScript

Favicons adalah bahagian penting dalam penjenamaan dalam talian, mereka memberikan isyarat visual kepada pengguna, dan membantu mereka membezakan laman web anda dari orang lain. Walaupun kebanyakan favikon adalah statik, adalah mustahil buat favicons animasi juga.

Favicon sentiasa bergerak pasti menjengkelkan untuk kebanyakan pengguna, dan juga merosakkan aksesibiliti, namun apabila ia hanya animasi untuk masa yang singkat sebagai tindak balas kepada tindakan pengguna atau peristiwa latar belakang, seperti beban halaman, boleh memberikan maklumat visual tambahan-oleh itu meningkatkan pengalaman pengguna.

Dalam siaran ini, saya akan menunjukkan kepada anda cara membuatnya loader pekeliling animasi dalam kanvas HTML, dan bagaimana anda boleh menggunakannya sebagai favicon. An loader favicon animasi adalah alat yang hebat untuk menggambarkan kemajuan apa-apa tindakan dilakukan pada halaman, seperti muat naik fail atau pemprosesan imej. Anda boleh lihat di demo yang dimuatkan dalam tutorial ini pada Github juga.

1. Buat elemen

Pertama, kita perlu buat animasi kanvas itu menarik bulatan penuh, 100 peratus secara keseluruhan (ini akan menjadi penting apabila kita perlu menambah arka).

 Muatkan  

Saya menggunakan saiz favicon standard, 16 * 16 piksel, untuk kanvas. Anda boleh menggunakan saiz yang lebih besar daripada itu jika anda mahu, tetapi perhatikan bahawa imej kanvas akan menjadi berskala ke 16² kawasan piksel apabila ia digunakan sebagai favicon.

2. Periksa jika disokong

Di dalam onload () pengendali acara, kami dapatkan rujukan untuk elemen kanvas [CV] menggunakan querySelector () kaedah, dan rujuk objek konteks lukisan 2D [ctx] dengan bantuan getContext () kaedah.

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

Kami juga perlu menyemak jika kanvas disokong oleh UA dengan memastikan bahawa objek lukisan objek [ctx] wujud dan tidak ditakrifkan. Kami akan meletakkan semua kod yang dimiliki oleh peristiwa beban ke dalam ini jika keadaan.

3. Buat pembolehubah awal

Mari buat tiga lagi variabel global, s untuk sudut permulaan arka, tc untuk id untuk setInterval () pemasa, dan pct untuk nilai peratusan pemasa yang sama. Kod ini tc = pct = 0 memberikan 0 sebagai nilai permulaan untuk tc dan pct pembolehubah.

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

Untuk menunjukkan bagaimana nilai s dikira, beritahu saya dengan cepat sudut arka kerja.

Sudut arka

The sudut tersuntik (sudut terdiri daripada dua sinar yang menentukan arka) lilitan bulatan adalah 2π rad, di mana rad adalah simbol unit radian. Ini menjadikan sudut untuk arka suku sama dengan 0.5π rad.

Bila menggambarkan kemajuan pemuatan, kami mahu bulatan di atas kanvas ditarik dari kedudukan teratas bukannya hak lalai.

Pergi mengikut arah jam (arc arah lalai ditarik pada kanvas) dari kedudukan yang betul, titik teratas adalah dicapai selepas tiga suku, iaitu pada sudut 1.5π rad. Oleh itu, saya telah membuat pembolehubah s = 1.5 * Math.PI untuk kemudian menunjukkan sudut permulaan untuk arka untuk diambil dari pada kanvas.

4. Gaya bulatan

Untuk objek konteks lukisan, kita mentakrifkan lineWidth dan strokeStyle sifat bulatan kita akan membuat langkah seterusnya. The strokeStyle harta benda mewakili warna.

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

5. Lukis bulatan

Kami tambah pengendali acara klik ke butang Beban [#lbtn] yang mana mencetuskan pemasa setInterval sebanyak 60 milisaat, yang melaksanakan fungsi yang bertanggungjawab untuk melukis bulatan [updateLoader ()] setiap 60ms sehingga bulatan sepenuhnya ditarik.

The setInterval () kaedah mengembalikan id pemasa untuk mengenal pasti pemasa yang diberikan kepada tc pembolehubah.

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

6. Buat updateLoader () fungsi tersuai

Sudah waktunya untuk membuat adat updateLoader () fungsi yang akan menjadi dipanggil oleh setInterval () kaedah apabila butang diklik (peristiwa itu dicetuskan). Biarkan saya memperlihatkan kod anda terlebih dahulu, maka kita boleh pergi bersama penjelasannya.

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

The clearRect () kaedah membersihkan kawasan segi empat segi kanvas didefinisikan oleh parameternya: koordinat (x, y) sudut kiri atas. The clearRect (0, 0, 16, 16) talian memadamkan semuanya dalam kanvas 16 * 16 pixel yang telah kami buat.

The beginPath () kaedah mewujudkan laluan baru untuk lukisan, dan stroke () kaedah cat pada laluan yang baru diwujudkan.

Pada akhir updateLoader () fungsi, jumlah peratusan [pct] meningkat sebanyak 1 kali, dan sebelum kenaikan kita semak jika ia sama dengan 100. Apabila ia 100 peratus, yang setInterval () pemasa (dikenal pasti oleh id pemasa, tc) dibersihkan dengan bantuan clearInterval () kaedah.

Tiga parameter pertama dari arka () kaedah adalah (x, y) koordinat pusat arka dan jejarinya. Parameter keempat dan kelima mewakili mulakan dan tamat sudut di mana lukisan arka bermula dan berakhir.

Kami telah memutuskan titik permulaan bulatan pemuat, yang berada di sudut s, dan ia akan menjadi sama dalam semua lelaran.

Sudut akhir bagaimanapun akan kenaikan dengan kiraan peratus, kita dapat mengira saiz kenaikan itu dengan cara berikut. Katakanlah 1% (nilai 1 daripada 100) adalah bersamaan dengan sudut α daripada 2π dalam kalangan (2π = sudut seluruh lilitan), maka yang sama boleh ditulis sebagai persamaan berikut:

1/100 = α/ 2π

Pada menyusun semula persamaan tersebut:

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

Oleh itu, 1% bersamaan dengan sudut 2π/ 100 dalam bulatan. Oleh itu, sudut akhir dalam setiap kenaikan peratus ialah dikira dengan mengalikan 2π/ 100 dengan nilai peratusan. Kemudian hasilnya ditambah kepada s (sudut permulaan), jadi arka itu diambil dari kedudukan permulaan yang sama setiap masa. Inilah sebabnya kami menggunakannya pct * 2 * Math.PI / 100 + s formula untuk mengira sudut akhir dalam coretan kod di atas.

7. Tambah favicon

Mari letakkan a unsur pautan favicon ke dalam HTML seksyen, sama ada secara langsung atau melalui JavaScript.

Di dalam updateLoader () fungsi, pertama kita ambil favicon menggunakan querySelector () kaedah, dan serahkannya kepada lnk pembolehubah. Kemudian kita perlu mengeksport imej kanvas setiap kali arka dilukis ke dalam imej yang dikodkan dengan menggunakan toDataURL () kaedah, dan memperuntukkan kandungan URI data sebagai imej favicon. Ini mewujudkan favicon animasi iaitu sama seperti loader kanvas.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jika (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "icon" ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', fungsi () tc = setInterval (updateLoader, 60);); ; fungsi 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'); jika (pct === 100) clearTimeout (tc); kembali;  pct ++;  

Anda boleh melihat kod penuh di Github.

Bonus: Gunakan loader untuk acara async

Apabila anda perlu menggunakan animasi kanvas ini bersempena dengan tindakan pemuatan dalam laman web, tetapkan updateLoader () fungsi sebagai pengendali acara untuk kemajuan () peristiwa tindakan itu.

Sebagai contoh, JavaScript kami akan berubah seperti ini di AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); jika (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('pautan [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = XMLHttpRequest baru (); xhr.addEventListener ('kemajuan', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; fungsi 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');  

Di dalam arka () kaedah, gantikan nilai peratusan [pct] dengan dimuatkan harta acara-ia menunjukkan berapa banyak fail telah dimuat, dan sebagai ganti 100 menggunakan jumlahnya harta ProgressEvent, yang menandakan jumlah keseluruhan akan dimuatkan.

Ada tidak perlu setInterval () dalam kes sedemikian, sebagai kemajuan () acara itu secara automatik dipecat semasa pemuatan berlangsung.