Fiori里的busy dialog有兩種表現形式，一種是下圖里的flower形狀，由5個花瓣組成。另一種是下圖的3/4個圓環的效果。目前我只看了前者的behavior。可以看我附件里的video。這個video是手動將default 300毫秒改成30秒之后的效果。

When it appeas in UI

According to callstack, the Flower-like animation, technically speaking, the BusyDialog will be opened every time there is change on url, which you could observe in address bar in your browser. This animation is implemented via in /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

How is the Flower animation rendered

The entry point of rendering logic is in line 2019 below in file: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.

And here is the Flower rendering logic:

From here we know that the Flower we see in UI actually consists of FIVE ( why five? see line 97 below ? ) different div tag with well-prepared CSS class.

When the Flower vanishes

There is a call in shell controller which will check whether the Flower busy dialog is still opened. If so, just put the close operation into the event queue with 0.3 second’s delay. It does not mean that the busy dialog will be closed after exactly 0.3 seconds due to Javascript’s single thread execution pattern.

Also in the end of UI navigation, the UI framework will also attempt to close busy dialog if any.

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Fiori应用的花瓣动画效果是怎么画出来的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。