ติดตามการเปลี่ยนเฟรมหน้าต่างโดยใช้ Winscope

Winscope เป็นเครื่องมือบนเว็บที่ช่วยให้คุณบันทึก เล่นซ้ำ และวิเคราะห์สถานะของ บริการของระบบหลายอย่างในระหว่างและหลังภาพเคลื่อนไหวและการเปลี่ยนฉาก Winscope บันทึกสถานะบริการของระบบที่เกี่ยวข้องทั้งหมดลงในไฟล์การติดตาม การใช้ Winscope UI กับไฟล์การติดตามจะช่วยให้คุณตรวจสอบสถานะของบริการเหล่านี้สำหรับแต่ละเฟรมภาพเคลื่อนไหว ได้ ไม่ว่าจะมีการบันทึกหน้าจอหรือไม่ก็ตาม โดยการเล่นซ้ำ การก้าวผ่าน และการแก้ไขข้อบกพร่องของการเปลี่ยนภาพ

การติดตามที่รองรับ

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

  • EventLog: รวบรวมบันทึกเหตุการณ์การวินิจฉัยระบบโดยใช้ EventLog ใน Winscope ระบบจะใช้ข้อมูลนี้เพื่อระบุและแสดงเครื่องหมาย CUJ เท่านั้น
  • IME: ติดตามเหตุการณ์จากไปป์ไลน์ตัวแก้ไขวิธีการป้อนข้อมูล (IME) ซึ่งรวมถึง IMS, IMMS และไคลเอ็นต์ IME
  • อินพุต: ติดตามเหตุการณ์อินพุตจากส่วนต่างๆ ของไปป์ไลน์เหตุการณ์อินพุต
  • ProtoLog: รวบรวมข้อความ ProtoLog จากบริการของระบบและโค้ดของบริการของระบบที่ทำงานในกระบวนการไคลเอ็นต์
  • การบันทึกหน้าจอ: รวบรวมการบันทึกหน้าจอพร้อมกับร่องรอย
  • การเปลี่ยนเชลล์: บันทึกรายละเอียดระบบการเปลี่ยนหน้าต่างและกิจกรรม
  • SurfaceFlinger: รวบรวมการติดตาม SurfaceFlinger ที่มีข้อมูลเกี่ยวกับ Surface (เลเยอร์) เช่น ตำแหน่ง บัฟเฟอร์ และการจัดองค์ประกอบ
  • ธุรกรรม: ติดตามชุดการเปลี่ยนแปลงแบบอะตอมที่ SurfaceFlinger ได้รับ โดยใช้ SurfaceControl สำหรับการจัดองค์ประกอบ
  • ViewCapture: จับภาพพร็อพเพอร์ตี้ต่างๆ ของมุมมองทั้งหมดจากหน้าต่างระบบที่รองรับ ViewCapture เช่น UI ของระบบและ Launcher
  • Window Manager: Trace Window Manager states ที่มีรายละเอียดเกี่ยวกับหน้าต่าง รวมถึงเหตุการณ์อินพุตและโฟกัส การวางแนวหน้าจอ การเปลี่ยนฉาก ภาพเคลื่อนไหว การวางตำแหน่ง และ การเปลี่ยนรูป

การทิ้งที่รองรับ

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

  • Window Manager: ดัมพ์สถานะ Window Manager รายการเดียว
  • SurfaceFlinger: ดัมพ์สแนปชอต SurfaceFlinger รายการเดียว
  • ภาพหน้าจอ: รวบรวมภาพหน้าจอพร้อมกับไฟล์การทิ้ง

แหล่งข้อมูล

ดูข้อมูลเกี่ยวกับการสร้างและเรียกใช้ Winscope ได้ที่เรียกใช้ Winscope

ดูข้อมูลเกี่ยวกับการรวบรวมการติดตามได้ที่บันทึกการติดตาม

ดูข้อมูลเกี่ยวกับวิธีโหลดการติดตามโดยใช้ Winscope Web UI ได้ที่โหลดการติดตาม

ดูข้อมูลเกี่ยวกับการวิเคราะห์การติดตามได้ที่วิเคราะห์การติดตาม

ตัวอย่าง

ตัวอย่างต่อไปนี้อธิบายวิธีแก้ไขข้อบกพร่องของผลการทดสอบการกะพริบที่ไม่สำเร็จและข้อบกพร่องที่ผู้ใช้รายงาน

การทดสอบการกะพริบไม่สำเร็จ

