• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 8) : کار کردن با ویرایشگر Cubic bezier

0 219 ۱۲ شهریور ۹۵

inspector

ترفند 15 : کار کردن با ویرایشگر Cubic bezier

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

یکی از ویژگی های مهمی که میتونین برای انیمیشن تعریف کنید تابع زمانی یا timing function هست که با استفاده از اون میتونین مشخص کنید که انیمیشن چطوری و طبق چه اصلی از مبدا به مقصد برسه. تعدادی مقدار پیش فرض برای اون قرار داده شده که عبارتند از:

  • ease : مقدار پیش فرض
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n,n,n,n)

هر کدوم از موارد بالا حالت خاصی رو به اجرای انیمیشن اضافه میکنن. مثلا اگر مقدار linear رو در نظر بگیریم باعث میشه که با سرعت ثابت از ابتدا تا انتها حرکت کنه. اگر مثلا از مقدار ease-in-out استفاده کنیم باعث میشه که ابتدا و انتهای مسیر آهسته حرکت کنه و سرعتش در میانه راه بیشتر باشه. حالا در این مطلب قصدمون این نیست که این موضوع رو آموزش بدیم و هدف اصلی اینه که با ویرایشگر Cubic-bezier که در Inspector قرار داده شده کار کنیم. حتما میدونید بخاطر اینکه مقادیری که در بالا قرار داده شدن محدودیت هایی دارن، تابع Cubic-bezier هم به css اضافه شده تا با استفاده از اون بتونیم توابع زمانی پیشرفته ای رو درست کنیم و حالت طبیعی تری رو به انیمیشنهامون بدیم. در ابتدا به این صفحه بریم تا با هم روی یک نمونه کار کنیم. همونطور که میبینید در سمت است یک مربع قرار داده شده که حالت انیمیشنی برای اون قرار داده شده است.inspector cubic-bezier

در ابتدا بر روی اون کلیک راست کرده و Inspector رو باز کنید و المنت div رو انتخاب کنید:inspector cubic-bezier 2

حالا اگر به سمت راست Inspector و قسمت استایلها نگاه کنید، یک Animation برای این المنت تعریف شده.inspector cubic-bezier 3

میبینید که یک آیکون بنفش رنگ قرار داده شده که بر روی اون یک منحنی کوچک کشیده شده. این آیکون در کنار کلمه linear که همون timing function هست قرار داده شده و به معنای اینه که میتونیم اون رو به سادگی و با استفاده از ویرایشگر درون Inspector تغییر بدیم و تغییرات رو بصورت آنی در مرورگر ببینیم(بدون اینکه نیازی به رفرش کردن صفحه باشه).

اگر بر روی این آیکون کلیک کنیم، چنین باکسی باز خواهد شد:inspector cubic-bezier 4

همونطور که دیدید باکسی که باز میشه اطلاعات کامل و مفیدی در مورد تابع زمانی بهمون میده. این باکس شامل چند بخش میشه که در پایین براتون توضیح میدم:inspector cubic-bezier 5

  1. در این قسمت یک دایره از سمت چپ به راست حرکت میکنه و مشخص میکنه که این تابعی که ما الان مشخص کردیم، به چه صورت هست و چطوری کار میکنه. مثلا اگر linear قرار بدیم نحوه حرکت دایره از ابتدا تا انتها ثابت و بدون تغییر هست.
  2. در این قسمت نمودار زمانی ما قرار داده شده و شکل کلی رو بهتون نمایش میده. همونطور که میبینید در تصویر بالا این تابع بصورت خطی هست. همچنین دو دایره بنفش بر روی نمودار قرار داده شده که با درگ کردن اونا میتونین توابع cubic-bezier متنوعی برای خودتون بسازید و قرار بدین.
  3. نام و مشخصات تابع زمانی فعلی رو نمایش میده
  4. با استفاده از این قسمت میتونین الگوهای مرسوم و متدوالی که وجود داره رو انتخاب کنید. برای مثال اگر یکی از اونا رو انتخاب کنم، بصورت زیر خواهد شد:

inspector cubic-bezier 6

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

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

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram