آشنایی مقدماتی با کتابخانه GSAP

امروزه در دنیای وب اپلیکیشن ها، از انیمیشن ها برای نمایش بهتر و جذاب تر المان های یک صفحه استفاده ی زیادی می شود. برای این منظور می توان از کدهای CSS و خصوصیت animation استفاده کرد. به کمک این خصوصیت می توان انیمیشن های مختلفی ساخت. اما اگر بخواهیم به انیمیشن ها منطق خاصی بدهیم که با صفحه تعامل خاصی داشته باشد، نمی توان از این خصوصیت CSS به تنهایی استفاده کرد و باید آن را با زبان جاوااسکریپت به کار برد. به کمک جاوااسکریپت می توان تغییراتی در style های یک المان به وجود آورد. برای سهولت این کار کتابخانه های متعددی در جاوااسکریپت وجود دارد. در این میان، یکی از محبوب ترین کتابخانه ها، کتابخانه GSAP است.

GSAP یکی از کتابخانه های جاوااسکریپتی پر قدرت برای استفاده از انیمیشن در صفحات HTML است. این کتابخانه قابلیت ایجاد انیمیشن برای هر المانی در صفحه مثل div ها و svg ها را دارد. از ویژگی های GSAP که آن را نسبت به دیگر کتابخانه های جاوااسکریپتی برتر می سازد می توان به موارد زیر اشاره کرد:

• سادگی در استفاده
• سرعت بالای اجرای انیمیشن ها
• حجم بسیار کم کتابخانه
• وجود افزونه های متنوع برای کارهای مختلف در آن
• مستندهای (docs) خوب و کامل
• وجود نمونه کدهای متن باز (open source) فراوان
• جامعه کاربری (community) خوب

برای استفاده از این کتابخانه در پروژه خود کافیست از یکی از روش‌های زیر استفاده کنید:

• استفاده از CDN
• نصب توسط npm (یا yarn)
• دانلود و استفاده از فایل (source)

برای استفاده از CDN کافیست تگ زیر را در فایل html خود قرار دهید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js">
</script>

برای نصب این کتابخانه توسط npm نیز کافیست دستور زیر را در پروژه خود وارد کنید:

npm install gsap

برای دانلود سورس کد نیز از لینک زیر استفاده کنید:

https://greensock.com/docs/v3/Installation

استفاده از GSAP بسیار آسان است. پس از وارد کردن GSAP به پروژه (توسط یکی از روش های بالا مثل CDN)، از دستور gsap برای دسترسی به متدهای مختلف این کتابخانه استفاده می کنیم. برای شروع تنها کافیست از یکی از متدهای from یا to استفاده کنید. متد to حالت فعلی المان را به حالت داده شده خواهد برد و متد from حالت داده شده را به حالت فعلی تغییر می دهد. برای درک بهتر به مثال زیر دقت کنید:

gsap.from("#selector",{ duration: 1, x: 20 });

در دستور بالا متد from دو ورودی می پذیرد. اولی selector المان (یا المان‌هایی) که قصد animate کردن آن‌ها را داریم (می توان به جای id از class یا هر selector دیگری استفاده کرد). ورودی دوم یک object  به عنوان options است که خصوصیات و تنظیمات انیمیشن مورد نظر را در خود جای داده است. در مثال بالا دو خصوصیت به نام‌های duration و x وجود دارند. duration مدت زمان اجرای انیمیشن را مشخص می کند. مقدار x نیز مشخص میکند که این انیمیشن باید اندازه خصوصیت transformX را از عدد 20 به مقدار فعلی تغییر دهد. این تغییر در مدت زمان تعیین شده (duration) اتفاق می افتد. فرض کنید مقدار تعریف شده برای خصوصیت transformX در المان های انتخاب شده، عدد 15 باشد (که با style یا یک کلاس CSS تعریف شده است). استفاده از متد from باعث می شود که مقدار این خصوصیت از عدد 20 به عدد 15 تغییر پیدا کند. (اگر مقداری برای x در نظر گرفته نشده باشد، GSAP مقدار پیشفرض 0 را برای آن در نظر خواهد گرفت). لازم به ذکر است این تغییر در مدت زمان 1 ثانیه انجام می شود.

همچنین می توان با استفاده از متد to اندازه x را از حالت فعلی به حالت دیگری تغییر داد:

