انیمیشن و اجرا

انیمیشن ها باید عملکرد خوبی داشته باشند، در غیر این صورت تأثیر منفی بر تجربه کاربر خواهند داشت.

سام تورگود

هر زمان که در حال انیمیشن هستید، سرعت 60 فریم در ثانیه را حفظ کنید، زیرا کمتر منجر به لکنت یا توقف می شود که برای کاربران شما قابل توجه است و بر تجربیات آنها تأثیر منفی می گذارد.

  • مراقب باشید که انیمیشن های شما باعث مشکلات عملکردی نشود. اطمینان حاصل کنید که تأثیر متحرک سازی یک ویژگی CSS داده شده را می دانید.
  • خواص متحرک سازی که هندسه صفحه (طرح بندی) را تغییر می دهند یا باعث رنگ آمیزی می شوند بسیار گران هستند.
  • در جایی که می توانید، به تغییر تبدیل ها و کدورت ها پایبند باشید.
  • برای اطمینان از اینکه مرورگر می‌داند چه چیزی را متحرک می‌کنید، از will-change استفاده کنید.

متحرک سازی ویژگی ها رایگان نیست و برخی از ویژگی ها نسبت به سایرین ارزان تر هستند. به عنوان مثال، متحرک سازی width و height یک عنصر، هندسه آن را تغییر می دهد و ممکن است باعث جابجایی یا تغییر اندازه سایر عناصر صفحه شود. این فرآیند طرح بندی (یا جریان مجدد در مرورگرهای مبتنی بر Gecko مانند فایرفاکس) نامیده می شود، و اگر صفحه شما دارای عناصر زیادی باشد می تواند گران باشد. هر زمان که طرح‌بندی فعال می‌شود، صفحه یا بخشی از آن معمولاً نیاز به رنگ‌آمیزی دارد، که معمولاً حتی از خود عملیات طرح‌بندی گران‌تر است.

تا جایی که می توانید، باید از متحرک سازی ویژگی هایی که باعث طرح بندی یا رنگ می شوند اجتناب کنید. برای اکثر مرورگرهای مدرن، این به معنای محدود کردن انیمیشن ها به opacity یا transform که مرورگر می تواند هر دو را به شدت بهینه کند. فرقی نمی کند که انیمیشن توسط جاوا اسکریپت مدیریت شود یا CSS.

راهنمای کامل ایجاد انیمیشن های با کارایی بالا را بخوانید.

استفاده از ویژگی will-change

پشتیبانی مرورگر

  • کروم: 36.
  • لبه: 79.
  • فایرفاکس: 36.
  • سافاری: 9.1.

منبع

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

قاعده کلی این است که اگر انیمیشن ممکن است در 200 میلی‌ثانیه بعدی فعال شود، یا به دلیل تعامل کاربر یا به دلیل وضعیت برنامه شما، در این صورت داشتن will-change در عناصر متحرک ایده خوبی است. بنابراین، در بیشتر موارد، هر عنصری در نمای فعلی برنامه‌تان که می‌خواهید متحرک کنید، باید برای هر ویژگی که قصد تغییر آن را دارید will-change فعال باشد. در مورد نمونه جعبه ای که در سراسر راهنماهای قبلی استفاده کرده ایم، اضافه کردن will-change برای تبدیل ها و کدورت به این صورت است:

.box {
  will-change: transform, opacity;
}

اکنون مرورگرهایی که از آن پشتیبانی می‌کنند، در حال حاضر اکثر مرورگرهای مدرن ، بهینه‌سازی‌های مناسب را برای پشتیبانی از تغییر یا متحرک کردن آن ویژگی‌ها انجام می‌دهند.

عملکرد CSS در مقابل جاوا اسکریپت

صفحات و موضوعات نظرات زیادی در سرتاسر وب وجود دارد که در مورد مزیت های نسبی انیمیشن های CSS و جاوا اسکریپت از منظر عملکرد بحث می کنند. در اینجا چند نکته را باید در نظر داشت:

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

  • سایر تغییرات تبدیل ها و کدورت ها را نیز می توان در بسیاری از موارد توسط رشته کامپوزیتور انجام داد.

  • اگر هر انیمیشنی باعث ایجاد رنگ، چیدمان یا هر دو شود، "رشته اصلی" برای انجام کار مورد نیاز است. این برای هر دو انیمیشن مبتنی بر CSS و جاوا اسکریپت صادق است، و سربار طرح یا رنگ به احتمال زیاد هر کار مرتبط با اجرای CSS یا جاوا اسکریپت را کوچک می‌کند و این سوال را به چالش می‌کشد.