Fiori裡花瓣的動畫效果實現原理

Fiori裡的busy dialog有兩種表現形式，一種是下圖裡的花朵形狀，由5個不斷旋轉的花瓣組成。另一種是下圖的3/4個圓環不斷旋轉的效果。

關於前者的效果，可以看我製作的這個影片。這個影片是手動將下圖setTimeout的300毫秒延時改成30秒之後的效果，意思是30秒之後這個花瓣效果才消失。

1. 根據偵錯程式裡呼叫棧的觀察，每當url發生變化時,會觸發sap.ui.controller.doHashChange,該方法則會呼叫openLoadingScreen.這個方法裡會建立BusyDialog的例項並呼叫open方法。Busy Dialog的實現位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

2. 動畫效果的渲染實現位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.

第52行的renderFioriFlower方法:

從97行的迴圈能看出在迴圈體內建立了5個div element,實際上就是UI Fiori動畫效果裡的5個花瓣。

3.Fiori動畫效果顯示之後，什麼時候消失？

使用setTimeout將LoadingDialog的關閉動作加入到執行佇列裡。如果300毫秒之後(第188行的引數)執行佇列裡沒有其他待執行的事件，則關閉該Dialog。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: