طبیعی کردن انیمیشن های ساخته شده با CSS Animation - قسمت 2
طبیعی کردن انیمیشن های ساخته شده با CSS Animation
همونطور که دیدید در قسمت قبلی انیمیشن رو تا حدودی بهینه سازی کردیم و اون رو به حالت طبیعی نزدیک کردیم. در این جلسه میخوایم چند کار دیگه بر روی این انیمیشن انجام بدیم. در اینجا کاری میکنیم که باکس بعد از زمین خوردن، مقدار خیلی کمی از زمین بلند بشه و حالت زمین خوردن رو طبیعی تر جلوه بده.
برای اینکار کدها رو بصورت زیر تغییر میدیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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(); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(); }
100% { transform: scale(1,1) translateY(); }
}
|
خروجی بصورت زیر میشه:
همونطور که مشاهده میکنید باکس بعد از زمین خوردن مقداری به سمت بالا حرکت میکنه. یه مشکلی که در انیمیشن بالا وجود داره اینه که بعد از بلند شدن دوباره باکس، هیچ تغییر شکلی در باکس به وجود نمیاد. در اینجا میایم و یه مقدار تغییر شکل در زمان بالا رفتن دوباره شکل ایجاد میکنیم تا اون رو طبیعی تر جلوه بدیم.
برای اینکار کدها رو بصورت زیر تغییر میدیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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.05,.95) translateY(); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(); }
100% { transform: scale(1,1) translateY(); }
}
|
خروجی بصورت زیر میشه:
تا اینجای کار انیمیشن رو خیلی بهینه تر کردیم و اون رو به حالت طبیعی در آوردیم و از اون چیزی که در اول و ابتدای کار داشتیم بهتر شده است. ما میتونیم با استفاده از تابع cubic-bezier سرعت اجرای انیمیشن رو تغییر بدیم و اون رو بیشتر به حالت طبیعی نزدیک کنیم.
برای این انیمیشن از تابع cubic-bezier زیر استفاده میکنیم:
همونطور که میبینید در این حالت انیمیشن در ابتدا سرعت بیشتری داره و در انتها سرعت کم میشه. پس کدها رو بصورت زیر تغییر میدیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}
@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.05,.95) translateY(); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(); }
100% { transform: scale(1,1) translateY(); }
}
|
خروجی بصورت زیر میشه:
شما میتونین با استفاده از تغییر دادن سرعت و قرار دادن تاخیر و دست بردن در زمان اجرای انیمیشن، حالت مربوط به این باکس رو بصورت طبیعی تر در بیارید. مثلا انیمیشن زیر رو در نظر بگیرید که خیلی بهینه تر این کار رو انجام داده و میتونین از اون ایده بگیرید:
میبینید که این باکس علاوه بر پرش، بصورت چرخشی هم در میاد و خیلی طبیعی این کار انجام میشه.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
- ۹۶/۱۲/۱۶