آموزش جامع کتابخانه BounceJs

کتابخانه Bounce.Js از سه راه قابل دانلود است.

راه اول) به‌وسیله Bower از دستور زیر در کنسول استفاده نمایید:

bower install bounce.js

راه دوم) به‌وسیله Npm از دستور زیر در کنسول استفاده نمایید:

npm install bounce.js

راه سوم) همچنین می‌توانید از طریق این لینک فایل‌ zip آخرین ورژن bounce.js را دانلود کنید.

ساخت انیمیشن با کتابخانه Bounce.Js

برای ایجاد انیمیشن ابتدا باید یک نمونه از کلاس Bounce بسازید. به شکل زیر:

var bounce = new Bounce();

شی‌ء Bounce همان چیزی است که شما برای ساخت انیمیشن خود از کامپوننت های مختلفی مثل scale و rotate وtranslate  و  skew استفاده می‌کنید. این شیء می‌تواند به‌عنوان یک keyframe مشخص نام‌گذاری شود تا در آینده از آن در css استفاده نمایید، البته در جاوا اسکریپت نیازی به این کار نیست.

اضافه کردن کامپوننت‌های انیمیشن

همان‌طور که در بالا گفته شد شما فقط با استفاده از Bounce.js می‌توانید از کامپوننت های مختلفی مثل scale و rotate وtranslate  و  skew استفاده می‌کنید تا انیمیشن‌های شخصی خودتان را بسازید. همه‌ی این توابع، گزینه‌ها یا «Options» رایجی را از شما می‌گیرند. در مثال‌های متفاوت به‌صورت مفصل توضیح خواهیم داد.

متدها در کتابخانه Bounce.Js

متد Scale

با استفاده از این متد می‌توانیم انیمیشنی توسط تغییر سایز المان مورد نظر بسازیم. به مثال زیر توجه کنید:

var bounce = new Bounce();
bounce.scale({
  from: { x: 0.5, y: 0.5 },
  to: { x: 1, y: 1 }
});

در اینجا برای مقادیر from و to مقیاس المان مورد نظر به‌وسیله x و y که عرض و ارتفاع هستند به‌عنوان مقیاس در نظر گرفته شده‌اند. در مثال بالا انیمیشن این‌گونه خواهد بود که المان موردنظر از سایز نصف به سایز کامل می‌رسد.

متد Rotate

اگر بخواهیم انیمیشن چرخشی داشته باشید از این متد استفاده می‌کنیم. به مثال زیر توجه کنید:

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});

مقادیر ۰ و ۹۰ برای from و to به‌عنوان درجه تعریف شده‌اند. المان موردنظر در انیمیشن بالا به‌اندازه ۹۰ درجه در راستای حرکت عقربه‌های ساعت می‌چرخد.

متد Translate

برای جابجایی المان از این متد استفاده می‌شود.

var bounce = new Bounce();
bounce.translate({
  from: { x: 0, y: 0 },
  to: { x: 100, y: 0 }
});

مقادیر در نظر گرفته شده برای from و to موقعیت المان در صفحه را نشان می‌دهد. واحد مقادیر نیز پیکسل است. در مثال بالا المان موردنظر ۱۰۰ پیکسل به سمت راست حرکت می‌کند.

متد Skew

برای کج کردن یک المان از این متد استفاده می‌شود.

var bounce = new Bounce();
bounce.skew({
  from: { x: 0, y: 0 },
  to: { x: 20, y: 0 }
});

مقادیر در نظر گرفته شده برای from و to مقدار کج بودن المنت را با واحد درجه مشخص می‌کنند. در مثال بالا المان موردنظر، در محور افقی ۲۰ درجه کج می‌شود.

ویژگی‌های رایج انیمیشن در کتابخانه Bounce.Js

تمامی متدهای بررسی شده در بالا از ۵ ویژگی زیر پشتیبانی می‌کنند.

