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

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

• مبانی Easing
• انیمیشن به وسیله CSS و با جاوا اسکریپت/تایپ‌ اسکریپت
• نکاتی در خصوص انمیشین
• مثالی از انیمیت یک نمای مدل
• عملکرد انیمیشن CSS

مبانی Easing

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

در انیمیشن کلاسیک، اصطلاح مورد نظر برای حرکتی که به کندی آغاز می‌شود و بعد شتاب می‌گیرد «slow in» است و حرکتی که به سرعت و با شتاب آغاز می‌شود «slow out» است. این اصطلاح‌ها در وب به ترتیب به صورت «ease in» و «ease out» بیان می‌شوند. برخی اوقات این دو اصطلاح ترکیب می‌شوند که به صورت «ease in out» بیان می‌شود. در این حالت Easing در واقع فرایند کاهش شدت یا اغراق انیمیشن است.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS در فرادرس

کلیک کنید

مزیت: Easing موجب می‌شود که اپلیکیشن با انیمیشن‌های ساده طبیعی‌تر به نظر برسد.

Easing-ها به همراه مشخصه CSS به نام transition برای انیمیشن‌های ساده استفاده می‌شوند. برای نمونه اگر بخواهید رنگ دکمه‌ای در زمانی که ماوس روی آن می‌رود (hover) تغییر پیدا کند، می‌توانید از یک «گذار» (transition) به همراه Easing استفاده کنید به طوری که به جای اتفاق افتادن ناگهانی به تدریج صورت بگیرد. یک گذار ساده برای رنگ پس‌زمینه به صورت زیر است:

1.button {
2  background-color: #2185d0;
3  transition: background-color .2s ease;
4}
5.button:hover {
6  background-color: #1678c2;
7}

در ادامه برخی از کلیدواژه‌هایی که در CSS می‌توان استفاده کرد را می‌بینید:

• linear
• ease-in
• ease-out
• ease-in-out

به نکات زیر توجه کنید.

1. انیمیشن‌های بدون هیچ نوع easing به نام «خطی» (linear) نامیده می‌شوند.
2. انیمیشن‌های Ease-in به کندی آغاز می‌شوند و در انتها سریع می‌شوند.
3. انیمیشن‌های Ease-out سریع آغاز می‌شوند و در انتها کند می‌شوند.
4. Easeing در ابتدا و انتها شبیه به شتاب‌گیری خودرو و کاهش شتاب آن است و زمانی که به دقت اجرا شود، تأثیر بیشتری نسبت به صرفاً Ease-out دارد.

انیمیشن با CSS و جاوا اسکریپت

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

از requestAnimationFrame به طور مستقیم در مواردی استفاده کنید که می‌خواهید کل صحنه را به صورت دستی هماهنگ کنید. در این وضعیت مرورگر می‌داند که می‌خواهید یک انیمیشن اجرا کنید و یک callback به آن ارسال می‌کنید که باید قبل از repaint بعدی مرورگر اجرا شود.

انیمیت کردن با CSS

انیمیت با CSS ساده‌ترین روش برای حرکت دادن چیزی روی صفحه است. این رویکرد به صورت «اعلانی» (declarative) انجام می‌شود؛ زیرا آن چه را می‌خواهید اتفاق بیفتد توصیف می‌کنید.

با استفاده از انیمیشن‌های CSS، خود انیمیشن را مستقل از عنصر هدف تعریف می‌کنید و سپس از مشخصه animation بهره می‌گیرید تا انیمیشن مورد نظر را ساخته و به همراه keyframes@ استفاده کنید.

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

انیمیت کردن با جاوا اسکریپت/تایپ‌ اسکریپت

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

نکته: یک API به نام Web Animations در مرورگرهای مدرن پشتیبانی می‌شود. در مورد مرورگرهایی که از آن پشتیبانی نمی‌کنند نیز یک پلی‌فیل (+) وجود دارد.

نکاتی در مورد انیمیشن

