ประมาณ 5 นาที · React 16.8+ · React DOM
เริ่มต้นใช้งาน
ตั้งแต่ติดตั้งจนถึงท่าทางและการเคลื่อนไหวเข้าออกในหกขั้น แต่ละขั้นเป็นคอมโพเนนต์เล็ก ๆ ที่ใช้งานได้
ติดตั้ง
Animated ไม่มี dependency ตอนรันไทม์ React 16.8+ เป็น peer dependency
จุดเริ่มต้นของแพ็กเกจมีเครื่องหมาย 'use client' ใน Next.js App Router เลย์เอาต์ฝั่งเซิร์ฟเวอร์เรนเดอร์
AnimatedProviderได้ ส่วน hook และAnimated.<tag>ให้ใช้ภายใน Client Componentsnpm install @kkwaenggwari/animatedimport ของ
@kkwaenggwari/animatedถูกระบุได้ในตัวแก้ไขของคุณทำให้ค่าแรกเคลื่อนไหว
useAnimatedValue(1)ถือครองตัวเลขที่มีชีวิตตลอดอายุของคอมโพเนนต์ ใส่ไว้ในstyleได้โดยตรง มันจะกลายเป็นตัวแปร CSS React จึงไม่เรนเดอร์ขณะที่ค่าเปลี่ยนtiming(value, { toValue, duration }).start()ทำให้มันเคลื่อนที่ การกดอีกครั้งกลางทางจะเริ่มจากความทึบปัจจุบันกำลังเตรียมตัวอย่าง…
กรอบจะจางลงแล้วกลับมา และการกดครั้งที่สองกลางทางจะกลับทิศจากตำแหน่งที่อยู่
สร้างผลลัพธ์หลายอย่างจากค่าเดียว
interpolateแปลงค่าเป็นความยาว มุม หรือตัวเลข หากไม่มี easing มันจะเป็นcalc()ที่แม่นยำของตัวแปรเดียวกัน ห้าเลนจึงมีต้นทุนเท่ากับเลนเดียวช่วงอินพุตที่ต่างกันของค่าเดียวกันสร้างการไล่ลำดับได้โดยไม่ต้องมีห้าแอนิเมชันแยกกัน
กำลังเตรียมตัวอย่าง…
กดครั้งเดียวทำให้ห้าเลนเคลื่อนไหวแบบไล่ลำดับ การเปลี่ยนการกระจายจะเปลี่ยนแค่ช่วง
บอกปลายทาง
Animated.buttonเรนเดอร์ปุ่มธรรมดาseedคือเฟรมแรกposeคือที่ที่มันควรอยู่ตอนนี้ และtempoคือวิธีที่มันไปถึงเมื่อ
poseเปลี่ยนกลางทาง องค์ประกอบจะเลี้ยวจากตำแหน่งบนหน้าจอ และกับสปริงจะรักษาความเร็วไว้กำลังเตรียมตัวอย่าง…
คลิกแท็บเร็ว ๆ ก็ไม่มีแท็บไหนกระโดด
เชื่อมอินพุต
input(ref, moveInput(...))เขียนพิกัดของตัวชี้ลงในค่าfollow(target, source)ทำให้ค่าหนึ่งตามอีกค่าด้วยสปริงทุกอย่างที่ประกาศใน factory ของ
useAnimatedเป็นของคอมโพเนนต์ listener และสปริงจะหยุดเมื่อ unmount หรือเมื่อ dependency เปลี่ยนกำลังเตรียมตัวอย่าง…
การ์ดเอียงไปทางตัวชี้และสงบลงเมื่อตัวชี้ออกไป
ทำให้การจากไปเคลื่อนไหว
การนำ child ของ React ออกปกติจะลบทิ้งทันที
Animated.Keepเก็บ children ที่มี key ไว้จนกว่า posedepartจะจบwaitจะเรนเดอร์ children ใหม่ก็ต่อเมื่อการจากไปทั้งหมดเสร็จแล้วกำลังเตรียมตัวอย่าง…
ข้อความที่ถูกปัดทิ้งจะออกไปด้วยการเคลื่อนไหวที่เลือกก่อนหายไป
คุณมีโมเดลครบแล้ว
ค่า ปลายทาง อินพุต และการจากไปใช้ตัวควบคุม กฎการขัดจังหวะ และการเก็บกวาดร่วมกัน คู่มือจะลงรายละเอียดแต่ละเรื่อง