• ویژگی Duration
• ویژگی Delay
• ویژگی Easing
• ویژگی Bounces
• ویژگی Stiffness

کاربرد ویژگی Duration

با استفاده از این ویژگی مدت زمانی که طول می‌کشد انیمیشن اجرا شود را در واحد میلی ثانیه تعیین می‌کنیم. به‌صورت پیش‌فرض ۱۰۰۰ میلی ثانیه یا ۱ ثانیه در نظر گرفته شده است. نحوه استفاده به شکل زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 },
    duration:6000
});

کاربرد ویژگی Delay

با استفاده از این ویژگی مدت زمان تأخیر در اجرای انیمیشن، در واحد میلی ثانیه تنظیم می‌کنیم. به‌صورت پیش‌فرض صفر میلی ثانیه است. به مثال زیر توجه بفرمایید.

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 },
    delay:1000
});

در مثال بالا ۱۰۰۰ میلی ثانیه تأخیر در نظر گرفته شده است.

کاربرد ویژگی Easing

به‌طور کلی easing میزان تغییر یک پارامتر را باگذشت زمان مشخص می‌کند. اشیاء در زندگی واقعی سریع شروع و متوقف نمی‌شوند، همچنین با سرعت یکسان حرکت نمی‌کنند. به‌عنوان مثال در زندگی واقعی، با سرعت درِ کمد را باز می‌کنیم ولی آن را آرام می‌بندیم. برای این ویژگی مقادیر bounce و sway و hardbounce و hardsway قابل استفاده هستند و به‌صورت پیش‌فرض مقدار bounce در نظر گرفته شده است. دقت کنید که مقادیر باید به‌صورت استرینگ «string» وارد شوند. نحوه استفاده به شکل زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 },
    easing: "hardbounce"
});

کاربرد ویژگی ‌Bounces

با استفاده از این ویژگی تعداد دفعاتی را تعیین می‌کنیم که المان پرش می‌کند. به‌صورت پیشرفت عدد ۴ در نظر گرفته شده است  نحوه استفاده به شکل زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 },
    bounces:20
});

کاربرد ویژگی Stiffness

در لغت به معنای سختی و خشکی است. میزان سخت یا نرم جابه‌جا شدن المان را مشخص می‌کند. مقدار آن باید عددی بین ۱ تا ۵ باشد. به‌صورت پیش‌فرض عدد ۳ در نظر گرفته شده است. نحوه استفاده به شکل زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 },
    stiffness:1
});

نحوه استفاده از انیمیشن‌ها در کتابخانه Bounce.Js

به‌محض اینکه انیمیشن خودتان را ساختید. برای اعمال به المان مورد نظر دو راه پیش رو دارید.

• برای انیمیشن نامی به‌عنوان keyframe انتخاب کنید و  در CSS از آن استفاده کنید.
• به‌صورت مستقیم، انیمیشن را در جاوا اسکریپت به المان موردنظر نسبت دهید.

راه اول) نحوه تنظیم نام به‌عنوان Keyframe به‌صورت زیر است. از متد define استفاده می‌کنیم.

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});
bounce.define("my-animation");

با استفاده از نام my-animation یک keyframe با همین نام ساخته می‌شود که می‌توانیم در CSS به‌صورت زیر استفاده کنیم:

animation: my-animation 1s linear both;

راه دوم) نحوه نسبت دادن انیمیشن در جاوا اسکریپت به شکل زیر است. از متد applyTo استفاده می‌کنیم. مقداری که به‌عنوان ورودی می‌گیرد، المان‌های موردنظر هستند.

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});
bounce.applyTo(document.querySelectorAll(".animation-target"));

به‌وسیله jquery نیز به شکل زیر است:

bounce.applyTo($(".animation-target"));

اگر به‌صورت مستقیم با جاوا اسکریپت انیمیشن را به المان‌ها اضافه کنید، می‌توانید از یک سری ویژگی استفاده نمایید:

