這是Jerry 2021年的第 14 篇文章，也是汪子熙公眾號(hào)總共第 285 篇原創(chuàng)文章。

在本篇文章之前，Jerry 印象最深的幽靈，應(yīng)該要算《星際爭(zhēng)霸I》里人族能夠隱形的空中單位 Wraith( 幽靈戰(zhàn)機(jī) ），以及能施放核彈的 Ghost( 幽靈特工).

上周 Jerry 做 SAP Spartacus 開發(fā)時(shí)，接觸到一個(gè)新的和幽靈相關(guān)的術(shù)語：

Skeleton Design(Ghost Design)

讀了幫助文檔后，發(fā)現(xiàn)該名詞對(duì)我來說只不過是舊瓶裝新酒罷了。

本文目錄

• SAP UI5 Busy Dialog
• 使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的加載體驗(yàn)
• SAP Spartacus Spinner 控件
• SAP Spartacus 幽靈設(shè)計(jì)

我對(duì)應(yīng)用軟件的 User Experience 即用戶體驗(yàn)領(lǐng)域知之甚少。在 SAP 內(nèi)部，有專門的用戶體驗(yàn)設(shè)計(jì)師負(fù)責(zé)這個(gè)領(lǐng)域，因此我也不清楚 Skeleton / Ghost Design 準(zhǔn)確的中文翻譯是啥，姑且就直譯成“幽靈設(shè)計(jì)”吧。

在我看來，無論是幽靈設(shè)計(jì)，還是之前 SAP UI5 提供的頁面加載動(dòng)畫效果，都是改善用戶使用體驗(yàn)的一種手段：提示用戶當(dāng)前頁面正在加載后臺(tái)數(shù)據(jù)，或是執(zhí)行一些比較費(fèi)時(shí)的操作。

SAP UI5 Busy Dialog

Jerry 從2014年開始使用 SAP UI5 進(jìn)行 Fiori 開發(fā)，經(jīng)歷了 Fiori 1.0 到 2.0 的版本迭代。還記得處理的第一個(gè) CRM Fiori 應(yīng)用 My Opportunities 的 bug，癥狀就是修改了 Opportunity 數(shù)據(jù)之后，用戶可以短時(shí)間內(nèi)快速點(diǎn)擊下圖的 Save 按鈕，從而產(chǎn)生多個(gè)到 CRM 后臺(tái)的 OData 保存請(qǐng)求。

當(dāng)時(shí)我的修復(fù)該問題的策略就是，在 Save 按鈕點(diǎn)擊之后，設(shè)置一個(gè) Busy Dialog，讓其鎖住整個(gè)頁面。這樣，用戶沒有機(jī)會(huì)再點(diǎn)擊 UI 進(jìn)行任何操作了。直至 OData 請(qǐng)求在后臺(tái)成功完成，或者收到錯(cuò)誤提示，再關(guān)閉該 Busy Dialog，頁面就能重新恢復(fù)可點(diǎn)擊狀態(tài)。

在 Fiori 1.0 時(shí)代，Busy Dialog 的外觀是一個(gè)由5朵花瓣組成的花朵，具有不斷旋轉(zhuǎn)的動(dòng)畫效果。

可以通過這個(gè)視頻查看運(yùn)行時(shí)效果：

https://v.qq.com/x/page/y3225pbaqpa.html

Jerry 曾經(jīng)寫過一篇 SAP 社區(qū)博客：Fiori Busy Dialog – when is it opened and closed

該文章介紹了 SAP UI5 Busy Dialog 在 Fiori 應(yīng)用中的使用場(chǎng)景。

一個(gè)典型的例子是，用戶點(diǎn)擊 Fiori Launchpad tile，跳轉(zhuǎn)到某個(gè)具體的 Fiori 應(yīng)用時(shí)，瀏覽器地址欄里的 url 發(fā)生變化， sap.ui.controller.doHashChange 會(huì)調(diào)用 BusyDialog.open 方法，繪制一個(gè)花瓣的動(dòng)畫效果：

如 Jerry 之前的文章 深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器 所述，這個(gè)花瓣效果的實(shí)現(xiàn) 位于其渲染器 LoadingDialogRenderer 的方法 renderFioriFlower 內(nèi)：

5片花瓣的視覺效果，通過5個(gè) div 元素實(shí)現(xiàn)：

而花瓣旋轉(zhuǎn)的動(dòng)畫效果，通過 div 元素 css 類的 animation 系列屬性實(shí)現(xiàn)：

到了 Fiori 3.0 ，Jerry 發(fā)現(xiàn) Busy Dialog 的外觀，已經(jīng)變成了三個(gè)大小不斷變化的圓圈。

使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的加載體驗(yàn)

我在 2015 年擔(dān)任 一個(gè)德國(guó) Fiori 客戶上線的 Dev Angel 時(shí)，該客戶有一個(gè)自開發(fā)需求：其產(chǎn)品主數(shù)據(jù)的配圖動(dòng)輒超過 10 MB，客戶希望瀏覽器在成功加載這些尺寸巨大的圖片之前，顯示一些加載動(dòng)畫效果。待到圖片完全加載結(jié)束時(shí)，再關(guān)閉加載動(dòng)畫，顯示實(shí)際圖片。

先看沒有經(jīng)過任何優(yōu)化處理的情況下，如何在 SAP UI5 里使用 Image 控件顯示一個(gè) url 指向的圖片：第10行調(diào)用 SAP UI5 控件 Image 實(shí)例的 setSrc 方法，加載 BIG_IMAGE 變量指向的圖片。

再看我給客戶推薦的基于圖片代理的解決方案。

這是運(yùn)行時(shí)的效果：

https://v.qq.com/x/page/n32257vdvui.html

這個(gè)方案實(shí)現(xiàn)源代碼如下：

上圖代碼按照運(yùn)行時(shí)執(zhí)行的先后順序，有4個(gè)關(guān)鍵點(diǎn)，分別用序號(hào)1～4表示：

第10行代碼，創(chuàng)建一個(gè)新的 Image 實(shí)例，充當(dāng)圖片代理的角色。

第15行代碼，UI5 應(yīng)用里原始的 Image 實(shí)例，調(diào)用 setSrc 方法，傳入的不是實(shí)際的大圖片地址，而是一個(gè)存儲(chǔ)在本地的，表示圖片正在加載的 gif 文件( 客戶自己準(zhǔn)備，一個(gè)該企業(yè) Logo 旋轉(zhuǎn)的動(dòng)畫效果). 這樣，用戶打開頁面時(shí)，首先映入眼簾的，是該本地 gif 文件 loading.gif 實(shí)現(xiàn)的不斷旋轉(zhuǎn)的動(dòng)畫效果。

第16行代碼，將待加載大尺寸圖片的 url 通過輸入?yún)?shù)，傳遞給代理 Image 控件的 setSrc 方法。這會(huì)觸發(fā)瀏覽器發(fā)起對(duì)大尺寸圖片的加載。

第13行代碼，當(dāng)代理 Image 控件觸發(fā)的大尺寸圖片加載完成后，觸發(fā)其 load 回調(diào)函數(shù)。該回調(diào)函數(shù)觸發(fā)，說明大尺寸圖片的數(shù)據(jù)已經(jīng)完全加載到本地，此時(shí)在回調(diào)函數(shù)里，將大尺寸圖片的 url 設(shè)置給原始 Image 控件的 src 屬性，即可將該圖片顯示出來。

SAP Spartacus Spinner 控件

Spartacus 里的 Spinner 控件作用類似 SAP UI5 Busy Dialog，下面是一個(gè)例子：當(dāng)?shù)诰判写a的組件屬性 supportedDeliveryModes$.length 可用時(shí)，說明當(dāng)前訂單支持的商品遞貨模式的相關(guān)配置信息，已經(jīng)從后臺(tái)取到前臺(tái)了，此時(shí)顯示遞貨模式的選擇頁面；否則，則顯示 ID 為 loading 標(biāo)識(shí)的模板頁面，里面只包含一個(gè) Spinner 控件：

這個(gè) Spinner 控件的外觀及實(shí)現(xiàn)細(xì)節(jié)，請(qǐng)參考 Jerry 的視頻：

https://v.qq.com/x/page/w3160fich85.html