gsap.to("#selector",{ duration: 1, x: 20 });

متدهای from و to دارای خصوصیات مختلف دیگری نیز هستند. می توان از اکثر خصوصیات CSS در این متد استفاده کرد. برای مثال به کدهای زیر دقت کنید:

gsap.from("#selector", {duration: 1, backgroundColor: "#4466DE"});
gsap.from("#selector", {duration: 1, width: "150px"});
gsap.from("#selector", {duration: 1, scale: 2});
gsap.from("#selector", {duration: 1, y: 150});
gsap.from("#selector", {duration: 1, opacity: 0.2});

همچنین options دارای یک سری خصوصیت دیگر برای کنترل انیمیشن است. به طور مثال می توان با استفاده از خصوصیت repeat تعداد تکرار انیمیشن را مشخص کرد:

gsap.from("#selector", {duration: 1, scale: 2, repeat: 3});
// use repeat: -1 for infinity repeat

با استفاده از خصوصیت yoyo می‌توان حالت رفت و برگشتی برای انیمیشن به وجود آورد:

gsap.from("#selector", {duration: 1, scale: 2, repeat: -1, yoyo: true});

با استفاده از خصوصیت delay می‌توان مدت زمانی برای تاخیر اجرای انیمیشن به وجود آورد:

gsap.from("#selector", {duration: 1, scale: 2, delay: 3});

با استفاده از خصوصیت ease می‌توان easing های مختلفی برای اجرای انیمیشن ایجاد کرد:

gsap.from("#selector", { duration: 1, scale: 2, ease: "bounce" });

کتابخانه GSAP دارای easing های پیش فرض مختلفی است. همچنین شما امکان ایجاد easing سفارشی را دارید. برای مشاهده easing های پیش فرض می توانید به این لینک از سایت رسمی GSAP مراجعه کنید.

در بالا ذکر شد که به جای استفاده از id میتوان از class به عنوان selector در GSAP استفاده کرد. در این صورت امکان دارد تعدادی المان به صورت همزمان شروع به اجرای انیمیشن داده شده کنند. گاهی اوقات نیاز است تا المان هایی که انیمیشن یکسانی را اجرا می کنند، با تاخیر نسبت به یکدیگر این کار را انجام دهند. برای این کار میتوان از خصوصیت stagger استفاده کرد:

tl.to(".selector", {duration: 1, scale: 1.5, stagger: 0.3});

فرض کنید می خواهیم یک المان ابتدا از 20 واحد جا به جا شده و سپس شفافیت (opacity) آن به 0.3 تغییر پیدا کند. GSAP دارای قابلیتی به نام timeline است که برای این منظور استفاده می شود. timeline امکان ایجاد و اجرای انیمیشن‌های مختلف به صورت زمان‌بندی شده و یکی پس از دیگری را به ما می‌دهد. برای ساخت یک timeline کافیست از دستور زیر استفاده کنید:

let tl = gsap.timeline({repeat: -1, repeatDelay: 0.5});

حال برای ساخت یک انیمیشن به جای استفاده از gsap از متغیر ساخته شده به نام tl استفاده می‌کنیم. به طور مثال به قطعه کد زیر توجه کنید:

tl.from(".selector", {duration: 1, scale: 0, stagger: 0.3, ease: "elastic"});
tl.to(".selector", {duration: 1, scale: 0, stagger: 0.3, ease: "bounce"});

در کد بالا، دو انیمیشن ایجاد شده که یکی پس از دیگری اجرا خواهند شد. حال اگر بخواهیم برای یک انیمیشن مقدار زمانی را به عنوان offset در نظر گرفته تا قبل از اجرای انیمیشن صبر کند، میتوان از پارامتر سومی در متدهای from یا to استفاده کرده و این مقدار زمان را به آن اختصاص داد. به طور مثال به کد زیر توجه کنید:

tl.to(".selector", {duration: 1, scale: 2, ease: "bounce"},"+=2");

مقدار +=2 باعث می شود که این انیمیشن 2 ثانیه پس از اجرای انیمیشن قبلی در timeline اجرا شود.

بدون شک GSAP یکی از قدرتمندترین کتابخانه های جاوااسکریپتی موجود برای استفاده از انیمیشن در صفحات html است. برای آشنایی بیشتر با این کتابخانه پیشنهاد می شود به مستندهای وبسایت رسمی این کتابخانه مراجعه کنید.