09913096959
support@manaid.com
SVG logoSVG logo
  • خدمات طراحی UI و UX
  • خدمات طراحی وب سایت
  • درباره ما
  • تماس با ما

کاربرد requestAnimationFrame

  1. خانه
  2. مقاله های آموزشی
  3. کاربرد requestAnimationFrame
mid
06مهر1401
نوشته های دیگر
اثر وان رستوف

کاربرد اثر وان رستوف در طراحی – Von Restorff Effect

LCP چیست ؟ روش‌های بهینه‌‌سازی LCP برای طراحان سایت (راهنمای کامل)

قانون مجاورت (Proximity law)

5-visual-design-principle

5 اصل از اصول مهم UI در طراحی بصری به سبک رامبراند

قانون مشابهت

قانون مشابهت(Similarity law)

به طور عادی ایجاد انیمیشن در صفحات وب بر عهده CSS است اما در برخی موارد برای ایجاد انیمیشن نمیتوان تنها  به آن اتکا کرد و باید به سراغ JavaScript بریم. تا همین چند سال پیش برای ایجاد یک انیمیشن به وسیله جاوا اسکریپ تنها دومتد setInterval()  و setTimeout() وجود داشت.

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

window.setTimeout( () = alert("3 تانیه گذشت") , 3000);

متد بعدی که از آن استفاده زیادی می شود تابع setTimeout() است که ساختاری مشابه متد قبلی دارد با این تفاوت که از آن برای تکرار یک قطعه کد در بازه زمانی مشخص استفاده می شود.

window.setInterval() = alert("1 تانیه گذشت") , 1000);

برای مثال در قطعه کد بالا هر یک ثانیه پیام  “1 ثانیه گذشت” نمایش داده می شود.

اما این متدها دو مشکل اساسی دارند که به ویژه در انیمیشن های پیچیده، می‌تواند کیفیت انیمیشن را کاهش دهد.

۱-  این متدهای هیچ تضمینی  در مورد دقت زمانبندی نمی‌دهند. مثلاً عملی که باید بعد از ۵۰۰ میلی‌ثانیه انجام شود، ممکن است بعد از 550  میلی‌ثانیه و یا حتی بعد از 1500 میلی‌ثانیه انجام شود. یعنی بسته به توان سخت افزاری سیستم و مشغله مرورگر و سیستم عامل، همیشه یک تاخیر در اجرای عمل مورد نظر وجود دارد. هرچند میزان این تاخیر معمولاً بسیار کوچک است، اما وجود این تاخیر و متغیر بودن میزان تاخیر، می‌تواند اجرای انیمیشن را دچار اختلال کرده و کیفیت آن را کاهش دهد.

۲-  محتوای گرافیکی صفحه نمایش نیز مانند یک انیمیشن است. زیرا به صورت متوالی و در بازه‌های زمانی کوچک در حال به روز رسانی است. در واقع در هر سیستم عاملی، رویدادی به نام paint وجود دارد که در هر ثانیه به تعداد مشخصی رخ می‌دهد. و با هر بار وقوع این رویداد، یک بار محتوای صفحه نمایش مجدداً ترسیم می‌شود. تعداد دفعات وقوع این رویداد در سیستم‌های کامپیوتری مختلف، یکسان نیست. اما در بیشتر سیستم‌های کامپیوتری امروزی این رویداد ۶۰ بار در هر ثانیه رخ می‌دهد. لازم به ذکر است که رویداد paint برای تمام پنجره‌های موجود در صفحه نمایش نیز رخ می‌دهد که مرورگر نیز یکی از همین پنجره‌ها است. برای داشتن یک انیمیشن یکنواخت و با کیفیت، باید فریم‌های انیمیشن را دقیقاً همزمان با رویداد paint ترسیم کرد. اما متدهای setInterval و setTimeout این همزمانی را تضمین نمی‌کنند. به همین دلیل انیمیشن‌های ایجاد شده با این متدها معمولاً کیفیت بالایی ندارند.

