天天看点

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

Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。目前我只看了前者的behavior。可以看我附件里的video。这个video是手动将default 300毫秒改成30秒之后的效果。

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

When it appeas in UI

According to callstack, the Flower-like animation, technically speaking, the BusyDialog will be opened every time there is change on url, which you could observe in address bar in your browser. This animation is implemented via in /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

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.

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

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.

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

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应用的花瓣动画效果是怎么画出来的

继续阅读