วิธีการสร้างภาพเคลื่อนไหว Favicon Loader ด้วย JavaScript

favicons เป็นส่วนสำคัญของการสร้างแบรนด์ออนไลน์พวกเขา ให้คิวภาพ ให้กับผู้ใช้และช่วยพวกเขา แยกแยะเว็บไซต์ของคุณ จากคนอื่น ๆ แม้ว่า favicons ส่วนใหญ่จะเป็นแบบคงที่ แต่ก็เป็นไปได้ที่จะ สร้างภาพเคลื่อนไหว favicons เช่นกัน.

favicon ที่เคลื่อนไหวอยู่ตลอดเวลานั้นสร้างความรำคาญให้กับผู้ใช้ส่วนใหญ่และยังเป็นอันตรายต่อการเข้าถึงด้วยอย่างไรก็ตามเมื่อมันเป็นภาพเคลื่อนไหวในช่วงเวลาสั้น ๆ เท่านั้น เพื่อตอบสนองต่อการกระทำของผู้ใช้หรือเหตุการณ์พื้นหลัง, เช่นการโหลดหน้ามันสามารถ ให้ข้อมูลภาพพิเศษ-ดังนั้นการปรับปรุงประสบการณ์ของผู้ใช้.

ในโพสต์นี้ฉันจะแสดงวิธีสร้าง โหลดเดอร์แบบวงกลมเคลื่อนไหวในผืนผ้าใบ HTML, และวิธีที่คุณสามารถใช้เป็น favicon โหลดเดอร์ favicon เคลื่อนไหว เป็นเครื่องมือที่ยอดเยี่ยมในการ เห็นภาพความคืบหน้าของการกระทำใด ๆ ดำเนินการบนหน้าเว็บเช่นการอัปโหลดไฟล์หรือการประมวลผลภาพ คุณสามารถดู การสาธิตที่เป็นของบทช่วยสอนนี้ บน Github เช่นกัน.

1. สร้าง ธาตุ

ก่อนอื่นเราต้อง สร้างภาพเคลื่อนไหวบนผืนผ้าใบ ที่ วาดวงกลมเต็มจำนวน 100 เปอร์เซ็นต์ (สิ่งนี้จะมีความสำคัญเมื่อเราต้องการเพิ่มส่วนโค้ง).

 ภาระ  

ฉันใช้ขนาดมาตรฐาน favicon ขนาด 16 * 16 พิกเซลสำหรับผืนผ้าใบ คุณสามารถใช้ขนาดที่ใหญ่กว่านั้นได้หากต้องการ แต่โปรดทราบว่ารูปภาพผ้าใบจะเป็น ลดขนาดลงเหลือ 16² พื้นที่พิกเซล เมื่อมันถูกใช้เป็น favicon.

2. ตรวจสอบว่า ได้รับการสนับสนุน

ข้างใน onload () ตัวจัดการเหตุการณ์เรา รับการอ้างอิงสำหรับองค์ประกอบ Canvas [ประวัติย่อ] ใช้ querySelector () วิธีการและดู วัตถุบริบทการวาด 2D ของมัน [ctx] ด้วยความช่วยเหลือของ getContext () วิธี.

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

เราก็ต้องตรวจสอบ ถ้าผ้าใบได้รับการสนับสนุนโดย UA โดยทำให้แน่ใจว่าวัตถุบริบทการวาดภาพ [ctx] มีอยู่และไม่ได้ไม่ได้กำหนด. เราจะทำ รหัสทั้งหมดที่เป็นของเหตุการณ์โหลด ลงในนี้ ถ้า เงื่อนไข.

3. สร้างตัวแปรเริ่มต้น

มาสร้างกันเถอะ อีกสามตัวแปรทั่วโลก, s สำหรับ มุมเริ่มต้นของส่วนโค้ง, TC สำหรับ ID สำหรับ setInterval () เครื่องจับเวลา, และ PCT สำหรับ ค่าร้อยละของตัวจับเวลาเดียวกัน. รหัส tc = pct = 0 กำหนด 0 เป็น ค่าเริ่มต้น สำหรับ TC และ PCT ตัวแปร.

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

เพื่อแสดงให้เห็นว่าคุณค่าของ s คำนวณแล้วให้ฉันอธิบายได้อย่างรวดเร็วว่า มุมโค้ง งาน.

มุมโค้ง