تا اینکه چندی پیش متد requestAnimationFrame برای حل دو مشکل فوق به وجود آمد و خوشبختانه در تمام مرورگرهای امروزی پشتیبانی می‌شود. این متد مشکل همزمانی با رویداد paint را به طور کامل برطرف می‌کند. و مشکل تاخیر در زمانبندی را نیز تا حد زیادی برطرف می‌کند. البته هنوز هم در شرایطی که بار پردازشی CPU خیلی زیاد باشد کمی تاخیر ایجاد خواهد شد.

متد requestAnimationFrame یک آرگومان ورودی دریافت می‌کند که یک تابع Callback است که در زمان ترسیم فریم بعدی باید فراخوانی شود. این متد از مرورگر درخواست می‌کند تا تابع Callback را دقیقاً قبل از ترسیم بعدی (repaint) مرورگر اجرا کند. به همین دلیل زمان اجرای تابع Callback دقیقاً با زمان ترسیم مرورگر یا همان رویداد paint همگام می‌شود. توجه کنید که با استفاده از این متد، بر خلاف متد setInterval نیازی به تعیین زمان نیست. زیرا زمان اجرای تابع Callback با رویداد paint همگام شده و زمان وقوع این رویداد نیز توسط سیستم عامل تعیین می‌شود.

کد زیر مثال ساده ای از کاربرد  requestAnimationFrame را نشان می‌دهد.

function repeatOften() {
// Do whatever
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

برای اجرا انیمیش یک بار تابع آن را فراخوانی میکنیم و در انتهای تابع مجددا خود تابع را فراخوانی میکنیم.

شروع و توقف انیمیشن requestAnimationFrame :

متد requestAnimationFrame مانند متدههای setInterVal و setTimeOut یک شناسه بر می گرداند که با کمک آن میتوان انیمیشن را کنترل کرد.

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

let animation
function repeatOften() {
//Do any things
animation = requestAnimationFrame(callback);
}
animation = requestAnimationFrame(callback);
cancelAnimationFrame(animation);

در کد فوق با استفاده از متد requestAnimationFrame یک انیمیشن ایجاد کردیم و شناسه آن را در متغیر animation ذخیره کردیم و با استفاده از متد cancelAnimationFrame و ارسال شناسه انیمیشن به عنوان آرگومان آن را متوقف میکنیم.

مثال:

See the Pen
Manaid-Simple requestAnimationFrame sample
by Manaid (@manaid)
on CodePen.

از وب سایت …Can I use میتونید پشتیانی مرورگرهای مختلف از این متد رو بررسی کنید.

نوشتهٔ بعدی
آموزش ساخت اسلاید شو زیبا و قابل لمس با استفاده از جاوا اسکریپت
عباس عباس زاده
من عباس هستم عاشق حوزه طراحی UI, UX فیلم های فانتزی و البته قهوه مراکشی . اینجا هستم تا آموخته هایم را با شما به اشتراک بگذارم و یاد بگیرم.

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

آموزش ساخت اسلاید شو زیبا و قابل لمس با استفاده از جاوا اسکریپت
تصویر پس زمینه، طرحی است از کاشی‌های سقف و زیر گنبد عظیمِ یکی از شاهکارهای معماری اصفهان، مسجد شاه اصفهان که به دست استاد به نام خطاطی و مینیاتور  رضا عباسی در دوره شاه عباس صفوی آفریده شده است.

نوشته‌های تازه

  • راهنمای اصول طراحی فرم تماس با ما 4 خرداد 1404
  • اصول طراحی UX و UI برای سالمندان 15 اردیبهشت 1404
  • چک لیست طراحی فرم های احراز هویت : 6 مرحله مهم در طراحی فرآیند احراز هویت 25 فروردین 1404
  • 10 قانون طلایی برای طراحی سایت خلاقانه 29 بهمن 1403

اطلاعات تماس

manager@manaid.com
09132247398
شهر گنبدهای فیروزه ای، اصفهان، خانه اصفهان، میدان نگهبانی، کوی 20 پلاک 12 واحد 1

© 2023تمام تصاویر، مطالب و ایده های استفاده شده برای آژانس خلاقیت مانایید محفوظ است

ما برای آسایش شما از کوکی ها استفاده میکنیم تا بتوانیم بهتر به شما خدمات رسانی کنیم. این کار برای شما هیچ دردسری ایجاد نمیکند