JavaScript ile Animasyonlu Favicon Yükleyici Nasıl Oluşturulur

Favicons çevrimiçi markalaşmanın çok önemli bir parçası görsel bir ipucu vermek kullanıcılara ve onlara yardım sitenizi ayırt edin diğerlerinden. Çoğu favicons statik olmasına rağmen, bu mümkündür animasyonlu favicons oluşturmak yanı sıra.

Sürekli hareket eden bir favicon, çoğu kullanıcı için kesinlikle can sıkıcıdır ve aynı zamanda yalnızca kısa bir süre için canlandırıldığında erişilebilirliğe zarar verir. Bir kullanıcı eylemine veya bir arka plan etkinliğine yanıt olarak, sayfa yükleme gibi Ekstra görsel bilgi sağlamak-bu nedenle kullanıcı deneyimini geliştirmek.

Bu yazıda, nasıl oluşturulacağını göstereceğim HTML tuvalinde hareketli dairesel yükleyici, ve bir favicon olarak nasıl kullanabilirsiniz. bir animasyonlu favicon yükleyici için harika bir araçtır Herhangi bir eylemin ilerleyişini görselleştirmek dosya yükleme veya görüntü işleme gibi bir sayfada gerçekleştirilir. Bir bakabilirsiniz bu eğitime ait demo üzerinde Github yanı sıra.

1. oluşturun eleman

İlk önce, ihtiyacımız var tuval animasyonu oluşturun o % 100 tam daire çizer (yayı arttırmamız gerektiğinde bu önemli olacaktır).

 Yük  

Tuval için standart favicon boyutunu, 16 * 16 piksel kullanıyorum. İsterseniz ondan daha büyük bir boyut kullanabilirsiniz, ancak tuval görüntüsünün 16 aşağı ölçeklenir² piksel alanı favicon olarak uygulandığında.

2. kontrol edin desteklenir

İçinde Onload () olay işleyicisi, biz tuval öğesi için bir başvuru al [Özgeçmiş] kullanmak querySelector () yöntem ve bakın 2D çizim bağlamı nesnesi [ctx] yardımı ile getContext () yöntem.

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

Ayrıca kontrol etmemiz gerek tuval tarafından destekleniyorsa UA çizim bağlamı nesnesinin [olduğundan emin olunctx] var ve tanımlanmamış. Yerleştiririz load olayına ait tüm kod bunun içine Eğer şart.

3. İlk değişkenleri oluşturun

Hadi yaratalım üç global değişken daha, s için yayın başlangıç ​​açısı, tc için kimliği setInterval () kronometre, ve pct için aynı zamanlayıcının yüzde değeri. Kod tc = pct = 0 0 olarak atar başlangıç ​​değeri için tc ve pct değişkenler.

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

Değerinin nasıl olduğunu göstermek için s hesaplandı, nasıl hızlı bir şekilde açıklayayım yay açıları iş.

Yay açıları

düşey açı (bir yay tanımlayan iki ışıntan oluşan açı) bir dairenin çevresinin olduğu 2π radikal, nerede radikal radyan birimi sembolüdür. Bu yapar çeyrek yay açısı eşittir 0.5π radikal.

Ne zaman yükleme ilerlemesini görselleştirme, tuval üzerindeki dairenin çizilmesini istiyoruz en üst konumdan varsayılan haktan ziyade.

Saat yönünde gidiyor (tuval üzerine varsayılan yön yayı çizilir) doğru pozisyondan, en üst nokta dörtte üçünden sonra ulaştı, yani bir açıyla 1.5π radikal. Dolayısıyla, değişkeni yarattım s = 1.5 * Matematik daha sonra yayların başlangıç ​​açısını gösterir tuvalden çizilmek.

4. Çembere stil verin

Çizim bağlamı nesnesi için hat genişliği ve strokeStyle dairenin özellikleri Bir sonraki adımda çizeceğiz. strokeStyle özellik rengi için duruyor.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); eğer (!! ctx) s = 1.5 * Math. PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuşya'; ; 

5. Çemberi çizin

