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

یونا کراوتس

خلاصه: Chromium قابلیت‌های شتاب سخت‌افزاری خود را به‌طور خودکار برای انیمیشن‌های SVG، تغییرات مبتنی بر درصد، و به زودی، انیمیشن‌های رنگی پس‌زمینه و مسیر کلیپ به‌روزرسانی می‌کند.

هنگامی که صحبت از عملکرد انیمیشن وب به میان می آید، اصطلاحات انیمیشن های «شتاب سخت افزاری» و «متحرک با شتاب GPU» احتمالاً به میان می آیند. اما اینها اصلاً به چه معنا هستند؟ سبک‌های تسریع‌شده سخت‌افزاری آن‌هایی هستند که از GPU (واحد پردازش گرافیکی) به جای CPU (واحد پردازش مرکزی) برای ارائه سبک‌های بصری استفاده می‌کنند. این به این دلیل است که GPU می تواند تغییرات بصری را در یک صفحه وب سریعتر از CPU ارائه دهد.

استفاده از GPU برای بارگذاری انتقال‌ها و انیمیشن‌های فشرده گرافیکی به معنای جلوه‌های بصری روان‌تر و جابجایی کمتر است، زیرا این انیمیشن‌ها تحت تأثیر موضوع اصلی قرار نمی‌گیرند. با بیرون کشیدن آنها از موضوع اصلی، انیمیشن های شما از پوسته سایر اسکریپت های فعال در حال اجرا در صفحه شما عبور می کنند، که باعث کاهش سرعت جلوه های بصری شما و ایجاد jank می شود.

فعال کردن انیمیشن‌های با شتاب سخت‌افزاری

انیمیشن‌های شتاب‌دهنده سخت‌افزاری به‌صورت لایه‌ای ترکیب می‌شوند و به توسعه‌دهندگان کمک می‌کنند تا انیمیشن‌های نرمال ۶۰ FPS (فریم در ثانیه) را برای بهبود عملکرد رندر بصری به دست آورند. در حال حاضر چند راه برای مشخص کردن و فعال کردن انیمیشن ها و انتقال های سخت افزاری شتاب یافته در وب وجود دارد:

  • از توابع transform CSS یا انتقال مقادیر opacity یا filter استفاده کنید
  • ویژگی will-change را به عنصر خود اضافه کنید.
  • یک نقاشی بوم متحرک از طریق OffscreenCanvas ایجاد کنید
  • یک طراحی سه بعدی WebGL ایجاد کنید
تیم رندر Chromium به طور مستمر استفاده از متحرک‌ترین ویژگی‌ها را ردیابی می‌کند تا مشخص کند در مورد فعال کردن شتاب سخت‌افزاری چه کاری باید انجام شود. در حالی که ویژگی‌های فعلی CSS که به‌طور پیش‌فرض از طریق سخت‌افزار شتاب می‌شوند، فعلاً فقط شامل opacity ، filter و transform ، background-color و clip-path به زودی به فهرست ملحق خواهند شد.

چه چیز دیگری به طور پیش فرض در Chromium شتاب سخت افزاری می شود؟ چند چیز در راه است، از جمله انیمیشن های SVG، چیزی که توسعه دهندگان به شدت درخواست کرده اند.

انیمیشن های SVG شتاب دهنده سخت افزاری

SVG یک افزونه عالی برای هر وب سایتی است، و اکنون آن تعاملات با SVG می تواند عملکرد بیشتری داشته باشد. از Chromium 89، کروم به افرادی مانند فایرفاکس خواهد پیوست تا شتاب سخت افزاری را به طور پیش فرض در انیمیشن های SVG فعال کند. شما، توسعه دهنده، چه کاری باید انجام دهید؟ هیچی—این به طور خودکار برای انیمیشن های SVG در Chromium 89+ اعمال خواهد شد.

مثال

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

رابط کاربری نوار کناری فیس بوک در حین بارگیری محتوای اضافی، یک لودر دایره ای را نشان می دهد.

وقتی DevTools را باز می‌کنیم، می‌توانیم نمایه‌سازی را شروع کنیم و تفاوت‌های بین یک CPU و تجربه انیمیشن با شتاب GPU را ببینیم.

