اجزاء کو متحرک اجزاء کے لئے ردعمل کا استعمال کیسے کریں

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

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

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

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

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

اگر آپ پیچیدہ کوڈ کے عمل کے بغیر کسی سائٹ کی تعمیر کرنا چاہتے ہیں تو، مہذب استعمال کریں ویب سائٹ بلڈر . اور اس بات کا یقین کرنے کے لئے یقینی بنائیں ویب میزبانی اختیارات بھی.

01. انسٹال انسٹال کریں

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

کمانڈ لائن پر، پروجیکٹ فائلوں کو تلاش کریں اور انسٹال کریں، پھر ان کو چلائیں.

 اور جی ٹی؛ یارن
& gt؛ یارن شروع 

02. ریاست میں تصاویر پیدا کریں

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

 کا استعمال [کارڈ] = عصمت دری ([
تخلیق (تصویر 1)
تخلیق (تصویر 2)
تخلیق (تصویر 3)
])؛ 

03. ہر تصویر کارڈ کو دکھائیں

جیسا کہ تصاویر ایک صف میں ذخیرہ کیے جاتے ہیں، ہم اس ریاست پر لوپ کرسکتے ہیں اور ہر ایک کے لئے علیحدہ اجزاء بنا سکتے ہیں. ردعمل کے لئے حرکت پذیری منطق موسم بہار کے اندر اندر رہیں گے & lt؛ ریٹنگ کارڈ / & GT؛ اجزاء جو ہم کہیں بھی استعمال کر سکتے ہیں ہمیں ضرورت ہے.

App.js کے رینڈر طریقہ کے اندر، ریاست کی صف میں ہر کارڈ کے لئے اس اجزاء کی ایک نقل بنائیں. یہ ریاست میں ہر قدر حاصل کرے گا، بشمول تصویر اور ابتدائی درجہ بندی بھی شامل ہے.

 {cards.map ((کارڈ، انڈیکس) = & gt؛ (
& lt؛ ریٹنگ کارڈ کارڈ = {انڈیکس} {... کارڈ} / & gt؛
)))}} 

04. کارڈ کی ساخت شامل کریں

ہم حرکت پذیری کو شامل کرنے سے پہلے، کارڈ کچھ مواد کی ضرورت ہے. ہر کارڈ کو سامنے اور پیچھے ہے، جو علیحدہ طور پر نافذ کیا جاتا ہے & lt؛ div & gt؛ عناصر ایک دوسرے کے سب سے اوپر پر پرتوں.

کھولیں ریٹنگ کارڈ / index.js. ، اور کارڈ کی ساخت کو شامل کریں. ہمیں تصویر کو سامنے کے کارڈ کے پس منظر کے طور پر لاگو کرنے کی ضرورت ہے، اس کے بعد بالآخر درجہ بندی پر مشتمل ہے.

 & lt؛ div classname = "ریٹنگ کارڈ" اور جی ٹی؛