มุมยืดออก (มุมที่ประกอบด้วยสองรังสีที่กำหนดส่วนโค้ง) ของเส้นรอบวงของวงกลม คือ 2π RAD, ที่ไหน RAD เป็นสัญลักษณ์หน่วยเรเดียน สิ่งนี้ทำให้ มุมสำหรับส่วนโค้งหนึ่งส่วนสี่ เท่ากับ 0.5π RAD.

เมื่อ การแสดงภาพความคืบหน้าในการโหลด, เราต้องการให้วงกลมบนผืนผ้าใบวาด จากตำแหน่งบนสุด มากกว่าสิทธิเริ่มต้น.

ไปตามเข็มนาฬิกา (ส่วนโค้งทิศทางเริ่มต้นวาดบนผืนผ้าใบ) จากตำแหน่งที่เหมาะสม, จุดสูงสุดคือ ถึงหลังจากสามในสี่, เช่นทำมุม 1.5π RAD. ดังนั้นฉันได้สร้างตัวแปร s = 1.5 * Math.PI ไปยังภายหลัง แสดงถึงมุมเริ่มต้นสำหรับส่วนโค้ง ที่จะวาดจากบนผืนผ้าใบ.

4. จัดรูปแบบวงกลม

สำหรับวัตถุบริบทการวาดภาพเรากำหนด linewidth และ strokeStyle คุณสมบัติของวงกลม เราจะวาดในขั้นตอนต่อไป strokeStyle คุณสมบัติหมายถึงสีของมัน.

 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 = 'สีแดงม่วง'; ; 

5. วาดวงกลม

เรา เพิ่มตัวจัดการเหตุการณ์คลิก ไปที่ปุ่มโหลด [#lbtn] ซึ่ง ทริกเกอร์ตัวจับเวลา setInterval 60 มิลลิวินาที, ที่ดำเนินการฟังก์ชั่นที่รับผิดชอบในการวาดวงกลม [updateLoader ()] ทุก ๆ 60ms จนกว่าวงกลมจะถูกวาดออกมาอย่างเต็มที่.

setInterval () วิธี ส่งกลับรหัสจับเวลา เพื่อระบุตัวจับเวลาซึ่งกำหนดให้กับ TC ตัวแปร.

 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 = 'สีแดงม่วง'; btn.addEventListener ('คลิก', ฟังก์ชัน () tc = setInterval (updateLoader, 60);); ; 

6. สร้าง updateLoader () ฟังก์ชั่นที่กำหนดเอง

ได้เวลาสร้างแบบกำหนดเองแล้ว updateLoader () ฟังก์ชั่นที่จะเป็น เรียกโดย setInterval () วิธี เมื่อคลิกปุ่ม (เหตุการณ์จะเริ่มขึ้น) ให้ฉันแสดงรหัสก่อนจากนั้นเราจะไปพร้อมกับคำอธิบาย.

 ฟังก์ชั่น updateLoader () ctx.clearRect (0, 0, 16, 16) ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); ถ้า (pct === 100) clearInterval (tc); กลับ;  pct ++;  

clearRect () วิธี ล้างพื้นที่สี่เหลี่ยมของผืนผ้าใบ กำหนดโดยพารามิเตอร์: พิกัด (x, y) ของมุมบนซ้าย clearRect (0, 0, 16, 16) เส้น ลบทุกอย่าง ในผืนผ้าใบขนาด 16 * 16 พิกเซลที่เราสร้างขึ้น.

beginPath () วิธี สร้างเส้นทางใหม่ สำหรับการวาดภาพและ โรคหลอดเลือดสมอง () วิธี วาดบนเส้นทางที่สร้างขึ้นใหม่.

ในตอนท้ายของ updateLoader () ฟังก์ชั่น เปอร์เซ็นต์การนับPCT] เพิ่มขึ้นทีละ 1, และก่อนที่จะมีการเพิ่มขึ้นเรา ตรวจสอบว่าเท่ากับ 100. เมื่อมันครบ 100 เปอร์เซ็นต์ setInterval () เครื่องจับเวลา (ระบุโดยรหัสตัวจับเวลา, TC) ถูกล้างข้อมูล ด้วยความช่วยเหลือของ clearInterval () วิธี.

สามพารามิเตอร์แรกของ โค้ง () วิธีการคือ (x, y) พิกัดของจุดศูนย์กลางของส่วนโค้ง และ รัศมีของมัน. พารามิเตอร์ที่สี่และห้าแสดงถึง เริ่มต้นและสิ้นสุดมุม ที่ภาพวาดของส่วนโค้งเริ่มต้นและสิ้นสุด.

