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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش کامل easing در جی کوئری

3618 ۱۰ بهمن ۹۲

سلام خدمت همه ی دوستان و سون لرنی های عزیز

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

Easing در jQuery  میتونه به انیمیشن ها روح ببخشه و شیوه پیشرفت اون رو در واحد زمان توصیف کنه.یا به بیان دیگه این پلاگین شیوه حرکت انیمیشن رو در قالب اعداد شرح می دهد.جالبه که بدونید توابع موجود در این پلاگین فقط یه عدد رو با 17 رقم اعشار که در هر لحظه عوض می شوند رو برمیگردونند.

در CSS3 هم با استفاده از خصوصیات transition و animation می تونستید از easing ها هم استفاده کنید ولی هم محدود تر بودند و هم روی مرورگر های ناسازگار با CSS3 اجرا نمی شدند.

اگر فقط از سند جی کوئری بدون پلاگین easing  استفاده میکنید فقط مجازید از یکی از دو مقادیر زیر برای easing استفاده کنید..

ولی اگر  پلاگین easing رو هم به سندتون متصل کردید 32 انتخاب دارید و در ضمن اگر از jQuery UI در سندتون استفاده می کنید همه ی توابع easing در این نسخه وجود دارد.

اگر فایل پلاگین easing رو دانلود کنید و به اون یه نگاهی بندازید میتونید همه ی easing ها رو یاد بگیرید.

برای دانلود این پلاگین به سایت های زیر رجوع کنید:

کاربرد عمده این پلاگین در توابع زیر است:

ممکنه استفاده از easing ها در بعضی از توابع به چشم نیاد ولی با این حال باز هم easing ها روی آن توابع اعمال می شوند.برای مثال همگی توابع fade و hide و show از این دسته تابع ها هستند.

شیوه کلی ساخت این توابع  با اختلاف به شکل زیره:

percent :  درصد انجام شده که بین 0 و 1 سیر میکنه.

elasped : تعداد میلی ثانیه های گذشته از اجرای انیمیشن.

start : مقدار شروع (جی کوئری این مقدار رو صفر در نظر میگیره).

end : مقدار پایان (جی کوئری این مقدار رو یک در نظر میگیره).

total : مقدار زمان اجرای انیمیشن بر حسب میلی ثانیه.

البته این رو به خاطر داشته باشید که توابع  easing جی کوئری خیلی از این نمونه پیشرفته ترند و در اون ها مقدار پارامتر ها توسط خود کتابخانه جی کوئری به تابع اضافه میشه و پارامتر های percent و elapsed در هر لحظه مقدارشون عوض میشه...

نکته :

شاید بپرسید چرا از total  و elapsed استفاده نشده؟؟این پارامتر ها کاربردی ندارند زیرا این نوع easing بسیار منظم هستند و هیچ حرکت شتاب دار یا حرکت ناگهانی ای در اون دیده نمیشه و در صورتی که بخواهید در easing ها نوعی جست و خیز ایجاد کنید باید از این پارامترها و برخی از توابع ریاضیات استفاده کنید.

حالا این تابع رو آزمایش می کنیم...

خب حالا تابع easeInOutQuad رو امتحان می کنیم:

نکته :

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

و این تابع فقط جهت آشنایی با توابع easing به شما معرفی شد.

به تابع easeInOutElastic رو نگاه کنید:

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

میتونید خودتون به این پلاگین توابع دیگری رو اضافه کنید.

این صفحه هم مثال ها ی خوبی در مورد هر یک از حالتها داره.

امیدوارم این مطلب مورد استفاده شما قرار گرفته باشه.

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

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    لایک جالب بود :) :) 😀

  • ‏‏
    محمد امین حیدری(۱۰ بهمن ۱۳۹۲)

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

    یک هفته پست ثابت (فقط یک هفته) بعد از یک هفته دیگه بردارید چند میشه ؟

    • ‏‏
      لقمان آوند(۱۰ بهمن ۱۳۹۲)

      80 درصد هزینه ی این نوع تبلیغ در صفحه تبلیغاته ، مطلب ثابت در قالب لینک ثابت در بالای مطالب هست

  • ‏‏
    محمد امین حیدری(۱۰ بهمن ۱۳۹۲)

    من به صورت هفته ای میخوام

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram