Mo.JS کے ساتھ خوبصورت کوڈڈ ویب انیمیشن بنانے کا طریقہ

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

پروگراموں کے مطابق متحرک تصاویر بنانے کے لیے لائبریریاں بھی دستیاب ہیں۔ تاریخی طور پر ، ویب کوڈرز نے سادہ حرکت پذیری بنانے کے لیے jQuery کا استعمال کیا ، لیکن جیسا کہ ویب نے تیار کیا اور۔ HTML5۔ نیا معیار بن گیا ، تازہ اختیارات نمودار ہوئے۔ حرکت پذیری کے لیے سی ایس ایس لائبریریاں نئے فریم ورک کے تحت ناقابل یقین حد تک طاقتور بن گئیں ، جاوا اسکرپٹ لائبریریوں کے ساتھ خاص طور پر براؤزر میں ویکٹر انیمیشن کے لیے ڈیزائن کیا گیا۔

---

---

آج ہم mo.js کو دیکھیں گے ، بلاک کے نئے بچوں میں سے ایک کوڈ سے خوبصورت امیجری بنانے کے لیے۔ ہم کچھ بنیادی افعال کا احاطہ کریں گے ، اس سے پہلے کہ ایک صارف ری ایکٹیو اینیمیشن سیریز بنائی جائے جو خوبصورت نمونے بنائے۔

Mo.js درج کریں۔

Mo.js آسانی سے ویب کے لیے موشن گرافکس بنانے کے لیے ایک لائبریری ہے۔ یہ ان لوگوں کے لیے خوبصورت چیزوں کی تخلیق کو آسان بنانے کے لیے ڈیزائن کیا گیا ہے جو بہت زیادہ کوڈ کے شوقین نہیں ہیں ، جبکہ تجربہ کار پروگرامرز کو ایک فنکارانہ پہلو دریافت کرنے کی اجازت دیتا ہے جسے وہ کبھی نہیں جانتے تھے۔ جیسا کہ اس کے نام سے پتہ چلتا ہے ، یہ مقبول جاوا اسکرپٹ پروگرامنگ زبان پر مبنی ہے ، حالانکہ اس کو اس طرح نافذ کیا گیا ہے کہ کوئی بھی بنیادی باتیں آسانی سے اٹھا سکے۔

اس سے پہلے کہ ہم مزید آگے بڑھیں ، آئیے ایک نظر ڈالتے ہیں کہ ہم آج کیا بنانے جا رہے ہیں:

ہم استعمال کریں گے۔ کوڈ پین۔ آج کے منصوبے کے لیے ، چونکہ یہ ہمیں ایک ہی براؤزر ونڈو میں ہر چیز پر کام کرنے کی اجازت دیتا ہے۔ اگر آپ ترجیح دیتے ہیں تو ، آپ ایک میں کام کر سکتے ہیں۔ اپنی پسند کا ایڈیٹر۔ اس کے بجائے اگر آپ مرحلہ وار سبق کو چھوڑنا چاہتے ہیں تو مکمل کوڈ یہاں دستیاب ہے۔

ایک نیا قلم ترتیب دیں ، اور آپ کو اس اسکرین سے خوش آمدید کہا جائے گا:

---

---

ہمارے شروع کرنے سے پہلے ، آپ کو کچھ تبدیلیاں کرنے کی ضرورت ہوگی۔ پر کلک کریں ترتیبات اوپر دائیں طرف آئیکن ، اور پر جائیں۔ جاوا اسکرپٹ۔ ٹیب.

ہم استعمال کرنے جا رہے ہیں۔ بابل بطور ہمارے کوڈ پری پروسیسر ، لہذا اسے ڈراپ ڈاؤن مینو سے منتخب کریں۔ بابل فراہم کرنے کے ساتھ ساتھ جاوا اسکرپٹ کو سمجھنے میں تھوڑا آسان بنا دیتا ہے۔ ECMAScript 6۔ پرانے براؤزرز کے لیے سپورٹ اگر آپ نہیں جانتے کہ اس کا کیا مطلب ہے ، فکر مت کرو ، یہ ہماری زندگیوں کو یہاں تھوڑا آسان بنانے والا ہے۔

