CSS در مقابل انیمیشن های جاوا اسکریپت

می توانید با CSS یا جاوا اسکریپت متحرک سازی کنید. کدام را باید استفاده کنید و چرا؟

Paul Lewis

Sam Thorogood

دو راه اصلی برای ایجاد انیمیشن در وب وجود دارد: با CSS و با جاوا اسکریپت. اینکه کدامیک را انتخاب می‌کنید واقعاً به وابستگی‌های دیگر پروژه‌تان و نوع تأثیراتی که می‌خواهید به دست آورید بستگی دارد.

خلاصه

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

اکثر انیمیشن های اولیه را می توان با CSS یا JavaScript ایجاد کرد، اما میزان تلاش و زمان متفاوت است (همچنین به عملکرد CSS در مقابل JavaScript مراجعه کنید). هر کدام مزایا و معایب خود را دارند، اما اینها دستورالعمل های خوبی هستند:

• هنگامی که حالت های کوچکتر و مستقلی برای عناصر UI دارید، از CSS استفاده کنید. انتقال‌ها و انیمیشن‌های CSS برای وارد کردن یک منوی پیمایش از کنار یا نشان دادن یک راهنمای ابزار ایده‌آل هستند. ممکن است در نهایت از جاوا اسکریپت برای کنترل وضعیت ها استفاده کنید، اما خود انیمیشن ها در CSS شما خواهند بود.
• زمانی که به کنترل قابل توجهی روی انیمیشن های خود نیاز دارید از جاوا اسکریپت استفاده کنید. Web Animations API رویکردی مبتنی بر استانداردها است که امروزه در اکثر مرورگرهای مدرن موجود است. این اشیاء واقعی را فراهم می کند که برای برنامه های پیچیده شی گرا ایده آل است. جاوا اسکریپت همچنین زمانی مفید است که نیاز به توقف، توقف، کاهش سرعت یا معکوس کردن انیمیشن های خود دارید.
• هنگامی که می خواهید کل صحنه را با دست هماهنگ کنید، مستقیماً از requestAnimationFrame استفاده کنید. این یک رویکرد جاوا اسکریپت پیشرفته است، اما اگر در حال ساخت یک بازی یا طراحی روی بوم HTML هستید، می تواند مفید باشد.

از طرف دیگر، اگر قبلاً از یک چارچوب جاوا اسکریپت استفاده می‌کنید که شامل عملکردهای انیمیشن است، مانند روش .animate() jQuery یا TweenMax GreenSock ، در مجموع ممکن است راحت‌تر از آن برای انیمیشن‌های خود استفاده کنید.

با CSS متحرک سازی کنید

متحرک سازی با CSS ساده ترین راه برای حرکت دادن چیزی روی صفحه است. این رویکرد به عنوان اعلانی توصیف می شود، زیرا شما مشخص می کنید که می خواهید چه اتفاقی بیفتد.

در زیر چند CSS وجود دارد که یک عنصر را 100px در هر دو محور X و Y حرکت می دهد. این کار با استفاده از یک انتقال CSS که 500ms می‌کشد انجام می‌شود. هنگامی که کلاس move اضافه می شود، مقدار transform تغییر می کند و انتقال آغاز می شود.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

آن را امتحان کنید

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

اگر مانند قطعه بالا، کلاس‌های CSS جداگانه برای مدیریت انیمیشن‌های خود ایجاد کنید، می‌توانید از جاوا اسکریپت برای روشن و خاموش کردن هر انیمیشن استفاده کنید:

box.classList.add('move');

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

جاوا اسکریپت مورد نیاز برای گوش دادن به پایان یک انتقال به این صورت است:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

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

توجه: اگر با انیمیشن‌ها تازه کار هستید، فریم‌های کلیدی یک اصطلاح قدیمی از انیمیشن‌های دستی هستند. انیماتورها فریم‌های خاصی را برای یک کار ایجاد می‌کنند که فریم‌های کلیدی نامیده می‌شود، که چیزهایی مانند شدیدترین قسمت برخی از حرکت‌ها را به تصویر می‌کشد و سپس تمام فریم‌ها را در بین فریم‌های کلیدی ترسیم می‌کنند. ما امروز یک فرآیند مشابه با انیمیشن‌های CSS داریم، که در آن به مرورگر آموزش می‌دهیم که ویژگی‌های CSS در نقاط داده شده چه مقادیری باید داشته باشند، و شکاف‌ها را پر می‌کند.

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

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

آن را امتحان کنید

با انیمیشن‌های CSS، خود انیمیشن را مستقل از عنصر هدف تعریف می‌کنید و از ویژگی animation-name برای انتخاب انیمیشن مورد نیاز استفاده می‌کنید.

اگر می‌خواهید انیمیشن‌های CSS شما روی مرورگرهای قدیمی‌تر کار کنند، باید پیشوندهای فروشنده را اضافه کنید. بسیاری از ابزارها می توانند به شما کمک کنند تا نسخه های پیشوندی CSS مورد نیاز خود را ایجاد کنید و به شما امکان می دهند نسخه بدون پیشوند را در فایل های منبع خود بنویسید.

با جاوا اسکریپت و Web Animations API متحرک سازی کنید

ایجاد انیمیشن با جاوا اسکریپت، در مقایسه، پیچیده‌تر از نوشتن انتقال یا انیمیشن‌های CSS است، اما معمولاً به توسعه‌دهندگان قدرت بسیار بیشتری می‌دهد. شما می توانید از Web Animations API برای متحرک سازی ویژگی های خاص CSS یا ساخت اشیاء افکت قابل ترکیب استفاده کنید.

انیمیشن های جاوا اسکریپت ضروری هستند، زیرا آنها را به صورت خطی به عنوان بخشی از کد خود می نویسید. شما همچنین می توانید آنها را در داخل اشیاء دیگر کپسوله کنید. در زیر جاوا اسکریپتی وجود دارد که برای ایجاد مجدد انتقال CSS که قبلا توضیح داده شد باید بنویسید:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

به طور پیش فرض، Web Animations فقط ارائه یک عنصر را تغییر می دهد. اگر می‌خواهید شیء شما در مکانی که به آن نقل مکان کرده است باقی بماند، پس از اتمام انیمیشن، باید سبک‌های زیرین آن را مطابق نمونه ما تغییر دهید.

آن را امتحان کنید

Web Animations API یک استاندارد نسبتاً جدید از W3C است. در اکثر مرورگرهای مدرن به صورت بومی پشتیبانی می شود. برای مرورگرهای مدرن که پشتیبانی نمی کنند، یک polyfill موجود است .

با انیمیشن های جاوا اسکریپت، در هر مرحله کنترل کامل سبک های یک عنصر را دارید. این بدان معنی است که می توانید انیمیشن ها را کم کنید، آنها را مکث کنید، آنها را متوقف کنید، آنها را معکوس کنید و عناصر را به دلخواه خود دستکاری کنید. این به ویژه اگر در حال ساخت برنامه های پیچیده و شی گرا هستید مفید است، زیرا می توانید رفتار خود را به درستی محصور کنید.