ตัวอย่างนี้แสดงวิธีใช้ Winscope เพื่อแก้ไขข้อบกพร่องของการทดสอบการกะพริบที่ล้มเหลว

ตรวจสอบการทดสอบล้มเหลว

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

  1. พิจารณาประเภทปัญหาโดยตรวจสอบชื่อการทดสอบและชื่อชั้นเรียน

    ชื่อการทดสอบและชั้นเรียน

    FlickerTestsNotification com.android.server.wm.flicker.notification.OpenAppFromLockscreenNotificationColdTest#appLayerBecomesVisible[ROTATION_0_GESTURAL_NAV]
    

    ประเภทปัญหา:

    • CUJ หมายถึงการเปิดแอปจากการแจ้งเตือนบนหน้าจอล็อก (OpenAppFromLockscreenNotificationColdTest)
    • การทดสอบคาดหวังให้แอปปรากฏ (#appLayerBecomesVisible)
  2. ตรวจสอบข้อความการทดสอบล้มเหลว ซึ่งมีข้อมูลที่ครอบคลุมเกี่ยวกับการทดสอบล้มเหลว รวมถึงข้อมูลต่อไปนี้

    • การเปรียบเทียบผลลัพธ์ที่คาดหวังกับผลลัพธ์ที่มองเห็นได้จริง
    • การประทับเวลาเพื่อช่วยระบุเวลาที่เกิดความล้มเหลว
    • ชื่อของอาร์ติแฟกต์หรือไฟล์ที่เชื่อมโยงกับความล้มเหลว
    • ข้อมูลตามบริบทเพิ่มเติมที่เกี่ยวข้องกับการทำความเข้าใจและ การแก้ไขข้อบกพร่องของความล้มเหลว
    android.tools.flicker.subject.exceptions.IncorrectVisibilityException: com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity# should be visible
    
    Where?
        Timestamp(UNIX=2024-05-10T11:04:14.227572545(1715339054227572545ns), UPTIME=37m21s184ms79178ns(2241184079178ns), ELAPSED=0ns)
    
    What?
        Expected: com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity#
        Actual: [e636ecd com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity#3457: Buffer is empty, Visible region calculated by Composition Engine is empty, com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity#3458: Visible region calculated by Composition Engine is empty]
    
    Other information
        Artifact: FAIL__OpenAppFromLockscreenNotificationColdTest_ROTATION_0_GESTURAL_NAV.zip
    
    Check the test run artifacts for trace files
    
        at android.tools.flicker.subject.layers.LayerTraceEntrySubject.isVisible(LayerTraceEntrySubject.kt:187)
        at android.tools.flicker.subject.layers.LayersTraceSubject$isVisible$1$1.invoke(LayersTraceSubject.kt:151)
        at android.tools.flicker.subject.layers.LayersTraceSubject$isVisible$1$1.invoke(LayersTraceSubject.kt:150)
        at android.tools.flicker.assertions.NamedAssertion.invoke(NamedAssertion.kt:32)
        at android.tools.flicker.assertions.CompoundAssertion.invoke(CompoundAssertion.kt:42)
        at android.tools.flicker.assertions.AssertionsChecker.test(AssertionsChecker.kt:79)
        at android.tools.flicker.subject.FlickerTraceSubject.forAllEntries(FlickerTraceSubject.kt:59)
        at android.tools.flicker.assertions.AssertionDataFactory$createTraceAssertion$closedAssertion$1.invoke(AssertionDataFactory.kt:46)
        at android.tools.flicker.assertions.AssertionDataFactory$createTraceAssertion$closedAssertion$1.invoke(AssertionDataFactory.kt:43)
        at android.tools.flicker.assertions.AssertionDataImpl.checkAssertion(AssertionDataImpl.kt:33)
        at android.tools.flicker.assertions.ReaderAssertionRunner.doRunAssertion(ReaderAssertionRunner.kt:35)
        at android.tools.flicker.assertions.ReaderAssertionRunner.runAssertion(ReaderAssertionRunner.kt:29)
        at android.tools.flicker.assertions.BaseAssertionRunner.runAssertion(BaseAssertionRunner.kt:36)
        at android.tools.flicker.legacy.LegacyFlickerTest.doProcess(LegacyFlickerTest.kt:59)
        at android.tools.flicker.assertions.BaseFlickerTest.assertLayers(BaseFlickerTest.kt:89)
        at com.android.server.wm.flicker.notification.OpenAppTransition.appLayerBecomesVisible_coldStart(OpenAppTransition.kt:51)
        at com.android.server.wm.flicker.notification.OpenAppFromNotificationColdTest.appLayerBecomesVisible(OpenAppFromNotificationColdTest.kt:64)
    

    ตัวอย่างเอาต์พุตนี้ระบุข้อมูลต่อไปนี้

    • ปัญหานี้เกิดขึ้นที่ 2024-05-10T11:04:14.227572545
    • NotificationActivity ควรจะมองเห็นได้ แต่กลับมองไม่เห็น
    • ชื่อของไฟล์อาร์ติแฟกต์ที่มีร่องรอยสำหรับการแก้ไขข้อบกพร่อง คือ FAIL__OpenAppFromLockscreenNotificationColdTest_ROTATION_0_GESTURAL_NAV

แก้ไขข้อบกพร่อง

ทำตามขั้นตอนต่อไปนี้เพื่อระบุสาเหตุของการกะพริบ

  1. ดาวน์โหลดไฟล์การติดตามและโหลดลงใน Winscope Winscope จะเปิดขึ้นพร้อมกับ SurfaceFlinger ที่เลือกโดยอัตโนมัติ

    หน้า Landing Page ของ Winscope ที่มีมุมมอง SurfaceFlinger

    รูปที่ 1 หน้า Landing Page ของ Winscope ที่มีมุมมอง SurfaceFlinger

  2. ไปยังการประทับเวลาที่เกิดปัญหาโดยการคัดลอกและวาง การประทับเวลาจากข้อความข้อยกเว้นลงในช่องการประทับเวลา คุณ จะคัดลอกการประทับเวลาในรูปแบบที่มนุษย์อ่านได้ (2024-05-10T11:04:14.227572545) แล้ววางลงในช่องแรก หรือคัดลอก การประทับเวลาในหน่วยนาโนวินาที (1715339054227572545ns) แล้ววางลงใน ช่องที่ 2 ก็ได้

    กล่องโต้ตอบการประทับเวลา

    รูปที่ 2 กล่องโต้ตอบการประทับเวลา

  3. กดปุ่มลูกศรซ้ายเพื่อไปยังเฟรมก่อนหน้า ในสถานะนี้ แอป NotificationActivity จะแสดงอย่างถูกต้องในวิดีโอ และ ทั้งแอปและพื้นผิวหน้าจอ Splash จะมองเห็นได้ โดยระบุด้วย สี่เหลี่ยมสีเขียวในมุมมอง 3 มิติ และชิป V ในองค์ประกอบลำดับชั้น

    ชื่อพื้นผิวของแอปและหน้าจอเริ่มต้นมีดังนี้

    com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity#3458`
    
    Splash Screen com.android.server.wm.flicker.testapp#3453
    

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

    เมื่อเปิดแอป

    รูปที่ 3 เมื่อเปิดแอป

  4. กดแป้นลูกศรขวาเพื่อกลับไปยังเฟรมถัดไปที่เกิด การกะพริบ ในมุมมอง Rects NotificationShade จะแสดงบนหน้าจอแทนแอป โดยพื้นผิวต่อไปนี้จะแสดงในเฟรมนี้

    • การซ้อนทับตกแต่งหน้าจอ (ด้านบนและด้านล่าง)
    • แถบนำทาง
    • ตำแหน่งของเคอร์เซอร์ (จากการบันทึกหน้าจอ)

    กิจกรรมกะพริบ

    รูปที่ 4 กิจกรรมการกะพริบ

  5. เลือกกิจกรรมบนแอปในมุมมองลำดับชั้น หากไม่พบ ให้ยกเลิกการเลือกแสดงเฉพาะ V จากนั้นตรวจสอบมุมมองพร็อพเพอร์ตี้

    ชื่อแพลตฟอร์มของแอปคือ

    com.android.server.wm.flicker.testapp/com.android.server.wm.flicker.testapp.NotificationActivity#3458`
    

    พร็อพเพอร์ตี้แอป

    รูปที่ 5 พร็อพเพอร์ตี้แอป

    แม้ว่าจะตั้งค่ากิจกรรมของแอปให้มองเห็นได้และทึบแสง แต่ระบบก็ไม่แสดงพื้นผิวเนื่องจากInvisible due to: null visible regionข้อผิดพลาด ปัญหานี้เกิดขึ้น เนื่องจากมีการวางพื้นผิวทึบแสงอื่นไว้ด้านหน้าในระหว่างการจัดองค์ประกอบ สมมติฐานนี้เกิดจากNotificationShade rect อยู่ด้านหน้า NotificationActivity rect ในมุมมอง 3 มิติ และNotificationShadeที่มองเห็นได้ (สีเขียว) อาจเป็นเลเยอร์ที่เลือก

  6. หากต้องการตรวจสอบสมมติฐานนี้ ให้เลือกNotificationShade พื้นผิวที่มองเห็นได้ในเฟรมปัจจุบัน แล้วตรวจสอบคุณสมบัติของพื้นผิว โดยมีการตั้งค่าสถานะเป็น OPAQUE|ENABLE_BACKPRESSURE (0x102) NotificationShade ชื่อพื้นผิวคือ NotificationShade#3447 จากนั้นกดลูกศรซ้ายเพื่อ กลับไปที่เฟรมก่อนหน้า (ก่อนที่ภาพจะกะพริบ) แล้วตรวจสอบ พร็อพเพอร์ตี้ของNotificationShadeพื้นผิวอีกครั้ง โปรดทราบว่าพื้นผิวมีเฉพาะแฟล็ก ENABLE_BACKPRESSURE (0x100) แทนที่จะเป็น OPAQUE ซึ่งยืนยันว่า NotificationShade จะทึบแสงก่อนที่การเปิดตัวแอปจะเสร็จสมบูรณ์ เนื่องจาก NotificationShade อยู่หน้า NotificationActivity ระบบจึงไม่แสดงแอป NotificationShade เป็นสีดำ หน้าจอจึงดับไปชั่วขณะ ซึ่งทำให้เกิดการกะพริบ

  7. ระบุในโค้ดว่าเหตุใด NotificationShade จึงทึบแสงเร็วเกินไป

ข้อบกพร่องที่ผู้ใช้รายงาน

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

ในกรณีศึกษาของเรา ข้อมูลที่ระบุมีเพียงชื่อ หน้าจอกระพริบ เมื่อเปิดแอปจากหน้าจอแยกอีกครั้ง และการประทับเวลาโดยประมาณของ 18 เม.ย. 2024 15:51 น. GMT-04:00

ทำตามขั้นตอนต่อไปนี้เพื่อแก้ไขข้อบกพร่องที่ผู้ใช้รายงาน

  1. โหลดไฟล์การติดตามใน Winscope Winscope จะเปิดขึ้นพร้อมกับ SurfaceFlinger ที่เลือกโดยอัตโนมัติ

    หน้า Landing Page ของ Winscope ที่มีมุมมอง SurfaceFlinger

    รูปที่ 6 หน้า Landing Page ของ Winscope ที่มีมุมมอง SurfaceFlinger

  2. ไปที่การประทับเวลาโดยประมาณที่ผู้ใช้รายงาน ในกรณีนี้คือ 3:50 PM GMT-04:00 โดยป้อน 15:50:00 ในช่องการประทับเวลาที่มนุษย์อ่านได้

    กล่องโต้ตอบการประทับเวลา

    รูปที่ 7 กล่องโต้ตอบการประทับเวลา

  3. ใช้มุมมอง Rects เพื่อระบุสิ่งที่วาดบนหน้าจอ หากต้องการดูได้ดียิ่งขึ้น ให้ใช้แถบเลื่อนการหมุนเพื่อเปลี่ยนมุมมองของสี่เหลี่ยม การทำเครื่องหมายแสดงเฉพาะ V และแบน ในมุมมองลำดับชั้นจะทำให้เห็น วอลเปเปอร์ ภาพซ้อนทับตกแต่งหน้าจอ แถบดำด้านข้าง ลอนเชอร์ รายชื่อติดต่อ และแป้นโทรศัพท์

    ชื่อแพ็กเกจมีดังนี้

    • Launcher: com.google.android.apps.nexuslauncher/com.google.android.apps.nexuslauncher.NexusLauncherActivity#40602
    • รายชื่อติดต่อ: com.google.android.contacts/com.android.contacts.activities.PeopleActivity#40565
    • โปรแกรมโทรศัพท์: com.google.android.dialer/com.google.android.dialer.extensions.GoogleDialtactsActivity#40564

    นอกจากพื้นผิวที่มองเห็นได้ (สี่เหลี่ยมสีเขียว) แล้ว ยังมีสี่เหลี่ยมสีเทาซึ่ง แสดงถึงพื้นผิวพื้นที่แสดงผลชื่อ Unknown display แสดงอยู่ด้วย หากต้องการปรับปรุงระดับการมองเห็น ให้คลิก (ไอคอนระดับการแชร์) ข้างพื้นผิว ScreenDecorHwcOverlay#64 เพื่อซ่อน สี่เหลี่ยมผืนผ้าที่เกี่ยวข้องและแสดงพื้นผิวที่อยู่ด้านหลัง เราจะนำภาพซ้อนทับออกสำหรับการวิเคราะห์ เนื่องจากผู้ใช้มองไม่เห็นและจะไม่ได้รับการรายงานเป็น ภาพเคลื่อนไหวที่กะพริบ

    รายงานของผู้ใช้

    รูปที่ 8 รายงานของผู้ใช้

  4. หลังจากระบุพื้นผิวที่เกี่ยวข้องในมุมมองแบบแยกหน้าจอแล้ว ให้ใช้การติดตามการเปลี่ยนเพื่อดูการดำเนินการต่างๆ ของผู้ใช้และค้นหา การกะพริบ คลิกแท็บการเปลี่ยนฉากใน Winscope เพื่อแสดงภาพ รายการการเปลี่ยนฉากที่เล่น

    การเปลี่ยน

    รูปที่ 9 การเปลี่ยน

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

  5. คลิกลิงก์ในคอลัมน์เวลาในการส่ง (ในกรณีนี้คือ 2024-04-18, 15:50:57.205) เพื่อไปยังจุดนั้นในเวลาและยืนยัน Rect ในแท็บ Surface Flinger ยืนยันความถูกต้องของสถานะอุปกรณ์ ในระหว่างการเปลี่ยนโดยการเปลี่ยนผ่านด้วยปุ่มลูกศรขวา และสังเกตสี่เหลี่ยม

    Launcher ปรากฏขึ้นที่ 15:50:57.278 แต่ภาพเคลื่อนไหวไม่เริ่ม ในตอนนั้น วอลเปเปอร์จะมองเห็นได้อยู่แล้วเนื่องจากไม่มีการวาดอะไรระหว่างแอปที่แบ่งหน้าจอ (เส้นแบ่ง) ก่อนหน้านี้ 1 เฟรม (15:50:57.212) วอลเปเปอร์ไม่ปรากฏและเส้นแบ่งแสดงอยู่ ซึ่งเป็นลักษณะของ การแยกหน้าจอเมื่อไม่ได้เคลื่อนไหว

    หน้าจอก่อนกะพริบ

    รูปที่ 10 หน้าจอก่อนเกิดเหตุการณ์กะพริบ

  6. หากต้องการดูทรานซิชันถัดไป ให้คลิกลำดับเวลาโดยตรง สถานะ SurfaceFlinger จะแสดงด้วยแถวของบล็อกสีฟ้าอ่อน การเปลี่ยนฉากจะแสดงด้วยแถวของบล็อกสีชมพู

    สิ้นสุดการเปลี่ยนผ่านครั้งแรก

    รูปที่ 11 สิ้นสุดการเปลี่ยนผ่านครั้งแรก

    คลิกแถว SurfaceFlinger ที่ตำแหน่งเริ่มต้นของการเปลี่ยนฉากถัดไป ในรูปที่ 11 เส้นสีน้ำเงินบางๆ จะแสดงจัดวางแนวตั้งของเคอร์เซอร์ พื้นหลังสีฟ้าอ่อนของแถว SurfaceFlinger จะแสดงตำแหน่งแนวนอน ดูการเปลี่ยนผ่านโดยใช้แป้นลูกศรขวาเพื่อดูว่าเกิดการกะพริบหรือไม่ ยืนยัน ว่าอุปกรณ์ดูถูกต้องสำหรับการเปลี่ยนผ่านนี้

  7. ข้ามการเปลี่ยนฉากถัดไปเนื่องจากระยะเวลาสั้นมาก จึงไม่น่าจะ มีการกะพริบ แต่ให้คลิกไทม์ไลน์ในแถว SurfaceFlinger ที่ตำแหน่งเริ่มต้นของการเปลี่ยนที่ยาวขึ้นถัดไป ตามที่เคอร์เซอร์ระบุไว้ ในรูปภาพต่อไปนี้

    สิ้นสุดการเปลี่ยนผ่านครั้งที่ 2

    รูปที่ 12 สิ้นสุดการเปลี่ยนผ่านครั้งที่ 2

    ในระหว่างการเปลี่ยนผ่านนี้ ที่ 15:51:13.239 ให้สังเกตว่าSplash Screen เลเยอร์ของทั้ง 2 แอป รายชื่อติดต่อ และแป้นโทรศัพท์จะอยู่ด้านเดียวกันของ จอแสดงผล

    หน้าจอเริ่มต้น (Splash Screen)

    รูปที่ 13 หน้าจอแนะนำ

  8. ชี้แจงว่าแอปใดอยู่ด้านที่ไม่ถูกต้อง เพิ่มที่คั่นหน้าไปยังตำแหน่งปัจจุบันโดยคลิกไอคอนธงข้างช่องป้อนข้อมูล ns เพื่อช่วยให้กลับไปที่เฟรมนี้ได้ในภายหลัง

    เพิ่มบุ๊กมาร์ก

    รูปที่ 14 เพิ่มบุ๊กมาร์ก

  9. ไปยังเฟรมที่ส่วนท้ายของการเปลี่ยนโดยคลิกไทม์ไลน์ โดยตรง เช่น ไปที่ 15:51:13.859 ตอนนี้แอปทั้ง 2 อยู่ในตำแหน่งสุดท้ายแล้ว โดยแอปโทรศัพท์อยู่ทางซ้ายและแอปรายชื่อติดต่ออยู่ทางขวา

    การแบ่งหน้าจอขั้นสุดท้าย

    รูปที่ 15 แยกหน้าจอขั้นสุดท้าย

  10. คลิกธงของบุ๊กมาร์กในไทม์ไลน์เพื่อกลับไปยังเฟรม ที่มีการกะพริบ

    ไทม์ไลน์ของบุ๊กมาร์ก

    รูปที่ 16 บุ๊กมาร์กไทม์ไลน์

    แอปทั้ง 2 รายการอยู่ทางด้านขวา ซึ่งบ่งบอกว่าแป้นโทรศัพท์อยู่ในตำแหน่งที่ไม่ถูกต้อง

  11. คลิกหน้าจอสแปลชของแป้นโทรเพื่อดูพร็อพเพอร์ตี้ ดูคุณสมบัติการเปลี่ยนรูปในมุมมองคุณสมบัติที่คัดสรรมาโดยเฉพาะ

    พร็อพเพอร์ตี้การเปลี่ยนรูปแบบ

    รูปที่ 17 พร็อพเพอร์ตี้การเปลี่ยนรูปแบบ

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

  12. ยกเลิกการเลือกแบบแบนในมุมมองลำดับชั้นเพื่อแสดงโครงสร้างลำดับชั้นทั้งหมด และไปที่โหนดหลักของแพลตฟอร์มแอปจนกว่าการแปลงทั้งที่คำนวณแล้วและที่ขอจะเหมือนกัน ซึ่งแสดงการแปลงที่ขอใน แพลตฟอร์ม Surface(name=Task=7934)/@0x1941191_transition-leash#40670

  13. ยืนยันเวลาที่ตั้งค่าการเปลี่ยนรูปแบบเป็นครั้งแรกและค่าที่ตั้ง ยุบพร็อพเพอร์ตี้ที่ดูแลจัดการโดยคลิกไอคอนข้างชื่อ

    ยุบพร็อพเพอร์ตี้ที่ดูแลจัดการ

    รูปที่ 18 ยุบพร็อพเพอร์ตี้ที่ดูแลจัดการ

  14. เลือกแสดงความแตกต่างในมุมมอง Proto Dump เพื่อไฮไลต์พร็อพเพอร์ตี้ที่กำลังเปลี่ยนแปลงในเฟรมนี้ พิมพ์ transform ในช่องค้นหาข้อความเพื่อกรองพร็อพเพอร์ตี้

    แสดงความแตกต่าง

    รูปที่ 19 แสดงความแตกต่าง

    ตั้งค่าการเปลี่ยนจาก IDENTITY เป็น SCALE|TRANSLATE|ROT_270 ในเฟรมนี้สำหรับ transition-leash

    ข้อมูลนี้แสดงว่าการกะพริบเกิดขึ้นเมื่อมีการใช้การเปลี่ยนรูปแบบกับสายจูงภาพเคลื่อนไหวของแอปหน้าจอแยกของโปรแกรมโทรศัพท์

    การระบุการกะพริบ

    รูปที่ 20 การระบุการกะพริบ

  15. ระบุในโค้ดว่าเหตุใดจึงตั้งค่าการเปลี่ยนนี้เป็นสายจูงการเปลี่ยนภาพหน้าจอแยก