雪妖現世：給SAP Fiori Launchpad增添雪花紛飛的效果

2019 年 12 月 6 日
筆記

本文鏈接：https://jerry.blog.csdn.net/article/details/103366353

1995年7月，台灣大宇公司發布了一款國產單機角色扮演遊戲神作：《仙劍奇俠傳1》，所謂「一包煙，一杯茶」，就能在電腦面前坐一整天。

這麼經典的遊戲Jerry當然已經通關過無數次了。在試煉窟最深處的女媧遺迹里，可以習得冰系最強法術：雪妖。

雪妖施展後，全螢幕幕會渲染出漫天雪花，攻擊對方全體。本文Jerry會介紹如何給SAP Fiori Launchpad增加和雪妖施法一樣的雪花紛飛效果。

先從這個影片里看下Fiori Launchpad加了雪花後的效果。

Jerry從2014年開始學習JavaScript，當時從網上搜集了很多視覺效果酷炫的HTML頁面，通過單步調試的方式學習其實現技巧。

可以通過這個鏈接訪問Jerry學習過程中參考的HTML5應用，總共98個：

絕大多數效果酷炫的HTML5應用都是通過JavaScript操作canvas這個HTML5引入的新標籤實現的。

我們首先在本地實現雪花效果，然後再集成到Fiori Launchpad里去。

搜索引擎里根據關鍵字snow canvas html5搜索，能找到很多結果：

本文我們選擇這個實現。

本地新建一個html文件，把下面這119行程式碼拷貝進去，用瀏覽器打開，即可看到文章開頭影片里那個雪花效果了。

大家可以從Jerry的Github上找到可以直接複製粘貼的程式碼：

這個雪花實現最核心的地方是上圖第92行的requestAnimationFrame函數調用，這個函數是windows全局對象提供的一個標準函數，通知瀏覽器在每次重繪時，調用應用開發人員實現的一個回調函數，來實現動畫效果。我們編寫一個loop函數，在裡面用隨機數發生器修改200片雪花每一片的x和y軸坐標，大小和下落速度等參數。理論上loop函數被requestAnimationFrame驅動，每隔一秒會重複執行60次，但在大多數遵循W3C建議的瀏覽器中，回調函數執行次數通常與瀏覽器螢幕刷新次數相匹配。

搞懂了這段程式碼的實現原理後，下面我們將其遷移到Fiori里去。

打開SAP WebIDE，在workspace Preferences里根據關鍵字Launchpad搜索，找到SAP Fiori Launchpad extensibility這個插件，將其置於enabled狀態。

之後在新建項目的嚮導里能看到SAP Fiori Launchpad Plugin這個模板了。基於這個模板創建一個新的Fiori項目：

嚮導會自動幫我們生成一個Fiori Launchpad插件必需的文件。

新建一個controller文件夾，裡面新建一個文件Flake.js，把之前單機版的雪花實現效果的script標籤里的程式碼遷移到Flake.js里：

之所以Jerry用了「遷移」，而不是「拷貝」，是因為單機版里的JavaScript程式碼直接複製粘貼到Fiori里是沒辦法工作的。

想一想，UI5之外的第三方庫，如何引入到Fiori項目里並消費？Jerry之前的文章如何在SAP UI5應用里添加使用攝影機拍照的功能已經介紹過方法。Flake.js可以看成nodejs里的一個module，注意上圖第6行Object.extend函數調用，返回的是一個能夠被SAP Fiori應用導入後能夠直接消費的雪花對象。之前單機版里採用面向過程式編程思想開發的幾個函數，通過Object.extend封裝成了JavaScript對象具有的方法。

在Component.js里，通過sap.ui.define引入Flake對象，再用Flake.的語法就可以使用文件Flake.js里暴露的方法了。

Flake.js和Component.js的程式碼，請從Jerry的github上獲取：

https://github.com/i042416/KnowlegeRepository/blob/master/practice/279_Flake.js https://github.com/i042416/KnowlegeRepository/blob/master/practice/279_Component.js

完成插件開發後，本地測試。右鍵選擇Run as SAP Fiori Launchpad Sandbox：