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的原创文章,请关注公众号"汪子熙":相关文章
- SpriteBuilder中使用Node类型的ccb动画节点删除时崩溃的问题
- 高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染
- Additive属性动画
- Easing圆环动画
- 属性动画之ValueAnimator
- 动画 -- 按钮 --- 从无到有(中心)
- C/C++基础讲解(五十五)之图形篇(动态显示位图/利用图形页实现动画)
- Fiori里花瓣的动画效果实现原理
- paip.动画透明淡入淡出窗口之重绘性能
- SSO单点登录系列2:cas客户端和cas服务端交互原理动画图解,cas协议终极分析
- css霓虹灯按钮动画效果悬停
- Android 自定义倒计时圆环动画酷炫效果
- 高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染
- 【图文动画详解原理系列】8.分布式事务
- HTML5 Canvas动画效果实现原理
- 8 cocos2dx加入场景切换效果,控制场景切换彻底完毕之后再运行动画
- iOS项目开发实战——制作视图的缩放动画
- Unity MegaFiers 顶点动画
- Kotlin 仿微信长按列表弹出菜单(动画)