Biz bir tıklama olayı işleyicisi ekleyin Yükle düğmesine [#lbtn] hangi 60 milisaniyelik bir setInterval zamanlayıcı tetikler, dairenin çizilmesinden sorumlu işlevi yerine getirir [updateLoader ()] daire tamamen çizilene kadar her 60ms'de bir.

setInterval () yöntem bir zamanlayıcı kimliği döndürür atanmış zamanlayıcısını tanımlamak için tc değişken.

 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 = 'fuşya'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; 

6. oluşturun updateLoader () özel işlev

Özel oluşturma zamanı updateLoader () olması gereken işlev tarafından aranan setInterval () yöntem düğme tıklandığında (olay tetiklenir). Önce kodu göstereyim, sonra açıklama ile devam edebiliriz..

 updateLoader () işlevinin ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 x Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) clearInterval (tc); dönüş;  pct ++;  

clearRect () yöntem tuvalin dikdörtgen alanını temizler parametreleri tarafından tanımlanır: sol üst köşenin (x, y) koordinatları. clearRect (0, 0, 16, 16) hat her şeyi siler yarattığımız 16 * 16 piksel tuvalinde.

beginPath () yöntem yeni bir yol yaratır çizim için ve inme () yöntem bu yeni oluşturulan yolda boyalar.

Sonunda updateLoader () işlevi yüzde sayımı [pct] 1 artırılır, ve artış öncesi 100'e eşit olup olmadığını kontrol edin. Yüzde 100 olduğunda, setInterval () kronometre (zamanlayıcı kimliği ile tanımlanır, tc) temizlendi yardımı ile clearInterval () yöntem.

İlk üç parametre ark() yöntem (x, y) yayın merkezinin koordinatları ve yarıçapı. Dördüncü ve beşinci parametreler başlangıç ​​ve bitiş açıları ark çizimi başlar ve biter.

Zaten açılı olan yükleyici dairesinin başlangıç ​​noktasına karar verdik. s, ve o olacak tüm yinelemelerde aynı.

Ancak son açı yüzde sayısındaki artış, hesaplayabiliriz artışın boyutu Aşağıdaki şekilde. % 1 deyin (100 üzerinden 1 değeri) açıya eşdeğer α 2 üzerindenπ daire şeklinde (2π = tüm çevrenin açısı), o zaman aynı denklem ile aynı yazılabilir:

1/100 = α/ 2π

Denklemin yeniden düzenlenmesi üzerine:

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

Yani,% 1, açı 2'ye eşdeğerdirπ/ 100 bir daire içinde. Bu nedenle, her bir yüzde artış sırasındaki bitiş açısı çarparak hesaplanan 2π/ 100, yüzde değerine göre. O zaman sonuç ilave s (başlangıç ​​açısı), yani yaylar aynı başlangıç ​​konumundan çizilmiş her zaman. Bu yüzden kullandık. pct * 2 * Matematik. PI / 100 + s yukarıdaki kod parçacığındaki uç açısını hesaplamak için formül.

7. favicon ekleyin

Bir yerleştirelim favicon bağlantı elemanı HTML’ye doğrudan veya JavaScript ile.

İçinde updateLoader () işlev, önce biz favicon'u getir kullanmak querySelector () yöntemi seçin ve lnk değişken. O zaman ihtiyacımız var tuval görüntüsünü dışa aktar bir yay çekildiğinde şifreli bir görüntüye kullanarak toDataURL () yöntem ve bu veri URI içeriğini favicon görüntüsü olarak ata. Bu, animasyonlu bir favicon oluşturur. tuval yükleyici ile aynı.

 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 ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuşya'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; updateLoader () işlevinin ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 x Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); if (pct === 100) clearTimeout (tc); dönüş;  pct ++;  

Kodun tamamına bakabilirsiniz Github'da.

Bonus: Eşzamansız olaylar için yükleyiciyi kullanın

Bu tuval animasyonunu kullanmanız gerektiğinde bir yükleme işlemi ile birlikte bir web sayfasında, updateLoader () fonksiyon olay işleyicisi olarak ilerleme() eylem olayı.

Örneğin, JavaScript’imiz böyle değişecek AJAX'ta:

 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 = 'fuşya';  var xhr = new XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; updateLoader (evt) ctx.clearRect (0, 0, 16, 16) işlevi; ctx.beginPath (); ctx.arc (8, 8, 6, s, (evtloaded * 2 x Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');  

İçinde ark() yöntemi, yüzde değerini değiştirinpct] ile yüklü etkinliğin mülkü-dosyanın ne kadarının yüklendiğini ve bunun yerine 100 kullan Genel Toplam ProgressEvent’in mülkü, yüklenecek toplam miktarı belirtir.

Orada ihtiyaç yok setInterval () Bu gibi durumlarda ilerleme() olay otomatik olarak ateşlenir yükleme ilerledikçe.