资讯专栏INFORMATION COLUMN

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

Drinkey / 1273人阅读

摘要:另一种是下图的个圆环不断旋转的效果。的实现位置动画效果的渲染实现位置第行的方法从行的循环能看出在循环体内创建了个实际上就是动画效果里的个花瓣。动画效果显示之后,什么时候消失使用将的关闭动作加入到执行队列里。

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。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51874.html

相关文章

  • Fiori花瓣动画效果实现原理

    摘要:另一种是下图的个圆环不断旋转的效果。的实现位置动画效果的渲染实现位置第行的方法从行的循环能看出在循环体内创建了个实际上就是动画效果里的个花瓣。动画效果显示之后,什么时候消失使用将的关闭动作加入到执行队列里。 Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。 showImg(https://s...

    Steven 评论0 收藏0
  • Fiori花瓣动画效果实现原理

    摘要:另一种是下图的个圆环不断旋转的效果。的实现位置动画效果的渲染实现位置第行的方法从行的循环能看出在循环体内创建了个实际上就是动画效果里的个花瓣。动画效果显示之后,什么时候消失使用将的关闭动作加入到执行队列里。 Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。 showImg(https://s...

    CoorChice 评论0 收藏0
  • Fiori花瓣动画效果实现原理

    摘要:另一种是下图的个圆环不断旋转的效果。的实现位置动画效果的渲染实现位置第行的方法从行的循环能看出在循环体内创建了个实际上就是动画效果里的个花瓣。动画效果显示之后,什么时候消失使用将的关闭动作加入到执行队列里。 Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。 showImg(https://s...

    zzir 评论0 收藏0
  • H5实例教学--ThreeJs 实现粒子动画飘花效果

    摘要:我们还需要在粒子超出效果展示区域时,把粒子重新赋予一个初始位置这样,飘花瓣的效果,就完成了代码下载链接密码 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子动画在ThreeJs可以用几种方式实现本次样例使用Sprite类来构建粒子 官方对Sprite类的解释 Sprite A sprite is a plane t...

    Andrman 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<