---

---

ہمیں اس منصوبے میں mo.js لائبریری بھی درآمد کرنے کی ضرورت ہے۔ تلاش کرکے ایسا کریں۔ mo.js میں بیرونی سکرپٹ/قلم شامل کریں۔ ٹیکسٹ پرامپٹ ، اور اسے منتخب کرنا۔

جگہ جگہ ان دو چیزوں کے ساتھ ، کلک کریں۔ محفوظ کریں اور بند کریں۔ . ہم شروع کرنے کے لیے تیار ہیں!

Mo.js کے ساتھ بنیادی شکلیں۔

اس سے پہلے کہ ہم گرافکس شروع کریں ، آئیے ویو پین میں اس سفید پس منظر کے بارے میں کچھ کریں۔ اس کوڈ کو اس میں لکھ کر بیک گراؤنڈ کلر پراپرٹی کو تبدیل کریں۔ سی ایس ایس روٹی

body{
background: rgba(11,11,11,1);
}

شکل بنانا ایک سادہ عمل ہے ، اور اس کے پیچھے کا تصور پوری لائبریری کو چلاتا ہے۔ آئیے ایک ڈیفالٹ دائرے کی شکل مرتب کریں۔ اس کوڈ کو اس میں داخل کریں۔ جے ایس روٹی:

const redCirc = new mojs.Shape({
isShowStart:true
});

یہاں ، ہم نے ایک تخلیق کیا ہے۔ const نام کے ساتھ قدر ریڈ سرک اور اسے a کو تفویض کیا۔ نیا موج۔ شکل۔ . اگر آپ کوڈنگ کے لیے بالکل نئے ہیں ، تو یہاں بریکٹ آرڈر پر توجہ دیں ، اور آخر میں سیمیکولن کو مت بھولیں!

اب تک ہم سوائے کسی پیرامیٹرز کے گزر چکے ہیں۔ isShowStart: true۔ ، اس کا مطلب یہ ہے کہ یہ اسکرین پر ظاہر ہوگا اس سے پہلے کہ ہم اسے کوئی حرکت تفویض کریں۔ آپ دیکھیں گے کہ اس نے سکرین کے بیچ میں ایک گلابی دائرہ رکھا ہوا ہے۔

یہ حلقہ پہلے سے طے شدہ ہے۔ شکل mo.js کے لیے ہم اپنے کوڈ میں ایک لائن شامل کرکے اس شکل کو آسانی سے تبدیل کر سکتے ہیں:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

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

اقدار میں منتقل کرنے کا یہ عمل شکل اعتراض یہ ہے کہ ہم انہیں کس طرح اپنی مرضی کے مطابق بناتے ہیں۔ ابھی ہمارے پاس ایک مربع ہے جو واقعی بہت کچھ نہیں کرتا ہے۔ آئیے کچھ متحرک کرنے کی کوشش کریں۔

تحریک کی بنیادی باتیں۔

کچھ زیادہ متاثر کن لگنے والی چیز کو حاصل کرنے کے لیے آئیے ایک دائرہ قائم کریں ، جس کے ارد گرد سرخ رنگ کا دھبہ ہو اور اندر کوئی بھر نہ ہو۔

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

جیسا کہ آپ دیکھ سکتے ہیں ، ہم نے a بھی تفویض کیا ہے۔ چوڑائی سٹروک کی قیمت ، اور a رداس دائرے کے لیے. چیزیں پہلے ہی تھوڑی مختلف نظر آنے لگی ہیں۔ اگر آپ کی شکل اپ ڈیٹ نہیں ہورہی ہے تو ، یقینی بنائیں کہ آپ کے ارد گرد کوئی کوما یا سنگل کوٹیشن نمبر نہیں چھوٹ گئے ہیں۔ 'نیٹ' یا 'کوئی نہیں' ، اور یقینی بنائیں کہ آپ نے کلک کیا ہے۔ محفوظ کریں صفحے کے اوپری حصے میں.

آئیے اس میں ایک حرکت پذیری شامل کریں۔ اوپر کی مثال میں ، یہ سرخ دائرہ ظاہر ہوتا ہے جہاں صارف باہر کی طرف دھندلا جانے سے پہلے کلک کرتا ہے۔ ایک طریقہ جس سے ہم ایسا کر سکتے ہیں وہ ہے وقت کے ساتھ رداس اور دھندلاپن کو تبدیل کرنا۔ آئیے کوڈ میں ترمیم کریں:

radius: {15:30},
opacity: {1:0},
duration:1000

کو تبدیل کرکے۔ رداس پراپرٹی ، اور شامل کرنا۔ دھندلاپن اور دورانیہ پراپرٹیز ، ہم نے وقت کے ساتھ ساتھ شکل دینے کی ہدایات دی ہیں۔ یہ ہیں ڈیلٹا اشیاء ، ان پراپرٹیز کے لیے شروع اور اختتامی معلومات کا انعقاد۔

آپ دیکھیں گے کہ ابھی تک کچھ نہیں ہو رہا ہے۔ اس کی وجہ یہ ہے کہ ہم نے شامل نہیں کیا ہے۔ .کھیلیں() ہماری ہدایات پر عمل کرنے کے لیے بتانا۔ اسے آخری بریکٹ اور سیمیکولن کے درمیان شامل کریں ، اور آپ کو اپنے دائرے کو زندہ ہوتے ہوئے دیکھنا چاہیے۔

اب ہم کہیں جا رہے ہیں ، لیکن اسے واقعی خاص بنانے کے لیے ، آئیے کچھ مزید گہرائی کے امکانات پر نظر ڈالیں۔

Mo.js کے ساتھ آرڈر اور آسانی

ابھی ، جیسے ہی دائرہ ظاہر ہوتا ہے یہ ختم ہونا شروع ہوتا ہے۔ یہ بالکل ٹھیک کام کرے گا ، لیکن تھوڑا زیادہ کنٹرول رکھنا اچھا ہوگا۔

ہم یہ کے ساتھ کر سکتے ہیں۔ .پھر() فنکشن اپنا رداس یا دھندلاپن تبدیل کرنے کے بجائے ، آئیے ایک مقررہ وقت کے بعد تبدیل ہونے سے پہلے ، اپنی شکل کو جہاں سے شروع ہوتا ہے بنا لیں۔

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

اب ، ہماری شکل ان اقدار کے ساتھ ظاہر ہوگی جو ہم نے اسے تفویض کی ہیں ، 1000 ایم ایس کا انتظار کریں ، اس سے پہلے کہ ہم اس میں کوئی چیز ڈالیں۔ .پھر() فنکشن آئیے بریکٹ کے درمیان کچھ ہدایات شامل کریں:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

یہ کوڈ حرکت پذیری کا ایک اور اہم حصہ متعارف کراتا ہے۔ جہاں ہم نے ہدایات دی ہیں۔ پیمانے 1 سے 2 میں تبدیل کرنے کے لیے ، ہم نے سائن ویو پر مبنی نرمی بھی تفویض کی ہے۔ sin.in . Mo.js میں مختلف قسم کے نرمی کے منحنی خطوط ہیں ، جس میں اعلی درجے کے صارفین کے لیے اپنا اضافہ کرنے کی صلاحیت ہے۔ اس صورت میں ، وقت کے ساتھ پیمانہ اوپر کی طرف گھومنے والی سائن لہر کے مطابق ہوتا ہے۔

مختلف منحنی خطوط کو دیکھنے کے لیے ، چیک کریں۔ easings.net . اس کے ساتھ ملائیں چوڑائی ہماری مقررہ مدت کے دوران 0 میں تبدیل ہونا ، اور آپ کا بہت زیادہ متحرک غائب اثر ہے۔

شکلیں Mo.js میں ہر چیز کی بنیاد ہیں ، لیکن وہ صرف کہانی کا آغاز ہیں۔ آئیے دیکھتے ہیں۔ پھٹ جاتا ہے۔ .

Mo.js میں صلاحیت کے ساتھ پھٹ رہا ہے۔

TO پھٹ جانا۔ Mo.js میں ایک مرکزی نقطہ سے نکلنے والی شکلوں کا مجموعہ ہے۔ ہم ان کو اپنی تیار شدہ حرکت پذیری کی بنیاد بنانے جا رہے ہیں۔ آپ ڈیفالٹ برسٹ کو اسی طرح کال کرسکتے ہیں جس طرح آپ شکل بناتے ہیں۔ آئیے کچھ چنگاریاں بنائیں:

const sparks = new mojs.Burst({
}).play();

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

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

پہلے ہی ، ہم نے اپنی مرضی کے مطابق رداس اور اسپن کو اپنے پھٹ میں شامل کیا ہے:

انہیں چنگاریوں کی طرح دکھانے کے لیے ، آئیے پھٹ کے استعمال کی شکلیں تبدیل کریں ، اور پھٹنے سے کتنی شکلیں پیدا ہوتی ہیں۔ آپ یہ برسٹ کے بچوں کی خصوصیات کو مخاطب کرکے کرتے ہیں۔

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

آپ دیکھیں گے کہ چائلڈ پراپرٹیز ایک جیسی ہیں جیسا کہ ہم پہلے ہی کام کر چکے ہیں۔ اس بار ہم نے شکل کے طور پر ایک کراس کا انتخاب کیا ہے۔ یہ تمام 50 شکلیں اب ایک جیسی خصوصیات رکھتی ہیں۔ یہ کافی اچھا لگنے لگا ہے! یہ پہلی چیز ہے جب صارف ماؤس پر کلک کرے گا۔

پہلے ہی اگرچہ ہم دیکھ سکتے ہیں کہ ہمارے ابتدائی کا سرخ جھٹکا۔ ریڈ سرک شکل بہت طویل رہتی ہے. اس کی مدت کو تبدیل کرنے کی کوشش کریں تاکہ دونوں متحرک تصاویر ایک ساتھ مل جائیں۔ اسے کچھ اس طرح دیکھنا چاہیے:

ہم اپنی حرکت پذیری کو ختم کرنے سے بہت دور ہیں ، لیکن آئیے ایک لمحے کے لیے اسے صارف کا رد عمل بناتے ہیں۔

مرکزی تقریب۔

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

document.addEventListener( 'click', function(e) {
});

کوڈ کا یہ ٹکڑا ماؤس کے کلکس کو سنتا ہے ، اور ہمارے لیے بریکٹ میں جو بھی ہدایات ہیں ان کو پورا کرتا ہے۔ ہم اپنا اضافہ کر سکتے ہیں۔ ریڈ سرک اور چنگاریاں اس سننے والے پر اعتراض

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

وہ دو افعال جنہیں ہم یہاں کہتے ہیں۔ .tune () اور .دوبارہ چلائیں() . ری پلے فنکشن پلے فنکشن سے ملتا جلتا ہے ، حالانکہ یہ واضح کرتا ہے کہ جب بھی کلک کیا جائے تو اینیمیشن کو دوبارہ شروع ہونا چاہیے۔

کی دھن فنکشن ہماری آبجیکٹ کو اقدار میں منتقل کرتا ہے تاکہ جب چیزیں متحرک ہوں تو آپ اسے تبدیل کر سکیں۔ اس معاملے میں ہم پیج کوآرڈینیٹ میں گزر رہے ہیں جہاں ماؤس کو کلک کیا گیا تھا ، اور اس کے مطابق ہماری حرکت پذیری کی x اور y پوزیشن تفویض کی جا رہی ہے۔ اپنا کوڈ محفوظ کریں ، اور اسکرین پر کلک کرنے کی کوشش کریں۔ آپ ایک دو مسائل دیکھیں گے۔

سب سے پہلے ، ہماری ابتدائی حرکت پذیری اب بھی اسکرین کے وسط میں دکھائی دیتی ہے ، یہاں تک کہ اگر صارف کسی چیز پر کلک نہیں کرتا ہے۔ دوم ، حرکت پذیری ماؤس پوائنٹ پر متحرک نہیں ہوتی ہے ، بلکہ نیچے اور دائیں طرف آفسیٹ ہوتی ہے۔ ہم ان دونوں چیزوں کو آسانی سے ٹھیک کر سکتے ہیں۔

