且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Fiori应用的花瓣动画效果是怎么画出来的

更新时间:2022-08-21 15:10:02

Fiori应用的花瓣动画效果是怎么画出来的

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.

Fiori应用的花瓣动画效果是怎么画出来的