Fiori应用的花瓣动画效果是怎么画出来的

Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。目前我只看了前者的behavior。可以看我附件里的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

  1. 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.

  1. 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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

DVWA 1.10 High等级的CSRF另类通关法

由于使用了不可猜测到的token,所以我们首先想到的思路,就是找一个XSS漏洞来配合,先通过XSS获得token之后修改密码。

10510
来自专栏机器学习算法与Python学习

10 个省时间的 PyCharm 技巧,提升工作效率,杠杠滴!

写 Python 代码时,你会严格遵守 pep8 规范么?还是要遵守的,不然代码传到 github 或者知乎上被人怼就不好了。但是如果靠肉眼去检查和注意的话,太...

12810
来自专栏码匠的流水账

聊聊Elasticsearch RestClient的RequestLogger

本文主要研究一下Elasticsearch RestClient的RequestLogger

12720
来自专栏好好学java的技术栈

你真的了解 Java 8 中的 lambda 表达式、方法引用、函数式接口、默认方式、静态方法吗

lambda 表达式在项目中也是用到了,这种新的语法的加入,对于使用 Java 多年的我,我觉得是如虎添翼的感觉哈,这种新的语法,大大的改善了以前的 Java ...

17620
来自专栏玄魂工作室

Kali Linux Web渗透测试手册(第二版) - 9.2 - 对跨站脚本攻击(xss)进行混淆代码测试

在前面的小节中,我们遇到了一种过滤机制,他会自动删除一些常见的JavaScript标签。

15210
来自专栏ThinkSNS

社交软件系统ThinkSNS+产品技术概要

开发环境:PHP7.1.3+ / Nginx 1.10+ / Mysql 5.7+

10320
来自专栏coding for love

2-4 使用webpack的配置文件

之所以直接执行npx webpack index.js就能打包成功,是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错,因为web...

12340
来自专栏数据分析1480

10个省时间的 PyCharm 技巧

经常听人说,多看源码。源码不仅能帮我们搞清楚运行机制,还能学习优秀的库或者框架的最佳实践。

11220
来自专栏Java识堂

如何优雅的使用MyBatis Generator?

MyBatis Generator的作用就是根据数据库中的表结构,帮我们自动生成和表结构相同的实体类,mapper接口,包含基本增删改查语句的XML文件,我以一...

33510
来自专栏崔庆才的专栏

5 张图彻底理解 Python 中的浅拷贝与深拷贝

首先我们要知道,Python 内不可变对象的内存管理方式是引用计数。因此,我们在谈论拷贝时,其实谈论的主要特点都是基于可变对象的。我们来看下面这段代码

12830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励