تايتل قالب
ایران سیستم|IRANSYSTEM


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

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

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

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

خروجی بصورت زیر میشه:

 

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

 

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

خروجی بصورت زیر میشه:

 

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

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

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

خروجی بصورت زیر میشه:

 

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

 

میبینید که این باکس علاوه بر پرش، بصورت چرخشی هم در میاد و خیلی طبیعی این کار انجام میشه.

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

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

mojtaba khatibi ۱۶ اسفند ۹۶ ، ۱۴:۰۷ ۰ ۲۷ اینترنت

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی

تیم اموزشی ایران سیستم با هدف اشنا کردن علاقه مندان به اموزش مسائل کامپیوتر. نرم افزار . بازی و ...
در این سایت تلاش کردیم، تمامی نیازهای کاربران برای دسترسی سریع و آسان به محتوای کاربردی در حوزه‌های مختلف را هم‌ زمان فراهم آوریم.
با تشکر