Intermediate : Animation in Harmony OS

Introduction

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.

Requirements:

1. HUAWEI DevEco Studio
2. Huawei Account

Development:

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 MainAbilitySlice.java.

Now Implementation part done.

Result

Tips and Tricks

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

Conclusion

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!

Reference

HarmonyOS Animation