เราได้ตัดสินใจแล้วว่าจุดเริ่มต้นของวงกลมโหลดเดอร์ซึ่งอยู่ที่มุม s, และมันจะเป็น เหมือนกันในการทำซ้ำทั้งหมด.

มุมปลายอย่างไรก็ตามจะ เพิ่มขึ้นด้วยการนับเปอร์เซ็นต์, เราสามารถคำนวณ ขนาดของการเพิ่มขึ้น ในวิธีต่อไปนี้ พูด 1% (ค่า 1 จาก 100) คือ เทียบเท่ากับมุม α จาก 2π ในวงกลม (2π = มุมของเส้นรอบวงทั้งหมด) จากนั้นสามารถเขียนเป็นสมการต่อไปนี้ได้:

1/100 = α/ 2π

ในการจัดเรียงสมการใหม่:

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

ดังนั้น 1% จึงเท่ากับมุม 2π/ 100 ในวงกลม ดังนั้นมุมฉากในระหว่างการเพิ่มขึ้นแต่ละเปอร์เซ็นต์คือ คำนวณโดยการคูณ 2π/ 100 ตามค่าร้อยละ. แล้วผลลัพธ์ก็คือ เพิ่มไปยัง s (มุมเริ่มต้น), ดังนั้นโค้งอยู่ ดึงมาจากตำแหน่งเริ่มต้นเดียวกัน ทุกเวลา. นี่คือเหตุผลที่เราใช้ pct * 2 * Math.PI / 100 + s สูตรในการคำนวณมุมท้ายในข้อมูลโค้ดด้านบน.

7. เพิ่ม favicon

มาวาง องค์ประกอบลิงค์ favicon เป็น HTML ทั้งโดยตรงหรือผ่านทาง JavaScript.

ใน updateLoader () ฟังก์ชั่นก่อนอื่นเรา เรียก favicon ใช้ querySelector () วิธีการและกำหนดให้กับ LNK ตัวแปร. ถ้าอย่างนั้นเราต้อง ส่งออกรูปภาพผ้าใบ ทุกครั้งที่มีการอาร์ค เป็นภาพที่เข้ารหัส โดยใช้ toDataURL () วิธีการและ กำหนดเนื้อหา URI ของข้อมูลนั้นให้เป็นอิมเมจ favicon. สิ่งนี้สร้างภาพเคลื่อนไหว favicon ซึ่งเป็น เช่นเดียวกับตัวโหลดผ้าใบ.

 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 ('ลิงก์ [rel = "ไอคอน"]' ; ctx.lineWidth = 2; ctx.strokeStyle = 'สีแดงม่วง'; btn.addEventListener ('คลิก', ฟังก์ชัน () tc = setInterval (updateLoader, 60);); ; ฟังก์ชั่น 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); กลับ;  pct ++;  

คุณสามารถดูรหัสเต็ม บน Github.

โบนัส: ใช้ตัวโหลดเหตุการณ์ async

เมื่อคุณต้องการใช้แอนิเมชั่นแคนวาสนี้ ร่วมกับการดำเนินการโหลด ในเว็บเพจให้กำหนด updateLoader () ฟังก์ชัน เป็นตัวจัดการเหตุการณ์สำหรับ ความคืบหน้า () เหตุการณ์ของการกระทำ.

ตัวอย่างเช่น JavaScript ของเราจะเปลี่ยนเช่นนี้ ใน AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('ลิงก์ [rel = "ไอคอน"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'สีแดงม่วง';  var xhr = XMLHttpRequest ใหม่ (); xhr.addEventListener ('ความคืบหน้า', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; ฟังก์ชัน 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');  

ใน โค้ง () วิธีการแทนที่ค่าเปอร์เซ็นต์ [PCT] กับ เพียบ คุณสมบัติของเหตุการณ์-มันหมายถึงจำนวนไฟล์ที่ถูกโหลดและแทนที่ 100 ใช้ ทั้งหมด คุณสมบัติของ ProgressEvent, ซึ่งหมายถึงจำนวนเงินทั้งหมดที่จะโหลด.

มี ไม่ต้องการ setInterval () ในกรณีเช่นนี้ ความคืบหน้า () เหตุการณ์คือ ยิงอัตโนมัติ ในขณะที่การโหลดดำเนินไป.