วิธีใช้ทำปฏิกิริยาสปริงเพื่อสร้างส่วนประกอบเคลื่อนไหว

React Spring สามารถช่วยคุณในภาพเคลื่อนไหวซึ่งเป็นเรื่องที่ยุ่งยากในการใช้งานบนเว็บ ภาพเคลื่อนไหว CSS เป็นตัวเลือกที่ดีที่สุด แต่การสร้างผลลัพธ์ที่ราบรื่นต้องใช้การเล่นกลของคลาสการคลังและกิจกรรมอย่างระมัดระวัง การขว้างปา เฟรมเวิร์ก JavaScript เช่นเดียวกับตอบสนองต่อส่วนผสมที่ซับซ้อนเท่านั้น

สำหรับภาพเคลื่อนไหวที่พึ่งพาการโต้ตอบของผู้ใช้ค่าสามารถคำนวณได้ผ่าน JavaScript และนำไปใช้กับองค์ประกอบโดยตรง ด้วยการใช้วิธีการนี้เราจะต้องคำนวณและใช้การผ่อนคลายของเราเองเพื่อให้ภาพเคลื่อนไหวดูเป็นธรรมชาติมากขึ้น

สปริงตอบโต้ เป็นห้องสมุดที่สร้างขึ้นเพื่อจัดการกับการแขวน Hang-ups ทั่วไปจำนวนมากเมื่อพูดถึงการเคลื่อนไหวบนเว็บ ใช้วิธีการที่แตกต่างกันเล็กน้อยโดยมุ่งเน้นไปที่ฟิสิกส์มากกว่าระยะเวลาตรงและฟังก์ชั่นการผ่อนคลายที่กำหนดไว้ สิ่งนี้ช่วยให้สิ่งต่าง ๆ รู้สึกราบรื่นและเป็นธรรมชาติ

ในขณะที่ส่วนใหญ่ใช้สำหรับเอฟเฟ็กต์ภาพห้องสมุดจะเปลี่ยนระหว่างสองค่าโดยไม่คำนึงว่าค่านั้นเคยใช้สำหรับสไตล์หรือไม่ ตัวอย่างเช่นสามารถใช้เพื่อนับจำนวนการลงชื่อเข้าใช้จำนวนมากเพื่อเน้นว่าชุมชนใหญ่แค่ไหน

