คอมโพเนนต์แบบแอนิเมชันและการอินเทอร์โพเลตสไตล์

รีแอกต์สปริงมีคอมโพเนนต์ HTML แบบเคลื่อนไหวให้ใช้งานกับองค์ประกอบ HTML ทั้งหมด เช่น animated.div, animated.span, animated.img, animated.button และอื่น ๆ คอมโพเนนต์เหล่านี้เป็นส่วนแทนที่โดยตรงขององค์ประกอบดั้งเดิม โดยมีความแตกต่างสำคัญประการหนึ่งคือ สามารถรับออบเจ็กต์ SpringValue เป็นพร็อพสไตล์ได้

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

นำค่าสปริงไปใช้โดยตรงเป็นพร็อพสไตล์ CSS บนคอมโพเนนต์แบบเคลื่อนไหว ตัวอย่างเช่น: style={{ opacity: opacity, transform: transform }} โดยที่ opacity และ transform เป็น SpringValues จาก useSpring animated.div จะอ่านค่าเหล่านี้ในทุกจังหวะของ RAF (requestAnimationFrame) และนำไปใช้กับโหนด DOM

SpringValues มีเมธอด .to() สำหรับแปลงผลลัพธ์ของค่า กรณีใช้งานที่พบบ่อยคือการแปลงค่าสปริงตัวเลขให้เป็นสตริง CSS: x.to(v => "translateX(" + v + "px)") ฟังก์ชันจะรับค่าตัวเลขปัจจุบันและส่งคืนผลลัพธ์ที่แปลงแล้ว ซึ่งจะถูกนำไปใช้เป็นสไตล์

เมธอด .to() ยังรับอินพุตแบบอาร์เรย์สำหรับการแมปช่วงได้ด้วย: x.to([0, 1], ["#ff0000", "#00ff00"]) ซึ่งจะแมปค่าสปริงจากช่วง [0, 1] ไปยังช่วงสีจากแดงเป็นเขียว วิธีนี้ใช้แปลงค่าสปริงตัวเลขให้เป็นสี สตริง หรือค่าใด ๆ ที่ไม่สามารถแทนด้วยตัวเลขธรรมดาได้

เมื่อสปริงติดตามหลายค่าพร้อมกัน คุณสามารถแปลงค่าเหล่านั้นร่วมกันได้ สำหรับสปริงที่ติดตาม { x, y } คุณสามารถเขียนได้ดังนี้: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)") ฟังก์ชันเรียกกลับของ .to() จะรับค่าทั้งหมดตามลำดับที่ปรากฏในค่ากำหนดของสปริง

คุณสามารถห่อคอมโพเนนต์ของคุณเองด้วย animated() ได้: const AnimatedCard = animated(Card) คอมโพเนนต์ที่ถูกห่อต้องรองรับพร็อพ style และส่งต่อพร็อพนั้นไปยังองค์ประกอบ DOM ตอนนี้ AnimatedCard สามารถรับ SpringValues ในพร็อพสไตล์ได้เช่นเดียวกับ animated.div

แอนิเมชันที่ซับซ้อนมักรวมสปริงหลายตัวเข้าด้วยกัน ตัวอย่างเช่น แอนิเมชันการปรากฏอาจใช้สปริงหนึ่งตัวสำหรับความทึบ และอีกตัวสำหรับตำแหน่งแนวตั้ง คุณสามารถนำทั้งสองค่าไปใช้กับ animated.div เดียวกันได้: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}

คุณลักษณะด้านประสิทธิภาพที่สำคัญที่สุดของรีแอกต์สปริงคือ การอัปเดตค่าแบบเคลื่อนไหวจะข้ามตัวประสานของรีแอกต์ เมื่อสปริงกำลังแอนิเมชัน รีแอกต์จะ NOT เรนเดอร์คอมโพเนนต์ซ้ำในทุกเฟรม แต่คอมโพเนนต์ animated.* จะอัปเดตคุณสมบัติสไตล์ของโหนด DOM โดยตรงในฟังก์ชันเรียกกลับของ requestAnimationFrame แต่ละรอบ ทำให้สร้างแอนิเมชัน 60fps ได้โดยไม่ต้องรับภาระจากรีแอกต์

รูปแบบแอนิเมชันทั่วไปที่ใช้การแปลงค่า ได้แก่ แสดงแบบจางเข้าตอนเมาท์ด้วย opacity.to([0, 1], [0, 1]) ขยายเมื่อวางเมาส์เหนือด้วย scale.to(s => "scale(" + s + ")") และหมุนเมื่อสลับสถานะด้วย rotation.to(r => "rotate(" + r + "deg)") การเชื่อมการเปลี่ยนรูปเหล่านี้เข้าด้วยกันจะสร้างเอฟเฟกต์แบบผสม

โดยค่าเริ่มต้น .to() ที่ใช้อาร์เรย์ช่วงสามารถคาดคะเนนอกเหนือจากช่วงที่กำหนดได้ คุณสามารถควบคุมสิ่งนี้ด้วยตัวเลือก extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) ซึ่งจะป้องกันไม่ให้ผลลัพธ์ต่ำกว่า 0 หรือสูงกว่า 100 แม้สปริงจะเคลื่อนเลยเป้าหมายก็ตาม วิธีนี้มีประโยชน์สำหรับแถบความคืบหน้าและแอนิเมชันที่มีขอบเขต

เหตุใดจึงต้องใช้ animated.div แทน div ธรรมดาเมื่อนำค่าสปริงไปใช้

animated.div, animated.span และ animated(CustomComponent) เป็นส่วนแทนที่แบบใช้ได้ทันทีที่รองรับ SpringValues เป็นพร็อพสไตล์ เมธอด .to() จะแปลงค่าสปริงเป็นสตริง CSS ช่วงสี หรือรูปแบบผลลัพธ์ใด ๆ สปริงหลายตัวสามารถประกอบกันบนองค์ประกอบเดียวได้อย่างเป็นธรรมชาติ ประโยชน์ด้านประสิทธิภาพที่สำคัญคือ การอัปเดตสปริงจะข้ามการเรนเดอร์ซ้ำของรีแอกต์ด้วยการเปลี่ยนแปลงสไตล์ DOM โดยตรงในฟังก์ชันเรียกกลับของ RAF