طبیعی کردن انیمیشن های ساخته شده با CSS Animation-قسمت 1
طبیعی کردن انیمیشن های ساخته شده با CSS Animation
فرض کنید که یک طراح از یک توسعه دهنده بخواد که یک باکس به وجود بیاره و به اون افکت پریدن و بالا و پایین آمدن رو اعمال کنه و یک انیمیشن به وجود بیاره. اگر در اینجا طراح مقداری در مورد کدنویسی اطلاع نداشته باشه و همچنین توسعه دهنده در مورد طراحی چیزی ندونه، نمیتونن به خوبی با هم ارتباط برقرار بکنند و خروجی که به وجود میاد چیزی شبیه به باکس زیر خواهد بود.
همونطور که میبینید یک باکس قرار داده شده و ظاهرا همون چیزی هست که طراح میخواست و باکس بالا و پایین میره و تقریبا مثل اینه که در حال پرش هست. ولی این انیمیشن خیلی طبیعی نیست و میتونیم ظاهر خیلی طبیعی تری رو به اون نسبت بدیم. کدهای مربوط به انیمیشن ساده بالا بصورت زیر هستند:
|
1
2
3
4
5
6
7
8
9
|
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: linear;
}
@keyframes bounce-1 {
0% { transform: translateY(); }
50% { transform: translateY(-100px); }
100% { transform: translateY(); }
}
|
همونطور که میبینید از timing-function خطی یا Linear استفاده شده است و درون Keyframes هم با استفاده از translateY، باکس مورد نظر رو 100 پیکسل در جهت عمودی جابجا کرده است.
اولین چیزی که باید بررسی کنیم خطی بودن timing-function هست. زمانی که از این مورد استفاده میکنیم به این معنا هست که انیمیشن ما در همه زمان ها با یک سرعت ثابت انجام میشه. در صورتی که در دنیای واقعی و طبیعی حرکت پرش به این صورت نیست و سرعت بالا و پایین رفتن در زمانهای مختلف، متفاوت می باشد.
پس در اولین قدم بجای linear از حالت ease استفاده میکنیم تا سرعت انیمیشن در ابتدا و انتهای مسیر از سرعت بخش میانی کمتر بشه و حالت طبیعی تری رو به انیمیشن بده. پس کدها بصورت زیر میشه:
|
1
2
3
4
5
6
7
8
9
|
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: ease;
}
@keyframes bounce-1 {
0% { transform: translateY(); }
50% { transform: translateY(-100px); }
100% { transform: translateY(); }
}
|
خروجی کد بالا بصورت زیر میشه:
همونطور که میبینید ظاهر انیمیشن مقدار کمی بهتر شده است با این حال کارهای بسیار دیگه ای برای انجام شدن وجود دارند. قدم بعدی اینه که یک تاخیر جزئی در زمین خوردن باکس به وجود بیاریم تا اون رو طبیعی تر جلوه بدیم. برای اینکار کدها رو بصورت زیر تغییر میدیم:
|
1
2
3
4
5
6
7
8
9
10
|
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: ease;
}
@keyframes bounce-1 {
0% { transform: translateY(); }
30% { transform: translateY(-100px); }
50% { transform: translateY(); }
100% { transform: translateY(); }
}
|
با اینکار خروجی بصورت زیر میشه:
همونطور که میبینید باکس در همه زمانها یک شکل داره و زمانی که به سمت بالا و پایین میره هیچ تغییری در ظاهر اون به وجود نمیاد. همونطور که در طبیعت زیاد دیدید وقتی یچیزی میخواد به سمت بالا پرش بکنه، در ابتدا مقداری ارتفاعش کم شده و عرض اون زیاد میشه و زمانی که به سمت بالا میره این اندازه ها برعکس میشه بطوری که ارتفاع بیشتر میشه و این حس رو به آدم میده که اون باکس کش اومده است. پس ما هم برای طبیعی شدن انیمیشن باید چنین مواردی رو پیاده سازی کنیم.
برای تغییر اندازه باکس در زمانهای مختلف از Scale استفاده میکنیم. کدها رو بصورت زیر تغییر میدیم:
|
1
2
3
4
5
6
7
8
9
10
11
|
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: ease;
}
@keyframes bounce-1 {
0% { transform: scale(1,1) translateY(); }
10% { transform: scale(1.1,.9) translateY(); }
30% { transform: scale(.9,1.1) translateY(-100px); }
50% { transform: scale(1,1) translateY(); }
100% { transform: scale(1,1) translateY(); }
}
|
میبینید که با استفاده از scale، نسبت عرض و ارتفاع رو در زمانهای مختلف تغییر دادیم. با اینکار خروجی بصورت زیر خواهد شد:
همونطور که میبینید حالا باکس یه حالت زنده بودن رو داره و حس خوبی رو به آدم میده.