พื้นฐาน React Spring: ฮุก useSpring

แอนิเมชัน CSS แบบดั้งเดิมใช้ระยะเวลาคงที่ โดยแอนิเมชันจะเล่นเป็นเวลาตามจำนวนมิลลิวินาทีที่กำหนดแล้วหยุด react-spring ทำให้ค่าเคลื่อนไหวโดยใช้ฟิสิกส์แบบสปริง แอนิเมชันขับเคลื่อนด้วย ความตึง (ความแข็งของสปริง) และ แรงเสียดทาน (แรงที่สปริงใช้ต้านการเคลื่อนที่) จึงทำให้การเคลื่อนไหวชะลออย่างเป็นธรรมชาติและให้ความรู้สึกเหมือนการเคลื่อนไหวจริง

ฮุก useSpring({ from, to }) กำหนดค่าที่มีแอนิเมชัน คุณระบุค่าเริ่มต้นใน from และค่าเป้าหมายใน to useSpring ส่งคืนออบเจ็กต์สปริง โดยแต่ละคีย์เป็น SpringValue ซึ่งเป็นค่าตัวเลขหรือสีที่มีแอนิเมชัน

ตัวเลือก config ควบคุมพฤติกรรมของสปริง ความตึง (ค่าเริ่มต้น 170) ควบคุมความแข็ง โดยค่าที่สูงกว่าจะดีดเข้าสู่ค่าเป้าหมายเร็วขึ้น แรงเสียดทาน (ค่าเริ่มต้น 26) ควบคุมการหน่วง โดยค่าที่ต่ำกว่าจะทำให้เด้งมากขึ้น มวล (ค่าเริ่มต้น 1) เพิ่มความเฉื่อย ค่าทั้งสามนี้ร่วมกันกำหนดลักษณะเฉพาะของแอนิเมชัน

ไลบรารีแอนิเมชันแบบสปริงมีการตั้งค่าล่วงหน้าที่ใช้ได้โดยไม่ต้องปรับแต่ง: config.default มีความสมดุลและเหมาะกับการใช้งานทั่วไป config.gentle เคลื่อนไหวช้าและราบรื่น config.wobbly เด้งด้วยแรงเสียดทานต่ำ config.stiff เคลื่อนไหวเร็วและดีดตัวฉับไว และ config.slow ค่อย ๆ เคลื่อนไหวอย่างมาก คุณสามารถนำเข้าได้จากไลบรารีแอนิเมชันแบบสปริง

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

การส่ง immediate: true ให้ useSpring ทำให้ค่ากระโดดไปยังเป้าหมายทันที โดยข้ามแอนิเมชันแบบสปริง วิธีนี้มีประโยชน์สำหรับการเรนเดอร์ครั้งแรก เมื่อผู้ใช้เปิดใช้ "ลดการเคลื่อนไหว" ในการตั้งค่าของ OS หรือเมื่อคุณต้องการรีเซ็ตตำแหน่งผ่านโค้ดโดยไม่มีการเคลื่อนไหวที่มองเห็นได้

คุณสามารถย้อนกลับแอนิเมชันของสปริงได้โดยสลับว่าค่าใดอยู่ใน from และ to รูปแบบที่พบบ่อยคือเก็บสถานะตัวสลับแบบบูลีนและคำนวณ from/to ตามสถานะนั้น: เมื่อตัวสลับเป็นเท็จ ให้แอนิเมชันทำงานจาก 0 เป็น 1 และเมื่อเป็นจริง ให้ทำงานจาก 1 เป็น 0 รีแอกต์สปริงจะเปลี่ยนผ่านระหว่างสถานะต่าง ๆ อย่างราบรื่น

useSpring สามารถส่งคืนอาร์เรย์ที่มีสององค์ประกอบได้: const [springs, api] = useSpring(() => ({ from: { x: 0 } })) ออบเจ็กต์ api ช่วยให้คุณควบคุมผ่านโค้ดได้ เรียกใช้ api.start({ x: 100 }) เพื่อแอนิเมชันไปยังค่าใหม่ เรียกใช้ api.stop() เพื่อหยุดแอนิเมชันค้างไว้ และเรียกใช้ api.set({ x: 50 }) เพื่อกระโดดไปยังค่าใหม่โดยไม่ใช้แอนิเมชัน

ใช้รูปแบบประกาศ useSpring({ from, to }) เมื่อแอนิเมชันขึ้นอยู่กับสถานะของรีแอกต์ที่เปลี่ยนแปลงตามปกติ ใช้รูปแบบคำสั่งร่วมกับ api.start() เมื่อต้องการเรียกใช้แอนิเมชันจากตัวจัดการเหตุการณ์ ท่าทาง หรือการดำเนินการแบบอะซิงโครนัส โดยไม่ทำให้รีแอกต์เรนเดอร์ซ้ำ

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

ในรูปแบบประกาศ useSpring จะเริ่มแอนิเมชันใหม่โดยอัตโนมัติเมื่อค่าที่ส่งให้มันเปลี่ยนแปลง ตัวอย่างเช่น useSpring({ opacity: isVisible ? 1 : 0 }) จะแอนิเมชันความทึบทุกครั้งที่ isVisible เปลี่ยนแปลง นี่เป็นวิธีที่ง่ายที่สุดในการเชื่อมแอนิเมชันแบบสปริงเข้ากับสถานะของคอมโพเนนต์

ในการกำหนดค่าของรีแอกต์สปริง แรงตึง และ แรงเสียดทาน ควบคุมสิ่งใด

รีแอกต์สปริงใช้ฟิสิกส์ในการสร้างแอนิเมชัน โดยแรงตึง (ความแข็ง) แรงเสียดทาน (การหน่วง) และมวลจะกำหนดการเคลื่อนไหว useSpring({ from, to }) ส่งคืนออบเจ็กต์ SpringValue ที่นำไปใช้กับคอมโพเนนต์ animated.* ได้ ค่ากำหนดล่วงหน้า (นุ่มนวล, สั่น, แข็ง, ช้า) ครอบคลุมกรณีทั่วไป API แบบคำสั่ง [springs, api] ช่วยให้ควบคุมผ่านโค้ดได้ด้วย api.start(), api.stop() และ api.set() โดย onRest จะทำงานเมื่อแอนิเมชันหยุดนิ่ง