What is the principle of realizing the animation effect of petals in Fiori?

This article shows you what is the principle of realizing the animation effect of petals in Fiori, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

There are two forms of busy dialog in Fiori. One is the shape of the flower in the image below, which consists of five constantly rotating petals. The other is the effect of the continuous rotation of the four rings in the picture below.

For the effect of the former, you can watch this video I made. This video shows the effect of manually changing the 300ms delay of the following setTimeout to 30 seconds, meaning that the petal effect disappears after 30 seconds.

1. According to the observation of the call stack in the debugger, whenever url changes, sap.ui.controller.doHashChange will be triggered, and the method will call openLoadingScreen. This method creates an instance of BusyDialog and calls the open method. Implementation location of BusyDialog: / sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

two。 Animation effect of the rendering location: / sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.

The renderFioriFlower method on line 52:

From the loop in line 97, you can see that five div element have been created in the loop, which are actually the five petals in the UI Fiori animation effect.

After the 3.Fiori animation is displayed, when does it disappear?

Use setTimeout to add the LoadingDialog close action to the execution queue. If there are no other events to be executed in the execution queue after 300ms (parameters on line 188), close the Dialog.

The above content is what is the principle of realizing the animation of petals in Fiori. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.