طبیعی کردن انیمیشن های ساخته شده با CSS Animation - قسمت 2



visibility  
mode_comment   ۰

در این مطلب میخوام مواردی رو بهتون بگم که با استفاده از اونا میتونین انیمیشنهای طبیعی تری رو با استفاده از CSS Animation به وجود بیارید. پس با ما همراه باشید.

طبیعی کردن انیمیشن های ساخته شده با CSS Animation

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

برای اینکار کدها رو بصورت زیر تغییر میدیم:

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

برای اینکار کدها رو بصورت زیر تغییر میدیم:

خروجی بصورت زیر میشه: تا اینجای کار انیمیشن رو خیلی بهینه تر کردیم و اون رو به حالت طبیعی در آوردیم و از اون چیزی که در اول و ابتدای کار داشتیم بهتر شده است. ما میتونیم با استفاده از تابع cubic-bezier سرعت اجرای انیمیشن رو تغییر بدیم و اون رو بیشتر به حالت طبیعی نزدیک کنیم.

برای این انیمیشن از تابع cubic-bezier زیر استفاده میکنیم:

همونطور که میبینید در این حالت انیمیشن در ابتدا سرعت بیشتری داره و در انتها سرعت کم میشه. پس کدها رو بصورت زیر تغییر میدیم:

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.