ہماری شکل اور پھٹ ہے .کھیلیں() ان کے متعلقہ کوڈ بلاکس کے اختتام پر۔ ہمیں اس کی مزید ضرورت نہیں ہے۔ .دوبارہ چلائیں() ایونٹ ہینڈلر میں بلایا جا رہا ہے۔ آپ .play () کوڈ کے دونوں بلاکس سے نکال سکتے ہیں۔ اسی وجہ سے ، آپ ہٹا سکتے ہیں۔ isShowStart: true۔ بھی ، جیسا کہ اب ہمیں شروع میں دکھانے کی ضرورت نہیں ہے۔

پوزیشننگ کے مسئلے کو حل کرنے کے لیے ہمیں اپنی اشیاء کے لیے پوزیشن ویلیو سیٹ کرنے کی ضرورت ہوگی۔ جیسا کہ آپ کو ہماری پہلی شکل سے یاد ہوگا ، mo.js انہیں بطور ڈیفالٹ پیج کے بیچ میں رکھتا ہے۔ جب یہ اقدار ماؤس پوزیشن کے ساتھ مل جاتی ہیں تو یہ آفسیٹ بناتی ہے۔ اس آفسیٹ سے چھٹکارا پانے کے لیے ، صرف ان لائنوں کو دونوں میں شامل کریں۔ ریڈ سرک اور چنگاریاں اشیاء:

left: 0,
top: 0,

اب صرف پوزیشن کی اقدار جو ہماری چیزیں لیتی ہیں وہ ماؤس پوزیشن کی اقدار ہیں جو ایونٹ سننے والے کے ذریعہ منظور کی جاتی ہیں۔ اب چیزوں کو بہت بہتر کام کرنا چاہیے۔

ایونٹ ہینڈلر میں اشیاء شامل کرنے کا یہ عمل یہ ہے کہ ہم اپنے تمام متحرک تصاویر کو کیسے متحرک کریں گے۔ اب سے ہر نئی چیز کو اس میں شامل کرنا یاد رکھیں! اب جب کہ ہمارے پاس بنیادی باتیں ہیں کہ ہم انہیں کیسے چاہتے ہیں ، آئیے کچھ بڑے اور روشن پھٹ شامل کریں۔

سائیکڈیلک حاصل کرنا۔

آئیے کچھ گھومنے والی مثلثوں سے شروع کریں۔ یہاں آئیڈیا ایک ہپنوٹک سٹروباسکوپک اثر بنانا تھا ، اور اسے ترتیب دینا دراصل بہت آسان ہے۔ ان پیرامیٹرز کے ساتھ ایک اور پھٹ شامل کریں:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

یہاں ہر چیز کافی حد تک واقف ہونی چاہیے ، حالانکہ کچھ نئے نکات ہیں۔ آپ دیکھیں گے کہ شکل کو مثلث کے طور پر متعین کرنے کے بجائے ہم نے اسے a کہا ہے۔ کثیرالاضلاع نمبر تفویض کرنے سے پہلے پوائنٹس اس کے پاس 3 ہے.

ہم نے بھی دیا ہے۔ بھریں رنگوں کی ایک صف کو کام کرنے کے لیے کام کریں ، ہر پانچواں مثلث واپس سرخ ہو جائے گا اور پیٹرن جاری رہے گا۔ کی اعلی قیمت۔ زاویہ ترتیب برسٹ اسپن کو اتنا تیز بناتی ہے کہ اس کا سٹروباسکوپک اثر پیدا ہو۔

اگر کوڈ آپ کے لیے کام نہیں کررہا ہے تو ، یقینی بنائیں کہ آپ نے ایونٹ سننے والے کی کلاس میں مثلث آبجیکٹ کو شامل کیا ہے جیسا کہ ہم نے پچھلی اشیاء کے ساتھ کیا تھا۔

خوبصورت نفسیاتی! آئیے اس پر عمل کرنے کے لیے ایک اور برسٹ شامل کریں۔

ڈانس پینٹاگونز۔

ہم تقریبا something ایک جیسی کوئی چیز استعمال کر سکتے ہیں۔ مثلث اس کے بعد پھٹ بنانے پر اعتراض۔ یہ قدرے ترمیم شدہ کوڈ چمکدار رنگ کے اوور لیپنگ اسپننگ ہیکساگون پیدا کرتا ہے۔

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

