码迷,mamicode.com
首页 > 其他好文 > 详细

Fiori里花瓣的动画效果实现原理

时间:2018-02-25 19:18:25      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:分享   href   原理   ref   core   control   com   制作   loading   

Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。

技术分享图片

关于前者的效果,可以看我制作的这个视频。这个视频是手动将下图setTimeout的300毫秒延时改成30秒之后的效果,意思是30秒之后这个花瓣效果才消失。

技术分享图片

1. 根据调试器里调用栈的观察,每当url发生变化时,会触发sap.ui.controller.doHashChange,该方法则会调用openLoadingScreen.这个方法里会创建BusyDialog的实例并调用open方法。Busy Dialog的实现位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

技术分享图片

2. 动画效果的渲染实现位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.

技术分享图片

第52行的renderFioriFlower方法:

技术分享图片

从97行的循环能看出在循环体内创建了5个div element,实际上就是UI Fiori动画效果里的5个花瓣。

技术分享图片

技术分享图片

3.Fiori动画效果显示之后,什么时候消失?

使用setTimeout将LoadingDialog的关闭动作加入到执行队列里。如果300毫秒之后(第188行的参数)执行队列里没有其他待执行的事件,则关闭该Dialog。

技术分享图片

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

技术分享图片

技术分享图片

Fiori里花瓣的动画效果实现原理

标签:分享   href   原理   ref   core   control   com   制作   loading   

原文地址:https://www.cnblogs.com/sap-jerry/p/8469882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!