در 1 نوامبر 2019 ، پلت فرم انیمیشن GreenSock (GSAP) نسخه 3 منتشر شده ، که قابل توجه ترین ارتقاgrade آن تا به امروز است.
GSAP یک کتابخانه انیمیشن جاوا اسکریپت قدرتمند ، سازگار با عقب ، کارآمد و بالغ است که به شما امکان می دهد تقریباً هر چیزی را در وب متحرک کنید – مانند عناصر DOM ، اشیا J JS ، SVG ها ، ویژگی های CSS و غیره. ما قبلا GSAP را پوشش داده ایم ، به عنوان مثال در مجموعه مبتدیان و راهنمای افزونه ما طرفداران زیادی هستیم.
نحو بصری آن به توسعه دهندگان این توانایی را می دهد که بتوانند در مدت زمان نسبتاً کوتاهی و با حداقل مقدار کد ، برخی از جلوه های انیمیشن را به ذهن بسپارند.
در این مقاله ، من می خواهم برخی از ویژگی های عالی GreenSock 3 را برجسته کنم و شروع به کار با نحوه استفاده از آنها می کنم تا در کمترین زمان امکان حرکت به اینترنت را فراهم کنند.
What’s New in GreenSock 3
ویژگی های بیشتر و اندازه پرونده های کوچکتر
GreenSock با استفاده از ماژول های ES6 از ابتدا ساخته شده است. این هنوز هم دارای ویژگی های بیش از 50 ویژگی جدید کتابخانه است اما اندازه آن فقط نیمی است!
نحو متراکم برای کدگذاری سریع
اگر قبلاً از GSAP استفاده کرده باشید ، از قبل با نحو بصری و مبتدی پسندانه آن آشنا هستید. API جدید حتی ساده تر و سریعتر قابل یادگیری و استفاده است.
به عنوان مثال ، اکنون نیازی به تصمیم گیری در مورد اینکه آیا می خواهید از TweenLite یا TweenMax ، TimelineLite یا TimelineMax استفاده کنید ، تصمیم گیری نکنید. فقط یک شی وجود دارد ، gsap هدف – شی:
gsap.to(selector, {})
const tl = gsap.timeline()
همچنین، duration دیگر یک پارامتر از to()، from()، یا fromTo() روش ها ، اما در داخل تنظیم شده است vars هدف – شی. به طور خاص ، قدیمی
TweenMax.to(selector, 1, {})
تبدیل می شود
gsap.to(selector, {
duration: 1
})
بسیار خواناتر و همچنین انعطاف پذیر. در واقع ، اکنون می توانید تنظیمات را انجام دهید duration برای مثال با استفاده از یک تابع.
یکی دیگر از مزایای این API جدید ساده و ساده این است که انیمیشن های حیرت انگیز نسیمی برای کدگذاری هستند. نیازی به استفاده از قدیمی نیست staggerTo()، staggerFrom()، و staggerFromTo() زیرا شما می توانید عوامل اصلی را مستقیماً وارد کنید vars هدف از tweens منظم:
gsap.to(selector, {
x: 50,
duration: 1,
stagger: 0.5
})
برای انعطاف پذیری بیشتر ، می توانید از یک جسم مبهوت مانند این استفاده کنید:
gsap.to(selector, {
x: 50,
duration: 1,
stagger: {
amount: 2,
from: 'center'
}
})
سرانجام ، سهولت های GSAP همیشه عالی بوده اما کمی شفاف است. الان نه. GreenSock 3 دارای یک نحو مختصر و خواناتر برای تنظیم سهولت است. به عنوان مثال ، به جای:
Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut
شما به راحتی می نویسید:
'elastic'
'elastic.in'
'elastic.inOut'
ساده سازی دیگر شامل امکان جایگزینی برچسب ها با < نمادی برای نشان دادن زمان شروع انیمیشن که اخیراً اضافه شده است و > نمادی برای نشان دادن زمان پایان انیمیشن که اخیراً اضافه شده است. در زیر مثالی از نحوه استفاده از برچسب ها در جدول زمانی آورده شده است:
gsap.timeline()
.add('start')
.to(selector, {}, 'start')
.to(selector, {}, 'start+=0.5')
اکنون می توانید کد بالا را به صورت زیر بازنویسی کنید:
gsap.timeline()
.to(selector, {}, '<')
.to(selector, {}, '<0.5')
مقادیر پیش فرض وراثتی برای جدول زمانی
اگر مقادیر برخی از تنظیمات در جدول زمانی شما در کل کودک ، یکسان باقی بماند ، روزهایی است که باید این مقادیر را بارها و بارها بنویسید ، گذشته است. GreenSock 3 به شما امکان می دهد که این خصوصیات را یک بار در جدول زمانی والدین تنظیم کنید و آنها را کودک تویز به ارث می برد.
به عنوان مثال ، به جای نوشتن:
const tl = new TimelineMax()
tl.to(selector, 2, {
ease: Power2.easeInOut,
rotation: -180
})
.to(selector, 2, {
ease: Power2.easeInOut,
rotation: -360
})
اکنون می توانید به سادگی بنویسید:
const tl = gsap.timeline({defaults: {
duration: 2,
ease: 'power2.inOut'
}} )
tl.to(selector, {
rotation: -180
})
.to(selector, {
rotation: -360
})
فریم های کلیدی
کد GreenSock 3 شما با فریم های کلیدی مختصر تر و خواناتر می شود. Keyframes ، مفهومی که برای توسعه دهندگان CSS کاملاً آشنا است ، در مواردی که می خواهید عنصر یکسانی را به روش های مختلف متحرک سازی کنید بسیار عالی است. به جای ایجاد یک جدول جداگانه برای هر مرحله از انیمیشن ، اکنون می توانید یک آرایه از فریم های کلیدی را به {} vars شی object و تمام مراحل انیمیشن کاملاً در داخل همان توالی تعیین می شود. در اینجا مثالی از نحوه عملکرد آن آورده شده است:
gsap.to(selector, {keyframes: {
{x: 250, duration: 1},
{y: 100, duration: 1, delay: 0.5}
}})
توابع کمکی بیشتر
این آخرین نسخه از کتابخانه GreenSock همراه با مجموعه جدیدی است روشهای سودمندی پسندیدن snap()، که به شما امکان می دهد مقداری را به یک افزایش یا نزدیکترین مقدار در یک آرایه بریزید ، و random()، که ایجاد یک عدد تصادفی بر اساس پارامترها یا انتخاب یک عنصر به صورت تصادفی در یک آرایه و تعداد بیشتری از آن را نسیم می کند.
انیمیشن های ساده
در اینجا مثالی از استفاده از سه روش اساسی GSAP آورده شده است: to()، from()، و fromTo():
قلم را ببینید
GSAP3 به-از-به-مثالها توسط SitePoint (SitePoint)
بر CodePen.
GSAP برای انیمیشن های شبیه زندگی آسان می شود
سهولت اجزای اساسی انیمیشن هستند. آنها زمان بندی tweens را نشان می دهند و در نتیجه علاقه و طبیعی بودن حرکتی را که روی صفحه ایجاد می کنید ، اضافه می کنند.
GSAP به شما امکان می دهد تا با سهولت راحتی را اضافه کنید GreenSock Ease Equalizer، ابزاری مفید که نمایشی بصری از گزینه های تسهیل کننده GSAP را هنگام انتخاب و نیشگون گرفتن و کشیدن بهترین گزینه برای جلوه خاصی که دنبال می کنید ، ارائه می دهد.
بیایید سهولت را برای پرنده موسیقی خود امتحان کنیم:
قلم را ببینید
GSAP3 به عنوان مثال آسان می شود توسط SitePoint (SitePoint)
بر CodePen.
نمونه ای از انیمیشن Keyframe با GSAP
همانطور که در بالا اشاره کردم ، GreenSock 3 این امکان را به شما می دهد که تعدادی از tweens را روی همان عنصر به روش کارآمدتر و خواناتر با استفاده از keyframes پیاده سازی کنید.
مثالی در اینجا آورده شده است:
قلم را ببینید
GSAP3-keyframes-example توسط SitePoint (SitePoint)
بر CodePen.
استفاده از فریم های کلیدی GSAP روی عنصر پرنده SVG به من اجازه می دهد تا تعدادی از tweens را اعمال کنم بدون اینکه مجبور باشم هر tween را جداگانه بنویسم. مزیت این است که من نیازی به تکرار برخی از کدها ندارم – به عنوان مثال ، کد انتخاب ('.bird') یا هر یک از تنظیماتی که در طول انیمیشن ثابت باقی مانده است.
کنترل کنترل انیمیشن های پیچیده با جدول زمانی GSAP
تویین های GreenSock قدرتمند هستند و می توانید کارهای زیادی با آنها انجام دهید. با این حال ، برای اطمینان از اینکه یک tween یکی پس از دیگری حرکت می کند ، باید تنظیم کنید delay خاصیت توئین دوم با مقداری که مدت زمان توئین اول را در نظر بگیرد. با این حال ، انجام این کار می تواند حفظ کد انیمیشن شما را سخت کند ، به خصوص در انیمیشن های پیچیده تر. چه می شود اگر شما نیاز به اضافه کردن tweens بیشتر یا تغییر شماره دارید duration مالکیت در یکی از تأخیرها در یکی از tweens؟ سپس باید مقادیر همه یا بیشتر آنها را اصلاح کنید delay دارایی در tweens دیگر. اصلا عملی نیست.
رویکرد آسان تر ، پایدار و قابل نگهداری استفاده از این روش است جدول زمانی GSAP. با یک جدول زمانی ، تمام tweens های داخل آن به طور پیش فرض یکی پس از دیگری اجرا می شوند ، بدون نیاز به تاخیر.
باز هم ، اگر مشاهده کنید که حرکت طبیعی قسمتهای مختلف چگونه اتفاق می افتد ، به زودی خواهید فهمید که چگونه این قطعات همه به صورت مکانیکی و نسبت به یکدیگر حرکت نمی کنند. به احتمال زیاد ، برخی از قسمت ها در حالی که برخی دیگر در حال حرکت هستند شروع به حرکت می کنند. یا بعضی از قسمتها کمی قبل یا کمی بعد از بعضی قسمتهای دیگر متوقف می شوند. جدول زمانی GSAP چند گزینه مفید را در اختیار شما قرار می دهد تا به شما اجازه دهد شروع و پایان دوازدهم را در رابطه با یکدیگر تنظیم کنید. اینجا اند:
- زمان مطلق ، مانند یک عدد. مثلا،
2به این معنی است که tween بعدی دو ثانیه پس از شروع جدول زمانی متحرک می شود. - زمان نسبی با توجه به پایان کل جدول زمانی:
'+=2'یا'-=2'. این بدان معنی است که tween دو ثانیه پس از پایان جدول زمانی متحرک می شود یا به ترتیب دو ثانیه پایان خط زمان را همپوشانی می کند. - برچسب:
'myLabel'. tween در نقطه درج یک برچسب خاص متحرک می شود. اگر آن برچسب را ایجاد نکرده اید ، GSAP آن را به انتهای جدول زمانی اضافه می کند. - مربوط به برچسب:
'myLabel+=2'یا'myLabel-=2'. tween دو ثانیه بعد یا دو ثانیه قبل از پایان فیلم متحرک می شود'myLabel'به ترتیب برچسب بزنید. - در آغاز از جدیدترین انیمیشن اضافه شده (جدید در GSAP 3):
'<'. - در پایان از جدیدترین انیمیشن اضافه شده (جدید در GSAP 3):
'>'. - نسبت به شروع از جدیدترین انیمیشن اضافه شده (جدید در GSAP 3):
'<2'یا'<-2'. تووین متحرک می شود دو ثانیه بعد از شروع از جدیدترین انیمیشن اضافه شده یا به ترتیب دو ثانیه قبل از شروع انیمیشن اخیراً اضافه شده. - نسبی به آخر از جدیدترین انیمیشن اضافه شده (جدید در GSAP 3):
'>2'یا'>-2'. انیمیشن tween به ترتیب دو ثانیه پس از پایان انیمیشن اخیراً اضافه شده یا دو ثانیه قبل از پایان انیمیشن اخیراً اضافه شده.
یک مزیت نهایی استفاده از جدول زمانی این است لانه سازی. می توانید جدول زمانی بسازید که روی قسمت های خاصی از انیمیشن متمرکز باشد و آنها را درون یک جدول زمانی اصلی لانه کنید. این روش در مواقعی که لازم است قسمتهای مختلف انیمیشن را در یک کل هماهنگ و به موقع هماهنگ کنید ، واقعاً مفید است. همچنین روشی برای خواندن و نگهداری بیشتر کد شماست.
برای نمونه ای از نحوه استفاده از جدول زمانی تو در تو ، به نسخه ی نمایشی زیر نگاهی بیندازید:
قلم را ببینید
GSAP3-timeline-example توسط SitePoint (SitePoint)
بر CodePen.
برای تنظیم دقیق انیمیشن ، کاهش سرعت هنگام توسعه می تواند مفید باشد. برای انجام این کار ، از موارد زیر استفاده کنید:
master.timeScale(0.2)
اکنون کنترل زمان بندی های نسبی و سایر جزئیات بسیار ساده تر است. فراموش نکنید که این خط کد را در تولید حذف کنید!
پلاگین MotionPath
GSAP مجموعه ای از افزونه های شگفت انگیز را در اختیار شما قرار می دهد که به شما امکان می دهد جلوه های پیچیده و سرگرم کننده ای را در چند خط کد بصری ایجاد کنید.
یکی از جالبترین انواع انیمیشن هایی که می توانید به دست آورید ، نمایش یک شی object است که در یک مسیر روان حرکت می کند. دستیابی به آن حداقل بدون GSAP آسان نیست.
جدید افزونه MotionPath حرکت و حرکت هر عنصر در مسیر SVG را سریع و آسان می کند. ساده ترین اجرای پلاگین به این شکل است:
gsap.registerPlugin(MotionPathPlugin)
gsap.to('.bird', {
x: 20,
y: 50,
motionPath: '#path'
} )
تا زمانی که یک مسیر SVG با آن داشته باشید id از مسیر، شما خوب برای رفتن است. همچنین می توانید مقادیر مسیر را به جای مقدار وارد کنید id و کار خواهد کرد
همانطور که در نسخه ی نمایشی زیر مشاهده می کنید ، می توانید افکت را با استفاده از ویژگی های مختلفی که می توانید درون یک شی motionPath تنظیم کنید ، تنظیم کنید.
قلم را ببینید
GSAP3 – حرکت – مسیر – مثال توسط SitePoint (SitePoint)
بر CodePen.
برای کسب اطلاعات بیشتر در مورد ویژگی های عالی این پلاگین در دسترس شماست ، سری به قسمت اسناد.
ScrollTrigger جدیدترین افزونه GreenSock است که راه اندازی شده است و دارای قابلیت های شگفت انگیزی است که به شما امکان می دهد کنترل انیمیشن ها را به طور کارآمد و بصری کنترل کنید. مثلا:
- شما می توانید تقریباً هر چیزی را که در پیمایش هستید با این پلاگین متحرک کنید – مانند عناصر DOM ، CSS ، SVG ، WebGL ، بوم
- شما به راحتی می توانید از طریق انیمیشن اسکراب کنید
- می توانید عناصر را در جای خود سنجاق کنید
- شما می توانید انیمیشن های هوشمند جهت دار ایجاد کنید
و از تنظیمات تغییر اندازه صفحه نمایش و عملکرد عالی مراقبت می شود.
پس از وارد کردن افزونه به پروژه خود ، که به راحتی می توانید از طریق آن انجام دهید CDN در وب سایت GSAP، و ثبت آن به گونه ای که به طور یکپارچه با کتابخانه اصلی ادغام شود ، ساده ترین راه برای شروع استفاده از آن به شرح زیر است:
gsap.registerPlugin(ScrollTrigger)
gsap.to(element, {
x: 300,
duration: 2,
scrollTrigger: element
})
هنگامی که عنصر نشان داده شده در scrollTrigger ویژگی در داخل ویوپورت است ، انیمیشن اتفاق می افتد.
برای اجرای تنظیمات بی شمار این افزونه در دسترس است ، فقط از a استفاده کنید scrollTrigger شی به معنای واقعی مثلا:
قلم را ببینید
GSAP3-ScrollTriggerExample توسط SitePoint (SitePoint)
بر CodePen.
scrollTrigger شی object در نسخه ی نمایشی فوق شامل موارد زیر است trigger، عنصری است که می خواهید آن را متحرک کنید همانطور که در ویوپورت نشان داده می شود.
همچنین شامل start ویژگی ، که می توانید برای آموزش پلاگین در مورد موقعیتی که عنصر در هنگام پیمایش برای شروع انیمیشن باید در آن استفاده کنید ، استفاده کنید. در حالت موجود ، عنصر به محض برخورد قسمت بالای آن به مرکز دهانه نمای ، شروع به حرکت می کند.
با تنظیم کردن تنظیمات ، می توانید مشخص کنید که عنصر ماشه شما در حین پیمایش کاربران از آن عبور کند یا اینکه به موقعیت خود برگردند. toggleActions خاصیت scrollTrigger هدف – شی. GSAP گزینه های مختلفی را برای کنترل حداکثر در دسترس قرار می دهد ، که می توانید آنها را به عنوان آتش سوزی رویدادهای زیر تنظیم کنید: onEnter، onLeave، onEnterBack، و onLeaveBack. به طور پیش فرض ، این گزینه ها به شرح زیر تنظیم می شوند: 'play none none none'. در نسخه ی نمایشی فوق ، من انیمیشن خود را طوری تنظیم کردم که با استفاده از خط کد زیر ، تصویر هر بار که در موقعیت دلخواه در ویوپورت قرار دارد ، آشکار شود و وقتی دیگر مشاهده نمی شود ، پنهان شود: toggleActions: 'play reverse restart reverse'.
برای اطلاعات بیشتر در مورد این افزونه قدرتمند ، این منابع را بررسی کنید:
نتیجه
این معرفی سریع سطح آنچه را که می توانید با GreenSock انجام دهید خراشیده است. اگر کنجکاو هستید ، شروع به غواصی در دسترس و کامل آن کنید مستندات.
حالا دیگر به تو بستگی دارد. آخرین نسخه GreenSock 3 را بگیرید و چیزهایی را در اینترنت جابجا کنید!
