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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 875 ۱۵ اردیبهشت ۹۴

در این مطلب میخوام یک ابزار زیبا بنام snabbt رو خدمت شما معرفی کنم و اونو آموزش بدم.

snabbt

 

با استفاده از این ابزار زیبا و جالب میتونین برای المنتهای موجود در صفحتون انیمیشنهای زیبایی قرار بدین و سایتتون رو زیبا نشون بدین. این ابزار به کتابخانه های دیگه نیازی نداره و همچنین از IE10 به بالا بخوبی پشتیبانی میکنه.

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به snabbt.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

اولین کاری که باید بکنید اینه که المنت مورد نظر خودتون رو قرار بدین. من در اینجا یک دکمه قرار میدم و id = Sample1 رو براش در نظر میگریم :

حالا یک استایل CSS براش در نظر میگیرم :

اولین کاری که میکنیم ، اینه که دکمه مورد نظر رو با استفاده از Javascript انتخاب کرده و درون یک متغیر میزاریم :

حالا من میخوام وقتی روی این دکمه کلیک شد ، یک اتفاق بیوفته. پس باید از رویداد Click استفاده کنم :

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

میبینید که اول المنت مورد نظری که میخوایم ابزار snabbt روی اون اعمال بشه رو قرار دادیم و بعد از اون هم یک {} قرار دادیم که میشه در اون کدهامون رو قرار بدیم. چون ما از یک رویداد استفاده کردیم و میخوایم که snabbt روی همون المنت اجرا بشه ، میتونین از کلمه کلیدی this هم در اینجا استفاده کنید ، بصورت زیر :

لیست کامل مواردی که میتونین از اونا استفاده کنید ، در اینجا آورده شده. میبینید که بعضی از موارد مثل position و width و ... وجود دارن و بعضی دیگر مانند fromWidth و fromPosition و ....

اونایی که from ندارن ، مشخص کننده حالت نهایی اون پارامتر هستن. مثلا برای position میتونین یک آرایه ی سه عضوی رو برای مقدارش قرار بدین. یعنی [x,y,z].

مثلا اگر بگید [100,0,0] یعنی میخوایم این المنت 100 پیکسل در راستای جهت x حرکت کنه. ولی مواردی که با from شروع میشن یعنی میخوایم وقتی که مرحله اول انیمیشن به پایان رسید ، با چه حالتی مرحله بعد شروع بشه. مثلا fromPosition مقدار پیش فرضش [0,0,0] هست ، یعنی بعد از هر بار تکرار به سر جای اولش بر میگرده و از اول شروع میشه. خودتون میتونین توضیحات بقیه رو مطالعه کنید.

خب حالا کدهای مرحله اول انیمیشن رو قرار میدم :

میبینید که با استفاده از خاصیت position مشخص کردیم که 100 پیکسل در جهت x حرکت کنه و با استفاده از rotation هم مشخص کردیم که 360 درجه در جهت محور z بچرخه. با استفاده از خاصیت easing هم میتونین نوع حالت انیمیشنتون رو مشخص کنید. در بالا spring قرار دادیم که شبیه به فنر هست و چند بار حول نقطه تعادل خودش نوسان میکنه. اگر مقداری با فیزیک آشنایی داشته باشید ، یک فرمول برای فنر وجود داره که به جرم و ثابت فنر بستگی داره. با استفاده از springConstant میتونین ثابت فنر رو مشخص کنید و با استفاده از springMass هم میتونین جرم رو مشخص کنید. هر چی جرم بیشتر باشه ، نوسان کمتری اتفاق میوفته و زودتر با حالت تعادل میرسه. حالا اگر خروجی بگیرید و روی دکمه کلیک کنید ، میبینید که به سمت راست حرکت میکنه و 360 درجه هم میچرخه ، ولی به سر جای اولش بر نمیگیره.

برای اینکار باید یک مرحله دیگه به اون اضافه کنید. بصورت زیر :

میبینید که یک نقطه ( . ) قرار دادیم و مجددا snabbt نوشتیم و کدهای مرحله دوم رو درون اون قرار دادیم. در این مرحله موقعیت نهایی دکمه رو [0,0,0] در نظر گرفتیم.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram