แกวงกวารี · Open source
ขนาดเล็กเสียงดังกังวาน
เครื่องมือโอเพนซอร์สสำหรับ state และการเคลื่อนไหวใน React และ React Native สามแพ็กเกจที่โฟกัสงานชัดเจน ใช้งานได้ตั้งแต่ import แรก และขยายเท่าที่คุณต้องการเท่านั้น
- 3 แพ็กเกจ
- React · React Native
- การประกาศชนิด TypeScript
- สัญญาอนุญาต ISC
ตีฆ้อง เครื่องมือแต่ละตัวจะตอบรับเสียงกังวานในแบบของตัวเอง
restate()useDraft.set()shallowpersistedRestate()useRestateScope()useAnimatedValuetiming()spring()interpolate()Animated.KeepAnimated.SceneMotionNumberMotionHighlightMotionListMotionSwapMotionSheetProgressRingrestate()useDraft.set()shallowpersistedRestate()useRestateScope()useAnimatedValuetiming()spring()interpolate()Animated.KeepAnimated.SceneMotionNumberMotionHighlightMotionListMotionSwapMotionSheetProgressRing
State·React + React Native
แชร์ด้วย hook เดียวบันทึกเมื่อคุณตัดสินใจ
คอมโพเนนต์อ่านค่าเดียวกันได้โดยไม่ต้องมี Provider, action หรือ reducer จะเรนเดอร์ใหม่เมื่อส่วนที่เลือกเปลี่ยนเท่านั้น และการบันทึกหรือกู้คืนจะเกิดขึ้นตรงตามที่คุณสั่ง
- แชร์ได้โดยไม่ต้องมี Provider
- สมัครรับเฉพาะส่วนที่คุณเลือก
- บันทึกลง IndexedDB หรือ MMKV อย่างชัดเจน
ติดตั้งnpm install @kkwaenggwari/restate
สด
สองคอมโพเนนต์ หนึ่ง store
กดปุ่มฝั่งไหนก็ได้ ทั้งสองแผงอ่านค่า restate() เดียวกันและเปลี่ยนไปพร้อมกัน ส่วนป้ายการจัดส่งฟังเพียงส่วนที่เลือกส่วนเดียว
เอนจินการเคลื่อนไหว·React DOM
ค่าเดียวควบคุมทั้งหน้าจอ
ใช้ timing, spring และ interpolate ที่คุ้นเคยจาก React Native Animated บน React DOM ค่าเดียวขับสไตล์ขององค์ประกอบจำนวนมากโดยไม่มีการเรนเดอร์ React ในทุกเฟรม
- React Native Animated API ที่คุณรู้จัก
- ถูกขัดจังหวะก็ยังคงตำแหน่งและความเร็วไว้
- เก็บกวาดเองเมื่อเจ้าของหายไป
ติดตั้งnpm install @kkwaenggwari/animated
สด
หนึ่ง Value สิบสองรูปทรง
แถบเลื่อนเปลี่ยน Value เพียงตัวเดียว ตำแหน่ง การหมุน ขนาด และมุมของทั้งสิบสองรูปทรงคำนวณมาจากมัน กดปุ่มสปริงแล้วคว้าแถบเลื่อนกลางทาง
คอมโพเนนต์สำเร็จรูป·React · React Native
อินเทอร์แอ็กชันที่ยากทำเสร็จไว้แล้ว
ตัวเลขที่หมุน ไฮไลต์ที่เคลื่อนที่ รายการที่ขยับเฉพาะส่วนที่เปลี่ยน ชีต และการกระทำด้วยการปัด แค่ส่งข้อมูลของคุณ — ไม่ต้องมี provider หรือการเรียกตั้งค่า — บน React และ React Native
- ตัวเลข แท็บ รายการ และชีต
- import เดียวกันทั้งบนเว็บและแบบเนทีฟ
- อินพุตใหม่ทำต่อจากสิ่งที่อยู่บนหน้าจอ
ติดตั้งnpm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated
สด
แดชบอร์ดที่ต้องการแค่ข้อมูล
เลือกช่วงเวลา: MotionHighlight เคลื่อนไปที่นั่น MotionNumber หมุน ProgressRing เติมเต็ม และ MotionList ขยับเฉพาะแถวที่เปลี่ยน
วันนี้สัปดาห์นี้เดือนนี้
ข้อมูลตัวอย่าง
02 · วงดนตรี
ตีครั้งเดียวทุกอย่างเคลื่อนไหว
เวทีนี้สร้างด้วย Animated มี Value เพียงตัวเดียวเก็บความคืบหน้าการเลื่อนของคุณ และควบคุมตำแหน่ง การหมุน ขนาด และความทึบของ 48 รูปทรงพร้อมกัน
- 01
กังวานจุดที่กระจายอยู่รวมตัวเป็นวงของฆ้อง
- 02
แยกวงแยกออกเป็นสามและรับสีของเครื่องมือแต่ละตัว
- 03
รูปทรงกลายเป็นจุดเชื่อมของ state เส้นทางของการเคลื่อนไหว และเสาหลักของ chorus
- 04
จังหวะทุกอย่างเรียงตัวและลงบนจังหวะเดียวกัน
progress
03 · หลักการ
เล็กตั้งแต่ต้นจนจบ
เริ่มด้วย import เดียว
ไม่ต้องมี provider ครอบหรือการตั้งค่าส่วนกลางตั้งแต่แรก เพิ่มความสามารถเมื่อแอปต้องการเท่านั้น
เฉพาะสิ่งที่จำเป็น
อัปเดตเฉพาะคอมโพเนนต์ที่ส่วนที่เลือกเปลี่ยน องค์ประกอบที่ใช้ค่านั้น และแถวที่ขยับเท่านั้น
รับผิดชอบจนถึงที่สุด
การเคลื่อนไหวที่ถูกขัดจังหวะจะทำต่อจากสิ่งที่อยู่บนหน้าจอ และการสมัครรับกับแอนิเมชันจะถูกปล่อยเมื่อเจ้าของหายไป
มีชนิดข้อมูลและมีเอกสาร
ทุกแพ็กเกจมาพร้อมการประกาศชนิด TypeScript และเอกสารอ่านได้ใน 39 ภาษา
