انیمیشن‌های سفارشی می‌توانند یک وبسایت را در بین رقبایشان به پیروزی برسانند، اما اگر آن‌ها را نتوانید به‌درستی بهینه‌سازی بکنید، با مشکلات کارایی مواجه خواهید شد. اگر هرکدام از انیمیشن‌های‌تان در کمتر از ۶۰ فریم بر ثانیه رندر شوند، کاربران‌تان متوجه آن‌ها خواهند بود. به همین دلیل باید گفت که درواقع استفاده از انیمیشن‌ها علاوه بر اینکه می‌تواند مفید باشد اما گاهی می‌تواند به تجربه کاربری آسیب بسیاری وارد کند. در این مطلب به شما شیوه بهینه‌سازی و اجرای روان انیمیشن‌ها را می‌گوییم.
انیمیشن‌های CSS در مقابل انیمیشن‌های Javascript
انیمیشن‌هایی که با استفاده از جاوااسکریپت ساخته می‌شوند را imperative animation می‌نامند. انیمیشن‌هایی نیز که با استفاده از CSS ساخته می‌شوند را declarative animation می‌نامند. انیمیشن‌های CSS توسط رشته Compositor مربوط به مرورگر مدیریت می‌شود، در همین حال رشته اصلی نیز مشغول طراحی و کشیدن المان‌ها است. بنابراین انیمیشن‌ها از طریق رشته اصلی مدیریت نمی‌شوند و همین موضوع باعث می شود که رندر برخی از کارها بسیار سخت باشد. به همین دلیل برخی اوقات استفاده از انیمیشن‌های سنگین در CSS می‌تواند نتایج بدی را به همراه داشته باشد.
از طرفی دیگر جاوااسکریپت همواره توسط رشته اصلی اجرا می‌شود. باید بگویم که جاوااسکریپت کنترل بسیار کاملتری را به شما برای مدیریت انیمیشن‌ها می‌دهد، به همین دلیل گاهی اوقات بهتر است که از آن استفاده کنید. در حالیکه CSS برای انیمیشن‌های ساده پیشنهاد می‌شود، بهتر است که از جاوااسکریپت در انیمیشن‌هایی با قابلیت‌های پیچیده استفاده شود. انیمیشن‌هایی که به کاربر اجازه تعامل را می‌دهد باید توسط جاوااسکریپت ایجاد شود. برای مثال در ایجاد پارالل اسکرولینگ استفاده از جاوااسکریپت ضروری است و نتیجه بهتری را می‌دهد. با کمک گرفتن از Web Animation APIها می‌توانید انیمیشن‌های پیچیده برای اپلیکیشن‌های شئ گرا ایجاد کنید. همچنین می‌توانید از جاوااسکریپت برای کنترل انیمیشن‌های CSS استفاده کنید.
نکاتی برای استفاده از انیمیشن در جاوااسکریپت
۱. از requestAnimationFrame() استفاده کنید
بجای استفاده از setTimeOut() و setInterval() از یک متد محلی جاوااسکریپت به نام requestAnimationFrame() برای اجرای کدهای مربوط به انیمیشن‌تان استفاده کنید. این متد مناسب‌ترین نرخ فریم را برای دستگاه کاربران انتخاب می‌کند، بنابراین فریم‌ها براساس دستگاه‌های موبایل و دسکتاپ متغیر خواهد بود. نتیجه این کار داشتن تجربه کاربری بهتری در دستگاه‌های مختلف است.
۲. جدا کردن انیمیشن‌ها از رویدادها
کدهایی که مسئولیت مدیریت کاری مانند اسکرولینگ را بر عهده دارند باید از کدهای مربوط به انیمیشن‌تان جدا نگه داری شوند. برای آشنایی بیشتر با این قضیه می‌توانید این مطلب را مطالعه کنید.
۳. مختصرنویسی در جاوااسکریپت
همواره در رابطه با اضافه کردن کدهای زیاد و بزرگ به جاوااسکریپت احتیاط کنید. اگر کدهای سنگینی دارید پس باید از وب ورکرها برای اجرا کردن انیمیشن‌های جاوااسکریپتی روی رشته‌های مختلف استفاده کنید.
۴. از جی‌کوئری استفاده نکنید
از کتابخانه‌های انیمیشنی قدیمی مانند جی‌کوئری دور بمانید. اگر دنبال چیزی مشابه اما مدرن هستید می‌توانید از Velocity.js استفاده کنید. این ابزار بسیار سریع‌تر است و ویژگی‌های بیشتری را در اختیار شما قرار می‌دهد.
انتخاب خصوصیات CSS برای متحرک‌سازی
استفاده مداوم از انیمیشن‌ها می‌تواند مقدار بسیار زیادی از منابع‌تان را مصرف کند. اما برخی از خصوصیات CSS می‌توانند مقادیر مختلفی مصرف داشته باشند. هر چقدر مرورگر مجبور باشد که برای اجرای یک انیمیشن بیشتر کار کند، فریم‌ها کند‌تر از آنچه که عادی باشد کارشان را انجام می‌دهند. بنابراین انتخاب خصوصیات درست برای CSS در جهت متحرک‌سازی می‌تواند تاثیر بسیار زیادی روی کارایی برگه‌ها داشته باشد.
سه نوع از خصوصیات CSS
- خصوصیات لایه‌بندی – این مورد اندازه و محل قرارگیری المان‌های داخل برگه را تعیین می‌کند. انیمیشن‌هایی که ارتفاع و عرض المنت‌ها را تغییر می‌دهند می‌توانند روی این قسمت تاثیر بگذارند. از آنجایی که تاثیر این انیمیشن‌ها می‌تواند بسیار بزرگ باشد بنابراین باید از آن‌ها دوری کنید.
- خصوصیات طراحی – این مورد ظاهر المان‌ها را تعیین می‌کند. تغییراتی مانند اعمال رنگ و... از طریق این خاصیت اتفاق می‌افتد. این مورد نیز می‌تواند منابع زیادی را مصرف کند. استفاده از انیمیشن‌ها باعث می‌شود که همه المان‌ها از ابتدا استایل‌دهی شوند. به همین دلیل باید در نظر بگیرید که اگر تغییرات‌تان بزرگ هستند نباید از آن‌ها استفاده کنید.
- خصوصیات ترکیبی – این مورد شامل مواردی مانند transform و opacity می‌شود که بهترین موارد برای ایجاد انیمیشن در CSS به شمار می‌روند. استفاده از این موارد منابع کمتری را نیز مصرف خواهد کرد.
نکاتی برای استفاده از انیمیشن در CSS
۱. از انیمیشن‌های همزمان خودداری کنید
انیمیشن‌هایی که به نرمی در حالت ایزوله شده اجرا می‌شوند ممکن است در کنار انیمیشن‌های دیگر در یک صفحه به خوبی کار نکنند. داشتن بیشتر از دو انیمیشن در یک برگه و اجرای همزمان آن ها ممکن است باعث بوجود آمدن مشکلاتی شود. بنابراین بهتر است که برای هر کدام از انیمیشن‌ها زمان‌بندی تعیین کنید تا آن‌ها همزمان با همدیگر اجرا نشوند. این کار را می‌توانید با استفاده از transition delay انجام دهید.
۲. بررسی انیمیشن‌ها در حالت آهسته
اگر یک انیمیشن در حالت آهسته زیبا به نظر بیاید بنابراین در سرعت عادی خود نیز به خوبی نمایش داده خواهد شد. آهسته کردن سرعت اجرا یک انیمیشن می‌تواند بهتر در تشخیص مشکلات آن‌ها به شما کمک کند.
۳. تاخیر یک ثانیه‌ای در انیمیشن‌ها
بهتر است که بعد از بارگذاری اولیه وبسایت، یک ثانیه تاخیر در اجرای انیمیشن‌ها را لحاظ کنید. اینگونه مرورگر می‌تواند بهتر آن‌ها را رندر نماید.
۴. انیمیشن‌ها را به عملیات اسکرول متصل نکنید
انیمیشن‌هایی که Viewport وبسایت را تعقیب می‌کنند نه تنها مزاحم هستند بلکه نرخ کارایی وبسایت را بسیار کاهش می‌دهند.
۵. CSS و SVG را ترکیب کنید
استفاده از SVG در انیمیشن‌ها انتخابی بسیار عالی است. بهتر است که برای ایجاد انیمیشن‌ها از قدرت این مورد نیز استفاده کنید.
انیمیشن‌های‌تان را تست کنید
در زمان ایجاد یک اپلیکیشن و انیمیشن‌های مربوط به آن‌ها، استفاده از تست کارایی در هر حالت می‌تواند انتخاب خوبی باشد. هر چقدر که بیشتر منتظر باشید می‌توانید مشکلات رندرینگ بیشتری را تشخیص دهید.
ابزارهای توسعه‌ای مانند Chrome Dev Tools و یا موارد مربوط به دیگر مرورگر چنین قابلیت‌هایی را برای شما به وجود آورده‌اند. بنابراین بسیار راحت‌تر می‌توانید انیمیشن‌های‌تان را بهینه‌سازی و مدیریت کنید.
خلاصه
بهینه‌سازی انیمیشن‌ها در دنیای وب می‌تواند پروسه بسیار ساده‌ای باشد. با این حال انجام ندادن آن می‌تواند مشکلات کارایی بسیاری را برای شما ایجاد کند. همواره سعی کنید که روند کارایی انیمیشن‌ها برای‌تان مهم باشد و سعی کنید که آن را به بهترین شیوه ممکن انجام دهید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید