همه چیز درمورد پلتفرم GreenSock Animation یا GSAP


[تعداد: 1    میانگین: 5/5]

GreenSock Animation Platform یا GSAP یک کتابخانه قدرتمند جاوااسکریپ است که برنامه نویسان فرانت‌اند و طراحان را قادر میسازد تا انیمیشن های قدرتمند برپایه جدول زمانی (timeline) بسازند. این ابزار اجازه کنترل دقیقتر بر روی سکانس های انیمیشن ها را نسبت به محدودیت های موجود در استفاده از ویژگی هایی مثل keyframe و animation موجود در CSS میدهد.

بهترین قسمت این کتابخانه این است که دارای استفاده آسان و حجم کم است.

با GSAP شما میتوانید با حداقل، یا حتی بدون داشتن دانش جاوااسکریپت شروع به ساخت انیمیشن های جذاب کنید.

این راهنما به شما طریقه راه اندازی و استفاده از امکان TweenMax موجود در  GSAP و همچنین کمی از پلاگین DrawSVG موجود در Club GreenSock را آموزش میدهد. هر کدام از مثال های زیر یک لینک به کدهای آن در CodePen دارند تا بتوانید همزمان با مطالعه کدها را در تب دیگری مشاهده کنید.

شروع کنیم!

قبل از شروع به کد زدن، ما اول نیاز داریم تا GSAP را به فایل HTML خود اضافه کنیم. برای این کار شما نیاز به لینک CDN کتابخانه TweenMax دارید. شما میتوانید لینک های مرتبط را از این لینک پیدا کنید.

توجه: CDN مخفف Content Delivery Network است. این بدان معنی است که به جای میزبانی پرونده های JavaScript در سایت شما، یک منبع خارجی مانند CloudFlare می تواند آنها را برای شما میزبانی کند.

پس از پیوند CDN، آن را در برچسب <script> در انتهای فایل HTML خود قرار دهید:

<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js”></script>

این تنها کاری است که شما برای شروع کار نیاز دارید! اگر از محیط توسعه آنلاین مانند CodePen استفاده می کنید، می توانید GSAP را با ویرایش تنظیمات نصب کنید.

Click the gear icon next to the JS text editor and search for TweenMax to install it in CodePen

درک Tweens

Tweens ها توابع اصلی انیمیشن درون GSAP هستند. برای تحریک هر شیء HTML، باید آن شی را انتخاب کنیم، ویژگی هایی را که برای حرکت آن می خواهیم، مدت زمان انیمیشن، توع جابجایی انیمیشن و سایر پارامترهای دیگر مانند زمان بندی تأخیر را تعریف کنیم.

به عنوان مثال، اگر می خواهیم رنگ مستطیل قرمز را به مشکی تغییر دهیم در حالی که آن را به پایین و به سمت راست نیز حرکت می کنیم، Tween آن به صورت زیر خواهد بود:

TweenLite.to(“#rectangle”, 2, {
left:100,
top: 75,
backgroundColor:”#000000″,
ease: Power4.easeIn
});

 

This tween gives us a rectangle that moves diagonally and changes color.

بیایید کد را تجزیه کنیم:

TweenLite به پرونده جاوا اسکریپت میفهماند که می خواهیم از GSAP برای انیمیشن استفاده کنیم. روش .to بلافاصله بعد از این امر نشان می دهد كه ما می خواهیم شیء ما از حالت ایستایی اصلی آن كه توسط HTML و CSS تعریف شده است، به حالت انیمیشن نهایی که توسط JavaScript تعریف شده حرکت كنیم.

به جای این می توانید از روش .from استفاده کنید. ما بعداً در این مقاله این موضوع را پوشش خواهیم داد.

در مرحله بعدی ، ما شی ای را که می خواهیم انیمیت کنیم تعریف می کنیم. که برای ما، این یک شی HTML با شناسه rectangle است.  که در کد ما به صورت “# rectangle” خواهد بود. ما باید مطمئن شویم که شیء ما درون کوتشین قرار دارد و از # برای نشان دادن اینکه ما شناسه شی را صدا میکنیم، استفاده میکنیم. هر شناسه ای می تواند استفاده شود تا زمانی که یک عنصر تعریف شده با آن شناسه در HTML شما باشد. همچنین توجه داشته باشید که کاما در زیر کوتیشن نهایی نیز مهم است. بدون آن، انیمیشن اجرا نمی شود.

2 پس از شناسه عنصر، مدت زمان دو ثانیه را معین میکند. بنابراین در این مثال، ما مدت انیمیشن را به مدت 2 ثانیه تعریف می کنیم. اگر می خواستیم طول آن نیم ثانیه باشد، در عوض مقدار را به 0.5 تغییر می دهیم.

پارامترهای موجود در داخل براکت ها هر یک از خصوصیاتی را که می خواهید آنرا انیمیت کنید نشان می دهد. در این مثال، ما ویژگی های CSS سمت چپ (left) و رنگ پس زمینه (background-color) را متحرک می کنیم. توجه کنید که چگونه هر یک از این خصوصیات مختلف از نام گذاری camelCase به جای علامت معمولی خط تیره استفاده شده در  CSS استفاده می کنند. تا زمانی که آنها را با کاما پس از مقدارآنها جدا کنید، می توانیدهرچقدر که می خواهید خواص مختلفی را در اینجا اضافه کنید.

آخرین ویژگی به نام سهولت انیمیشن است. GSAP با مجموعه ای از گزینه های مختلف برای حالت حرکت انیمیشن عرضه شده است که می توانید به انیمیشن های خود اضافه کنید.

در انیمیشن فوق، ما جابجایی Power4  را صدا میزنیم تا به انیمیشن جابجایی easeIn ببخشد. در اینجا می توانید طیف گسترده ای از گزینه های جابجایی را در اسناد مربوطه مشاهده کنید.

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

Tween پایه اساسی انیمیشن های GSAP است. شما می توانید در اینجا نمونه ای از این Tween را در CodePen آزمایش کنید.

اگر می خواهید انیمیشن های یک مرحله ای را انجام دهید، Tween عالی است اما اگر می خواهید دنباله های چند مرحله ای ایجاد کنید ، جدول زمانی (گاه شمار) بهترین گزینه است.

انیمیشن های گاهشمار

اگر تاکنون از انیمیشن یا نرم افزاری نمونه سازی مانند After Effects یا Principle استفاده کرده اید، قبلاً با انیمیشن های گاهشمار آشنا هستید. جدول زمانی سنتی معمولاً یک سری انیمیشن است که پشت سر هم یا همزمان اتفاق می افتد. جدول زمانی در GSAP متفاوت نیست.

A visualization of a timeline in After Effects. GSAP timelines are not much different.

برای استفاده از جدول زمانی، ابتدا باید یک متغیر را در بالای فایل JavaScript خود از نوع TimelineLite تعریف کنید:

var tl = new TimelineLite;

برای شکستن خط به خط کد بالا، باید بدانید که var کوتاه  شده کلمه variable (متغیر) است. اگر با یک متغیر آشنا نیستید، به آن به صورت یک خلاصه از قطعه کدی بزرگتر فکر کنید. در این حالت متغیر جدیدی را به عنوان tl تعریف کردیم و آن را برابر با یک TimelineLite جدید قرار دادیم. این بدان معنی است که هر بار که ما از tl در کد خود استفاده میکنیم، گویا از یک نمونه از  TimelineLite استفاده کرده ایم.

توجه داشته باشید که می توانیم tl را با  هر عبارتی که دوست داریم جایگزین کنیم. من از tl استفاده می کنم زیرا کوتاه شده TimelineLite است. این کار بسیار مفید است زیرا اگر چندین گاه شمار در پرونده خود داشته باشیم، می توانیم به متغیرها برای جلوگیری از سردرگمی اسامی منحصر به فردی بدهیم.

اکنون بیایید اولین انیمیشن منا را با استفاده از TimelineLite به جای TweenLite دوباره بسازیم تا ببینیم چگونه این کار شدنی است.

var tl = new TimelineLite;tl.to(“#rectangle”, 2, { 
 x:100, 
 y:75,
 backgroundColor: “#000000”,
 ease: Power4.easeIn
})

 

This tween gives us a rectangle that moves diagonally and changes color.

This tween gives us a rectangle that moves diagonally and changes color.

متوجه خواهید شد که این خیلی متفاوت با انیمیشن TweenLite بالا نیست. تنها تفاوت واقعی این است که به جای بیان کردن TweenLite.to از tl.to استفاده می کنیم. همچنین متوجه خواهید شد که ما به جای ویژگی های CSS چپ و بالا از مختصات x و y استفاده می کنیم. که این کم و بیش همان رفتار را خواهد داشت.

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

برای این انیمیشن دوم، اجازه دهید مقیاس مستطیل را 150٪ افزایش دهیم و پس از اتمام اولین انیمیشن خاکستری شود. برای این کار ، زیر اولین انیمیشن خود بلاک کد دیگری را اضافه خواهیم کرد. روی هم رفته اینگونه میشود:

var tl = new TimelineLite;tl.to(“#rectangle”, 2, { 
 x:100, 
 y: 75,
 backgroundColor: “#000000”,
 ease: Power4.easeIn
}).to(“#rectangle”, 1, {
 scaleX: 1.5,
 scaleY: 1.5,
 backgroundColor: “#454545”,
 ease: Back.easeOut.config(1.7)
});

 

We’re now tethering two animations together in a timeline.می توانید ببینید که این بلاک دوم کد tl.to را در ابتدای جدول زمانی ندارد. در عوض، فقط .to دارد.

این امر به این دلیل است که انیمیشن های چندگانه در یک جدول زمانی تا زمانی که با نقطه ویرگوا از هم جدا نشوند، می توانند به هم وصل شوند

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

همچنین توجه خواهید کرد که ما از دو خاصیت جدید، مقیاسX و مقیاسY استفاده می کنیم. این خصوصیات دقیقاً مانند اسامی آنها رفتار می کنند ، اندازه یک شی را با مقیاس درصد افزایش می دهند. در این حالت ، 1.5 معادل 150٪ است.

در آخر ، ما در اینجا از یک تسهیل کننده منحصر به فرد با نام Back.easeOut.config(1.7) استفاده می کنیم. این سهولت با بیش افزایش بیش از حد مقدار در نظر گرفته شده و سپس بازگشت به مقدار نهایی، یک ریتم طبیعی به ما می دهد. در مورد این انیمیشن می بینیم که چگونه مستطیل کمی بزرگتر از 150٪ رشد می کند و بعد از آن اندازه خودش را کاهش میدهد.

تحرک اشیاء متعدد با TimelineLite

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

به عنوان مثال، اگر ما بخواهیم یک شیء HTML از یک دایره ایجاد کنیم و بعد از بزرگتر شدن مقیاس های مستطیل محو شود، کد آن مانند این است:

var tl = new TimelineLite;tl.to(“#rectangle”, 2, { 
 x:100, 
 y: 75,
 backgroundColor: “#000000”,
 ease: Power4.easeIn
}).to(“#rectangle”, 1, {
 scaleX: 1.5,
 scaleY: 1.5,
 backgroundColor: “#454545”,
 ease: Back.easeOut.config(1.7)
}).from(“#circle”, 1, {
 opacity: 0,
});

 

This latest block of code now has a circle fade in at the end of our animation.ما یک بلوک کد سوم را به انیمیشن خود اضافه کرده ایم که دایره را صدا می کند.

همچنین توجه داشته باشید که چگونه اکنون از روش .from استفاده می کنیم. این بدان معناست که انیمیشن دایره ای ما از غلظت رنگ 0% شروع می شود و سپس به 100٪ می رود.

میتوانید در عمل ببینید که وقتی انیمیشن شروع میشود، دایره مخفی است، زیرا دارای درجه غلظت 0٪ در آغاز بوده. بعد از اینکه مستطیل تغییر رنگ داد و مقیاس آن افزایش یافت، دایره در غلظت 100٪ همانطور که در نظر گرفته شده بود نمایان میشود.

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

DrawSVG

در کنار ویژگی های رایگان TweenLite و TimelineLite ، GSAP همچنین محتوای برتر (غیر رایگان) را ارائه می دهد که به شما امکان می دهد SVG ها را با آسانی دستکاری کنید. خوشبختانه، این افزونه ها را با جستجوی آن در تنظیمات CodePen (نماد چرخ دنده کنار ویرایشگر متن JS) می توانید به صورت رایگان در CodePen پیدا و از آن استفاده کنید.

افزونه DrawSVG انیمیشن دار کردن خطوط SVG را آسان می کند. برای نشان دادن این موضوع، ما می خواهیم یک SVG یک اسب شاخدار را که یک لباس کلاهدار به تن کرده را بکشیم. در اینجا می توانید کدهای موجود در CodePen مربوطه را نیز دنبال کنید.

The final result of animating the SVG lines.ابتدا باید SVG خود را به ویرایشگر متن وارد کنیم.

در مرحله بعد، باید به هرکدام از مسیرها شناسنامه بدهیم تا بتوانیم در جدول زمانی خود با هرکدام کار کنیم. اگر SVG پیچیده ای با یک سری خطوط مختلف انیمیشن داشته باشید، ممکن است مدتی طول بکشد. به خاطر سادگی، می خواهم اولین مسیر # unicorn1 را نامگذاری کنم و مسیر بعدی # unicorn2 و غیره را نامگذاری کنم تا همه آنها یک شناسه منحصر به فرد داشته باشند.

