重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Fiori里花瓣的动画效果实现原理是什么-创新互联

本篇文章为大家展示了Fiori里花瓣的动画效果实现原理是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联于2013年开始,先为荣昌等服务建站,荣昌等地企业,进行企业商务咨询服务。为荣昌企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。

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

关于前者的效果,可以看我制作的这个视频。这个视频是手动将下图setTimeout的300毫秒延时改成30秒之后的效果,意思是30秒之后这个花瓣效果才消失。

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

1. 根据调试器里调用栈的观察,每当url发生变化时,会触发sap.ui.controller.doHashChange,该方法则会调用openLoadingScreen.这个方法里会创建BusyDialog的实例并调用open方法。Busy Dialog的实现位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js

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

2. 动画效果的渲染实现位置: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.

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

第52行的renderFioriFlower方法:

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

从97行的循环能看出在循环体内创建了5个div element,实际上就是UI Fiori动画效果里的5个花瓣。

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

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

3.Fiori动画效果显示之后,什么时候消失?

使用setTimeout将LoadingDialog的关闭动作加入到执行队列里。如果300毫秒之后(第188行的参数)执行队列里没有其他待执行的事件,则关闭该Dialog。

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

上述内容就是Fiori里花瓣的动画效果实现原理是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联-成都网站建设公司行业资讯频道。


网站题目:Fiori里花瓣的动画效果实现原理是什么-创新互联
分享地址:http://cqcxhl.com/article/hjgdc.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP