لطفا صبر کنید ...

ساخت Favicon Loader متحرک با جاوا اسکریپت

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 149
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

Faviconها بخش مهمی از برند سازی آنلاین هستند که اطلاعات را به صورت تصویری در اختیار کاربران قرار می‌دهند و به آن‌ها کمک می‌کنند که سایت شما را از بقیه رقبا متمایز بدانند.


گرچه بسیاری از faviconها استاتیک هستند اما می‌توان آن‌ها را به صورت متحرک هم ایجاد کرد. favicon که دائما در حال حرکت باشد برای کاربران آزار دهنده می‌شوند اما اگر به صورت کوتاه و در مقابل یک اقدام کاربر یا وقوع یک رویداد در پشت صحنه مثل بارگذاری صفحه، به صورت متحرک درآیند، می‌توانند اطلاعات تصویری بسیاری در اختیار کاربر قرار داده و  تجربه کاربری (ux) را بهبود ببخشند.

ساخت Favicon Loader متحرک با جاوا اسکریپت

در این پست از لیداوب قصد داریم به شما نشان دهیم چگونه یک Loader متحرک مدور را با HTML canvas ایجاد کرده و چطور آن را به عنوان یک favicon به کار ببریم. یک favicon loader متحرک ابزاری قدرتمند برای به تصویر کشیدن پیشرفت هر اکشنی است که در صفحه در حال رخ دادن می‌باشد مانند آپلود فایل یا پردازش تصویر. برای ایجاد آن می‌توانید مراحل زیر را دنبال کنید.

۱. ایجاد عنصر <canvas>

ابتدا باید یک انیمیشن canvas ایجاد کنیم که یک دایره کامل را رسم کند:

<button id=lbtn>Load</button>
<canvas id=cvl width=16 height=16></canvas>

ما از سایز استاندارد 16*16 پیکسل favicon در canvas استفاده می‌کنیم. شما می‌توانید از سایز بزرگ‌تر هم استفاده کنید اما توجه داشته باشید که تصویر canvas وقتی به عنوان favicon به کار برده شود به اندازه 162 پیکسل کاهش سایز خواهد داشت.

۲. بررسی پشتیبانی از <canvas>

درون handler رویداد onload()،  با استفاده از متد querySelector() یک رفرنس برای عنصر canvas با علامت اختصاری [ cv ] به دست آورده و با کمک متد getContext() به شئ دو بعدی آن [ ctx ] اشاره می‌کنیم:

onload = function() {
    cv = document.querySelector('#cvl'),
    ctx = cv.getContext('2d');

    if (!!ctx) {
        /* ... */
    }
};

همچنین، باید بررسی کنیم که آیا canvas توسط UA پشتیبانی می‌شود یا خیر. برای این کار باید مطمئن شویم شئ [ ctx ] وجود دارد و تعریف نشده باقی نمانده باشد. ما تمام کدهای متعلق به رویداد بارگذاری را در شرط if قرار می‌دهیم.

۳. ایجاد متغیرهای اولیه

می‌خواهیم سه متغیر گلوبال 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.

Favicon Loader متحرک

در زمان نمایش تصویری پیشرفت بارگذاری می‌خواهیم دایره روی canvas از بالا رسم شود نه از سمت راست که به صورت پیش‌فرض تعیین شده است. حرکت ساعت‌ گرد (مسیر پیش‌فرض رسم شده روی canvas) از سمت راست پس از سه طی سه چهارم دایره به نقطه بالا یعنی زاویه ای برابر با 1.5π می‌رسد. به همین دلیل، متغیرهای s=1.5 * Math.PI را ایجاد کردیم تا بعدا زاویه آغازین کمان‌ها از روی canvas رسم شود.

۴. استایل دادن به دایره

برای رسم شئ، خصوصیات 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 = 'fuchsia';
    }
};

۵. رسم دایره

یک click event handler به دکمه [ Load ] اضافه می‌کنیم [ #1btn ] که یک تایمر ۶۰ میلی ثانیه‌ای setInterval را راه اندازی می‌کند که تابع مسئول برای رسم دایره [ updateLoader() ] را هر ۶۰ ثانیه اجرا کند و این کار تا زمانی که دایره کامل شود ادامه خواهد داشت. متد setInterval() یک timer id را بازگردانی می‌کند تا تایمری که به متغیر 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 = 'fuchsia';

        btn.addEventListener('click', function() {
            tc = setInterval(updateLoader, 60);
        });
    }
};

۶. ایجاد تابع سفارشی updateLoader