• ویژگی loop
• ویژگی remove
• ویژگی onComplete

این ویژگی‌ها به‌صورت شیء به‌عنوان پارامتر دوم به applyTo داده می‌شوند.

کاربرد ویژگی loop

با استفاده از این ویژگی می‌توانید انیمیشن را به‌صورت بی‌نهایت اجرا کنید. دو مقدار true و false را می‌توان قرار داد. در حالت پیش‌فرض مقدار false در نظر گرفته شده است.  نحوه استفاده از این ویژگی به‌صورت زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 }
});

bounce.applyTo(document.getElementById("root") , {loop:true});

کاربرد ویژگی remove

با قرار دادن مقدار true انیمیشن پس از اتمام حذف می‌شود.در بعضی از مرورگرها اگر انیمیشن به پایان برسد و موقعیت المان شما با موقعیت اولیه‌اش متفاوت باشد، به حالت اولیه خودش باز می‌گردد. به‌صورت پیش‌فرض false است. عمداً از translate استفاده شده تا موقعیت عوض شود. به‌محض اجرا شدن انیمیشن المان به همان نقطه صفر می‌رود. به مثال زیر توجه بفرمایید:

var bounce = new Bounce();
bounce.translate({
    from: { x: 0, y: 0 },
    to: { x: 100, y: 0}
});

bounce.applyTo(document.getElementById("root")  , {remove:true});

کاربرد ویژگی onComplete

به‌عنوان ورودی یک تابع می‌گیرد. تعیین می‌کند که زمانی که انیمیشن به پایان رسید چه اتفاقات دیگری رخ دهد. نحوه استفاده به شکل زیر است:

var bounce = new Bounce();
bounce.scale({
    from: { x: 0.5, y: 0.5 },
    to: { x: 1, y: 1 }
});
bounce.applyTo(document.getElementById("root"), {
    onComplete: function () {
        alert("Animation Complete");
    }
});

 اگر از jquery استفاده می‌کنید. متد applyTo یک promise بر می‌گرداند که می‌توانید بعد از آن از یک then به‌عنوان onComplete استفاده کنید. به مثال زیر توجه بفرمایید:

bounce.applyTo($(".animation-target")).then(function() { 
  alert("Animation Complete"); 
});

نحوه حذف انیمیشن با یک دستور

می‌توان یک انیمیشن را به‌صورت دستی نیز حذف کرد. به مثال زیر دقت بفرمایید:

bounce.remove()

نحوه بررسی پشتیبانی مرورگر از Bounce.Js

با استفاده از دستور زیر می‌توانید بررسی کنید که آیا مرورگر از این کتابخانه پشتیبانی می‌کند یا خیر. مقدار برگشتی true یا false خواهد بود.

Bounce.isSupported()

چه مرورگرهایی از این کتابخانه پشتیبانی می‌کنند؟

مرورگرهایی که از ویژگی‌های transform سه بعدی و انیمیشن‌های keyframe پشتیبانی می‌کنند.

مثال کامل از کتابخانه Bounce.Js

دقت داشته باشید که در این مثال چند نوع انیمیشن ترکیب شده است.

var bounce = new Bounce();
bounce
    .translate({
        from: { x: -300, y: 0 },
        to: { x: 0, y: 0 },
        duration: 600,
        stiffness: 4
    })
    .scale({
        from: { x: 1, y: 1 },
        to: { x: 0.1, y: 2.3 },
        easing: "sway",
        duration: 800,
        delay: 65,
        stiffness: 2
    })
    .scale({
        from: { x: 1, y: 1 },
        to: { x: 5, y: 1 },
        easing: "sway",
        duration: 300,
        delay: 30,
    })
    .applyTo(document.querySelectorAll(".animation-target"));

اگر سؤال یا نظری دارید خوشحال می‌شویم در قسمت نظرات عنوان بفرمایید.