Greensock حرکت پذیری پلیٹ فارم کے ساتھ شروع کریں

Greensock حرکت پذیری پلیٹ فارم (GSAP) آپ کو کسی بھی چیز کو متحرک کرنے کے قابل بناتا ہے جو آپ جاوا اسکرپٹ کے ساتھ ڈوم، کینوس اور سی ایس ایس، ساتھ ساتھ آپ کے اپنے اپنی مرضی کے مطابق اشیاء بھی شامل کرسکتے ہیں.

GSAP بھی آسان کے لئے براؤزر کے متضاد کو حل کرنے میں مدد ملتی ہے صارف کی جانچ (اچھی ویب میزبانی یہاں بھی مدد کر سکتے ہیں)، آپ کو پیچیدہ متحرک تصاویر کو منظم کرنے کے لئے اشیاء استعمال کرنے کے قابل بناتا ہے، اور jQuery سے زیادہ 20 گنا تیزی سے چلتا ہے. یہ صنعت میں ایک معیاری بن گیا ہے، اور بے شمار ایوارڈ جیتنے والی ویب سائٹس میں استعمال کیا گیا ہے. تعمیر کرنے کے لئے سائٹ مل گیا؟ یہاں سب سے بہترین کا گائیڈ ہے ویب سائٹ بلڈر ارد گرد.

01. ایک بنیادی HTML فائل قائم کریں

GSAP سیکھنے کا بہترین طریقہ یہ ہے کہ اسے کارروائی میں دیکھیں. اس سبق میں آپ پلیٹ فارم کی کلیدی خصوصیات کے بارے میں سیکھیں گے کہ آپ کام کرنے والے مثالیں کے ساتھ آج آپ اپنے منصوبوں میں استعمال کر سکتے ہیں!

ایک بنیادی HTML فائل کو قائم کرکے شروع کریں، جہاں آپ اپنے جاوا اسکرپٹ کوڈ میں ڈرا سکتے ہیں. اے کے ساتھ ایک تصویر شامل لوگو کلاس. آپ GSAP استعمال کرنے کے لئے متحرک خصوصیات کو استعمال کریں گے کہ یہ کیسے کام کرتا ہے.

 & lt؛ ایچ ٹی ایم ایل Lang = "en" & gt؛
& lt؛ سر اور جی ٹی؛
  & lt؛ سٹائل اور جی ٹی؛
    .logo {چوڑائی: 150px؛ }
  & lt؛ / سٹائل اور جی ٹی؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
& lt؛ img کلاس = "لوگو"
src = "logo.svg" / & gt؛
& lt؛ سکرپٹ اور جی ٹی؛
// کوڈ یہاں
& lt؛ / script & gt؛
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛ 

02. GSAP لائبریری شامل کریں

اگلا، آپ کو اپنے ویب منصوبے پر GSAP کو شامل کرنے کی ضرورت ہوگی. آپ کے درمیان & lt؛ تصویری اور جی ٹی؛ اور & lt؛ سکرپٹ اور جی ٹی؛ ٹیگز، GSAP لائبریری کے لئے ایک لنک داخل کریں. آپ زپ کو براہ راست سے ڈاؤن لوڈ کرسکتے ہیں یہاں ، یا اسے پکڑو Github. (اگر آپ کو اشتراک کرنے کیلئے فائلیں ملیں تو، کامل کا انتخاب کریں کلاؤڈ اسٹوریج ). فائلوں کو بھی سپر فاسٹ Cloudflare CDN پر میزبان کی میزبانی کی جاتی ہے، لہذا سب سے آسان طریقہ میزبان فائلوں کو اس طرح استعمال کرنا ہے:

 & lt؛ سکرپٹ SRC = "https:/cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt؛ & lt؛ / script & gt؛ 

03. tweening کے ساتھ متحرک

Tweening ایک حرکت پذیری بنانے کے لئے وقت کے ساتھ قیمت کو تبدیل کرنے کا عمل ہے. مثال کے طور پر، ایک سے بی سے ایک اعتراض منتقل، اسے سکیننگ، یا گھومنے. آپ اپنی اپنی مرضی کے مطابق اقدار کو بھی دبا سکتے ہیں.

