👩‍💻How to build an “Escape Button” with ArkTS in HarmonyOS Next?

Photo by Arnold Francisca on Unsplash

Introduction

User interfaces don’t always have to be serious. Sometimes, the best way to explore interaction patterns is by having fun with them. 🎉

In this article, we’ll build a playful Escape Button using ArkTS in HarmonyOS Next. This button does exactly the opposite of what a normal button does. Instead of responding to a click, it runs away from the user.

When the user tries to tap the button, it jumps to a new position and changes its text — making it intentionally difficult (and amusing) to click.

What is an Escape Button?

An Escape Button is an interactive UI element designed to avoid user interaction.

Instead of executing an action when clicked, the button moves to a random position, its label changes dynamically, and the user is challenged to “catch” it.

We’ll create a simple screen with two buttons:

✔️Books: normal button

✔️Games: escape button

When the user tries to tap Games:

1. The button moves to a random position
2. The button text changes to a random phrase like:

• “No way!”
• “Catch me!”
• “Nice try!”

Let’s start coding 👩‍💻

🟣Index.ets

We first bind our HomeViewModel to the page and reset the button state when the page appears.

@State viewModel: HomeViewModel = HomeViewModel.instance;

  //reset the button when this page open
  onPageShow() {
    this.viewModel.offsetX = 0
    this.viewModel.offsetY = 0
    this.viewModel.name = $r('app.string.games')
  }

build() {
    Column() {
      Button($r('app.string.books'))
        .margin({ bottom: 5 })
        .onClick(() => {
          //
        })
      Button(this.viewModel.name)
        .offset({ x: this.viewModel.offsetX, y: this.viewModel.offsetY })
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.viewModel.escape()
            this.viewModel.name = this.viewModel.getRandomResponse()
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }

🟣 HomeViewModel.ets

The ViewModel handles a button position, button text, random movement logic, and animation behavior.

Here, add the texts that you want to appear when you press the button.

“No way!” “Choose Books!”, “Catch me!”, “Nice try!”,” Oopss!”

@Observed
export class HomeViewModel {
  offsetX: number = 0
  offsetY: number = 0
  name: ResourceStr = $r('app.string.games')
  private responses: ResourceStr[] = [
    $r('app.string.noway'),
    $r('app.string.choosebooks'),
    $r('app.string.catchme'),
    $r('app.string.nicetry'),
    $r('app.string.oopss'),
  ]
  private static _instance: HomeViewModel;

  private constructor() {
  }

  public static get instance(): HomeViewModel {
    if (!HomeViewModel._instance) {
      HomeViewModel._instance = new HomeViewModel();
    }
    return HomeViewModel._instance;
  }

  escape() {
    let newX = this.randomOffset(-60, 60)
    let newY = this.randomOffset(-70, 70)

    animateTo({ duration: 50, curve: Curve.EaseInOut }, () => {
      this.offsetX = newX
      this.offsetY = newY
    })
  }

  randomOffset(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  getRandomResponse(): ResourceStr {
    let index = Math.floor(Math.random() * this.responses.length)
    return this.responses[index]
  }
}

Output

Output

Conclusion

The Games button instantly moves when touched, the text changes every time, the animation feels smooth and playful, and clicking the button becomes a fun challenge. The Escape Button is a great example of how UX doesn’t always need to follow traditional rules.

If you’re exploring HarmonyOS Next, projects like this are a fantastic way to understand animations, gestures, and state management — all while having a bit of fun.

Happy coding! 😊

References

[embed]Document The OpenCms demo, brought to you by Alkacon Software.developer.huawei.com