ทำความเข้าใจระยะการเลื่อน

การเลื่อนแบ่งออกเป็นหลายเฟส ระบบจะส่งเดลต้าอินพุตผ่านลำดับเฟสเพื่อให้แน่ใจว่าแต่ละเฟสมีโอกาสที่จะใช้หรือตอบสนองต่อการเคลื่อนไหว

ตลอดวงจรนี้ ระบบจะส่งต่อทั้งเดลต้าอินพุตที่ใช้ได้และเดลต้าอินพุตที่ใช้ไปแล้วในทุกขั้นตอน ซึ่งจะทำให้แต่ละเฟสมีบริบทที่สมบูรณ์ที่จำเป็นในการตอบสนอง ใช้ หรือฟังเหตุการณ์การเลื่อน

ดังที่แสดงในรูปที่ 1 กระบวนการเลื่อนจะเป็นไปตามลำดับที่แน่นอนดังนี้

1. Overscroll: รับเดลต้าอินพุตเริ่มต้นก่อน ซึ่งจะทำให้ Overscroll มีโอกาสตอบสนองก่อน (เช่น โดยการผ่อนคลายเอฟเฟกต์การยืดที่ใช้งานอยู่)
2. Nested scroll pre-scroll: ให้โอกาสในการตอบสนองต่อเดลต้าอินพุตก่อนเฟสการเลื่อน ในเฟสนี้ ระบบอาจใช้เดลต้าอินพุตบางส่วน หรืออาจเพียงแค่ตรวจสอบเพื่อทริกเกอร์การเปลี่ยนแปลง UI เช่น การยุบหรือขยาย App Bar
3. แปลงเดลต้าอินพุต: ปรับเครื่องหมายของเดลต้าอินพุตดิบตาม การวางแนวและทิศทางของเลย์เอาต์เพื่อให้ได้ลักษณะการเลื่อนที่เป็นธรรมชาติ ดูข้อมูลเพิ่มเติมได้ที่ส่วน Transform input delta
4. การเลื่อน: เฟสนี้จะรับเดลต้าอินพุตที่ใช้ได้และยังไม่ได้ใช้ซึ่งปรับให้ตรงกับการกำหนดค่าคอนเทนเนอร์การเลื่อน โดยปกติแล้วจะใช้เดลต้านี้เพื่ออัปเดตออฟเซ็ตการเลื่อนของตัวเอง
5. Revert to raw input delta: เปลี่ยนเดลต้าที่ใช้ได้และใช้ไปแล้วจากเฟส การเลื่อน กลับเป็นเครื่องหมายเดลต้าอินพุตดิบเดิม
6. Nested scroll post-scroll: เฟสนี้จะตอบสนองหลังจากเฟสการเลื่อนหลักเสร็จสมบูรณ์ โดยจะรับเดลต้าที่ใช้ได้และใช้ไปแล้วที่อัปเดตใหม่ ซึ่งสามารถใช้เดลต้าอินพุตที่ใช้ได้ที่เหลืออยู่ หรือใช้บริบทของสิ่งที่ใช้ไปแล้ว
7. Overscroll: เฟสสุดท้ายนี้จะดูเดลต้าที่ใช้ได้และใช้ไปแล้วสุดท้าย โดยปกติแล้ว ระบบจะใช้เดลต้าอินพุตที่ใช้ได้ที่เหลืออยู่ซึ่งมาถึงขั้นตอนนี้เพื่อขับเคลื่อนเอฟเฟกต์ขอบ เช่น การยืดหรือการเรืองแสง ซึ่งบ่งบอกว่าผู้ใช้ไปถึงขอบเขตของพื้นที่ที่เลื่อนได้แล้ว

Transform input delta

เดลต้าอินพุตของตัวชี้ต้องมีการปรับเครื่องหมายในเฟสการเลื่อนต่างๆ ให้ตรงกับสัญญาที่คาดไว้ ก่อนที่เดลต้าจะไปถึงเฟสการเลื่อน ตัวปรับเปลี่ยนการเลื่อนจะปรับเดลต้าอินพุตตามการวางแนว ทิศทางของเลย์เอาต์ และบริบท RTL ซึ่งเป็นเช่นนี้เนื่องจากอินพุตดิบจะติดตามการเคลื่อนไหวของพิกเซลจริงของตัวชี้บนหน้าจอ (เช่น การเลื่อนลงจะเพิ่มพิกัด Y ของหน้าจอ ซึ่งทำให้เกิดเดลต้าที่เป็นบวก) อย่างไรก็ตาม หากต้องการให้ได้ "การเลื่อนที่เป็นธรรมชาติ" ซึ่งเนื้อหาจะเคลื่อนที่ไปพร้อมกับนิ้วของคุณ การลากลงหมายความว่าวิวพอร์ตต้องเลื่อนขึ้นเหนือเนื้อหา ซึ่งสอดคล้องกับออฟเซ็ตการเลื่อนที่เป็นลบ

