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

2022-03-23 22:23:36 字數 1302 閱讀 4008

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

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。

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

fiori裡的busy dialog有兩種表現形式,一種是下圖裡的花朵形狀,由5個不斷旋轉的花瓣組成。另一種是下圖的3 4個圓環不斷旋轉的效果。1.根據偵錯程式裡呼叫棧的觀察,每當url發生變化時,會觸發sap.ui.controller.dohashchange,該方法則會呼叫openloadin...

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

fiori裡的busy dialog有兩種表現形式,一種是下圖裡的花朵形狀,由5個不斷旋轉的花瓣組成。另一種是下圖的3 4個圓環不斷旋轉的效果。1.根據偵錯程式裡呼叫棧的觀察,每當url發生變化時,會觸發sap.ui.controller.dohashchange,該方法則會呼叫openloadin...

vue動畫過渡效果實現

1.首先在父路由中新增transition標籤 並給其新增動態的 name屬性 然後用transition標籤包裹router view標籤 然後在data中return出來動態 name 在style中寫 name enter,name enter to,name enter active的樣式 ...