ในบทช่วยสอนนี้เราจะทำส่วนประกอบการ์ดที่ช่วยให้ผู้ใช้ให้คะแนนภาพ บัตรพลิกเพื่อเปิดเผยการจัดอันดับดาวและผู้ใช้สามารถคลิกเพื่อเพิ่มของตัวเอง เราจะใช้การดำเนินการที่ใหม่กว่าของ Spring Spring ซึ่งต้องมีการตอบสนองเวอร์ชัน 16.8 หรือสูงกว่า ก่อนคุณเริ่ม, ดาวน์โหลดไฟล์การสอนที่นี่ (และกลับมา การจัดเก็บเมฆ .

หากคุณต้องการสร้างเว็บไซต์โดยไม่มีกระบวนการโค้ดที่ซับซ้อนให้ใช้ที่ดี สร้างเว็บไซต์ . และอย่าลืมสำรวจ เว็บโฮสติ้ง ตัวเลือกเช่นกัน

01. ติดตั้งการอ้างอิง

ด้วยไฟล์ที่ดาวน์โหลดการพึ่งพาแพคเกจจะต้องติดตั้งก่อนที่เราจะเริ่มได้ โครงการทำปฏิกิริยาของแอปนี้รวมถึง ทำปฏิกิริยา แพคเกจและเซิร์ฟเวอร์ท้องถิ่นที่จำเป็นทั้งหมดที่ตั้งค่าขึ้นเพื่อเริ่มต้นใช้งาน

ในบรรทัดคำสั่งค้นหาไฟล์โครงการและติดตั้งแล้วเรียกใช้

 & gt; เส้นด้าย
& gt; เส้นด้ายเริ่ม 

02. สร้างภาพในสถานะ

ก่อนอื่นเราต้องการภาพบางอย่างในการให้คะแนน สำหรับการกวดวิชานี้เราจะไปที่ฮาร์ดรหัสบางภาพในสถานะแอปพลิเคชัน แต่ข้อมูลนี้อาจมาจากแหล่งใด ๆ เปิด app.js และสร้างภาพบางภาพด้วย usestate ตะขอจากปฏิกิริยา สิ่งนี้จะทำให้แต่ละภาพเป็นคะแนนเริ่มต้นที่เราสามารถแสดงและอัปเดตได้ในภายหลัง

 const [การ์ด] = usestate ([
createimage (image1),
createimage (image2),
CreateImage (Image3)
]); 

03. แสดงการ์ดแต่ละใบ

เนื่องจากรูปภาพถูกเก็บไว้ในอาร์เรย์เราสามารถวนรอบสถานะนั้นและสร้างส่วนประกอบแยกต่างหากสำหรับแต่ละ ตรรกะอนิเมชั่นสำหรับสปริงปฏิกิริยาจะมีชีวิตอยู่ภายใน & lt; คะแนน / & gt; ส่วนประกอบที่เราสามารถใช้ได้ทุกที่ที่เราต้องการ

ภายในวิธีการแสดงผลของ app.js สร้างสำเนาของส่วนประกอบนั้นสำหรับการ์ดแต่ละใบในอาร์เรย์ของรัฐ มันจะได้รับทุกค่าในรัฐรวมถึงภาพและการจัดอันดับเริ่มต้น

 {cards.map ((การ์ด, ดัชนี) = & gt; (
& lt; key ratingscard = {index} {... บัตร} / & gt;
))} 

04. เพิ่มโครงสร้างการ์ด

ก่อนที่เราจะสามารถเพิ่มแอนิเมชั่นการ์ดต้องการเนื้อหาบางอย่าง การ์ดแต่ละใบมีด้านหน้าและด้านหลังซึ่งดำเนินการตามที่แยกต่างหาก & lt; div & gt; องค์ประกอบที่อยู่ด้านบนของกันและกัน

เปิด ratingscard / index.js และเพิ่มโครงสร้างของการ์ด เราจำเป็นต้องใช้ภาพเป็นพื้นหลังกับการ์ดด้านหน้าด้วยด้านหลังในที่สุดที่มีการให้คะแนน

 & lt; div classname = "ratingscard" & gt;
& lt; div
ClassName = "RatingsCard__Front"
สไตล์ = {{
BackgroundImage: `URL ($ {image})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. ใช้สไตล์โฮเวอร์

รูปแบบใด ๆ ที่ไม่ได้รับการอัพเดตโดยตรงผ่านภาพเคลื่อนไหวของเราสามารถนำไปใช้ผ่าน CSS ซึ่งรวมถึงเอฟเฟกต์เงา 3 มิติพื้นฐานสำหรับการ์ดแต่ละใบเมื่อโฉบ ภายใน คะแนนการ์ด / style.css เพิ่มสไตล์พิเศษเพื่อให้การ์ดกระโดดออกจากหน้าบนโฮเวอร์โดยใช้ตัวกรอง

 .ratingscard: โฮเวอร์ {
ตัวกรอง: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0.25))
Drop-Shadow (0 10px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. ชุดเงาตามค่าเริ่มต้น

เงาฉับพลันบนโฮเวอร์เป็นประสบการณ์การสั่นสะเทือน ดังนั้นเราจึงควรเปลี่ยนระหว่างรัฐอย่างช้าๆเพื่อให้สิ่งต่าง ๆ ราบรื่น เพิ่ม Subtler Drop-Shadow สำหรับการ์ดเมื่อไม่ได้โฉบเหนือ ใช้ การเปลี่ยนแปลง คุณสมบัติในการเคลื่อนไหวระหว่างทั้งสองรัฐ

 .ratingscard {
[... ]
ตัวกรอง: Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.16)
Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.1));
การเปลี่ยนแปลง: กรอง 0.5s;
} 

07. เก็บสถานะที่เลือกไว้

เราจำเป็นต้องจัดเก็บและอัปเดตข้อมูลเกี่ยวกับด้านใดของการ์ดที่เผชิญหน้ากัน เราสามารถใช้ React's ในตัว usestate ขอให้นิยามค่าเริ่มต้นและมันจะส่งคืนค่าปัจจุบันและวิธีการอัปเดต

ที่จุดเริ่มต้นของ คะแนนการ์ด ฟังก์ชั่นส่วนประกอบสร้างนิยามนี้ ที่ถูกเลือก สถานะ.

 const [เลือก, ตั้ง setselected]
 = Usestate (FALSE); 

08. กำหนดอนิเมชั่นพลิก

React Spring เป็นผู้รับผิดชอบในการเปลี่ยนตัวเลขระหว่างค่าหนึ่งและอื่น ๆ สามารถทำได้ด้วยสปริงและ การใช้ ตะขอ. เราให้ข้อมูลการตั้งค่าบางอย่างและส่งคืนค่าชุดที่อัปเดตตามการคำนวณฟิสิกส์ของมัน

สร้างสปริงสำหรับแอนิเมชั่นพลิก อันนี้จะจางหายไปและหมุนการ์ดขึ้นอยู่กับว่าการ์ดอยู่ในนั้นหรือไม่ ที่ถูกเลือก สถานะ.

 const {ความทึบ, การแปลง}
 = การใช้งาน ({
ความทึบ: เลือก? 1: 0,
แปลง: `rotatey (
$ {เลือก? 180: 0} deg) `
}); 

09. แปลงเป็นคอนเทนเนอร์เคลื่อนไหว

วัตถุที่ส่งคืนโดย การใช้ กำหนดอนิเมชั่นของพวกเขา แต่อย่าให้ค่าตัวเลขที่เราต้องการ ที่ มีชีวิตชีวา ฟังก์ชั่นโรงงานย่อยข้อมูลนี้แล้วจัดหาค่าเป็นตัวเลขให้กับส่วนประกอบ

แปลง คะแนนการ์ด องค์ประกอบที่ใช้ มีชีวิตชีวา ฟังก์ชั่น. ที่ Animated.div ไวยากรณ์บอกฟังก์ชั่นเพื่อส่งคืน & lt; div & gt; .

 & lt; animated.div classname = "ratingscard" & gt;
& lt; animated.div
ClassName = "RatingsCard__Front"
สไตล์ = {{
BackgroundImage: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
"ratingscard__back" / & gt;
& lt; / animated.div> 

10. เคลื่อนไหวบัตรด้านหน้า

React Spring เป็นเพียงการเคลื่อนไหวค่านิยมและไม่ทำแอนิเมชั่นขององค์ประกอบเอง เราสามารถเชื่อมโยงค่าเหล่านั้นกับแนวตั้งสไตล์และสร้างภาพเคลื่อนไหวที่บินได้ อัปเดตการ์ดด้านหน้าเพื่อใช้ประโยชน์จากใหม่ ความทึบ และ แปลง ค่า. ในกรณีนี้เราจะต้องแทรกแซงมูลค่าความทึบซึ่งเราจะอยู่ในไม่ช้า

 & lt; animated.div
ClassName = "RatingsCard__Front"
สไตล์ = {{
BackgroundImage: `url ($ {image})`
ความทึบ: opacity.interpolate (
ความพร้อม),
แปลง
}}
/ & gt; 

11. เคลื่อนไหวการ์ดด้านหลัง

เมื่อพลิกการ์ดแอนิเมชั่นใด ๆ ที่เรานำไปใช้กับใบหน้าเดียวจะต้องมีการย้อนกลับไปอีกด้านหนึ่ง เมื่อเล่นด้วยกันพวกเขาจะดูเหมือนว่าพวกเขากำลังเคลื่อนไหวเป็นชิ้นเดียว

ในกรณีนี้เราจำเป็นต้องใช้สไตล์เดียวกันกับการ์ดด้านหลัง แต่คราวนี้แทรกซึม แปลง ค่าแทน

 & lt; animated.div
classname = "ratingscard__back"
สไตล์ = {{
ความทึบ
แปลง: เปลี่ยน
.Interpolate (InverseTransform)
}}
/ & gt; 

12. แทรกแซงค่า

แทนที่จะใช้ค่าโดยตรงกับคุณสมบัติ CSS เราสามารถใช้ฟังก์ชั่นบางอย่างกับพวกเขาเพื่อทำแผนที่ค่าของพวกเขาไปยังสิ่งที่แตกต่างกัน กระบวนการนี้เรียกว่าการแก้ไข

กำหนดสองฟังก์ชั่นการแก้ไขไปทางด้านบนของ ratingscard / index.js . สิ่งเหล่านี้ใช้ย้อนกลับของทั้งความทึบและการแปลงภาพเคลื่อนไหวเมื่อเลือกหรือยกเลิกการเลือก

INVERSOPACity = O = & GT; 1 - o;
INVERSETRANSFORM = T = & GT;
 `$ {t} rotatey (180deg)`; 

13. สลับสถานะเมื่อคลิก

การพลิกของการ์ดควรเชื่อมโยงกับการคลิก ในฐานะ ที่ถูกเลือก มูลค่าของรัฐกำหนดใบหน้าที่มองเห็นได้เราควรสลับสถานะนั้นเมื่อคลิกการ์ด

เพิ่มฟังคลิกที่ด้านนอก คะแนนการ์ด ธาตุ. เมื่อสิ่งนี้เกิดขึ้นมันจะสลับค่าบูลีนที่จัดขึ้นในรัฐ

 & lt; animated.div
Classname = "Ratingscard"
onclick = {() = & gt;
ตั้ง Selectected (! เลือก)}
& gt; 

14. ปรับการ์ดฟิสิกส์พลิก

ตอนนี้แอนิเมชั่นของเราทำงาน แต่ดูเหมือนว่าจะลอยมากกว่าการพลิก เราสามารถเปลี่ยนค่าบางอย่างในแต่ละฤดูใบไม้ผลิเพื่อเปลี่ยนวิธีการทำงาน ภายในวัตถุการตั้งค่าสำหรับสปริงสร้าง การกำหนดค่า วัตถุเพื่อลดแรงเสียดทานและเพิ่มความตึงเครียด สิ่งนี้จะทำให้ภาพเคลื่อนไหวเป็นความรู้สึกของ Snappier

 การใช้งาน ({
กำหนดค่า: {
แรงเสียดทาน: 22,
ความตึงเครียด: 500
},
[... ]
}); 

15. สร้างสปริงเพื่อผลเอียง

ในขณะที่เอฟเฟกต์โฮเวอร์ที่ขับเคลื่อนด้วย CSS จากก่อนหน้านี้ให้ข้อเสนอแนะบางอย่างเราสามารถปรับปรุงได้อีกด้วยการมีภาพเคลื่อนไหวที่เอียงซึ่งตอบสนองต่อตำแหน่งเคอร์เซอร์ เมื่ออัปเดตสปริงที่ความถี่สูงเช่นการเคลื่อนไหวของเมาส์เราจะได้รับประสิทธิภาพที่ดีขึ้นโดยใช้ ตั้ง ฟังก์ชั่นที่ส่งคืนโดยแต่ละฤดูใบไม้ผลิ สร้างสปริงใหม่สำหรับนิเมชั่นนี้และเก็บฟังก์ชั่นที่ส่งคืนไว้

 const [อุปกรณ์ประกอบฉาก, ชุด] = การใช้งาน ((() = & gt; ({
รัฐ: [0, 0, 1]
}
)); 

16. ใช้สไตล์การเอียง

สปริงตอบโต้สามารถเคลื่อนไหวค่าประเภทต่าง ๆ มากมายซึ่งรวมถึงอาร์เรย์ การจัดเก็บค่าของเราในหนึ่งอาร์เรย์ช่วยให้เราสามารถสอดแทรกพวกเขาทั้งหมดลงบน แปลง คุณสมบัติในหนึ่งผ่าน

สร้าง TransformCard ฟังก์ชั่นการแก้ไขและใช้สไตล์กับหลัก คะแนนการ์ด ธาตุ.

 const transformcard = (x, y, สเกล) = & gt;
 `มุมมอง (1,000px) rotatex ($ {x} deg)
ปรับขนาด ($ {y} deg) ($ {scale}) `;
[... ]
& lt; animated.div
 Classname = "Ratingscard"
 onclick = {() = & gt; ตั้ง Selectected (! เลือก)}
 สไตล์ = {{transform:! เลือก & amp; & amp;
props.state.interpolate (
TransformCard)}} & GT; 

17. ตั้งค่าในการย้ายเมาส์

เหตุการณ์เมาส์ให้พิกัดของเคอร์เซอร์ในเวลานั้น เรามีความสนใจในลูกค้าพิกัดเพื่อรับตำแหน่งเคอร์เซอร์ภายในวิวพอร์ต เพิ่มเมาส์ย้ายและปล่อยให้เหตุการณ์ไปยังด้านนอก & lt; div & gt; . เราส่งพิกัดไปยังฟังก์ชั่นในการย้ายและรีเซ็ตเป็นค่าเริ่มต้นเมื่อเคอร์เซอร์ออกจาก & lt; div & gt; .

 onmouseleave = {() = & gt; ชุด ({
 สถานะ: [0, 0, 1]})}
OnmouseMove = {({clientx: x,
 Clienty: Y}) = & GT; ชุด ({
 รัฐ: คำนวณการคำนวณ (x, y)})
} 

18. คำนวณค่าแอนิเมชั่น

เราต้องการเพียงแค่เอียงเล็ก ๆ เพื่อหลีกเลี่ยงบัตรที่เคลื่อนไหวมากเกินไปเมื่อผู้ใช้โต้ตอบกับมัน ที่ คำนวณการคำนวณ ฟังก์ชั่นจะทำงานด้านข้างของหน้าจอเคอร์เซอร์เปิดและเอียงไปทางทิศทางนั้น

สร้างฟังก์ชั่นเพื่อกรอกค่าเหล่านั้น การหารด้วย 40 ช่วยลดเอฟเฟกต์เอียงเพื่อให้สามารถใช้งานได้มากขึ้น ค่าสุดท้ายจะเพิ่มการ์ดจากหน้าจอด้วยสายตา

 const คำนวณ = (x, y) = & gt; [
- (Y - window.innerHeight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. แสดงการจัดอันดับดาว

แต่ละภาพมีการให้คะแนนที่เราจำเป็นต้องแสดงในดาวที่ด้านหลังของการ์ด ตรรกะนี้จะถูกเก็บไว้ในองค์ประกอบของตัวเอง แต่ต้องใช้กับใบหน้าด้านหลังก่อน

ก่อนอื่นสร้างชิ้นส่วนใหม่ของสถานะเพื่อยึดคะแนนจากนั้นสร้าง & lt; แสดงความประทับใจ & GT; ส่วนประกอบภายในหันหน้าไปทางด้านหลัง & lt; div & gt; .

 const [currentrating, setrating]
 = usestate (การให้คะแนน);
[... ]
{เลือก & amp; & amp; (
 & lt; การแสดงอันดับที่นำแสดงโดย = {currentrating}
setrating = {setrating} / & gt;
)} 

20. สร้างแอนิเมชั่นดาว

การให้คะแนนดาวกำลังจะจางหายไปเมื่อไพ่พลิก โดยใช้ useTrail เบ็ดจากสปริงตอบโต้เราสามารถใช้สปริงให้กับหลายองค์ประกอบหนึ่งหลังจากนั้น

เปิดออก แสดงความประทับใจ / index.js และเพิ่มเบ็ดในอาร์กิวเมนต์แรกจะกำหนดจำนวนของสปริงที่จะทำ

 Const animatedstars = useTrail (5, {
กำหนดค่า: {
แรงเสียดทาน: 22,
ความตึงเครียด: 500
},
จาก: {ความทึบแสง: 0,
แปลง: "ขนาด (0.8)"}
ความทึบแสง: 1,
แปลง: "สเกล (1)"
}); 

21. ใช้ดาวเข้ากับส่วนประกอบ

สิ่งสุดท้ายที่เราต้องทำคือแสดงดาวเหล่านั้นจริง ๆ ที่ AnimededStars ตัวแปรตอนนี้มีอาร์เรย์ของสปริงซึ่งเราสามารถทำซ้ำและนำไปใช้กับการ์ด

สำหรับแต่ละดาวแสดง & lt; animatedstar & gt; ส่วนประกอบภายในหลัก การแสดงละคร div. กระจายอุปกรณ์ประกอบฉากสไตล์เพื่อใช้เอฟเฟกต์ทั้งหมดให้กับแต่ละองค์ประกอบ เมื่อคลิกส่งการให้คะแนนใหม่ไปยังผู้ปกครอง & lt; Ratingcard & GT; ส่วนประกอบ

 {AnimatedStars.map ((อุปกรณ์ประกอบฉากดัชนี) = & GT; (
& lt; AnimatedStar
Active = {index + 1 & lt; = เรตติ้ง}
onclick = {e = & gt; {
e.stoppropagation ();
การตั้งค่า (ดัชนี + 1);
}}
ปุ่ม = {index}
สไตล์ = {{... อุปกรณ์ประกอบฉาก}}
/ & gt;
))} 

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 288 หรือ ติดตาม .

อ่านเพิ่มเติม:

• พัฒนาส่วนประกอบปฏิกิริยาที่ใช้ซ้ำได้
• แล็ปท็อปที่ดีที่สุดสำหรับการเขียนโปรแกรมในปี 2019
• 35 เครื่องมือออกแบบเว็บเพื่อช่วยให้คุณทำงานอย่างชาญฉลาด