最后來說說 SAP Spartacus 的幽靈設(shè)計(jì)。

Spartacus B2B 功能模塊里，正常的 Cost Centers 列表顯示如下：

在這些 Cost Center 的數(shù)據(jù)從后臺(tái)取回來之前，頁面顯示如下，這種設(shè)計(jì)在 SAP Spartacus的幫助文檔里，被稱為 Skeleton 或者 Ghost Design：

這些在真實(shí)數(shù)據(jù)尚未從后臺(tái)加載完畢之前，以“占位符”的方式顯示在前臺(tái)的灰色矩形條，綁定在 Angular Component 里的數(shù)據(jù)，就稱為幽靈數(shù)據(jù)( Ghost Data ).

從Spartacus list.service.ts 的實(shí)現(xiàn)源代碼能看出，幽靈數(shù)據(jù)就是一個(gè) length 屬性值為10的空數(shù)組。

在 Chrome 開發(fā)者工具里，能觀察到這些幽靈數(shù)據(jù)具有對(duì)應(yīng)的 CSS class，這使得它們具有灰色矩形的視覺外觀：

Cost Center 表格顯示的數(shù)據(jù)最終通過 list.service.ts 從 SAP Commerce Cloud 后臺(tái)取出，取數(shù)邏輯通過 Angular 響應(yīng)式編程庫 RxJS的 pipe 方法驅(qū)動(dòng)：第101行 switchMap 操作符里的箭頭函數(shù)，輸入?yún)?shù) pagination 包含了去 Commerce Cloud 取數(shù)據(jù)使用的分頁設(shè)置，函數(shù)體 this.load 發(fā)送 HTTP 請(qǐng)求，消費(fèi) Commerce Cloud 的 OCC API. 而第102行的 startWith操作符，語義上相當(dāng)于給 pipe 驅(qū)動(dòng)的 Observable 流賦上一個(gè)初始值，該初始值即為 length 屬性為10的空數(shù)組。

這樣，從運(yùn)行時(shí)序來說，任何消費(fèi) getData 函數(shù)返回的 Observable 對(duì)象的 Angular UI 組件，都會(huì)先顯示 startWith 設(shè)置的初始值，即幽靈數(shù)據(jù)。待從 Commerce Cloud 后臺(tái)加載的真實(shí)數(shù)據(jù)返回給瀏覽器之后，組件自動(dòng)刷新并顯示這些真實(shí)的業(yè)務(wù)數(shù)據(jù)。

本文介紹了 Jerry 工作過的 SAP 產(chǎn)品里，當(dāng)用戶操作 UI 觸發(fā)了某些后臺(tái)數(shù)據(jù)加載時(shí)，為了提升用戶體驗(yàn)而引入的一些頁面效果的技術(shù)實(shí)現(xiàn)，希望對(duì)大家有所幫助，感謝閱讀。

更多閱讀

• SAP UI和Salesforce UI開發(fā)漫談

• SAP UI 搜索分頁技術(shù)

• Jerry在2020 SAP全球技術(shù)大會(huì)的分享：SAP Spartacus技術(shù)介紹的文字版

• SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機(jī)制

• SAP UI5 控件渲染機(jī)制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實(shí)現(xiàn)

• SAP UI5控件的實(shí)例數(shù)據(jù)修改和讀取邏輯

• SAP UI5控件數(shù)據(jù)綁定的實(shí)現(xiàn)原理

• SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實(shí)現(xiàn)原理比較

• SAP UI5控件ID的生成邏輯

• SAP UI5控件的多語言(國(guó)際化,Internationalization,i18n)支持的實(shí)現(xiàn)原理

• XML視圖里的button控件

• button控件和它背后的DOM元素

• SAP UI5 OData謠言粉碎機(jī)：極短時(shí)間內(nèi)發(fā)送兩個(gè)Odata request,前一個(gè)會(huì)自動(dòng)被cancel掉嗎

• 漫談SAP產(chǎn)品里頁面上的Checkbox設(shè)計(jì)與實(shí)現(xiàn)系列之一

• SAP UI渲染模式：客戶端渲染 VS 服務(wù)器端渲染

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP UI的加载动画效果和幽灵设计(Ghost Design)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。