Escape Button using ArkTS in HarmonyOS

#harmonyos #escapebutton #dynamicpositioning #animateto

Read the original article：Escape Button using ArkTS in HarmonyOS

Requirement Description

The Escape Button is an interactive UI element designed to avoid user interaction by dynamically changing its position whenever the user tries to click on it. Unlike a traditional button that performs an action when clicked, the Escape Button’s purpose is to make clicking intentionally difficult or even impossible.

Background Knowledge

Let’s add two buttons: **Books** and **Games**. When the user clicks on the Games button, this button escapes, and the button name changes randomly.

Implementation Steps

Index.ets

@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')
  }Copy codeCopy code
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%')
  }

Configuration

🟣 HomeViewModel.ets

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]
  }
}

Test Results

This type of button is commonly used in:

Playful or humorous web projects,
Human-computer interaction experiments,
Attention and reflex training tools.

The main idea is to simulate a challenge where the user has to “catch” the button, creating an engaging user experience. In this project, the Escape Button moves to a random location on the screen as soon as the cursor approaches or attempts to click it, giving it a “fleeing” behavior.

DEV Community