<!––An example of a path with an ID–>
<path id=”unicorn1″ class=”st0″ d=”M371.8,252.4c0,0,2.8,1.8,5,1.2″/>

اکنون که تمام مسیرهای ما دارای شناسه هستند، می توانیم به آن بپردازیم و شروع به توسعه انیمیشن گاهشمار کنیم. مانند قبل، ما نیاز به ایجاد یک متغیر به عنوان متغیر TimelineLite ما داریم:

var unicorndraw = new TimelineLite();

در این حالت، ما می خواهیم از متغیر unicorndraw استفاده کنیم.

آخرین مرحله ای که ما باید انجام دهیم ایجاد انیمیشن TimelineLite است که هر یک از مسیرهای فردی را فراخوانی می کند:

unicorndraw.from(“#unicorn1, #unicorn2, #unicorn3, #unicorn4, #unicorn5, #unicorn6, #unicorn7, #unicorn8, #unicorn9, #unicorn10, #unicorn11, #unicorn12, #unicorn13, #unicorn14, #unicorn15, #unicorn16, #unicorn17, #unicorn18, #unicorn19, #unicorn20, #unicorn21, #unicorn22, #unicorn23, #unicorn24, #unicorn25, #unicorn26, #unicorn27, #unicorn28, #unicorn29, #unicorn30, #unicorn31, #unicorn32, #unicorn33, #unicorn34, #unicorn35, #unicorn36, #unicorn37, #unicorn38, #unicorn39, #unicorn40, #unicorn41, #unicorn42, #unicorn43, #unicorn44, #unicorn45, #unicorn46, #unicorn47, #unicorn48, #unicorn49, #unicorn50, #unicorn51, #unicorn52, #unicorn53, #unicorn54, #unicorn55, #unicorn56, #unicorn57, #unicorn58, #unicorn59, #unicorn60, #unicorn61, #unicorn62, #unicorn63”, 3, {drawSVG:”0″, delay:”1″})

می توانید ببینید که این مانند انیمیشن .form در TimelineLite قبلی ماست. ما اشیاء جداگانه خود را یک به یک صدا میکنیم (در این حالت، ما بیش از یکی را در هر بار صدا میکنیم تا همه آنها به یکباره متحرک شوند) و مدت زمان انیمیشن را 3 ثانیه تعریف می کنیم.

تنها تفاوت این است که در داخل براکت ها، ما اکنون از DrawSVG: “0” استفاده می کنیم. این افزونه DrawSVG را فراخوانی می کند و هر مسیر را با مقدار اولیه 0 تعریف می کند. از آنجا که ما از یک روش .from استفاده می کنیم، مسیرها با مقدار 0 شروع می شوند و سپس در 3 ثانیه 100٪ متحرک می شوند.

You can play with different values to get a unique animation style.قطعه کد دیگر در داخل براکت ها delay: “1” است. این تعیین می کند چند ثانیه انیمیشن منتظر خواهد بود. در این حالت، ما اعلام می کنیم که انیمیشن قبل از اجرا 1 ثانیه صبر کند.

این سریعترین راه برای شروع کار با افزونه DrawSVG است اما می توانید مقادیر مختلفی را دستکاری کنید تا جلوه های جالبی بگیرید. برای کسب اطلاعات بیشتر در مورد این افزونه، سایت GSAP را بررسی کنید.

جمع بندی نهایی

GSAP ایجاد و دستکاری انیمیشن های گاهشمار را آسان می کند حتی اگر از JavaScript اطلاعات کمی داشته باشید. این مقدار کمی از انیمیشن های مختلفی بود که می توانید با GSAP انجام دهید. برای کسب اطلاعات بیشتر در مورد این کتابخانه و آزمایش با تکنیک های مختلف انیمیشن، از سایت Greensock دیدن کنید.

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

آموزشطراحی اپلیکیشن iOSطراحی اپلیکیشن اندرویدمقالات آموزشی

GreenSock AnimationGSAPانیمیشنطراحی سایت

سیده زهرا میرکاظمیمشاهده نوشته ها

دانشجوی مهندسی کامپیوتر، علاقه مند به ui/ux و front-end

2 دیدگاه

  • سلام
    من قالبی دارم که از این افزونه استفاده میکنه.اما وقتی راست چین میکنم .قسمتی که این افزونه داره نمایش داده نمیشه؟
    ممنون میشم راهنماییم کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *