انتخاب تسهیل کننده مناسب

تسهیل کننده مناسب برای پروژه خود را انتخاب کنید، خواه این تسهیلات در داخل، خارج یا هر دو باشد. شاید حتی از پرش برای سرگرمی بیشتر استفاده کنید!

پس از بحث در مورد گزینه های مختلف موجود برای سهولت در انیمیشن ها، از چه نوع در پروژه های خود استفاده کنید، و انیمیشن های شما چه نوع مدت زمانی باید داشته باشند؟

خلاصه

  • از انیمیشن های آسان برای عناصر UI استفاده کنید. ease-out Quintic یک آسانی بسیار خوب، البته سریع است.
  • حتما از مدت زمان انیمیشن استفاده کنید. ease-out ها و ease-in ها باید 200ms-500ms باشند، در حالی که جهش ها و eases های الاستیک باید در مدت زمان طولانی تری بین 800ms-1200ms باشند.
یک منحنی انیمیشن آسان‌تر Quintic.

به طور کلی، ease-out تماس مناسب و مطمئناً پیش فرض خوبی خواهد بود. شروع سریع است و به انیمیشن‌های شما احساس پاسخگویی می‌دهد، که مطلوب است، اما در پایان با کاهش سرعت خوبی همراه است.

گروهی از معادلات ease-out معروف، فراتر از معادلاتی که با کلمه کلیدی ease-out در CSS مشخص شده است، وجود دارد که در «تهاجمی بودن» خود محدوده دارند. برای یک اثر آسان‌تر سریع، آسان‌تر Quintic را در نظر بگیرید.

انیمیشن Quintic ease-out را ببینید

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

به راحتی بازی کنید، ببینید کدام یک با شخصیت پروژه شما مطابقت دارند، و از آنجا بروید. برای فهرست کامل انواع آسان‌سازی، همراه با نسخه‌های نمایشی، easings.net را ببینید.

مدت زمان انیمیشن مناسب را انتخاب کنید

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

  • خروجی آسان: حدود 200ms-500ms . این به چشم فرصتی برای دیدن انیمیشن می دهد، اما مانعی ایجاد نمی کند.
  • سهولت در: حدود 200ms-500ms . به خاطر داشته باشید که در انتها تکان می خورد و هیچ مقدار تغییر زمان آن تاثیر را کاهش نمی دهد.
  • اثرات جهشی یا الاستیک: حدود 800ms-1200ms . باید زمان بگذارید تا اثر ارتجاعی یا جهشی "ته نشین شود". بدون این زمان اضافی، قسمت جهشی الاستیک انیمیشن برای چشم تهاجمی و ناخوشایند خواهد بود.

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