نحوه ایجاد انیمیشن های CSS با کارایی بالا

Kayce Basques

Rachel Andrew

این راهنما به شما آموزش می‌دهد که چگونه انیمیشن‌های CSS با کارایی بالا ایجاد کنید.

برای آشنایی با تئوری پشت این توصیه‌ها، به بخش «چرا بعضی از انیمیشن‌ها کند هستند؟» مراجعه کنید.

سازگاری با مرورگرها

تمام ویژگی‌های CSS که این راهنما توصیه می‌کند، پشتیبانی خوبی از مرورگرهای مختلف دارند.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

جابجایی یک عنصر

برای جابجایی یک عنصر، از مقادیر کلمه کلیدی translate یا rotation در ویژگی transform استفاده کنید.

برای مثال، برای نمایش یک آیتم به حالت اسلاید، translate استفاده کنید.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

برای چرخاندن عناصر rotate استفاده کنید. مثال زیر یک عنصر را ۳۶۰ درجه می‌چرخاند.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

تغییر اندازه یک عنصر

برای تغییر اندازه یک عنصر، از مقدار کلمه کلیدی scale برای ویژگی transform استفاده کنید.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

تغییر میزان دیده شدن یک عنصر

برای نمایش یا پنهان کردن یک عنصر، opacity استفاده کنید.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

توجه: نمونه‌های کپی و پیست انیمیشن‌های مختلف را در Animista پیدا کنید.

از ویژگی‌هایی که باعث ایجاد طرح‌بندی یا رنگ‌آمیزی می‌شوند، اجتناب کنید

قبل از استفاده از هر ویژگی CSS برای انیمیشن (به غیر از transform و opacity )، تأثیر آن ویژگی را بر روند رندرینگ بررسی کنید. از هر ویژگی که باعث ایجاد layout یا paint می‌شود، مگر اینکه کاملاً ضروری باشد، خودداری کنید.

هشدار: اگر مجبورید از خاصیتی استفاده کنید که layout یا paint را فعال می‌کند، احتمالاً نمی‌توانید انیمیشن را روان یا با عملکرد بالا نگه دارید.

ایجاد لایه اجباری

همانطور که در بخش «چرا بعضی از انیمیشن‌ها کند هستند؟» توضیح داده شد، قرار دادن عناصر در یک لایه جدید به مرورگر اجازه می‌دهد تا آنها را بدون نیاز به رنگ‌آمیزی مجدد بقیه طرح، دوباره رنگ‌آمیزی کند.

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

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

در CSS، می‌توانید will-change روی هر انتخابگری اعمال کنید:

body > .sidebar {
  will-change: transform;
}

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

برای ایجاد اجباری لایه در مرورگری که از will-change پشتیبانی نمی‌کند، می‌توانید transform: translateZ(0) تنظیم کنید.

اشکال‌زدایی انیمیشن‌های کند یا دارای اشکال

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

بررسی کنید که آیا یک انیمیشن باعث ایجاد طرح‌بندی می‌شود یا خیر

انیمیشنی که یک عنصر را با استفاده از چیزی غیر از transform حرکت می‌دهد، احتمالاً کند خواهد بود. مثال زیر یک انیمیشن با استفاده transform را با یک انیمیشن با استفاده top و left مقایسه می‌کند.

نکن

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

انجام دهید

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

می‌توانید این را در دو مثال زیر آزمایش کنید و عملکرد را با استفاده از DevTools بررسی کنید.

• قبل، با انیمیشن top و left .
• بعد از آن، با transform .

ابزارهای توسعه کروم

1. پنل عملکرد را باز کنید.
2. عملکرد زمان اجرا را در حین اجرای انیمیشن ضبط کنید .
3. برگه خلاصه را بررسی کنید.

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

مثال انیمیشن با بالا سمت چپ باعث رندر شدن می‌شود.

مثال انیمیشن با تبدیل باعث رندرینگ نمی‌شود.

ابزارهای توسعه فایرفاکس

در ابزارهای توسعه فایرفاکس، ابزار آبشاری می‌تواند به شما کمک کند تا بفهمید مرورگر در کجا وقت خود را صرف می‌کند.

1. پنل عملکرد را باز کنید.
2. همزمان با اجرای انیمیشن، ضبط اجرا را شروع کنید.
3. ضبط را متوقف کنید و تب Waterfall را بررسی کنید.

اگر ورودی‌هایی برای Recalculate Style می‌بینید، به این معنی است که مرورگر برای رندر کردن انیمیشن باید به ابتدای آبشار رندرینگ بازگردد.

فریم‌های از دست رفته را بررسی کنید

1. تب Rendering را در Chrome DevTools باز کنید.
2. کادر انتخاب FPS meter را فعال کنید.
3. در حین اجرای انیمیشن، مقادیر را زیر نظر داشته باشید.

به برچسب Frames در بالای رابط کاربری FPS meter توجه کنید. این برچسب مقادیری مانند 50% 1 (938 m) dropped of 1878 نشان می‌دهد. یک انیمیشن با کارایی بالا درصد بالایی مانند 99% دارد، به این معنی که تعداد کمی فریم drop می‌شوند و انیمیشن روان به نظر می‌رسد.

مثال انیمیشن با بالا سمت چپ باعث می‌شود ۵۰٪ فریم‌ها از دست بروند.

مثال انیمیشن با تبدیل باعث می‌شود که فقط ۱٪ از فریم‌ها حذف شوند.

بررسی کنید که آیا یک انیمیشن باعث ایجاد نقاشی می‌شود یا خیر

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

ابزارهای توسعه کروم

1. تب Rendering را در Chrome DevTools باز کنید.
2. فلش رنگ را انتخاب کنید.
3. اشاره‌گر را روی صفحه نمایش حرکت دهید.

در این مثال از نقشه‌های گوگل، می‌توانید عناصری را که دوباره رنگ‌آمیزی شده‌اند، ببینید.

اگر می‌بینید که کل صفحه چشمک می‌زند، یا قسمت‌هایی هایلایت شده‌اند که فکر نمی‌کنید باید تغییر کنند، بیشتر بررسی کنید.

اگر نیاز دارید که مشخص کنید آیا یک ویژگی خاص باعث مشکلات عملکردی مربوط به نقاشی می‌شود یا خیر، ابزار paint profiler در Chrome DevTools می‌تواند کمک کند.

ابزارهای توسعه فایرفاکس

1. تنظیمات را باز کنید و یک دکمه‌ی جعبه ابزار برای فعال/غیرفعال کردن چشمک‌زن رنگ اضافه کنید.
2. در صفحه‌ای که می‌خواهید بررسی کنید، دکمه را روشن کنید و موس خود را حرکت دهید یا اسکرول کنید تا قسمت‌های هایلایت شده را ببینید.

متحرک سازی در مرحله کامپوزیت

در صورت امکان، انیمیشن‌ها را به opacity و transform محدود کنید تا انیمیشن‌ها در مرحله ترکیب مسیر رندر باقی بمانند. از DevTools برای بررسی اینکه کدام مرحله از مسیر تحت تأثیر انیمیشن‌های شما قرار می‌گیرد، استفاده کنید.

از ابزار paint profiler استفاده کنید تا ببینید آیا عملیات رنگ‌آمیزی خاصی پرهزینه است یا خیر. اگر موردی پیدا کردید، بررسی کنید که آیا یک ویژگی CSS متفاوت، همان ظاهر و حس را با عملکرد بهتر ارائه می‌دهد یا خیر.

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