這是Jerry 2021年的第 14 篇文章，也是汪子熙公眾號總共第 285 篇原創文章。

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

上周 Jerry 做 SAP Spartacus 開發時，接觸到一個新的和幽靈相關的術語：

Skeleton Design(Ghost Design)

讀了幫助文檔后，發現該名詞對我來說只不過是舊瓶裝新酒罷了。

本文目錄

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

我對應用軟件的 User Experience 即用戶體驗領域知之甚少。在 SAP 內部，有專門的用戶體驗設計師負責這個領域，因此我也不清楚 Skeleton / Ghost Design 準確的中文翻譯是啥，姑且就直譯成“幽靈設計”吧。

在我看來，無論是幽靈設計，還是之前 SAP UI5 提供的頁面加載動畫效果，都是改善用戶使用體驗的一種手段：提示用戶當前頁面正在加載后臺數據，或是執行一些比較費時的操作。

SAP UI5 Busy Dialog

Jerry 從2014年開始使用 SAP UI5 進行 Fiori 開發，經歷了 Fiori 1.0 到 2.0 的版本迭代。還記得處理的第一個 CRM Fiori 應用 My Opportunities 的 bug，癥狀就是修改了 Opportunity 數據之后，用戶可以短時間內快速點擊下圖的 Save 按鈕，從而產生多個到 CRM 后臺的 OData 保存請求。

當時我的修復該問題的策略就是，在 Save 按鈕點擊之后，設置一個 Busy Dialog，讓其鎖住整個頁面。這樣，用戶沒有機會再點擊 UI 進行任何操作了。直至 OData 請求在后臺成功完成，或者收到錯誤提示，再關閉該 Busy Dialog，頁面就能重新恢復可點擊狀態。

在 Fiori 1.0 時代，Busy Dialog 的外觀是一個由5朵花瓣組成的花朵，具有不斷旋轉的動畫效果。

可以通過這個視頻查看運行時效果：

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

Jerry 曾經寫過一篇 SAP 社區博客：Fiori Busy Dialog – when is it opened and closed

該文章介紹了 SAP UI5 Busy Dialog 在 Fiori 應用中的使用場景。

一個典型的例子是，用戶點擊 Fiori Launchpad tile，跳轉到某個具體的 Fiori 應用時，瀏覽器地址欄里的 url 發生變化， sap.ui.controller.doHashChange 會調用 BusyDialog.open 方法，繪制一個花瓣的動畫效果：

如 Jerry 之前的文章 深入學習SAP UI5框架代碼系列之二：UI5 控件的渲染器 所述，這個花瓣效果的實現 位于其渲染器 LoadingDialogRenderer 的方法 renderFioriFlower 內：

5片花瓣的視覺效果，通過5個 div 元素實現：

而花瓣旋轉的動畫效果，通過 div 元素 css 類的 animation 系列屬性實現：

到了 Fiori 3.0 ，Jerry 發現 Busy Dialog 的外觀，已經變成了三個大小不斷變化的圓圈。

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

我在 2015 年擔任 一個德國 Fiori 客戶上線的 Dev Angel 時，該客戶有一個自開發需求：其產品主數據的配圖動輒超過 10 MB，客戶希望瀏覽器在成功加載這些尺寸巨大的圖片之前，顯示一些加載動畫效果。待到圖片完全加載結束時，再關閉加載動畫，顯示實際圖片。

先看沒有經過任何優化處理的情況下，如何在 SAP UI5 里使用 Image 控件顯示一個 url 指向的圖片：第10行調用 SAP UI5 控件 Image 實例的 setSrc 方法，加載 BIG_IMAGE 變量指向的圖片。

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

這是運行時的效果：

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

這個方案實現源代碼如下：

上圖代碼按照運行時執行的先后順序，有4個關鍵點，分別用序號1～4表示：

第10行代碼，創建一個新的 Image 實例，充當圖片代理的角色。

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

第16行代碼，將待加載大尺寸圖片的 url 通過輸入參數，傳遞給代理 Image 控件的 setSrc 方法。這會觸發瀏覽器發起對大尺寸圖片的加載。

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

SAP Spartacus Spinner 控件

Spartacus 里的 Spinner 控件作用類似 SAP UI5 Busy Dialog，下面是一個例子：當第九行代碼的組件屬性 supportedDeliveryModes$.length 可用時，說明當前訂單支持的商品遞貨模式的相關配置信息，已經從后臺取到前臺了，此時顯示遞貨模式的選擇頁面；否則，則顯示 ID 為 loading 標識的模板頁面，里面只包含一個 Spinner 控件：

這個 Spinner 控件的外觀及實現細節，請參考 Jerry 的視頻：

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

最后來說說 SAP Spartacus 的幽靈設計。

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

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

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

從Spartacus list.service.ts 的實現源代碼能看出，幽靈數據就是一個 length 屬性值為10的空數組。

在 Chrome 開發者工具里，能觀察到這些幽靈數據具有對應的 CSS class，這使得它們具有灰色矩形的視覺外觀：

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

這樣，從運行時序來說，任何消費 getData 函數返回的 Observable 對象的 Angular UI 組件，都會先顯示 startWith 設置的初始值，即幽靈數據。待從 Commerce Cloud 后臺加載的真實數據返回給瀏覽器之后，組件自動刷新并顯示這些真實的業務數據。

本文介紹了 Jerry 工作過的 SAP 產品里，當用戶操作 UI 觸發了某些后臺數據加載時，為了提升用戶體驗而引入的一些頁面效果的技術實現，希望對大家有所幫助，感謝閱讀。

更多閱讀

• SAP UI和Salesforce UI開發漫談

• SAP UI 搜索分頁技術

• Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

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

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• SAP UI5控件ID的生成邏輯

• SAP UI5控件的多語言(國際化,Internationalization,i18n)支持的實現原理

• XML視圖里的button控件

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

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎

• 漫談SAP產品里頁面上的Checkbox設計與實現系列之一

• SAP UI渲染模式：客戶端渲染 VS 服務器端渲染

更多Jerry的原創文章，盡在：“汪子熙”:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。