TL; DR
با شروع در Chrome 53، در صورتی که دارای ویژگی will-change: transform CSS نباشد، تمام محتوا زمانی که مقیاس تبدیل آن تغییر می‌کند، مجدداً رستر می‌شود. به عبارت دیگر، will-change: transform به معنای «لطفا سریع آن را متحرک کنید».
این فقط برای مقیاس‌های تبدیلی که از طریق دستکاری اسکریپت اتفاق می‌افتند، اعمال می‌شود و برای انیمیشن‌های CSS یا انیمیشن‌های وب اعمال نمی‌شود .
این بدان معناست که سایت شما احتمالاً محتوایی با ظاهر بهتر خواهد داشت، اما ممکن است بدون برخی تغییرات ساده که در زیر به آنها اشاره شده است کندتر باشد.
مفاهیم برای توسعه دهندگان وب
تحت این تغییر، will-change: transform می‌توان به‌عنوان وادار کردن محتوا به یک بیت مپ ثابت در نظر گرفت که متعاقباً تحت به‌روزرسانی‌های تبدیل تغییر نمی‌کند. این به توسعه دهندگان اجازه می دهد تا سرعت تبدیل انیمیشن ها را در آن بیت مپ افزایش دهند، مانند جابجایی، چرخش یا مقیاس آن.
ما بین تبدیل مقیاس و ترجمه تفاوتی قائل نمی شویم.
اقدامات توصیه شده
will-change: transform زمانی که به سرعت انیمیشن بسیار سریع (به عبارت دیگر، 60 فریم در ثانیه) نیاز دارید، عناصر را تغییر دهید، و انتظار می‌رود که نمایش عنصر با کیفیت بالا در هر فریم به اندازه کافی سریع نباشد. در غیر این صورت، از will-change: transform .
برای بهینه سازی مبادله کیفیت عملکرد، ممکن است بخواهید will-change: transform و پس از پایان آن ها آن را حذف کنید. با این حال، توجه داشته باشید که اضافه کردن یا حذف کردن will-change: transform .
ملاحظات اجرایی اضافی
حذف will-change: transform باعث می‌شود که محتوا در مقیاس واضح، اما فقط در فریم انیمیشن بعدی (از طریق requestAnimationFrame) مجدداً رستر شود. بنابراین، اگر لایه‌ای با will-change: transform روی آن دارید و به سادگی می‌خواهید یک re-raster راه‌اندازی کنید، اما سپس به متحرک سازی ادامه دهید، باید will-change: transform را حذف کنید، سپس آن را دوباره در یک requestAnimationFrame() c allback اضافه کنید.
اگر در هر زمانی در طول یک انیمیشن، می‌خواهید شطرنجی را در مقیاس فعلی انجام دهید، تکنیک بالا را برای حذف در یک فریم، دوباره اضافه کردن will-change: transform .
این ممکن است اثرات جانبی این را داشته باشد که محتوا لایه ترکیبی خود را از دست می دهد و باعث می شود توصیه فوق تا حدودی گران باشد. اگر مشکلی است، توصیه می‌کنیم transform: translateZ(0) نیز به محتوا اضافه کنید تا مطمئن شوید در طول این عملیات در یک لایه ترکیبی باقی می‌ماند.
خلاصه تاثیر
این تغییر پیامدهایی برای کیفیت محتوای رندر شده، عملکرد و کنترل برنامه‌نویس دارد.
- کیفیت محتوای رندر شده : خروجی رندر شده عناصری که مقیاس تبدیل متحرک را متحرک می کنند همیشه به طور پیش فرض واضح خواهد بود.
- عملکرد : متحرک کردن تبدیل زمانی که
will-change: transformسریع خواهد بود. - کنترل برنامه‌نویس : توسعه‌دهندگان می‌توانند بین کیفیت و سرعت، بر اساس هر عنصر و هر فریم انیمیشن با افزودن و حذف، یکی را انتخاب کنند.
will-change: transform.
برای جزئیات بیشتر به سند طراحی ارجاع شده در بالا مراجعه کنید.
مثال ها
در این مثال ، عنصر با ID remainsBlurry پس از این تغییر تار می ماند، اما عنصر با شناسه noLongerBlurry واضح می شود. این به این دلیل است که اولی دارای یک will- change: transform ویژگی CSS روی آن.
نمونه هایی از انیمیشن های مقیاس تبدیل از برنامه های واقعی
- از این اشکال : ببر بزرگنمایی می کند
- نقشه های گوگل در تلفن همراه (maps.google.com) - نقشه را بزرگنمایی کنید
- Google Maps Lite روی دسکتاپ
- نقشه صندلی تیکت مستر