Fiori里花瓣的动画效果实现原理
本文共 649 字，大约阅读时间需要 2 分钟。
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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
转载地址：http://syonl.baihongyu.com/
你可能感兴趣的文章
npm 常用命令以及 npm scripts
查看>>
tomcat的最大线程数、最大排队数多少合适
查看>>
安装snmp无法安装依赖包net-snmp-libs = 1:5.3.2.2-20.el5
查看>>
JVisualVM之GC插件+错误"not supported for this jvm"+命令jstatd
查看>>
wp7上启动器使用方法
查看>>
基于虚拟用户的邮件系统
查看>>
TODO：火热的集福，我这样看
查看>>
Linux进程和任务计划管理
查看>>
fsck修复命令
查看>>
活动目录管理的四个复杂性
查看>>
A Tale of Five Editors 之Wily
查看>>
Python Django shell 调试
查看>>
Vim 实用技术常用插件
查看>>
RHEL-用户基础-重定向
查看>>
awstats 安装备忘
查看>>
使用CocoaLumberjack的一些问题记录
查看>>
Nginx 服务控制脚本
查看>>
java.lang.NullPointerException pstmt = conn.prepareStatement(sql)报错
查看>>
《编写高质量代码 Web前端开发修炼之道》 - 书摘精要
查看>>
重视细节，方能得到认可
查看>>