جائیداد کے درمیان سب سے آسان طریقہ استعمال کرنا ہے Tweenmax.to () فنکشن یہ ایک ہدف اعتراض، ایک مدت اور جائیداد / قدر جوڑے آپ کو متحرک کر رہے ہیں کی ضرورت ہے. کارروائی میں فنکشن کو دیکھنے کے لئے، ذیل میں کوڈ کی ہر لائنوں کو آزمائیں لوگو ہدف اعتراض کے طور پر:

 // موجودہ سے Tween ایکس پوزیشن
400 سے زیادہ 2 سیکنڈ تک
Tweenmax.to (". لوگو"، 2، {x: 400})؛
// موجودہ سے Tween Y پوزیشن
200 سے زائد اور 0 سے زائد افواج
دوسرا
Tweenmax.to (". علامت (لوگو)، 1، {Y: 200، دھندلاپن: 0}؛
// Tween X اور Y سے 100، پیمانے پر
1.5، اور 90 ڈگری گھومنے، 2 سے زیادہ
دوسرا
Tweenmax.to (". لوگو"، 2، {x: 100، y: 100، اسکیل: 1.5، گردش: 90}؛ 

04. سے اور سے ٹائن

آپ اپنی موجودہ قیمت سے ایک جائیداد کا استعمال کرتے ہوئے ایک نیا استعمال کرتے ہیں () ، لیکن آپ بھی tween کر سکتے ہیں سے اس کی موجودہ قیمت پر ایک قدر. مثال کے طور پر، اگر آپ لوگو ایکس پوزیشن پر شروع ہو رہا ہے 0. اور آپ اسے وہاں ختم کرنا چاہتے ہیں، آپ یہ کر سکتے ہیں:

 Tweenmax.from ("علامت (لوگو)، 2، {x: 400})؛ 

اس صورت میں، آپ کی علامت (لوگو) فوری طور پر منتقل ہوجائے گی x = 400. اور پھر ٹائن x = 0. . آپ شروع اور اختتامی اقدار دونوں کو بھی وضاحت کرسکتے ہیں، موجودہ اقدار کو نظر انداز کرتے ہیں سے() اس طرح:

 Tweenmax.fromto (". لوگو"، 2، {x: 400}، {x: 200})؛ 

05. آسان

آسانی سے حرکت پذیری کی 'طرز' ہے، جیسا کہ اقدار کی منتقلی کی رفتار کی مسلسل شرح کے بجائے، جس کی رفتار 'لکیری' کہا جاتا ہے، آپ کو رفتار کی شرح کو وکر کرنے کے لئے افعال لاگو کر سکتے ہیں. کیا وہ آہستہ آہستہ شروع کرتے ہیں اور آہستہ آہستہ تیز رفتار کرتے ہیں؟ کیا وہ ایک اچانک روکنے کے لئے آتے ہیں اور آخر میں تھوڑا سا اچھالتے ہیں؟ حرکت پذیری میں یہ سٹائل آپ کے کام کے کردار اور جذبات کو شامل کرتی ہیں. آپ اس طرح کی آسان کام کر سکتے ہیں:

 Tweenmax.to (". علامت (لوگو)، 2، {x: 100، y: 100، گردش: 90، آسانی سے: curseasein})؛ 

06. افعال اور اندر / آؤٹ

GSAP مختلف قسم کے کاموں میں شامل ہیں، جیسے پیچھے ، اچھال ، لچکدار ، گناہ ، سر ، اور ایکسپو . آپ نے یہ بھی محسوس کیا ہے کہ آسان فنکشن کی ایک جائیداد ہے آسان ، جس نے ہم اوپر قدم میں استعمال کیا. آپ بھی استعمال کر سکتے ہیں آسانی سے اور آسانی سے . یہ ظاہر ہوتا ہے کہ جہاں حرکت پذیری میں آسان وکر لاگو ہوتا ہے. نتائج کو دیکھنے کے لئے مندرجہ ذیل کوشش کریں:

 // اچھال کے ساتھ آسان
Tweenmax.to (". علامت (لوگو)، 2، {x: 100، y: 100، گردش: 90، آسانی سے: اچھال.})؛
لچکدار کے ساتھ اندر اور باہر کو آسان بنانا
Tweenmax.to (". علامت (لوگو)، 2، {x: 100، y: 100، گردش: 90، آسانی سے: لچکدار.}؛ 

07. تاخیر تاخیر

بعض اوقات آپ کسی حرکت پذیری کے آغاز میں تاخیر کرنا چاہتے ہیں، یا تو کسی دوسرے حرکت پذیری کے ساتھ مطابقت پذیر کرنے کے لئے، یا یہ واقع ہونے کے لئے انتظار کرنا چاہتے ہیں. آپ ایک اور ایک GSAP کی خصوصی خصوصیات کو استعمال کر سکتے ہیں تاخیر یہ کرنے کے لیے. مندرجہ ذیل کوڈ کو آزمائیں تاکہ آپ مخصوص وقت کے لئے Tween تاخیر کیسے کر سکتے ہیں:

 TweenMax.to (". لوگو"، 1، {Y: 100، آسانی سے: اچھال.})؛
// 1 سیکنڈ تک اس کے درمیان تاخیر
Tweenmax.to (". علامت (لوگو)، 1، {گردش: 90، آسانی سے: CORC.ESESESTOUT، تاخیر: 1})؛ 

08. کال بیک بیک افعال

آپ کے کوڈ کے ساتھ متحرک تصاویر کو ضم کرنے کے لئے، یہ جاننا ضروری ہے کہ واقعات واقع ہوتے ہیں، خاص طور پر جب حرکت پذیری ختم ہوجاتا ہے یا شروع ہوتا ہے. آپ استعمال کر سکتے ہیں OnComplete. اس کے لئے ایونٹ کال بیک. آپ یہ جاننا چاہتے ہیں کہ جب ایک بار پھر شروع ہوتا ہے تو OnStart. . اور آپ کسی اور حرکت پذیری کے ساتھ اپنے ٹائن کو بھی مطابقت پذیر کرنا چاہتے ہیں، یا کچھ اور اپنی مرضی کے مطابق اعتراض کو اپ ڈیٹ کرنے کے لئے ٹین اور اس کے نرمی کو استعمال کرنا چاہتے ہیں. کا استعمال کرتے ہیں onupdate. اس کے لئے کال بیک بیک. یہاں آپ کو کال بیک بیک کا استعمال کیسے ہے:

 Tweenmax.to (". علامت (لوگو)، 1، {
Y: 100،
آسانی سے: اچھال.
OnComplete: Tweencomplete.
})؛
تقریب tweencomplete () {
کنسول .log ("ٹائن مکمل")؛
} 

09. کال بیک بیک پیرامیٹرز

جب کال بیکس فائرنگ کرتے ہیں تو آپ اس کام کو ہینڈل کرنے کے لۓ معلومات کو منتقل کرنا چاہتے ہیں. آپ کو کالر یا مخصوص اقدار کے بارے میں معلومات پاس کرنے کی ضرورت ہوسکتی ہے. یہ آپ کو آپ کے انکوائریوں کو اپنے باقی کوڈ بیس کے ساتھ ضم کرنے کے قابل بناتا ہے. تمام پیرامیٹرز منظور ہیں کال بیک بیک + "پیرام" ، یہ ہے کہ onupdateparams. .

مندرجہ ذیل مثال میں، آپ مطلوبہ الفاظ کا استعمال کرتے ہوئے ٹائین کی ترقی کو ٹریک کرسکتے ہیں {خود} اور دیکھ سکتے ہیں کہ ایک صف کا استعمال کرتے ہوئے متعدد پیرامیٹرز کو کس طرح منتقل کرنا ہے:

 Tweenmax.to (". علامت (لوگو)، 1، {
Y: 100،
آسانی سے: اچھال.
Onupdate: TweenUpdate،
Onupdateparams: ["{خود}"،
"مکمل"]
})؛
تقریب tweenupdate (درمیان،
پیغام) {
وار فیصد = درمیان.
ترقی () * 100؛ // ترقی ()
ایک قیمت 0-1 ہے
کنسول .log (فی صد +.
"" + پیغام)؛
} 

10. کنٹرول حرکت پذیری

ٹھیک ہے، لہذا آپ اب Tweens پیدا کر سکتے ہیں اور tweens، آگ کال بیک اور پیرامیٹرز کو کم کرسکتے ہیں. لیکن آپ کس طرح حرکت پذیری کو کنٹرول کرتے ہیں؟ اکثر آپ دوسرے واقعات پر مبنی ان کو شروع کرنا چاہتے ہیں یا بند کرنا چاہتے ہیں.

اگر آپ کو ایک حرکت پذیری کو روکنے کی ضرورت ہے تو آپ استعمال کر سکتے ہیں روک دیں () طریقہ. اگر آپ ایک بار پھر دوبارہ شروع کرنا چاہتے ہیں تو استعمال کریں دوبارہ شروع کریں () . مکمل طور پر ایک ٹائن استعمال کو تباہ کرنے کے لئے مار ڈالو () . مندرجہ ذیل کوشش کریں اور دیکھیں کہ کیا ہوتا ہے:

 // بطور کا حوالہ دیتے ہیں
var tween = tweenmax.to (".
علامت (لوگو) "، 2، {y: 100، آسانی سے: اچھال.
آسان})؛
// فوری طور پر روک دیں
Tween.pause ()؛
// واقعہ پر شروع
Settimeout (فنکشن () {tween.
دوبارہ شروع کریں ()}، 1000)؛
// واقعہ پر ریورس حرکت پذیری
Settimeout (فنکشن () {tween.
ریورس ()}، 3000)؛ 

11. سی ایس ایس اور CSSPlugin.

CSSPlugin جب آپ استعمال کرتے ہیں شامل ہیں Tweenmax. . یہ ایک بہت بڑا وقت سیور ہے، اس میں یہ حرکت پذیری کے لئے ضروری ہے جب یہ براؤزر اور آٹو کا پتہ لگاتا ہے. CSSPlugin کیشنگ اور دیگر اندرونی چالوں کے ساتھ رنگ Tweens، SVG حرکت پذیری اور مرضی کے مطابق کارکردگی کو سنبھال سکتے ہیں - اور سی ایس ایس کے ذریعہ پوزیشنوں کا ترجمہ کرنے کے لئے یہ اکثر مؤثر ہے.

جب آپ نے استعمال کیا ہے تو آپ نے پہلے ہی اس کارروائی میں دیکھا ہے دھوکہ دہی اور پوزیشن متحرک تصاویر. یہ کسی خاص کوڈنگ کے بغیر کام کرتا ہے!

12. 2D اور 3D ٹرانسفارمر

سی ایس ایس ٹرانسفارمرز آپ کو پیمانے پر، ترجمہ اور skew گھومنے کے قابل بناتا ہے. وہ تیزی سے خوبصورت اثرات پیدا کرنے کے لئے 2D اور 3D دونوں میں کام کرتے ہیں. GSAP میں بلٹ ان ٹرانسفارمر خصوصیات شامل ہیں جیسے ایکس ، Y. ، گردش ، گردش x ، گردش ، skewx. اور پیمانے پر . ہم نے پہلے سے ہی کوشش کی ہے اس کے بجائے آپ کی تصویر پر مندرجہ ذیل ٹائن کو لاگو کرنے کی کوشش کریں:

 Tweenmax.to (". علامت (لوگو)، 3، {
ایکس: 100،
Y: 100،
اسکیل: 1.5،
گردش: 360،
آسانی سے: اچھال.})؛ 

13. ٹائم لائنز

ایک یا زیادہ ایرر آ گئے ہیں. براہ مہربانی ایرر پیغام سے نشان زدہ فیلڈز کو ٹھیک کریں. وہ معلومات لازمی ہیں جن کے ساتھ * کی علامت ہے. GSAP میں شامل ہے ٹائم لائن بالکل ایسا کرنے کے لئے اعتراض. آپ Tweens میں شامل کریں ٹائم لائن اعتراض اور استعمال کر سکتے ہیں پوزیشن ٹائم کے بعد پیرامیٹر ان کے وقت. آپ کو ایک دوسرے کے بعد ایک دوسرے کے ساتھ چلتا ہے، یا فرق ہے، یا اس سے بھی زیادہ سے زیادہ. کلاس کے ساتھ اپنے HTML پر ایک جوڑے کو مزید تصاویر شامل کریں logo2. اور logo3. بالترتیب.

یہ دیکھنے کے لئے کہ یہ کیسے کام کرتا ہے، مندرجہ ذیل کوشش کریں ٹائم لائن کوڈ:

 // ایک ٹائم لائن مثال بنائیں
var tl = نیا timelinemax ()؛
tl.add (tweenmax.to (". لوگو"، 1،
{x: 50})؛
// بنانے کے لئے حتمی "0" نوٹ کریں
یہ 0 سیکنڈ میں شروع ہوتا ہے.
tl.add (tweenmax.to (". logo2"، 1،
{Y: 100})، "0")؛
// یہ بنانے کے لئے "+.25" نوٹ کریں
ایک 25 سیکنڈ میں شروع
tl.add (tweenmax.to (". logo3"، 1،
{گردش: 180، Y: 50،
x: 50})، "+. 25")؛ 

14. ٹائم لائن کنٹرول

ساتھ ساتھ کنٹرول کرنے والے متحرک تصاویر، آپ بھی ٹائم لائنز کو کنٹرول کرنا چاہتے ہیں. خوش قسمتی سے، آپ کو روکنے، دوبارہ شروع کر سکتے ہیں اور جیسے ہی آپ حرکت پذیری کے ساتھ کرسکتے ہیں. آپ ٹائم لائن میں پیرامیٹرز بھی شامل کر سکتے ہیں دہرائیں ، Yoyo. اور پورے ٹائم لائن کے لئے کال بیک بیک شامل کریں. آپ استعمال کرتے ہوئے ٹائم لائن کی رفتار کو بھی کنٹرول کرسکتے ہیں Timescale. پراپرٹی. مندرجہ ذیل کوڈ کے ساتھ اپنے ٹائم لائن اعلامیہ کو تبدیل کرنے کی کوشش کریں کہ یہ کیسے کام کرتا ہے:

 وار TL = نیا ٹائمیلینیمیکس ({
// غیر یقینی طور پر دوبارہ کریں
دہرائیں: -1 -1،
Yoyo: سچ،})؛ 

15. حاصل کریں اور سیٹ کریں

ایک خصوصیت جو واقعی مفید ہے وہ tweens اور ٹائم لائنز کی خصوصیات کو ترتیب دینے اور ترتیب دے رہا ہے. اس طرح، آپ مجموعی طور پر ترقی اور مدت کو جان سکتے ہیں، یا GSAP اعتراض کے بارے میں دیگر معلومات جمع کر سکتے ہیں. اس کوڈ میں مثال کے طور پر آپ کر سکتے ہیں حاصل ٹائم لائن کی مدت، اور پھر سیٹ اس کی مدت اسے تبدیل کرنے کے لئے. یہ بھی tweens کے ساتھ ساتھ کام کرتا ہے. واقعات میں اصل وقت میں ردعمل کرنے کے لئے یہ ایک اور اچھا طریقہ ہے، اور مکھی پر متحرک تصاویر میں ترمیم کریں. اپنے پچھلے ٹائم لائن کوڈ کے بعد درج ذیل میں شامل کریں:

 // موجودہ مدت حاصل کریں
ٹائم لائن
کنسول .log (TL. آرڈر ())؛
// 5 سیکنڈ تک مدت کا تعین کرتا ہے
2 سیکنڈ انتظار کے بعد
ترتیب (فنکشن () {
TL. آرڈر (5)؛
}، 2000)؛ 

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر میں شائع کیا گیا تھا. مسئلہ 279 خریدیں یا سبسکرائب .

مزید پڑھ:

• GSAP کے ساتھ سپر چارج SVG حرکت پذیری
• HTML5 پر اثرات متحرک تصاویر کے بعد برآمد کریں
• تمام آلات کے لئے پیمانے پر متحرک تصاویر کیسے بنائیں