Cách tạo Trình tải Favicon hoạt hình bằng JavaScript

Favicon là một phần quan trọng của thương hiệu trực tuyến, họ đưa ra một gợi ý trực quan cho người dùng và giúp đỡ họ phân biệt trang web của bạn từ những người khác. Mặc dù hầu hết các favicon là tĩnh, nhưng có thể tạo favicon hoạt hình cũng.

Một favicon di chuyển liên tục chắc chắn gây khó chịu cho hầu hết người dùng và cũng gây hại cho khả năng truy cập, tuy nhiên khi nó chỉ hoạt hình trong một thời gian ngắn để đáp ứng với hành động của người dùng hoặc sự kiện nền, chẳng hạn như tải trang, nó có thể cung cấp thêm thông tin hình ảnh-do đó cải thiện trải nghiệm người dùng.

Trong bài đăng này, tôi sẽ chỉ cho bạn cách tạo một trình tải tròn hoạt hình trong khung vẽ HTML, và làm thế nào bạn có thể sử dụng nó như một favicon. An bộ tải favicon hoạt hình là một công cụ tuyệt vời để hình dung tiến trình của bất kỳ hành động được thực hiện trên một trang, chẳng hạn như tải lên tệp hoặc xử lý hình ảnh. Bạn có thể nhìn vào bản demo thuộc về hướng dẫn này trên Github cũng.

1. Tạo thành phần

Đầu tiên, chúng ta cần phải tạo một hình ảnh động vải cái đó vẽ một vòng tròn đầy đủ, tổng cộng 100 phần trăm (điều này sẽ rất quan trọng khi chúng ta cần tăng cung).

Tôi đang sử dụng kích thước favicon tiêu chuẩn, 16 * 16 pixel, cho khung vẽ. Bạn có thể sử dụng kích thước lớn hơn kích thước nếu bạn muốn, nhưng lưu ý rằng hình ảnh canvas sẽ là giảm xuống còn 16² vùng pixel khi nó được áp dụng như một favicon.

2. Kiểm tra xem được hỗ trợ

Bên trong đang tải() xử lý sự kiện, chúng tôi có được một tài liệu tham khảo cho các yếu tố vải [cv] sử dụng querySelector () phương pháp và tham khảo đối tượng bối cảnh vẽ 2D của nó [ctx] với sự giúp đỡ của getContext () phương pháp.

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

Chúng tôi cũng cần kiểm tra nếu vải được hỗ trợ bởi UA bằng cách đảm bảo rằng đối tượng bối cảnh vẽ [ctx] tồn tại và không xác định. Chúng tôi sẽ đặt Tất cả các mã thuộc về sự kiện tải vào đây nếu điều kiện.

3. Tạo các biến ban đầu

Hãy tạo ra thêm ba biến toàn cầu, S cho góc bắt đầu của vòng cung, tc cho id cho setInterval () hẹn giờ, và phần trăm cho giá trị phần trăm của cùng một bộ đếm thời gian. Mật mã tc = pct = 0 gán 0 là giá trị ban đầu cho tc và phần trăm biến.

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

Để cho thấy giá trị của S đã được tính toán, hãy để tôi nhanh chóng giải thích góc hồ quang công việc.

Góc hồ quang

Các góc phụ (góc gồm hai tia xác định một cung) chu vi của một vòng tròn Là 2π rad, Ở đâu rad là ký hiệu đơn vị radian. Điều này làm cho góc cho một phần tư cung tương đương với 0,5π rad.

HÌNH ẢNH: Wikipedia

Khi nào hình dung tiến trình tải, chúng tôi muốn vẽ vòng tròn trên khung vẽ từ vị trí hàng đầu thay vì quyền mặc định.

Đi theo chiều kim đồng hồ (cung hướng mặc định được vẽ trên khung vẽ) từ đúng vị trí, điểm cao nhất là đạt được sau ba phần tư, tức là ở một góc 1,5π rad. Do đó, tôi đã tạo biến s = 1,5 * Toán.PI để sau này biểu thị góc bắt đầu cho các cung được vẽ từ trên vải.

4. Tạo kiểu cho vòng tròn

Đối với đối tượng bối cảnh vẽ, chúng tôi xác định dòngWidth và đột quỵ tính chất của vòng tròn chúng ta sẽ vẽ trong bước tiếp theo. Các đột quỵ tài sản đại diện cho màu sắc của nó.

 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. Vẽ hình tròn

Chúng tôi thêm một trình xử lý sự kiện nhấp vào nút Tải [#lbtn] mà kích hoạt bộ hẹn giờ setInterval là 60 mili giây, thực thi chức năng chịu trách nhiệm vẽ vòng tròn [updateLoader ()] cứ sau 60ms cho đến khi vòng tròn được vẽ hoàn chỉnh.

Các setInterval () phương pháp trả về id hẹn giờ để xác định bộ đếm thời gian của nó được gán cho tc biến.

 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. Tạo `updateLoader ()` chức năng tùy chỉnh

Đã đến lúc tạo ra các tùy chỉnh updateLoader () chức năng đó là được gọi bởi setInterval () phương pháp khi nhấp vào nút (sự kiện được kích hoạt). Hãy để tôi chỉ cho bạn mã trước, sau đó chúng ta có thể đi cùng với lời giải thích.

 chức năng 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); trở về;  pct ++;

Các ClearRect () phương pháp xóa khu vực hình chữ nhật của khung vẽ được xác định bởi các tham số của nó: tọa độ (x, y) của góc trên cùng bên trái. Các ClearRect (0, 0, 16, 16) hàng xóa mọi thứ trong khung hình 16 * 16 pixel, chúng tôi đã tạo.

Các BeginPath () phương pháp tạo ra một con đường mới cho bản vẽ và Cú đánh() phương pháp vẽ trên con đường mới được tạo ra.

Vào cuối của updateLoader () chức năng, tỷ lệ phần trăm [phần trăm] được tăng thêm 1, và trước khi tăng chúng tôi kiểm tra nếu nó bằng 100. Khi nó là 100 phần trăm, setInterval () hẹn giờ (được xác định bởi id bộ đếm thời gian, tc) Bị xóa với sự giúp đỡ của ClearInterval () phương pháp.

Ba tham số đầu tiên của vòng cung () phương pháp là (x, y) tọa độ tâm của cung và bán kính của nó. Các tham số thứ tư và thứ năm đại diện cho góc bắt đầu và kết thúc tại đó bản vẽ của vòng cung bắt đầu và kết thúc.

Chúng tôi đã quyết định điểm bắt đầu của vòng tròn bộ nạp, đó là ở góc S, và nó sẽ là giống nhau trong tất cả các lần lặp.

Góc kết thúc tuy nhiên sẽ tăng với số phần trăm, chúng ta có thể tính toán kích thước của sự gia tăng theo cách sau Nói 1% (giá trị 1 trên 100) là tương đương với góc α trong số 2π trong một vòng tròn (2π = góc của toàn bộ chu vi), sau đó có thể được viết tương tự như phương trình sau:

1/100 = α/ 2π

Sắp xếp lại phương trình:

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

Vì vậy, 1% tương đương với góc 2π/ 100 trong một vòng tròn. Do đó, góc kết thúc trong mỗi lần tăng phần trăm là tính bằng cách nhân 2π/ 100 theo giá trị phần trăm. Sau đó, kết quả là thêm vào S (Góc bắt đầu), vì vậy các cung rút ra từ cùng một vị trí bắt đầu mỗi lần. Đây là lý do tại sao chúng tôi sử dụng pct * 2 * Math.PI / 100 + s công thức tính góc kết thúc trong đoạn mã trên.

7. Thêm hình đại diện

Hãy đặt một yếu tố liên kết favicon vào HTML phần, trực tiếp hoặc thông qua JavaScript.

bên trong updateLoader () chức năng, đầu tiên chúng ta lấy favicon sử dụng querySelector () và gán nó cho lnk biến. Sau đó chúng ta cần phải xuất hình ảnh vải mỗi khi một vòng cung được vẽ thành một hình ảnh được mã hóa bằng cách sử dụng toDataURL () phương pháp, và gán nội dung URI dữ liệu đó làm hình ảnh favicon. Điều này tạo ra một favicon hoạt hình là giống như trình tải vải.

 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 = 'fuchsia'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; chức năng 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 ('hình ảnh / png'); if (pct === 100) clearTimeout (tc); trở về;  pct ++;

Bạn có thể xem mã đầy đủ trên Github.

Phần thưởng: Sử dụng trình tải cho các sự kiện không đồng bộ

Khi bạn cần sử dụng hoạt hình canvas này kết hợp với một hành động tải trong một trang web, chỉ định updateLoader () chức năng là người xử lý sự kiện cho phát triển() sự kiện của hành động.

Chẳng hạn, JavaScript của chúng tôi sẽ thay đổi như thế này trong 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 = new XMLHttpRequest (); xhr.addEventListener ('tiến trình', updateLoader); xhr.open ('NHẬN', 'https://xyz.com/abc'); xhr.send (); ; chức năng 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 ('hình ảnh / png');

bên trong vòng cung () phương pháp, thay thế giá trị phần trăm [phần trăm] với nạp vào tài sản của sự kiện-nó biểu thị số lượng tệp đã được tải và thay cho 100 sử dụng toàn bộ tài sản của ProgressEvent, biểu thị tổng số tiền cần nạp.

Có không cần setInterval () trong những trường hợp như vậy phát triển() sự kiện là tự động bắn khi quá trình tải.