Replacing Automatic Screen Transition with Click-Based Control

Read the original article：Replacing Automatic Screen Transition with Click-Based Control

Context

Previously, the app automatically transitioned to the next screen after a fixed timeout, regardless of user interaction. This behavior sometimes caused screens to change before the user was ready.

Description

The timeout-based transition mechanism was replaced with a manual, click-triggered system.

Instead of relying on a fixed delay, the app now waits for a user action (e.g., clicking a button or icon) once the current screen’s tasks or animations are complete.

This gives users more control and prevents premature transitions.

Solution / Approach

The app detects when all required conditions for the current screen are met and then displays a clickable UI element that allows users to proceed manually.

This enhances usability, improves pacing, and provides a more interactive experience.

• First, the timeout section should be removed.

setTimeout(() => {
  this.nextLevel()
}, GamePage.RETRY_DELAY)}

• After that, the same control should be implemented in the UI using an image.

Image($r('app.media.nextLevel'))
  .width(25)
  .height(25)
  .position({
    x: (this.screenWidth / 2) - 10,
    y: this.screenHeight - 40
  })
  .onClick(() => {
    this.nextLevel()
  })

Explanation

• The old timeout-driven transition automatically advanced the app after a delay.
• The new implementation waits until the user clicks the button.
• This provides flexibility and prevents unintended navigation.
• The transition logic remains simple and easy to maintain.

Key Takeaways

• Removes the fixed-delay setTimeout transition.
• Introduces user-controlled navigation through clicks.
• Enhances user experience by preventing premature transitions.
• Maintains backward compatibility with minimal code changes.

Written by Aycanur Ucar