Fiori裏花瓣的動畫效果實現原理
阿新 • • 發佈:2018-02-25
png 隊列 view settime ges .com pop change 技術
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的原創技術文章,請關註公眾號"汪子熙"或者掃描下面二維碼:
Fiori裏花瓣的動畫效果實現原理