زمان ایجاد تابع سفارشی updateLoader() است که با متد setInterval در زمان کلیک شدن روی دکمه، فراخوانی می‌شود. ابتدا کدها را بررسی می‌کنیم و سپس آن را توضیح می‌دهیم:

function 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);
        return;
    }

    pct++;
}

متد clearRect() ناحیه مستطیلی canvas که توسط پارامترهای آن مشخص شده است را پاکسازی می‌کند، مختصات (x, y) از گوشه بالا سمت چپ. خط clearRect(0, 0, 16,16) هر چیزی در محدوده 16*16 پیکسل باشد را پاک می‌کند. متد beginPath() یک مسیر جدید برای رسم ایجاد کرده و متد stroke() آن مسیر جدیدی را نقاشی می‌کند. در پایان تابع updateLoader() ، شمارش درصدی [ pct ] تا ۱ افزایش یافته و قبل از توسعه ما بررسی می‌کنیم ببینیم آیا برابر با ۱۰۰ هست یا نه. وقتی ۱۰۰ درصد کامل شد، تایمر setInterval() که با tc تعریف می‌شود، با کمک متد clearInterval() پاک سازی می‌شود.

سه پارامتر اول متد arc() مختصات (x, y) مرکز کمان و شعاع آن هستند. پارامترهای چهارم و پنجم نشان دهنده زاویه‌های شروع و پایان هستند که شروع و پایان رسم کمان را نشان می‌دهند. ما قبلا در مورد نقطه شروع دایره loader تصمیم گرفتیم که زاویه s بود و در تمام تکرارها هم همین خواهد بود. زاویه پایانی با درصد شمار افزایش می‌یابد و ما می‌توانیم اندازه افزایش را به روش زیر اندازه گیری کنیم. فرض کنیم ۱ درصد برابر از است با زاویه α  از 2π که محیط دایره است، در این صورت می‌توان معادله را به این شکل نوشت:

1/100 = α/2π

یا آن را به این شکل مرتب کرد:

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

بنابراین ۱ درصد برابر با زاویه 2π/100 در یک دایره است. بنابراین، زاویه پایان در هر بار افزایش درصد با ضرب کردن 2π/100 در مقدار درصد، محاسبه می‌شود. در این صورت، نتیجه به s (زاویه آغازین) اضافه می‌شود، بنابراین، کمان‌ها هر بار از همان نقطه رسم می‌شوند. به همین دلیل است که ما از فرمول pct *2* math.pi/100+s برای محاسبه زاویه پایانی در کد بالا استفاده کردیم.

۷. افزودن favicon

حالا می‌خواهیم عنصر لینک favicon را به بخش <head> از html قرار دهیم که یا به صورت مستقیم و یا با استفاده از جاوا اسکریپت انجام می‌شود:

<link rel="icon" type="image/ico" >

در تابع updateLoader() ابتدا favicon را با استفاده از متد querySelector() واکشی کرده و آن را به متغیر 1nk محول می‌کنیم. سپس باید با استفاده از متد toDataURL() هربار که یک کمان در تصویر رمزگذاری شده رسم می‌شود، تصویر canvas را اکسپورت کرده و سپس محتوای URI داده را به عنوان تصویر favicon مشخص کنیم. این روش باعث ایجاد یک favicon متحرک شده که شبیه به canvas loader می‌باشد:

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);
        });
    }
};

function 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);
        return;
    }

    pct++;
}

استفاده از loader برای رویدادهای غیر هم زمان

وقتی نیاز دارید از این انیمیشن canvas در تطابق با یک عمل بارگذاری استفاده کنید، تابع updateLoader() را به عنوان event handler رویداد progress() آن اکشن مشخص کنید. برای مثال، جاوا اسکریپت ما در 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('progress', 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 ] را با خصوصیت loaded آن رویداد جایگزین کنید. این نشان می‌دهد که چقدر از فایل بارگذاری شده است و به جای 100 از خصوصیت total مربوط به ProgressEvent استفاده کنید که نشان دهنده مقدار کل بارگذاری شده است. در این موارد نیاز به استفاده از setInterval() نیست چون رویداد progress() به صورت خودکار در زمان پیشرفت بارگذاری، اجرا می‌شود.

مطالعه مقالات بیشتر در لیداوب:

 امیدورام این مقاله از لیداوب نیز برای شما مفید واقع شود و بتوانید در ساخت Faviconهای وب سایت خود از آن بهره ببرید. با سایر مقالات طراحی سایت ما همراه باشید.

منبع :

5 از 2 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.