专栏首页Jerry的SAP技术分享Fiori里花瓣的动画效果实现原理

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

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。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【30秒一个知识点】Adapter(二)

    使用 Array.prototype.map()将 transforms应用于 args,并结合扩展运算符( …)将转换后的参数传递给 fn。

    ConardLi
  • 爬虫高手必须了解的10个爬虫工具

    工欲善其事必先利其器的道理相信大家都懂。而作为经常要和各大网站做拉锯战的爬虫工程师们,则更需要利用利用好身边的一切法器,以便更快的攻破对方防线。今天我就以日常爬...

    叫我龙总
  • Node.js 究竟是什么?

    Node.js 是一个 JavaScript 运行时环境。听起来还不错,不过这究竟意味着什么?它又是如何运作的?

    疯狂的技术宅
  • ES10新特性(一)

    BigInt 是一个任意精度的整数。这意味着变量现在可以 表示²⁵³ 数字,而不仅仅是9007199254740992。

    ConardLi
  • JavaScript中的类型判断

    类型判断在 web 开发中有非常广泛的应用,简单的有判断数字还是字符串,进阶一点的有判断数组还是对象,再进阶一点的有判断日期、正则、错误类型,再再进阶一点还有比...

    ConardLi
  • 3-1 Loader是什么

    前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包...

    love丁酥酥
  • 一个函数让你看懂 'Why 0.1+0.2!=0.3'

    由于 JavaScript中没有将小数的 二进制转换成 十进制的方法,于是手动实现了一个。

    ConardLi
  • 2-5 浅析webpack打包内容

    Hash:本次打包的一个标识。 Version:使用的webpack版本 Time:本次打包耗时 Built at: 生成时间

    love丁酥酥
  • ES10新特性(二)

    此更新修复了字符 U+D800 到 U+DFFF 的处理,有时可以进入 JSON 字符串。 这可能是一个问题,因为 JSON.stringify 可能会将这些数...

    ConardLi
  • 程序员做前端好还是做后台好?

    从事嵌入式开发多年,最近在做后台相关相关的开发,现在很多程序员在学校或者入行之前都会考虑是选择前端开发还后台研发,很多女生或者基础不是很好的学生一般会选择前端开...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券