Huawei Developers
Published in

Huawei Developers

Intermediate : Animation in Harmony OS


While using any application, we see many animations like flip of a view, popup dialog coming from bottom to center and UI shaking etc. It provides a good user experience for developing an app with Animations. This application helps to create animation for Button and Image in Harmony OS.

There are 4 major classes for animation.

  1. FrameAnimationElement: This animation works with series of mages in sequence.
  2. AnimatorValue: This is getting used for animation effect of the component like button and images.
  3. AnimatorProperty: It can be used to set animations with a single or multiple properties of a component.
  4. AnimatorGroup: It can be used to run multiple animations in serially or in parallel.


  1. HUAWEI DevEco Studio
  2. Huawei Account


Step 1: Add below code in ability_mail.xml.

Step 2: Animate Button with AnimatorValue class.

Step 3: Animate image after button click using AnimatorProperty class.

Step 4: Implement the animation for image when page is displayed.

Add below code in

Now Implementation part done.


Tips and Tricks

  1. Please get the co-ordinate of UI component properly.
  2. You can use runSerially() or runParallel() methods for group animation.


In this article, we have learnt about creating animations for button and images with the help of AnimatorValue and AnimatorProperty class. Using these features, we can also improve the user experience of the application.

Thanks for reading!


HarmonyOS Animation



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store