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. Q680 验证回文字符串 Ⅱ

    给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca" 输出: ...

  2. server 2012 R2查询端口

    1. win+r弹出运行对话框,输入cmd,打开cmd窗口 netstat -ano | findstr "80" (注80是你想要看查看的端口号) 就会输出包含80端口使用的情况 ...

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

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

  4. mysql 5.7.20 server status 是stopped的解决办法

    mysql 5.7.20 server status 是stopped的解决办法 在安装mysql 5.7.20的过程中,前几个过程都没什么问题,但是最后一个步骤就出问题了.当check一直提示con ...

  5. PIE SDK打开HDF、NC数据

    1. 功能简介 HDF 是美国国家高级计算应用中心(National Center for Supercomputing Application)为了满足各种领域研究需求而研制的一种能高效存储和分发科 ...

  6. 对象池3（方法功能）PoolManager(控制)PoolTimeObject（时间管理）text01（调用）Destorys（销毁）

    1.对象池PoolManager namespace kernal { public class PoolManager : MonoBehaviour { //“缓冲池”集合 public stat ...

  7. Ruby初探

    官方网站:https://www.ruby-lang.org/zh_cn/ 标准库API文档:http://ruby-doc.org/stdlib-2.3.0/ 简介特性安装Ruby 命令行选项编码语 ...

  8. tomcat修改域名和访问域名时去掉项目名

    打开tomcat安装目录,根据路径找到 server.xml   路径D:\apache-tomcat-7.0.70\conf\server.xml 打开后   找到这一段 <Connector ...

  9. php 不用第三个变量 交换两个变量的值汇总

    //方法一:$a ="abc";$b="def"; $a = $a^$b;$b = $b^$a;$a = $a^$b; //方法二:list($a, $b)= ...

  10. 关于日常使用Azure MySQL中遇到的连接问题以及排查方法分享

    由于防火墙问题,TCP keep alive 问题,以及 MySQL 自身的参数问题这三个在使用中比较常见,所以今天就分享下自己找到的排查方法. 今天先聊一聊防火墙问题 大多数人在第一次创建 MySQ ...