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

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

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


image.png


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


image.png


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


image.png


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


image.png


第52行的renderFioriFlower方法:


image.png


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

image.png


image.png



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


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

image.png


相关文章
|
前端开发 容器
SAP UI5 应用里 FlexBox 控件的设计原理
SAP UI5 应用里 FlexBox 控件的设计原理
|
6月前
什么是瀑布流布局?瀑布流式布局的优缺点
什么是瀑布流布局?瀑布流式布局的优缺点
400 0
响应式布局的五种方法
响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。
|
存储 Android开发 iOS开发
Flutter(十四)——动画的原理以及Tween与Curve的使用
Flutter(十四)——动画的原理以及Tween与Curve的使用
671 1
Flutter(十四)——动画的原理以及Tween与Curve的使用
|
编解码
unity3dUGUI之UI粒子特效自适应缩放
using UnityEngine; using System.Collections; using System.Collections.Generic; public class UIParticleScale : MonoBehaviour...
1583 0
|
Java Spring
SwiftUI—制作spring样式时间曲线的旋转动画
SwiftUI—制作spring样式时间曲线的旋转动画
326 0
SwiftUI—制作spring样式时间曲线的旋转动画
|
JavaScript 前端开发 API
Fiori 花瓣动画效果的实现原理
Fiori 花瓣动画效果的实现原理
82 0
Fiori 花瓣动画效果的实现原理
Fiori里花瓣的动画效果实现原理
Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。
Fiori里花瓣的动画效果实现原理
|
编解码 前端开发 JavaScript
响应式布局的五种实现方法
响应式布局的五种实现方法
484 0
响应式布局的五种实现方法
|
前端开发 JavaScript Shell
Fiori应用的花瓣动画效果是怎么画出来的
Fiori里的busy dialog有两种表现形式,一种是下图里的flower形状,由5个花瓣组成。另一种是下图的3/4个圆环的效果。目前我只看了前者的behavior。可以看我附件里的video。这个video是手动将default 300毫秒改成30秒之后的效果。
Fiori应用的花瓣动画效果是怎么画出来的