با عضویت در کانال تلگرام ما همیشه بروز باشید :)
برای ورود به کانال کلیک کنید / دانلود تلگرام نسخه ویندوز
تايتل قالب
منو

IRANSYSTEM

تیم امنیتی آموزشی ایران سیستم |Iranian Security Training Team



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

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

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

 

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

همونطور که میبینید از timing-function خطی یا Linear استفاده شده است و درون Keyframes هم با استفاده از translateY، باکس مورد نظر رو 100 پیکسل در جهت عمودی جابجا کرده است.

 

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

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

خروجی کد بالا بصورت زیر میشه: 

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

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

 

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

برای تغییر اندازه باکس در زمانهای مختلف از Scale استفاده میکنیم. کدها رو بصورت زیر تغییر میدیم:

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

همونطور که میبینید حالا باکس یه حالت زنده بودن رو داره و حس خوبی رو به آدم میده.


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

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



ایران سیستم