ระบบจะไม่แปลงเดลต้าอินพุตจากแหล่งที่มาของอินพุตอื่นๆ เช่น ล้อเลื่อนของเมาส์หรือทัชแพด ตลอดเฟสการเลื่อน

ตัวอย่าง: ตัวชี้เลื่อนไปทางขวาโดยใช้ Modifier.horizontalScroll()

หากต้องการทำความเข้าใจวิธีที่ระบบใช้และแปลงเดลต้า โปรดดูรูปที่ 2 ซึ่งแสดงท่าทางสัมผัสที่ตัวชี้เลื่อนไปทาง ขวา

• Pre-scroll: ท่าทางสัมผัสเริ่มต้นด้วยเดลต้าอินพุตดิบที่เป็นบวกที่ 100
  • Overscroll สังเกตเห็นสิ่งนี้และใช้ 10 เหลือ 90
  • Nested scroll pre-scroll ให้โอกาสคอมโพเนนต์ระดับบนในการตอบสนอง โดยใช้ 30 เดลต้าดิบที่เหลือคือ 60
• การแปลง A: ก่อนเข้าสู่เฟสการเลื่อน horizontalScroll จะกลับเดลต้าดิบที่เป็นบวกที่เหลืออยู่ (60) เป็น เดลต้าที่เป็นลบ (-60) ซึ่งจะช่วยให้วิวพอร์ตเลื่อนไปทางซ้ายเพื่อให้เนื้อหาปรากฏขึ้นว่าเลื่อนไปทางขวาพร้อมกับนิ้วของผู้ใช้
• การเลื่อน: คอมโพเนนต์ที่เลื่อนได้เป้าหมายจะใช้เดลต้าที่แปลงแล้วบางส่วนเพื่ออัปเดตออฟเซ็ตการเลื่อน ในตัวอย่างนี้ คอมโพเนนต์จะใช้ -30 เหลือ -30 ที่ยังไม่ได้ใช้
• การแปลง B: ระบบจะแปลงเดลต้าการเลื่อนที่ยังไม่ได้ใช้ (-30) กลับเป็นเดลต้าดิบที่เป็นบวก (30) เพื่อให้ตรงกับสัญญาของ Nested Scroll และ Overscroll
• Post-scroll: ระบบจะส่งเดลต้าดิบที่เหลือกลับขึ้นไปตามไปป์ไลน์
  • Nested scroll post-scroll ใช้ 10 เหลือ 20
  • เอฟเฟกต์ Overscroll ใช้ 20 สุดท้ายเพื่อขับเคลื่อนเอฟเฟกต์ขอบภาพ เช่น การยืดหรือการเรืองแสง ซึ่งจะแก้เดลต้าอินพุตเป็น 0 อย่างสมบูรณ์

ข้อมูลอ้างอิงการแปลงเดลต้าอินพุตของตัวชี้

ตารางต่อไปนี้แสดงวิธีที่ระบบกำหนดเครื่องหมายเดลต้าอินพุตในเฟสและทิศทางต่างๆ สำหรับอินพุตของตัวชี้

	เดลต้าอินพุตดิบ	เอฟเฟกต์ Overscroll	Nested Scroll	scrollableArea ที่มีการวางแนวแนวนอน	scrollableArea ที่มีการวางแนวแนวนอน (กลับด้าน)	scrollableArea ที่มีการวางแนวแนวตั้ง	scrollableArea ที่มีการวางแนวแนวตั้ง (กลับด้าน)
ตัวชี้เลื่อนขึ้น	ลบ	ลบ	ลบ	ไม่มี	ไม่มี	บวก	ลบ
ตัวชี้เลื่อนลง	บวก	บวก	บวก	ไม่มี	ไม่มี	ลบ	บวก
ตัวชี้เลื่อนไปทางซ้าย	ลบ	ลบ	ลบ	บวก (ลบสำหรับ RTL)	ลบ (บวกสำหรับ RTL)	ไม่มี	ไม่มี
ตัวชี้เลื่อนไปทางขวา	บวก	บวก	บวก	ลบ (บวกสำหรับ RTL)	บวก (ลบสำหรับ RTL)	ไม่มี	ไม่มี