[Harmony OS] How to make Animated Loading in Harmony OS - Huawei Developers

If you want to use a loading inside your HOS you will not find a specific control for it so in this article I will show you how you can add a loading component and customize the color and the style.
At first we will use the Animation feature from HOS.
You need to choose the loading template that you want to use and I suggest this web site to you it contains to many styles and you can customize the color from it loading.io
After you select the template
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
You will be able to customize the UI from the Config Widget
Just remember to turn the transparent option as on
Then you will be able to download the loading as animated PNGs click at PNG then select PNG Sequence
Copy All the images to your Project as this
In the Project window, choose entry > src > main > resources > base > media, and add a set of pictures to the media directory.
Then inside you XML file you need to Add any component that you want to add the animation for it I will choose the Image.
XML:
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Image
ohos:id="$+id:loader"
ohos:height="100px"
ohos:width="100px"
ohos:layout_alignment="horizontal_center"
ohos:text_size="40vp"
/>
</DirectionalLayout>
After this at the java class we need to setuo the animation like this
Java:
Image Loader;
FrameAnimationElement frameAnimationElement;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
Loader = (Image) findComponentById(ResourceTable.Id_loader);
frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_loader);
Loader.setBackground(frameAnimationElement);
ShowLoader();
}
public void ShowLoader(){
Loader.setVisibility(Component.VISIBLE);
frameAnimationElement.start();
}
public void HideLoader(){
frameAnimationElement.stop();
Loader.setVisibility(Component.INVISIBLE);
}
}
1. Create an animation_element.xml file under the graphic directory and declare image resources in the animation-list section. duration specifies how long the animation will last, in the unit of milliseconds. oneshot specifies whether the animation is played only once.
Code:
<animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:oneshot="false"> <item ohos:element="$media:frame1" ohos:duration="50"/> <item ohos:element="$media:frame2" ohos:duration="50"/> <item ohos:element="$media:frame3" ohos:duration="50"/> <item ohos:element="$media:frame4" ohos:duration="50"/> <item ohos:element="$media:frame5" ohos:duration="50"/> <item ohos:element="$media:frame6" ohos:duration="50"/> <item ohos:element="$media:frame7" ohos:duration="50"/> <item ohos:element="$media:frame8" ohos:duration="50"/> <item ohos:element="$media:frame9" ohos:duration="50"/> <item ohos:element="$media:frame10" ohos:duration="50"/> <item ohos:element="$media:frame11" ohos:duration="50"/> <item ohos:element="$media:frame12" ohos:duration="50"/> <item ohos:element="$media:frame13" ohos:duration="50"/> <item ohos:element="$media:frame14" ohos:duration="50"/> <item ohos:element="$media:frame15" ohos:duration="50"/> <item ohos:element="$media:frame16" ohos:duration="50"/> <item ohos:element="$media:frame17" ohos:duration="50"/> <item ohos:element="$media:frame18" ohos:duration="50"/> <item ohos:element="$media:frame19" ohos:duration="50"/> <item ohos:element="$media:frame21" ohos:duration="50"/> <item ohos:element="$media:frame22" ohos:duration="50"/> <item ohos:element="$media:frame23" ohos:duration="50"/> <item ohos:element="$media:frame24" ohos:duration="50"/> <item ohos:element="$media:frame25" ohos:duration="50"/> <item ohos:element="$media:frame26" ohos:duration="50"/> <item ohos:element="$media:frame27" ohos:duration="50"/> <item ohos:element="$media:frame28" ohos:duration="50"/> <item ohos:element="$media:frame29" ohos:duration="50"/> <item ohos:element="$media:frame30" ohos:duration="50"/> </animation-list>
Now you will have the following result
Conclusion
You can animate any control as you want in you use the Animation list so can use it for the click button or any control action.
Sample Code: https://github.com/omernaser/Loader-Harmony-OS
Reference
https://loading.io/
https://developer.harmonyos.com/en/docs/documentation/doc-guides/ui-java-animation-0000000000580278
Original Source

---

Can we animate PageAbility in Harmony OS?