How to Create Animations in HarmonyOS
In this article, we will learn how to create sample animations in HarmonyOS. Animation is one of the basic features of the UI components. Animations brings fluent and natural interactive experience to app users. Animations are the best way catch the app user’s attention and focus.
Introduction
In this article, we will learn how to create sample animations in HarmonyOS. Animation is one of the basic features of the UI components. Animations brings fluent and natural interactive experience to app users. Animations are the best way catch the app user’s attention and focus.
The Java UI framework of HarmonyOS provides four major classes for animation.
- FrameAnimationElement: FrameAnimationElement creates a frame-by-frame animation by displaying a series of still images in sequence, so that human eyes will perceive the images as moving ones.
- AnimatorValue: The value of AnimatorValue ranges from 0 to 1, indicating changes of animation properties (such as duration, change curve, and repetition times) instead of the Component itself. The component attributes vary according to the changes of the animation properties, thus implementing the animation effect of the component.
- AnimatorProperty: In the Java UI framework, you can use AnimatorProperty to set animations with a single or multiple properties for a component.
- AnimatorGroup: You can bundle multiple animations into an AnimatorGroup, and use runSerially() or runParallel() to play these animations sequentially or simultaneously. Note that the XML file mode is currently not supported for AnimatorGroup.
Development Overview
You need to install DevEcho studio IDE and I assume that you have prior knowledge about the Harmony OS and java.
Hardware Requirements
- A computer (desktop or laptop) running Windows 10.
- A Harmony OS phone (with the USB cable), which is used for debugging.
Software Requirements
- Java JDK installation package.
- Latest DevEcho studio installed.
Steps:
Step 1: Create HarmonyOS Application.
Let’s start coding
Result
Tips and Tricks
- Add required dependencies without fail
- Add custom strings in resources > base > element > string.json
- Define supporting devices in config.json file.
- Add properties and values xml files in resources >base > animation folder.
- Add required images in entry > src > main > resources > base > media
- Add animation_element.xml in graphic folder.
Conclusion
By now, you have learnt how to create sample animations in HarmonyOS. Hope this article helps you to understand the working of animations in HarmonyOS. More details you can refer below link.
Thank you so much for reading article and please provide your valuable feedback and like.
Reference
