How to Restart Animation After Toggling Visibility in HarmonyOS

#huawei #harmony #harmonyos

Read the original article：How to Restart Animation After Toggling Visibility in HarmonyOS

Context

When clicking the "Hide Blocking Bar" button, the user wants:

The blue blocking bar to hide, and the image animation to start.
When clicking "Show Blocking Bar", the blue bar should reappear, and the animation should stop.
When clicking again, the above process should repeat.

Issue:

The animation only works correctly the first time. After hiding and showing the bar again, the animation does not restart.

Description

In HarmonyOS, when components appear or disappear, transition animations can be added.

Component transitions can be configured using the transition property to display smooth animations when adding or removing subcomponents.

Also, the visibility property can control whether an element is displayed or hidden.

When combined with explicit animations, this enables flexible visual effects.

Solution

There are two recommended methods to solve this issue:

Use Component Transition Animation

Use the transition property to apply animations when the component is inserted or removed.
When the image component is added each time, the animation restarts automatically.

Example Code:

.transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
  TransitionEffect.rotate({ z: 1, angle: 180 })
))

Full Example Code:

import {
  ArcButton,
  ArcButtonOptions,
  ArcButtonPosition,
  ArcButtonStatus,
  ArcButtonStyleMode,
  LengthMetrics,LengthUnit
} from '@kit.ArkUI';

@Entry
@Component
struct Index {
  topOptions: ArcButtonOptions = new ArcButtonOptions({});
  @State flag: boolean = true;
  @State show: string = 'hide';
  bottomOptions: ArcButtonOptions = new ArcButtonOptions({
    label: this.show,
    status: ArcButtonStatus.NORMAL,
    styleMode: ArcButtonStyleMode.EMPHASIZED_DARK,
    position: ArcButtonPosition.BOTTOM_EDGE,
    fontSize: new LengthMetrics(15, LengthUnit.FP),
    shadowEnabled: true,
    onClick: () => {
      if (this.flag) {
        this.bottomOptions.label = 'show'
        this.bottomOptions.styleMode = ArcButtonStyleMode.EMPHASIZED_LIGHT
      } else {
        this.bottomOptions.label = 'hide'
        this.bottomOptions.styleMode = ArcButtonStyleMode.EMPHASIZED_DARK
      }
      this.flag = !this.flag;
    }
  })

  build() {
    Column() {
      ArcButton({ options: this.bottomOptions }).align(Alignment.Bottom)
      if (this.flag) {
        Image($r('app.media.testImg')).width(150).height(150)
          .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
            TransitionEffect.rotate({ z: 1, angle: 180 })
          ))
      }
    }.width('100%')
  }
}

Key Takeaways

In HarmonyOS, animations triggered by animateTo may not restart when toggling visibility repeatedly.
Using the transition property ensures that animations restart automatically whenever a component is re-inserted into the UI tree.
The .transition() method can combine multiple effects such as TransitionEffect.OPACITY and TransitionEffect.rotate.
By toggling a boolean state (flag) and conditionally rendering the component, the animation will replay each time the component becomes visible.
This approach provides a reliable way to control show/hide + restart animation cycles without manually resetting animation states.