& lt؛ div.
Classname = "RatingsCard__front"
انداز = {{{
پس منظر: `یو آر ایل ($ {تصویر})`
}}
/ & gt؛
& lt؛ div classname = "ratingscard__back" / & gt؛
& lt؛ / div & gt؛ 

05. ہور شیلیوں کو لاگو کریں

کسی بھی شیلیوں جو ہماری حرکت پذیری کے ذریعہ براہ راست اپ ڈیٹ نہیں کررہے ہیں وہ سی ایس ایس کے ذریعہ لاگو کیا جا سکتا ہے. اس میں ہر کارڈ کے لئے بنیادی 3D سائے اثر بھی شامل ہے. اندر درجہ بندی کارڈ / style.css. ، ایک فلٹر کو لاگو کرکے ہور پر صفحے سے باہر کارڈ سے باہر کارڈ کو کودنے کے لئے کچھ اضافی شیلیوں شامل کریں.

 .ratingscard: ہور {
فلٹر: ڈراپ شیڈو (0 14px 28px.
آر جی بی اے (0، 0، 0، 0.25))
ڈراپ شیڈو (0 10px 10px.
 آر جی بی اے (0، 0، 0، 0.1))؛
} 

06. ڈیفالٹ کی طرف سے سائے مقرر کریں

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

 .ratingscard {
[...]
فلٹر: ڈراپ شیڈو (0 3px 6px.
آر جی بی اے (0، 0، 0، 0.16))
ڈراپ شیڈو (0 3px 6px.
آر جی بی اے (0، 0، 0، 0.1))؛
منتقلی: فلٹر 0.5s؛
} 

07. منتخب کردہ ریاست کو پکڑو

ہمیں معلومات کو ذخیرہ اور اپ ڈیٹ کرنے کی ضرورت ہے جس کے بارے میں کارڈ کا سامنا کرنا پڑتا ہے. ہم ردعمل کے بلٹ ان میں استعمال کرسکتے ہیں تجزیہ ایک شروع کی قیمت کی وضاحت کرنے کے لئے ہک اور اس کے پاس موجودہ قیمت اور اسے اپ ڈیٹ کرنے کا طریقہ ہے.

آغاز کے آغاز میں ریٹنگ کارڈ اجزاء کی تقریب، یہ وضاحت کریں منتخب شدہ حالت.

 کا استعمال [منتخب کردہ، سیٹ سیٹ]
 = عصمت دری (غلط)؛ 

08. فلپ حرکت پذیری کی وضاحت کریں

ایک قیمت اور دوسرے کے درمیان منتقلی کی تعداد کے لئے موسم بہار کا ردعمل ہے. یہ موسم بہار اور اس کے ساتھ کیا جا سکتا ہے استعمال کیا جاتا ہے کانٹا. ہم اسے کچھ سیٹ اپ کی معلومات فراہم کرتے ہیں، اور یہ اس کی طبیعیات کے حسابات کے مطابق اپ ڈیٹ کرنے والے اقدار کا ایک سیٹ واپس آتا ہے.

فلپ حرکت پذیری کے لئے ایک موسم بہار بنائیں. یہ ایک کارڈ اس پر منحصر ہے کہ کارڈ اس پر منحصر ہے منتخب شدہ حالت.

 const {دھندلاپن، ٹرانسمیشن}
 = استعمال کرتا ہے ({
دھندلاپن: منتخب کیا؟ 1: 0،
ٹرانسمیشن: `` `` `
$ {منتخب؟ 180: 0} deg) `
})؛ 

09. متحرک کنٹینر میں تبدیل

اشیاء کی طرف سے واپس آ گیا استعمال کیا جاتا ہے ان کی حرکت پذیری کی وضاحت کریں، لیکن ہمیں ضرورت کی عددی اقدار فراہم نہ کریں. The. متحرک فیکٹری کی تقریب اس معلومات کو کھا دیتا ہے اور پھر اقدار کو اجزاء کے طور پر سامان فراہم کرتا ہے.

تبدیل کریں ریٹنگ کارڈ استعمال کرنے کے لئے عنصر متحرک فنکشن The. متحرک. div. مطابقت پذیری ایک تقریب کو واپس کرنے کے لئے بتاتا ہے & lt؛ div & gt؛ .

 & lt؛ متحرک. div classname = "ریٹنگ کارڈ" اور جی ٹی؛
& lt؛ متحرک. div.
Classname = "RatingsCard__front"
انداز = {{{
پس منظر: `یو آر ایل ($ {تصویر})`
}}
/ & gt؛
& lt؛ متحرک. div classname =.
"ratingscard__back" / & gt؛
& lt؛ / nanimated.div>؛ 

10. سامنے کارڈ کو متحرک کریں

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

 & lt؛ متحرک. div.
Classname = "RatingsCard__front"
انداز = {{{
پس منظر: `یو آر ایل ($ {تصویر})`،
دھندلاپن: دھندلاپن. انٹرپلول (
انضمام)
تبدیل
}}
/ & gt؛ 

11. بیک اپ کارڈ کو متحرک کریں

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

اس صورت میں، ہمیں ایک ہی شیلیوں کو بیک کارڈ پر لاگو کرنے کی ضرورت ہے، لیکن اس وقت اس وقت مداخلت تبدیل بجائے قیمت.

 & lt؛ متحرک. div.
classname = "ریٹنگ کارڈڈ" بیک "
انداز = {{{
دھندلاپن،
ٹرانسمیشن: تبدیل
.interpolate (Inversetransform)
}}
/ & gt؛ 

12. اقدار کو مداخلت

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

سب سے اوپر کی طرف مداخلت کے افعال کے ایک جوڑے کی وضاحت کریں ریٹنگ کارڈ / index.js. . یہ انتخاب یا وضاحت کرتے وقت دونوں کو دھندلاپن کے ریورس اور متحرک تصاویر کو تبدیل کرتے ہیں.

Const Inversepacity = O = & GT؛ 1 - اے؛
COST INVERSETRANSFORM = T = & GT؛
 `$ {t} rotatey (180deg)`؛ 

13. کلک کریں پر کلک کریں

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

بیرونی کے لئے ایک کلک سننے والا شامل کریں ریٹنگ کارڈ عنصر. جب ایسا ہوتا ہے، تو یہ ریاست میں منعقد ہونے والی بولین کی قدر کو ٹول کرے گا.

 & lt؛ متحرک. div.
Classname = "ریٹنگ کارڈ"
OnClick = {() = & gt؛
مقرر کردہ (منتخب کردہ)}
& gt؛ 

14. کارڈ فلپ طبیعیات کو ایڈجسٹ کریں

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

 استعمال ({
config: {
رگڑ: 22،
کشیدگی: 500.
}،
[...]
})؛ 

15. جھگڑا اثر کے لئے بہار بنائیں

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

 کان [پروپس، سیٹ] = استعمال (() = & gt؛ ({
ریاست: [0، 0، 1]
}
))؛ 

16. جھگڑا شیلیوں کو لاگو کریں

ردعمل موسم بہار بہت سے مختلف اقسام کے اقدار کو متحرک کرسکتے ہیں، جس میں arrays شامل ہیں. ایک صف میں ہمارے اقدار کو ذخیرہ کرنے کی اجازت دیتا ہے کہ ہمیں ان سب کو مداخلت کرنے کی اجازت دیتی ہے تبدیل ایک پاس میں پراپرٹی.

بنائیے ایک ٹرانسفارمر کارڈ مداخلت کی تقریب اور شیلیوں کو اہم طور پر لاگو کریں ریٹنگ کارڈ عنصر.

 COST TRANSFORMCARD = (X، Y، اسکیل) = & gt؛
 `نقطہ نظر (1000px) rotatex ($ {x} deg)
گھومیٹ ($ {Y} deg) پیمانے ($ {اسکیل}) `؛
[...]
& lt؛ متحرک. div.
 Classname = "ریٹنگ کارڈ"
 OnClick = {() = & gt؛ مقرر کردہ (منتخب کردہ)}
 انداز = {{transform :! منتخب & amp؛ & amp؛
props.state.interpolate (
ٹرانسفارمر کارڈ)}} & gt؛ 

17. ماؤس منتقل پر اقدار سیٹ کریں

ماؤس کے واقعات اس وقت کرسر کے سمتوں کو فراہم کرتے ہیں. ہم کلائنٹ کے اندر اندر کرسر پوزیشن حاصل کرنے کے لئے کلائنٹ کے تعاون میں دلچسپی رکھتے ہیں. ماؤس منتقل کریں اور بیرونی واقعات کو چھوڑ دیں & lt؛ div & gt؛ . ہم سمتوں کو منتقل کرنے کے لئے ایک تقریب میں ایک تقریب میں منتقل کرتے ہیں اور ڈیفالٹ اقدار کو ری سیٹ کرتے ہیں جب کرسر چھوڑ دیتا ہے & lt؛ div & gt؛ .

 onmouseleave = {() = & gt؛ سیٹ ({
 ریاست: [0، 0، 1]}}
OnMouseMove = {({کلائنٹ x: x،
 کلائنٹ: y}) = & gt؛ سیٹ ({
 ریاست: کیلکولیشن وولز (x، y)}
} 

18. حرکت پذیری اقدار کا حساب

جب صارف اس کے ساتھ بات چیت کرتا ہے تو ہم صرف ایک چھوٹا سا جھگڑا کرنا چاہتے ہیں. The. calculitionvalues. فنکشن اسکرین کی طرف سے کام کرے گا، کرسر اس کی طرف اشارہ کرتا ہے اور اس کی طرف جھکتا ہے.

ان اقدار کو بھرنے کے لئے فنکشن بنائیں. 40 کی طرف سے تقسیم کرنے کے لئے 40 کی طرف سے تقسیم کرنے کے لئے جھٹکا اثر زیادہ استعمال کرنے کے لئے. حتمی قیمت سکرین سے کارڈ کو نظر انداز کرے گی.

 COST CACCHITELVALUES = (x، y) = & gt؛ [
- (y - window.innerheight / 2) / 40،
(x - ونڈو. innerwidth / 2) / 40،
1.1]؛ 

19. ستارہ کی درجہ بندی دکھائیں

ہر تصویر میں ایک درجہ بندی ہے جو ہمیں کارڈ کے پیچھے ستاروں میں ظاہر کرنے کی ضرورت ہے. یہ منطق اس کے اپنے اجزاء کے اندر منعقد کی جاتی ہے، لیکن اس کی ضرورت سب سے پہلے چہرے پر لاگو کرنے کی ضرورت ہے.

سب سے پہلے، درجہ بندی کو برقرار رکھنے کے لئے ریاست کا ایک نیا ٹکڑا بنائیں، پھر ایک بنائیں & lt؛ starrating & gt؛ پیچھے کے چہرے کے اندر جزو & lt؛ div & gt؛ .

 Const [Currentrating، Setrating]
 = عصمت دری (درجہ بندی)؛
[...]
{منتخب & amp؛ & amp؛ (
 & lt؛ starrating درجہ بندی = {currentrating}
سیٹنگ = {setrating} / & gt؛
)} 

20. سٹار حرکت پذیری بنائیں

کارڈ فلپ کرنے کے بعد ستارہ کی درجہ بندی ختم ہونے جا رہے ہیں. استعمال کرتے ہوئے Usetrail. ردعمل کے موسم بہار سے ہک، ہم اسپرنگس کو ایک دوسرے کے بعد ایک سے زیادہ اجزاء پر لاگو کرسکتے ہیں.

کو کھولنے starrating / index.js. اور ہک میں شامل کریں. پہلا دلیل اسپرنگس کی تعداد کی وضاحت کرے گا.

 COST متحرک اسٹار = Usetrail (5، {
config: {
رگڑ: 22،
کشیدگی: 500.
}،
سے: {دھندلاپن: 0،
ٹرانسمیشن: "اسکیل (0.8)"}،
دھندلاپن: 1،
ٹرانسمیشن: "اسکیل (1)"
})؛ 

21. اجزاء پر ستاروں کو لاگو کریں

ہمیں کیا کرنے کی آخری چیز اصل میں ان ستاروں کو ظاہر کرتی ہے. The. متحرک اسٹار متغیر اب اسپرنگس کی ایک صف ہے، جس میں ہم اس پر قابو پانے اور کارڈ پر لاگو کرسکتے ہیں.

ہر ستارہ کے لئے، ایک دکھائیں & lt؛ متحرک اسٹار اور جی ٹی؛ اہم کے اندر جزو اسٹار کی درجہ بندی ڈوی ہر جزو میں تمام اثرات کو لاگو کرنے کے لئے سٹائل پروپس کو پھیلائیں. کلک کیا جب، والدین کو نئی درجہ بندی بھیجیں & lt؛ ریٹنگ کارڈ اور جی ٹی؛ جزو

 {متحرک اسٹار. ایم پی ((پروپس، انڈیکس) = & gt؛ (
& lt؛ متحرک اسٹار
فعال = {انڈیکس + 1 & lt؛ = درجہ بندی}
OnClick = {e = & gt؛ {
E.Stoppropagation ()؛
سیٹنگ (انڈیکس + 1)؛
}}
کلید = {انڈیکس}
انداز = {{... props}}
/ & gt؛
)))}} 

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

مزید پڑھ:

• دوبارہ پرسکون ردعمل اجزاء تیار کریں
• 2019 میں پروگرامنگ کے لئے بہترین لیپ ٹاپ
• آپ کو سمارٹ کام کرنے میں مدد کرنے کے لئے 35 ویب ڈیزائن کے اوزار