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的原創技術文章,請關注公眾號”汪子熙”或者掃描下面二維碼:
相關文章
- SAP Fiori Elements裡Drop down list的實現原理
- React實現動畫效果React動畫
- Javascript實現動畫效果JavaScript動畫
- 實現漫天飛雪的動畫效果動畫
- SAP Fiori裡兩種鎖機制(lock)的實現
- Flutter動畫實現粒子漂浮效果Flutter動畫
- 用JavaScript實現動畫效果 (轉)JavaScript動畫
- activity切換無動畫效果的實現動畫
- Flutter 類抽屜效果動畫實現。Flutter動畫
- 加入購物車動畫效果實現動畫
- Web 頁面如何實現動畫效果Web動畫
- javascript實現文字拼寫動畫效果JavaScript動畫
- SVG實現動態模糊動畫效果SVG動畫
- SVG 實現動態模糊動畫效果SVG動畫
- 前端動畫效果實現的簡單比較前端動畫
- css3實現的簡單動畫效果CSSS3動畫
- Flutter動畫實現原理淺析Flutter動畫
- 解析 iOS 動畫原理與實現iOS動畫
- PPT中如何實現川流不息的動畫效果動畫
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- css3和js實現的大白動畫效果CSSS3JS動畫
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- css3實現動畫閃爍效果CSSS3動畫
- ul>li*3 實現翻書動畫效果動畫
- svg實現矩形水平運動動畫效果SVG動畫
- 用js實現動畫效果核心方式JS動畫
- 萬彩動畫大師教程 | 如何實現物件的閃動的動畫效果動畫物件
- 前端動畫實現以及原理淺析前端動畫
- Android動畫實現繪製原理Android動畫
- Flutter實戰動畫番外篇-翻頁效果實現Flutter動畫
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- js利用H5的requestAnimationFrame()API實現動畫效果JSH5requestAnimationFrameAPI動畫
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- SAP S/4HANA Material Fiori應用的搜尋實現原理
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- canvas實現簡答動畫張閉嘴效果Canvas動畫
- 自定義RecyclerView動畫——實現remove飛出效果View動畫REM
- 簡單的動畫方式實現的元素下拉和上卷效果動畫