تا به حال به این فکر کردید که انیمیشن هایی که در صفحه مرورگر خود می بینید، چگونه ساخته شده اند؟

در این مقاله قصد داریم یکی از روش های ساخت انیمیشن تحت وب را با هم کار کنیم. روش های متعددی برای ساختن انیمشین در صفحات وب وجود دارد. تا چندین سال قبل ساخت انیمیشن با CSS انجام می شد و بعد از مدتی با فراگیرشدن JavaScript و تلفیق آن با CSS و فایل های SVG ، رنگ و بوی تازه ای را به صفحات وب آورده شد. حال با KUTE.js می توان به راحتی با استفاده از موتور اصلی آن یا پلاگین های آن ، انیمیشن هایی سازگار با تمام مرورگرها و بسیار انعطاف پذیر ساخت.

فقط با استفاده از موتور اصلی KUTE.js می توانید موارد زیر متحرک کنید با به اصطلاح animate کنید :

• property کدورت (Opacity Property)
• تمام property های تبدیلات (transforms) 2D به جز matrix ، انحراف دوگانه محور (double axis skew) و مقیاس دوگانه محور(double axis scale)
• تمام property های تبدیلات (transforms) 3D به جز matrix3d و rotate3d
• property های box model مانند: width ، height ، top و left
• property های color و backgroundColor
• انیمیشن های scroll

با استفاده از پلاگین CSS آن می توان موارد زیر را animate کرد :

• property های box model مانند margin ، padding ، borderWidth و غیره.
• property borderRadius
• property های متن مانند fontSize ،lineHeight، letterSpacing، wordSpacingو غیره.
• property های رنگ مانند :borderColor و  outlineColor
• backgroundPosition property

با استفاده از پلاگین SVG آن می توان موارد زیر را animate کرد :

Scalable Vector Graphics (به اختصار SVG) زبانی برای توصیف گرافیک ۲ بعدی و برنامه های گرافیکی در XML است. SVG  برای ایجاد گرافیک های برداری در صفحات وب بکار میرود و نقطه قوت آن نسبت عکس هایی با فرمت jpg و gif این است که با زوم روی عکس های SVG کیفیت آنها پایین نمی آید.

برای این که مطمئن شوید آیا مرورگر شما از SVG پشتیبانی می کند یا نه ، می توانید از این لینک لیست مرورگرهایی که SVG را ساپورت می کنند را ببینید.

• مسیرهایی که SVG به اصطلاح Morph می کند.
• تبدیلات SVG را به صورت قابل اعتمادتر و بهینه تری برای مرورگر(animate می کند)
• attribute های stroke در SVG

استفاده از KUTE.js

برای استفاده از KUTE.js ابتدا باید آن را در پروژه خود include کنید می توانید از لینک GitHub آن را دانلود کنید. هم چنین می توانید از طریق npm آن را نصب کنید:

npm install --save kute.js

(اگر کار با npm را بلد نیستید به این لینک مراجعه کنید)

شروع کار با KUTE.js

KUTE.js از دو متود اصلی استفاده می کند:

• ()to. که به شما این قابلیت را می دهد که property های CSS را روی یک عنصر بخصوص با تغییر دادن مقادیر آن ، متحرک سازید.

• با استفاده از ()fromTo. می توانید با تعریف کردن مقدار اولیه و ثانویه برای یک عنصر بخصوص ، آن را متحرک کنید.

KUTE.fromTo(

  element,

  {fromPropertyName:fromPropertyValue},

  {toPropertyName: toPropertyValue}

).start();

قابل ذکر است که به صورت پیش فرض انیمیشن فعال نمی شود ، بنابراین به فراخوانی متود ()start. نیاز خواهیم داشت.

هم چنین می توانید لغو ، توقف و ادامه دادن به انیمیشن از متودهای ()stop() ، .pause. و ()play. استفاده کنید. البته توجه داشته باشید که برای استفاده از این متود ها باید قبلش چک شود که آیا انیمیشن فعال است یا غیرفعال ،که براساس تصمیم گیری شود.

برای تغییر دادن چندین property هم می توانید مانند زیر عمل کنید :

KUTE.to(

  element,

  {

    propertyName1:propertyValue1,

    propertyName2:propertyValue2,

    propertyName3:propertyValue3,

  }

).start();

KUTE.fromTo(

  element,

  {

    fromPropertyName1:fromPropertyValue1,

    fromPropertyName2:fromPropertyValue2,

    fromPropertyName3:fromPropertyValue3

  },

  {

    toPropertyName1: toPropertyValue1,

    toPropertyName2: toPropertyValue2,

    toPropertyName3: toPropertyValue3

  }

).start();

داشتن کنترل این که چه زمانی انیمیشن شروع شود ، چه مدت به طول بیانجامد ، چند مرتبه اجرا شود و غیره، بسیار قابلیت های متداولی است که ما انتظار داریم.

KUTE.fromTo(element, {

  //from properties ...

}, {

  //to properties ...

}, {

  //options

  transformOrigin: '30% 50%',

  duration: 500,

  easing: 'easeInElastic'

}).start();

[iframe src=”//codepen.io/navidagz/embed/JEzQJR/?height=425&theme-id=0&default-tab=css,result&embed-version=2″ width=”100%” scrolling=”no”]

برای اعمال کردن یک انیمیشن به چندین عنصر از متودهای()allTo. و ()allFromTo. استفاده می کنیم که کد زیر بیانگر آن است :

var sparklingStars = KUTE.allFromTo(stars, {

  opacity: 0.1, //start value 1

  scale: 0.1  //start value 2

}, {

  opacity: 1, //end value 1

  scale: 1.2 //end value 2

}, {

  //options

  offset: 200,

  repeat: 4,

  yoyo: true

});



//start the animation

sparklingStars.start();

[iframe src=”//codepen.io/navidagz/embed/egXwrN/?height=470&theme-id=0&default-tab=css,result&embed-version=2″ width=”100%” scrolling=”no”]
در استفاده از ()allTo. و ()allFromTo. امکان این را داریم با offset همزمانی اعمال را از  بین ببریم، یعنی تاخیر بیاندازیم.

برای اینکه بتوانیم که چندین انیمیشن را در قالب یک یک انیمیشن کلی نمایش دهیم می توانیم از متود ()chain. استفاده کنیم. به مثال زیر در CodePen توجه کنید.

[iframe src=”//codepen.io/navidagz/embed/XpGLjW/?height=452&theme-id=0&default-tab=css,result&embed-version=2″ width=”100%” height=”452″ scrolling=”no”]

در این مقاله سعی شد که کلیات کار با KUTE.js پوشش داده شود. ولی می توانید با مراجعه به سایت آن به آموزش های بیشتر دسترسی داشته باشید.