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里花瓣的动画效果实现原理的更多相关文章

  1. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  2. transition:all 0.5s linear;进度条动画效果 制作原理

    Html: <span class="progress"><b ><i></i></b><em>50< ...

  3. Object-C 里面的animation动画效果,核心动画

    #import "CoreAnimationViewController.h" @interface CoreAnimationViewController ()@property ...

  4. Core Animation之多种动画效果

    前面介绍了Core Animation基础知识,还有CALayer的简单使用,最终还是有要动画的滴,这里列出几个动画效果,参考下能加深对Core Animation的认识和理解 1.把图片移到右下角变 ...

  5. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  6. 用css3和canvas实现的蜂窝动画效果

    近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...

  7. 【安卓高级】ViewPager视差动画效果

    在安卓开发中,是否遇见过一些很酷的视差动画效果,当ViewPager滑动下一页的时候,页面内的各种元素也能跟随滑动做位移效果,整体看起来非常有活力. 关键的PageTransformer PageTr ...

  8. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. Q443 压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  2. 剑指offer——面试题10：斐波那契数列

    个人答案: #include"iostream" #include"stdio.h" #include"string.h" using na ...

  3. vm12下Centos6的javaweb环境搭建

    配置linux的javaweb环境之前: 1.在windows安装xshell(非必需,但是推荐) 2.在linux安装Linux与windows文件传输工具RZSZ[root@192 ~]# yum ...

  4. spark第四篇：Running Spark on YARN

    确保HADOOP_CONF_DIR或者YARN_CONF_DIR指向hadoop集群配置文件目录.这些配置用来写数据到hdfs以及连接yarn ResourceManager.(在$SPARK_HOM ...

  5. RBAC基于角色的权限访问控制

      RBAC是什么,能解决什么难题?ThinkPHP中RBAC实现体系安全拦截器认证管理器访问决策管理运行身份管理器ThinkPHP中RBAC认证流程权限管理的具体实现过程RBAC相关的数据库介绍Th ...

  6. css样式查找遇到的问题汇总

    利用css简单排除元素的第一个子元素 例如:排除表格的第一行 /*除了表格的第一行其他都显示为红色*/ table tr+tr{ background-color:red;/*除了表格的第一行其他都显 ...

  7. 4.爬虫 requests库讲解 GET请求 POST请求 响应

    requests库相比于urllib库更好用!!! 0.各种请求方式 import requests requests.post('http://httpbin.org/post') requests ...

  8. mvc表单如何绑定bool类型的属性或变量

    先来看一组代码: 视图代码: @model MvcTest.Controllers.Test @{ Layout = null; } <!DOCTYPE html> <html> ...

  9. 写C#代码时用到的中文简体字 、繁体字 对应的转化 （收藏吧）

    简体字    下面有与之对应的繁体字 private const String Jian = "啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆疤巴拔跋靶 ...

  10. JS的封装（JS插件的封装）

    JS中类的概念类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法.方法也是一种特殊的对象. 类的方法在构造方法中初始化实例的方法(就是在构造 ...