1. هر زمانی که ممکن باشد تلاش کنید از انیمیشن‌های CSS به جای انیمیشن‌های جاوا اسکریپت استفاده کنید، زیرا موتور مرورگر می‌تواند آن‌ها را از قبل و با استفاده از GPU رایانه بهینه سازی کند.
2. استفاده از ease-out عموماً بهتر است و خوب است که حالت پیش‌فرض داشته باشد. بدین ترتیب شروع انیمیشن سریع خواهد بود و حالت واکنش‌گرا پیدا می‌کند که مطلوب است و در انتها کند می‌شود.
3. برای دیدن معادله‌های easing بیشتر می‌توانید به این صفحه (+) مراجعه کنید.
4. مدت انیمیشن برای ease-out باید حدود 200 تا 500 میلی‌ثانیه باشد. بدین ترتیب به چشم فرصتی می‌دهیم تا انیمیشن را ببینید و در عین حال مسدودکننده نیست.
5. مدت انیمیشن برای ease-in-ها باید حدود 200 تا 500 میلی‌ثانیه باشد. به خاطر بسپارید که در انتها حالت تکان خوردن دارد و افزایش زمان‌بندی نیز این وضعیت را بهبود نمی‌بخشد.
6. اصل کلی این است که همواره به تعامل کاربر با سرعت پاسخ دهید.
7. اگر مبتدی هستید باید از برخی کتابخانه‌ها برای وظایف مدیریت انیمیشن مانند GSAP ،anime.js ،animate.css و غیره استفاده کنید.
8. از مشخصه CSS به نام will-change استفاده کنید تا مطمئن شوید که مرورگر از نقشه شما برای انیمیت کردن اطلاع دارد.

مثال: انیمیت کردن یک نمای modal

«نماهای Modal» یا همان Modal View برای پیام‌های مهم استفاده می‌شوند که دلیل خوبی برای مسدود کردن رابط کاربری دارند. با این حال باید با احتیاط از آن‌ها استفاده کنید زیرا مسدودکننده هستند و در صورت استفاده بیش از حد تجربه کاربری را مختل می‌کنند.

در تصویر زیر یک modal در پروژه انگولار ساخته شده است:

کد CSS برای انیمیت کردن این modal به صورت زیر است:

1.modal-button {
2  background: #FFF;
3  border: none;
4  color: #333;
5  font-size: 13px;
6  padding: 6px 10px;
7  border-radius: 2px;
8  margin-right: 10px;
9}
10
11.container,
12.modal-view-container {
13  width: 100%;
14  height: 100%;
15  overflow: hidden;
16  position: relative;
17  padding-top: 50px;
18  box-sizing: border-box;
19  z-index: 10;
20  pointer-events: none;
21}
22
23.modal-view-container {
24  position: fixed;
25  top: 0;
26  left: 0;
27}
28
29.view.modal {
30  position: fixed;
31  top: 0;
32  left: 0;
33  width: 100%;
34  height: 100%;
35  z-index: 2;
36  transform: scale(1.15);
37  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
38    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
39  pointer-events: none;
40  opacity: 0;
41  will-change: transform, opacity;
42
43}
44
45.view.modal.visible {
46  pointer-events: auto;
47  opacity: 1;
48  transform: scale(1);
49  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
50    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
51}
52
53.modal-view-details {
54  background: #FFF;
55  z-index: 2;
56  position: fixed;
57  left: 50%;
58  top: 50%;
59  padding: 25px 25px 50px 25px;
60  width: 65%;
61  max-width: 300px;
62  transform: translate(-50%, -50%);
63  border-radius: 2px;
64  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
65}
66
67.modal-view-details h1 {
68  margin: 0.2em 0 0.4em 0;
69  padding: 0;
70  line-height: 1;
71  font-size: 24px;
72  color: #111;
73}
74
75.modal-view-details p {
76  font-size: 14px;
77  line-height: 1.6;
78  margin: 0 0 1em 0;
79  color: #666;
80}
81
82.modal-view-details button {
83  position: absolute;
84  bottom: 10px;
85  right: 10px;
86  background: none;
87  color: #3C78D8;;
88  border-radius: 2px;
89  border: none;
90  font-size: 16px;
91  padding: 6px 10px;
92  text-transform: uppercase;
93}
94
95.modal:after {
96  position: fixed;
97  background: rgba(0,0,0,0.4);
98  width: 100%;
99  height: 100%;
100  left: 0;
101  top: 0;
102  display: block;
103  content: '';
104}

عملکرد انیمیشن CSS

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

فیلم آموزش ساخت انیمیشن در سی اس اس CSS در فرادرس

کلیک کنید

معنی این حرف آن است که باید انیمیشن‌ها صرفاً به opacity یا transform محدود شوند که مرورگر می‌تواند به وسیله موتور CSS با بهینه سازی بالایی آن‌ها را اجرا کند.

مشخصه Opacity

مشخصه Transform

برای مطالعه موارد بیشتر در مورد مشخصه‌های CSS به این صفحه (+) مراجعه کنید.

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

سخن پایانی

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

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های طراحی وب با CSS و HTML
• آموزش طراحی وب با CSS
• مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
• ایجاد نوار ناوبری واکنش گرا با HTML ،CSS و جی کوئری – از صفر تا صد

==