useTrail และ useChain สำหรับลำดับแอนิเมชัน

useTrail(count, config) จะสร้างสปริงจำนวน count ตัวที่แอนิเมชันต่อเนื่องกัน โดยกำหนดช่วงหน่วงระหว่างแต่ละตัวได้ เมื่อเริ่มลำดับ ตัวแรกจะแอนิเมชันทันที ตัวที่สองจะเริ่มช้าลงเล็กน้อย ตัวที่สามจะเริ่มหลังจากนั้น และต่อไปเรื่อย ๆ ทำให้เกิดเอฟเฟกต์การแผ่กระจายหรือการเรียงต่อกัน

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

เรนเดอร์รายการแบบเรียงลำดับโดยแมปผ่านอาร์เรย์สปริง: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)) animated.div แต่ละตัวจะได้รับออบเจ็กต์สปริงของตัวเอง รายการต่าง ๆ จึงแอนิเมชันต่อเนื่องกัน สปริงจะทำงานตามลำดับดัชนี: 0, 1, 2, 3...

useTrail รองรับรูปแบบตัวสลับสำหรับแอนิเมชันไปข้างหน้าและย้อนกลับ ส่งสถานะบูลีน open เพื่อควบคุมทิศทาง: เมื่อสถานะเปิดเป็นจริง ลำดับสปริงจะแอนิเมชันจากซ่อนอยู่ไปเป็นมองเห็นได้ และเมื่อเป็นเท็จ จะแอนิเมชันย้อนกลับจากมองเห็นได้ไปเป็นซ่อนอยู่ ลำดับสปริงจะย้อนลำดับโดยอัตโนมัติ รายการต่าง ๆ จึงแอนิเมชันออกตามลำดับย้อนกลับ (เข้าหลังสุด ออกก่อนสุด)

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

useSpringRef() จะสร้างรีฟที่คุณนำไปผูกกับฮุกสปริงผ่านตัวเลือก ref รีฟนี้ช่วยให้ useChain ควบคุมได้ว่าสปริงนั้นจะเริ่มทำงานเมื่อใด คุณจะสร้างรีฟหนึ่งตัวต่อสปริงหรือลำดับสปริงที่ต้องการจัดลำดับ: const springRef = useSpringRef() จากนั้นส่งรีฟเข้าไปดังนี้: useSpring({ ref: springRef, ... })

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) จะจัดลำดับสปริงหรือลำดับสปริงหลายชุด อาร์กิวเมนต์แรกคืออาร์เรย์ของ springRefs ตามลำดับที่ควรทำงาน อาร์กิวเมนต์ที่สองคืออาร์เรย์ของการประทับเวลาระหว่าง 0 ถึง 1 ซึ่งระบุว่าสปริงแต่ละตัวจะเริ่มทำงานเมื่อใด โดยแสดงเป็นสัดส่วนของกรอบเวลารวม

ใน useChain การประทับเวลาอย่าง [0, 0.5] หมายความว่าสปริง 1 เริ่มทำงานที่ 0% ของลำดับ และสปริง 2 เริ่มทำงานที่ 50% ของลำดับ อาร์กิวเมนต์ที่สามซึ่งเป็นตัวเลือกคือกรอบเวลารวมในหน่วยมิลลิวินาที (ค่าเริ่มต้น 1000ms) ดังนั้นเมื่อใช้ [0, 0.5] และ 2000ms สปริง 1 จะเริ่มที่ 0ms และสปริง 2 จะเริ่มที่ 1000ms

รูปแบบที่พบบ่อยคือ แอนิเมชันให้คอนเทนเนอร์ขยายตัว (ใช้ useSpring สำหรับขนาด) จากนั้นแอนิเมชันให้รายการด้านในค่อย ๆ ปรากฏ (ใช้ useTrail สำหรับรายการ) ผูกรีฟเข้ากับทั้งสองส่วน แล้วใช้ useChain([sizeRef, trailRef], [0, 0.5]) เพื่อให้คอนเทนเนอร์ขยายก่อน จากนั้นรายการจึงค่อย ๆ ปรากฏเมื่อผ่านไปครึ่งหนึ่ง วิธีนี้สร้างแอนิเมชันการปรากฏสองระยะในแบบภาพยนตร์

useChain เหมาะอย่างยิ่งสำหรับการเปลี่ยนหน้า เมื่อนำทางระหว่างหน้า ให้จัดลำดับแอนิเมชันการออกของหน้าเก่าเข้ากับแอนิเมชันการเข้าของหน้าใหม่ โดยให้แอนิเมชันการออกเสร็จก่อน (การประทับเวลา 0) แล้วจึงเริ่มแอนิเมชันการเข้า (การประทับเวลา 0.6) วิธีนี้สร้างการส่งต่อที่ราบรื่นแทนการสลับหน้าอย่างฉับพลัน

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

useTrail สร้างช่วงหน่วงที่เหลื่อมกันระหว่างรายการต่าง ๆ ในแอนิเมชันได้อย่างไร

useTrail(count, config) จะสร้างสปริงจำนวน count ตัวที่แอนิเมชันต่อเนื่องกัน ทำให้รายการปรากฏแบบเหลื่อมจังหวะ แมปอาร์เรย์สปริงและรายการพร้อมกันเพื่อเรนเดอร์ useSpringRef() จะสร้างรีฟที่ useChain ใช้สำหรับจัดลำดับ useChain([ref1, ref2], [0, 0.5]) จะควบคุมสปริงหลายตัวด้วยการประทับเวลาแบบเศษส่วน ทั้งสองอย่างนี้ช่วยให้สร้างลำดับหลายระยะที่ซับซ้อนได้ เช่น แอนิเมชันขยายแล้วเปิดเผย