یہاں اہم تبدیلی یہ ہے کہ ہم نے a شامل کیا ہے۔ تاخیر 500ms کا ، تا کہ مثلث کے بعد تک پھٹ شروع نہ ہو۔ چند اقدار کو تبدیل کر کے ، یہاں خیال یہ تھا کہ پھٹ کو مثلث کی مخالف سمت میں گھماؤ۔ خوشگوار حادثے سے ، جب پینٹاگون نمودار ہوتے ہیں ، تکون کے اسٹروباسکوپک اثر سے ایسا لگتا ہے کہ وہ ایک ساتھ گھوم رہے ہیں۔

ایک چھوٹی سی بے ترتیب۔

آئیے ایک اثر شامل کریں جو بے ترتیب اقدار کا استعمال کرتا ہے۔ ان خصوصیات کے ساتھ ایک پھٹ بنائیں:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

اس پھٹ سے ایسی لکیریں بنیں گی جو سرخ ہو کر شفافیت کی طرف مائل ہو جائیں گی ، وقت کے ساتھ سکڑتی جائیں گی۔ جو چیز اس جزو کو دلچسپ بناتی ہے وہ یہ ہے کہ بے ترتیب اقدار اس کی کچھ خصوصیات کا تعین کرنے کے لیے استعمال ہوتی ہیں۔

کی ڈگری شفٹ بچے کی چیز کو ابتدائی زاویہ دیتا ہے۔ اس کو بے ترتیب کرنے سے ، یہ ہر کلک پر بالکل مختلف پھٹ دیتا ہے۔ بے ترتیب اقدار بھی کے لیے استعمال ہوتی ہیں۔ رداس اور تاخیر افراتفری اثر میں اضافہ کرنے کے افعال۔

یہاں اثر خود ہے:

چونکہ ہم یہاں بے ترتیب اقدار استعمال کر رہے ہیں ، ہمیں اپنے ایونٹ ہینڈلر کو آبجیکٹ کے لیے ایک اضافی طریقہ شامل کرنے کی ضرورت ہے۔

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

کی پیدا کریں () تقریب جب بھی بلایا جاتا ہے تازہ بے ترتیب اقدار کا حساب لگاتا ہے۔ اس کے بغیر ، شکل پہلی بار بلایا جانے والی بے ترتیب اقدار کا انتخاب کرے گی ، اور ہر آنے والی کال کے لیے ان اقدار کا استعمال جاری رکھے گی۔ یہ اثر کو مکمل طور پر برباد کردے گا ، لہذا اس بات کو یقینی بنائیں کہ آپ اسے شامل کریں!

آپ mo.js اشیاء کے تقریبا every ہر عنصر کے لیے بے ترتیب اقدار استعمال کر سکتے ہیں ، اور وہ منفرد حرکت پذیری بنانے کا ایک آسان طریقہ ہے۔

اپنی سنیپ اسٹریک کو واپس کیسے حاصل کریں۔

تاہم بے ترتیب پن متحرک حرکتوں کو متحرک کرنے کا واحد طریقہ نہیں ہے۔ آئیے دیکھتے ہیں لڑکھڑانا فنکشن

حیران کن لکیریں۔

دکھانے کے لیے کہ کیسے لڑکھڑانا فنکشن کام کرتا ہے ، ہم کچھ کیتھرین وہیل کی طرح کچھ بنانے جا رہے ہیں۔ ان پیرامیٹرز کے ساتھ ایک نیا برسٹ بنائیں:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

یہاں سب کچھ اب واقف ہے ، ایک پھٹ 50 بچے پیدا کرتا ہے جو سرخ یا نارنجی لکیریں ہیں۔ یہاں فرق یہ ہے کہ ہم پاس کرتے ہیں۔ تاخیر جائیداد a لڑکھڑانا (10) فنکشن یہ ہر بچے کے اخراج کے درمیان 10ms تاخیر کا اضافہ کرتا ہے ، جس سے یہ گھومنے والا اثر دیتا ہے جسے ہم تلاش کر رہے ہیں۔

