Fiori里花瓣的动画效果实现原理
Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。
![](https://user-images.githubusercontent.com/5669954/59326804-494d9c80-8d1a-11e9-915e-a957d0ca5857.png)
关于前者的效果,可以看这个video。这个video是手动将default 300毫秒改成30秒之后的效果。
![](https://user-images.githubusercontent.com/5669954/59326807-49e63300-8d1a-11e9-9911-14a561b0650a.png)
(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
![](https://user-images.githubusercontent.com/5669954/59326808-4a7ec980-8d1a-11e9-83d2-ddd3962352d0.png)
(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.
![](https://user-images.githubusercontent.com/5669954/59326810-4b176000-8d1a-11e9-8aaa-49cf4bfd669d.png)
And here is the Flower rendering logic:
![](https://user-images.githubusercontent.com/5669954/59326811-4baff680-8d1a-11e9-8693-7153bc4c21b2.png)
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.
![](https://user-images.githubusercontent.com/5669954/59326812-4baff680-8d1a-11e9-9a98-d7e98f8ea9de.png)
![](https://user-images.githubusercontent.com/5669954/59326814-4baff680-8d1a-11e9-843a-1c5cfbcf926d.png)
(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.
![](https://user-images.githubusercontent.com/5669954/59326815-4c488d00-8d1a-11e9-9cc4-b7fd2589d761.png)
Also in the end of UI navigation, the UI framework will also attempt to close busy dialog if any.
![](https://user-images.githubusercontent.com/5669954/59326816-4ce12380-8d1a-11e9-912a-985176b69299.png)
![](https://user-images.githubusercontent.com/5669954/61616089-2a87e180-ac9a-11e9-861d-c29c2cf897af.png)
相关文章
- UE4/UE5 动画的原理和性能优化
- Elastic-Job2.1.5源码-作业高可用的失效转移功能实现原理动画
- (五)元素的切换动画
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
- 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
- Adobe CH 2023:全新升级,更流畅、更生动的角色动画制作软件!
- c4d软件是干嘛的?三维建模动画c4d软件安装包下载及安装激活
- 网购App购物车点击动画实现详解编程语言
- 如何在Win10中启用Win10X的开机动画
- Scribus 是一个桌面排版(DTP)软件,是一个以GNU通用公共许可证发布的自由软件。提供Linux、Unix、Mac OS X、OS/2以及微软Windows上运行的原生版本。它以其广泛的页面布局功能堪比于其他非自由应用程序,如PagePlus、QuarkXPress和Adobe InDesign。Scribus 灵活的布局和排版,并有编写档案专业品质图像设置设备的能力。它也可以创建动画和互动的PDF图像和形式。示例使用包括撰写小报纸、小册子、简报、海报和书籍。
- 适合儿童看的动画片有哪些,优质动画更是孩子启蒙教育
- JS仿Flash动画放大/缩小容器
- php调用dll的实例操作动画与代码分享
- .netc#gif动画如何添加图片水印实现思路及代码
- 一个CSS+jQuery实现的放大缩小动画效果