כיצד ליצור אנימציה Favicon Loader עם
Favicons הם חלק מכריע של מיתוג באינטרנט, הם לתת רמז חזותי למשתמשים, ולעזור להם להבחין בין האתר שלך מאחרים. למרות שרוב favicons הם סטטיים, זה אפשרי ליצור favicons אנימציה - - גם כן.
A favicon מרגש ללא הרף הוא בהחלט מעצבן עבור רוב המשתמשים, וגם פוגעת בנגישות, אולם כאשר זה רק אנימציה לזמן קצר בתגובה לפעולת משתמש או לאירוע רקע, כגון טעינת דפים, הוא יכול לספק מידע חזותי נוסף-ובכך לשפר את חוויית המשתמש.
במאמר זה, אני אראה לך כיצד ליצור משאב אנימציה מעגלית בד HTML, וכיצד ניתן להשתמש בו כאותו סמל. An אנימציה favicon מטעין - - הוא כלי נהדר לדמיין את ההתקדמות של כל פעולה המבוצעת בדף, כגון העלאת קובץ או עיבוד תמונה. אתה יכול להעיף מבט הדגמה השייכת הדרכה זו on גית'וב גם כן.
1. צור את
ראשית, אנחנו צריכים ליצור אנימציה בד כי מצייר מעגל מלא, 100 אחוז בסך הכל (זה יהיה חשוב כאשר אנחנו צריכים להגדיל את arc).
אני משתמש בגודל favicon רגיל, 16 * 16 פיקסלים, עבור בד. אתה יכול להשתמש בגודל גדול יותר אם אתה רוצה, אבל שים לב כי התמונה בד יהיה ירד ל 162 אזור פיקסל כאשר הוא מוחל כסמל מועדף.
2. בדוק אם
בתוך ה onload () מטפל באירועים, אנחנו לקבל התייחסות עבור אלמנט בד [קו"ח] משתמש ב querySelector () שיטה, ולהתייחס אובייקט ההקשר שלו [ctx] בעזרתו של getContext () שיטה.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); אם (!! 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'); אם (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ; כדי להראות כיצד הערך של s חושב, תן לי להסביר במהירות איך זוויות קשת עבודה.
זוויות קשת
ה זווית מתוחכמת (הזווית המורכבת משתי הקרניים שמגדירות קשת) של היקף המעגל J 2π רא, איפה רא הוא סמל יחידת רדיאן. זה עושה את זווית עבור רבע קשת שווה ל 0.5π רא.
מתי מדמיין את התקדמות הטעינה, אנחנו רוצים את המעגל על הבד לצייר מהמיקום העליון ולא זכות ברירת המחדל.
הולך בכיוון השעון (כיוון ברירת המחדל arc מצוירת על הבד) מן המיקום הנכון, הנקודה העליונה היא הגיעו לאחר שלושה רבעים, כלומר בזווית של 1.5π רא. לפיכך, יצרתי את המשתנה s = 1.5 * Math.PI מאוחר יותר לציין את זווית ההתחלה של הקשתות להיגרר על הבד.
4. סגנון המעגל
עבור אובייקט הקשר ציור, אנו מגדירים את רוחב קו ו שבץ מאפייני המעגל אנחנו הולכים לצייר את הצעד הבא. ה שבץ הנכס עומד על צבעו.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); אם (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; ; 5. צייר את המעגל
אנחנו הוסף מטפל לאירוע לחיצה כפתור טען [#lbtn] איזה מפעילה טיימר setInterval של 60 אלפיות השנייה, המבצעת את הפונקציה האחראית לציור המעגל [updateLoader ()] כל 60 מ 'עד המעגל הוא נמשך במלואו.
ה setInterval () שיטה מחזיר מזהה שעון כדי לזהות את קוצב הזמן שהוקצה לו tc משתנה.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); אם (!! 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. צור את updateLoader () פונקציה מותאמת אישית
הגיע הזמן ליצור את המנהג updateLoader () פונקציה זו היא להיות שנקרא על ידי setInterval () שיטה כאשר לוחצים על הלחצן (האירוע מופעל). תן לי להראות לך את הקוד הראשון, אז אנחנו יכולים ללכת יחד עם ההסבר.
(), 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 פיקסלים בד יצרנו.
ה startPath () שיטה יוצר נתיב חדש עבור הציור, ואת שבץ() שיטה מצייר על הנתיב החדש שנוצר.
בסוף ה updateLoader () פונק, אחוז countpct] הוא גדל ב 1, ולפני התוספת לבדוק אם הוא שווה ל 100. כאשר זה 100 אחוז, setInterval () טיימר (מזוהה על ידי מזהה שעון עצר, tc) מסומנת עם העזרה של clearInterval () שיטה.
שלושת הפרמטרים הראשונים של arc () השיטה הם (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 לתוך HTML , ישירות או דרך JavaScript.
בתוך ה updateLoader () הפונקציה, הראשון אנחנו הבא את סמל העכבר משתמש ב querySelector () שיטה, ולהקצות אותו lnk משתנה. אז אנחנו צריכים לייצא את התמונה בד בכל פעם קשת מצוירת לתוך תמונה מקודדת באמצעות toDataURL () השיטה, ו להקצות תוכן URI נתונים כמו התמונה favicon. זה יוצר אנימציה favicon המהווה את כמו מטעין בד.
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); (= ctx) (= lttn '), = lnk = document.querySelector (' link [rel = "icon]") ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('click', function () (tc = setInterval (updateLoader, 60);); ; (), 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'); אם (pct === 100) clearTimeout (tc); חזור pct ++; אתה יכול להעיף מבט על קוד מלא על גיתוב.
בונוס: השתמש מטעין עבור אירועים async
כאשר אתה צריך להשתמש אנימציה זה בד יחד עם פעולת הטעינה בדף אינטרנט, להקצות את updateLoader () פונקציה כמו מטפל האירוע עבור התקדמות() האירוע של הפעולה.
לדוגמה, JavaScript שלנו ישתנה כך ב AJAXYou
onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); אם (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; var xhr = XMLHttpRequest חדש (); xhr.addEventListener ('התקדמות', 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'); בתוך ה arc () שיטה, להחליף את אחוז הערך [pct] עם ה עמוס רכוש של האירוע-זה מציין כמה של הקובץ נטען, ובמקום 100 להשתמש ב סך הכל רכוש של התקדמות, אשר מציין את הסכום הכולל להיות נטען.
יש אין צורך בכך setInterval () במקרים כאלה, כמו התקדמות() האירוע הוא ירה אוטומטית כמו הטעינה מתקדמת.
