Fiori里花瓣的动画效果实现原理
Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。
关于前者的效果,可以看这个video。这个video是手动将default 300毫秒改成30秒之后的效果。
(1). 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
(2). 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.
(3). 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.
Also in the end of UI navigation, the UI framework will also attempt to close busy dialog if any.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- android开机动画 制作工具,android开机动画制作
- 前端序列帧动画实现
- iOS动画小知识:定点缩放弹窗(利用锚点anchorPoint进行实现)包含完整demo[通俗易懂]
- Power BI 按钮:自定义动画
- MotionLayout教你轻松玩转动画
- 3D动画创作C4D软件最新中文版,Cinema 4D(C4D)R26安装教程下载
- [android] 手机卫士界面切换动画详解手机开发
- Linux启动过程:开启动画空间之旅(简述linux的启动过程)
- 大疆不仅为工程师办比赛,还为他们量身制作了一部动画
- javascript流畅动画实现原理
- 缓动函数requestAnimationFrame更好的实现浏览器经动画
- Android吸入动画效果实现分解
- VC实现图片拖拽及动画的实例