แอนิเมชันที่ขับเคลื่อนด้วยท่าทางด้วย use-gesture

@use-gesture/react เป็นไลบรารีตรวจจับท่าทางที่ออกแบบมาให้ทำงานร่วมกับ react-spring ได้อย่างราบรื่น ไลบรารีนี้ตรวจจับท่าทาง ลาก, บีบนิ้ว, เลื่อน, วางตัวชี้, เคลื่อนที่ และ หมุนล้อเมาส์ พร้อมมอบสถานะท่าทางที่ปรับให้อยู่ในรูปแบบมาตรฐาน ซึ่งคุณสามารถส่งต่อโดยตรงไปยังตัวตั้งค่าสปริงเพื่อสร้างการโต้ตอบที่ลื่นไหลและอิงหลักฟิสิกส์

ฮุก useDrag จะเรียกใช้ฟังก์ชันเรียกกลับในทุกเหตุการณ์ลาก ฟังก์ชันเรียกกลับนี้ได้รับอ็อบเจ็กต์สถานะท่าทางที่มีคุณสมบัติสำคัญ ได้แก่ การเคลื่อนที่ (ระยะที่เคลื่อนที่ทั้งหมดนับจากจุดเริ่มลาก), ความเร็ว (ความเร็วปัจจุบัน), ทิศทาง (ค่า 1 หรือ -1 ในแต่ละแกน), แรก (เป็นจริงเมื่อเริ่มลาก), สุดท้าย (เป็นจริงเมื่อสิ้นสุดการลาก) และ เหตุการณ์ (เหตุการณ์ DOM ดิบ)

ฮุก use-gesture ทั้งหมดจะส่งคืนฟังก์ชัน bind() การเรียกใช้ bind() จะส่งคืนอ็อบเจ็กต์ของพร็อพตัวจัดการเหตุการณ์ (onPointerDown, onTouchStart เป็นต้น) ซึ่งคุณสามารถกระจายไปยังองค์ประกอบที่ต้องการทำให้โต้ตอบได้ นี่คือจุดเชื่อมต่อระหว่างตัวรู้จำท่าทางกับองค์ประกอบ DOM ของคุณ

รูปแบบมาตรฐานคือ สร้างสปริงด้วย API แบบสั่งการ ([springs, api] = useSpring(...)) จากนั้นใช้ useDrag เรียก api.start({ x: movement[0], y: movement[1] }) ในทุกเหตุการณ์ลาก สปริงจะเคลื่อนตามการลากอย่างนุ่มนวล ช่วยเพิ่มหลักฟิสิกส์ที่เป็นธรรมชาติให้กับการติดตามเคอร์เซอร์ ซึ่งหากไม่ใช้วิธีนี้จะดูแข็งกระด้าง

เมื่อการลากสิ้นสุดลง (last: true ในสถานะท่าทาง) โดยทั่วไปคุณจะให้วัตถุเด้งกลับไปยังจุดเริ่มต้น เรียก api.start({ x: 0, y: 0 }) ภายในการตรวจสอบ if (last) react-spring จะทำให้วัตถุเคลื่อนกลับด้วยหลักฟิสิกส์ของสปริง ซึ่งจะเด้งเบา ๆ แทนการรีเซ็ตทันที ทำให้การโต้ตอบให้ความรู้สึกเหมือนวัตถุจริงอย่างน่าพึงพอใจ

ค่า velocity ในสถานะท่าทางช่วยให้สร้างพฤติกรรมการขว้างได้ เมื่อผู้ใช้ปล่อยวัตถุด้วยความเร็วสูง คุณสามารถเหวี่ยงวัตถุไปตามทิศทางการลากแทนที่จะให้เด้งกลับ ตรวจสอบ if (last && velocity[0] > threshold) แล้วจึงทำให้วัตถุเคลื่อนไปยังตำแหน่งสุดท้ายนอกหน้าจอ วิธีนี้จำเป็นสำหรับการโต้ตอบแบบปัดเพื่อปิด

หากต้องการจำกัดการเคลื่อนที่ของการลากให้อยู่ภายในภาชนะ ให้จำกัดค่าการเคลื่อนที่ก่อนส่งไปยังสปริง: x: Math.max(-maxX, Math.min(maxX, movement[0])) อีกทางเลือกหนึ่งคือใช้ตัวเลือก bounds ในตัวของ use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }) เพื่อจำกัดสถานะท่าทางโดยอัตโนมัติ

การใช้งานการปัดเพื่อปิดบนอุปกรณ์เคลื่อนที่ทำได้โดยใช้ useDrag เพื่อติดตามการเคลื่อนที่ในแนวนอน หากผู้ใช้ปล่อยวัตถุด้วยความเร็วสูงกว่าเกณฑ์ OR เคลื่อนที่ไปมากกว่าครึ่งหนึ่งของความกว้างหน้าจอ ให้ทำให้การ์ดเคลื่อนออกนอกหน้าจอ (api.start({ x: window.innerWidth })) แล้วลบการ์ดนั้นออกจากรายการ มิฉะนั้นให้การ์ดเด้งกลับไปตรงกลาง

usePinch ตรวจจับท่าทางบีบนิ้วด้วยสองนิ้วบนหน้าจอสัมผัส รวมถึงการหมุนล้อเมาส์พร้อมกด Ctrl บนคอมพิวเตอร์ สถานะท่าทางประกอบด้วย scale (ระดับการซูมปัจจุบันเมื่อเทียบกับจุดเริ่มต้นการบีบนิ้ว) และ origin (จุดกึ่งกลางของการบีบนิ้ว) เชื่อมต่อกับสปริงที่ติดตามระดับการซูมเพื่อสร้างการซูมรูปภาพหรือแผนที่ที่ลื่นไหลและอยู่ภายในขอบเขต

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

ฮุก use-gesture สามารถประกอบร่วมกันได้ คุณสามารถใช้ทั้ง useDrag และ usePinch กับองค์ประกอบเดียวกัน: const bindDrag = useDrag(...); const bindPinch = usePinch(...) จากนั้นกระจายฟังก์ชัน bind ทั้งสอง: ...bindDrag() ...bindPinch() โดย use-gesture จะจัดการแยกแยะระหว่างประเภทท่าทางให้โดยอัตโนมัติ

ฟังก์ชัน bind() ที่ฮุก use-gesture ส่งคืนมาทำหน้าที่อะไร

@use-gesture/react มี useDrag, usePinch, useScroll, useHover และ useMove ฮุกแต่ละตัวจะส่งคืนฟังก์ชัน bind() ซึ่งผลลัพธ์จากการกระจายจะเชื่อมเหตุการณ์ท่าทางเข้ากับองค์ประกอบ DOM สถานะท่าทางจะมอบการเคลื่อนที่ ความเร็ว ทิศทาง ค่าแรก และค่าสุดท้าย ใช้ร่วมกับ api.start() แบบสั่งการของ react-spring เพื่อสร้างภาพเคลื่อนไหวแบบโต้ตอบที่อิงหลักฟิสิกส์ ใช้ความเร็วสำหรับการเหวี่ยงหรือปิด และใช้ขอบเขตเพื่อจำกัดการเคลื่อนที่