پنل عملکرد با چشمک زدن رنگ روشن است
چپ: Chromium 88. راست: Chromium 89، با شتاب سخت‌افزاری برای انیمیشن‌های SVG. نسخه ی نمایشی Benoit Girard را در JSFiddle ببینید.

می‌بینید که در سمت چپ (Chromium 87)، هر بار که اسپینر متحرک می‌شود، رنگ‌آمیزی مجدد انجام می‌شود (که به طور مداوم است). در سمت راست هیچ رنگ آمیزی مجدد وجود ندارد (Chromium 89 و Firefox). ما می‌توانیم این را در پنل DevTools Rendering، هنگام روشن کردن Paint flashing آزمایش کنیم.

پانل عملکرد نمایش رندر
چپ: Chromium 88. راست: Chromium 89، با شتاب سخت‌افزاری برای انیمیشن‌های SVG. نسخه ی نمایشی Benoit Girard را در JSFiddle ببینید.

با نگاهی دقیق تر به پنل عملکرد، دوباره می توانید این افکت را مشاهده کنید و اینکه چگونه بر عملکرد کلی ویژگی وب شما تأثیر می گذارد. شما از رندر و رنگ آمیزی زمان به طور کامل برای انیمیشن خودداری می کنید، یعنی انیمیشن های روان تر و برنامه های کاربردی تر. در حالی که فیس‌بوک تا زمانی که پشتیبانی مرورگر از SVG با شتاب سخت‌افزاری بیشتر نشود، این لودر مبتنی بر SVG را ارسال نمی‌کند، اما این امکان را برای انعطاف‌پذیری بیشتر از نظر موضوع‌بندی، مقیاس‌بندی و وضوح مورد نیاز و نگهداری آسان‌تر فراهم می‌کند.

انیمیشن های درصدی

تیم Interactions همچنین از انیمیشن‌های درصد تبدیل در Chromium 89 پشتیبانی می‌کند. انیمیشن‌های مبتنی بر درصد، تعاملاتی را توصیف می‌کنند که شامل حرکت مبتنی بر درصد است. برای مثال، می‌توانید چیزی را 20% افزایش دهید یا یک منوی نوار کناری پاسخگو را با استفاده از چیزی مانند translateX: -100% از صفحه خارج کنید.

مثال پیمایش از waze.com ، که از یک تبدیل درصد برای باز کردن و پنهان کردن منو در اندازه‌های صفحه کوچکتر استفاده می‌کند.

این نوع انیمیشن‌های رابط کاربری نسبتاً رایج هستند، اما در حال حاضر از شتاب سخت‌افزاری استفاده نمی‌کنند زیرا قبلاً نمی‌توانستیم چنین انیمیشن‌هایی را ترکیب کنیم. درصد در تبدیل‌ها به اندازه جعبه (یعنی طرح‌بندی) بستگی دارد، اما اکنون، تا زمانی که اندازه طرح‌بندی در هر فریم تغییر نمی‌کند، مرورگر می‌تواند مقادیر تبدیل مطلق را از قبل محاسبه کند و آن‌ها را طوری اجرا کند که گویی توسعه‌دهنده مقادیر پیکسل را ارائه کرده است. خبر خوب این است که تیم Chromium در حال کار بر روی این ویژگی است و به زودی، این نوع انیمیشن ها به طور خودکار ترکیب و شتاب سخت افزاری خواهند شد.

بعد چه می آید؟

این انیمیشن های به روز شده استایل وب را بسیار روان تر می کند. و همانطور که در بالا ذکر شد، تیم همیشه به دنبال این است که ببیند چه نیازهای وب آینده ظهور می کند. در حال حاضر، قرار است background-color و clip-path را برای استفاده خودکار از شتاب سخت‌افزاری در نسخه‌های آینده Chromium تبدیل کنیم.

background-color به دلیل استفاده زیاد برای انتقال‌ها و افکت‌ها در اولویت است و clip-path افکت‌های انتقال بسیار کارآمدتر را در سراسر وب فعال می‌کند. وقتی عملکرد با تعامل روبرو می شود، همه برنده می شوند!

transition.style : یک سایت نمایشی که جلوه های انتقال CSS توسط آدام آرگیل را برجسته می کند.

تصویر روی جلد: Siora Photography for Unsplash.