پیش نیازها
آشنایی بر مفاهیم پایه HTML
آشنایی با کار DOM جاوااسکریپت
مزایای requestAnimationFrame در ساخت انیمیشن
- هماهنگی با نرخ فریم مرورگر : باعث میشود انیمیشن به نرخ فریم مناسب دستگاه کاربر (معمولاً ۶۰ فریم بر ثانیه) محدود شود.
- بهینهسازی مصرف منابع : هنگامی که تب مرورگر غیرفعال است، متوقف میشود و از اجرای بیهوده جلوگیری می‌کند.
- مدیریت مصرف منابع : بار اجرای تابع از پشته برنامه خارج میشود و کنترل به مرورگر سپرده میشود.
پیاده سازی یک انیمیشن ساده
کد های HTML
<div class="ball-container relative w-96 mx-auto h-20"><div class="ball absolute top-0 left-0 size-16 bg-blue-400 rounded-full z-10"></div></div>
کد های جاوااسکریپت
const ball = document.querySelector(".ball");const container = document.querySelector(".ball-container");let position = 0;let direction = 1;let speed = 10;let operation = "sum";const animate = () => {position += direction * speed;ball.style.left = position+"px";const ballSize = ball.offsetWidth;const containerWidth = container.offsetWidth;if (position >= containerWidth - ballSize) {direction = -1;speed = operation === "sum" ? speed + 1 : speed - 1;}if (position <= 0) {direction = 1;speed = operation === "sum" ? speed + 1 : speed - 1;}if (speed >= 50) operation = "minus";if (speed <= 10) operation = "sum";requestAnimationFrame(animate);};animate();
توضیحات کد بالا
تابع requestAnimationFrame ساختاری شبیه به تابع های بازگشتی دارد با این تفاوت که تابع requestAnimationFrame توسط مرورگر بهینه میشود تا فریم‌ها با نرخ مناسب (معمولاً ۶۰ بار در هر ثانیه) و بدون افت فریم و تأثیر منفی روی عملکرد اجرا شوند.
در هربار اجرا توپ آبی به اندازه سرعت ضرب در فاصله (یک پیکسل) به طرف چپ هدایت میشود. و چک می‌کند که اگر مقدار چپ رفتن توپ از اندازه عرض کانتینر بیشتر شد مقدار فاصله منفی شود تا توپ برعکس حرکت کند.
چه زمانی از requestAnimationFrame استفاده کنم؟
خب شاید الان برایتان سوال پیش آمده باشد که چه نیازی هست که از requestAnimationFrame استفاده کنیم وقتی که میشود از متد transition در css و دادن یک مقصد به آن ابجکت آن را حرکت داد.
کاملا درست است وقتی که انیمیشن های مورد نیاز ساده است از این روش استفاده نمیکنیم، هنگامی از متد requestAnimationFrame استقاده میکنیم که میخواهیم انیمیشن های پیچیده، انیمیشن های دوبعدی یا سه بعدی که در (canvas) اجرا میشوند را مدیریت کنیم.
چرا از setInterval در ساخت انیمیشن استفاده نکنیم؟
به هیچ عنوان از setInterval برای ساخت انیمیشن ها استفاده نمیکنیم زیرا :
- تضمینی برای اجرای دقیق دستورات در بازههای زمانی مشخص ندارد، به خصوص زمانی که وظایف دیگری در صف اجرا قرار دارند.
- انیمیشنهایی که با setInterval ساخته میشوند، ممکن است با نرخ تازهسازی صفحه نمایش هماهنگ نباشند، که باعث لرزش و تجربه کاربری نامطلوب میشود.
- requestAnimationFrame به طور خودکار برای صرفه‌جویی در منابع در تب‌های غیر فعال متوقف میشود، در حالی که setInterval همچنان اجرا میشود.
- فقدان کنترل پیشرفته انیمیشن ها، توقف و مدیریت فریم ها
شیوه‌ها و نکات بهینه برای استفاده درست و مفیدتر
1. استفاده از cancelAnimationFrame
هر زمان که به انیمیشن نیازی ندارید(مثلا وقتی که کاربر دکمه توقف را می‌زند یا می‌توانید با IntersectionObserver وقتی که محدوده انیمیشن از دید کاربر خارج شد) حتما استفاده کنید تا منابع رو آزاد کنید.
آموزش صفر تا صد IntersectionObserver2. بهینه سازی محاسبات
محاسبات سنگین در داخل حلقه انیمیشن میتواند باعث کاهش نرخ فریم شود، محاسبات را به حداقل برسانید.
نتیجه گیری
با این آموزش، شما پایه‌های درخواست‌های انیمیشنی با requestAnimationFrame را درک کردید. حالا وقت آن است که این دانش را به عرصه عمل بیاورید. با خلاقیت و مهارت برنامه‌نویسی خود، این مفاهیم را در پروژه‌های متنوع به کار بگیرید و تجربه عملی بیشتری کسب کنید. این مسیر شما را به سمت خلق پروژه‌های جذاب‌تر و ساخت راهکارهای حرفه‌ای‌تر در دنیای برنامه‌نویسی هدایت خواهد کرد.
اگر در هر بخشی از این آموزش به نکته‌ای برخورد کردید که برایتان نامفهوم یا نیازمند توضیح بیشتر است، خواهشمندیم که با ارسال تیکت به ما، پیشنهاد یا سوالتان را مطرح کنید.