اسٹگر فنکشن کسی بھی بے ترتیب اقدار کا استعمال نہیں کرتا ہے ، لہذا آپ کو a کی ضرورت نہیں ہوگی۔ پیدا کرنا اس بار ایونٹ ہینڈلر میں کام کریں۔ آئیے دیکھتے ہیں کہ ہمارے پاس اب تک کیا عمل ہے:

ہم یہاں آسانی سے رک سکتے ہیں ، لیکن آئیے اس پروجیکٹ کو ختم کرنے کے لیے صرف ایک اور برسٹ شامل کریں۔

سمارٹ اسکوائر۔

اس آخری پھٹ کے لیے ، آئیے آئتاکاروں کا استعمال کرتے ہوئے کچھ بنائیں۔ اس شے کو اپنے کوڈ اور ایونٹ سننے والے میں شامل کریں:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

یہ شے اس میں کوئی نئی چیز شامل نہیں کرتی جس پر ہم پہلے ہی کام کر چکے ہیں ، یہ محض یہ ظاہر کرنے کے لیے شامل کیا گیا ہے کہ کس طرح پیچیدہ جیومیٹرک پیٹرن کوڈ کے ذریعے آسانی سے بنایا جا سکتا ہے۔

یہ اس آبجیکٹ کا مطلوبہ نتیجہ نہیں تھا جب یہ سبق لکھنے کے آزمائشی مراحل میں بنایا گیا تھا۔ ایک بار کوڈ چلنے کے بعد ، یہ واضح ہوگیا کہ میں نے اس سے کہیں زیادہ خوبصورت چیز پر ٹھوکر کھائی ہے جو میں مقصد سے بنا سکتا تھا!

اس حتمی شے کو شامل کرنے کے ساتھ ، ہمارا کام ہو گیا۔ آئیے پوری چیز کو عمل میں دیکھیں۔

Mo.js: ویب اینیمیشن کے لیے ایک طاقتور ٹول۔

mo.js کا یہ آسان تعارف خوبصورت انیمیشن بنانے کے لیے درکار بنیادی ٹولز کا احاطہ کرتا ہے۔ ان ٹولز کو جس طرح استعمال کیا جاتا ہے وہ تقریبا anything کچھ بھی بنا سکتا ہے ، اور بہت سے کاموں کے لیے ویب لائبریریاں استعمال کرنے کا ایک آسان متبادل ہیں۔ فوٹوشاپ۔ ، اثرات کے بعد ، یا دیگر مہنگے سافٹ وئیر۔

یہ لائبریری ان لوگوں کے لیے مفید ہے جو پروگرامنگ اور ویب ڈویلپمنٹ دونوں میں کام کر رہے ہیں ، پروجیکٹ میں استعمال ہونے والی ایونٹ ہینڈلنگ آسانی سے ری ایکٹیو بٹن اور ٹیکسٹ ویب سائٹس یا ایپس میں بنانے کے لیے استعمال کی جا سکتی ہے۔ اس کے ساتھ لطف اٹھائیں: کوئی غلطیاں نہیں ہیں ، صرف خوشگوار حادثات!

بانٹیں بانٹیں ٹویٹ ای میل۔ کیا یہ ونڈوز 11 کو اپ گریڈ کرنے کے قابل ہے؟

ونڈوز کو دوبارہ ڈیزائن کیا گیا ہے۔ لیکن کیا یہ آپ کو ونڈوز 10 سے ونڈوز 11 میں منتقل کرنے پر راضی کرنے کے لیے کافی ہے؟

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• جاوا اسکرپٹ۔

مصنف کے بارے میں ایان بکلے۔(216 مضامین شائع ہوئے)

ایان بکلے جرمنی کے شہر برلن میں رہنے والے ایک آزاد صحافی ، موسیقار ، اداکار اور ویڈیو پروڈیوسر ہیں۔ جب وہ لکھ نہیں رہا ہے یا اسٹیج پر نہیں ہے تو ، وہ دیوانہ سائنسدان بننے کی امید میں DIY الیکٹرانکس یا کوڈ کے ساتھ چھیڑ چھاڑ کر رہا ہے۔

ایان بکلے سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