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：

選擇通過項目工程里的fioriSandboxConfig.json文件作為啟動入口，就能在新的瀏覽器窗口里看到效果了：

如果遇到問題，老規矩，F12打開調試器，通過debug找原因：

如果sandbox里測試沒問題，最后通過SAP幫助里介紹的步驟，部署到生產環境里，這里不再贅述。

如果把雪花的填充顏色的RGB值改成0 0 0會是什么效果？純白的雪花會變成黑色。看這個視頻：

看起來效果很像圣斗士黑暗四天王里黑暗白鳥的絕招。黑暗白鳥發出的黑色暴風雪，號稱能夠讓熊熊燃燒的火焰立即熄滅。

感謝閱讀。

更多閱讀

Jerry的ABAP, Java和JavaScript亂燉
Jerry的UI5框架代碼自學教程
Jerry的碎碎念：SAPUI5, Angular, React和Vue
SAP Fiori應用的三種部署方式
Jerry的Fiori原創文章合集
Jerry和您聊聊Chrome開發者工具
用JavaScript訪問SAP云平臺上的服務遇到跨域問題該怎么辦
當我用UI5診斷工具時我用些什么
寫在Github被微軟收購之際 - Github的那些另類用法
SAP UI 搜索分頁技術
SAP移動應用解決方案之一：HTML5應用 + Cordova = 平臺相關的混合應用
SAP成都研究院安德魯：自己動手開發一個Chrome Extension
在SAP UI中使用純JavaScript顯示產品主數據的3D模型視圖
你的項目剛剛啟動？是時候考慮Globalization了！
在Kubernetes上運行SAP UI5應用(上）
在Kubernetes上運行SAP UI5應用(下）
SAP Fiori + Vue = ？
SAP UI5和微信小程序對比之我見
Fiori Fundamentals和SAP UI5 Web Components
如何在阿里云上運行SAP UI5應用
高射炮打蚊子，殺雞用絕世好劍：在SAP Kyma上運行UI5應用
在SAP除了使用Cordova生產移動應用外，還有這種方式
只要200行JavaScript代碼，就能把特斯拉汽車帶到您身邊
純JavaScript實現的調用設備攝像頭并拍照的功能
如何在SAP UI5應用里添加使用攝像頭拍照的功能

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的雪妖现世：给SAP Fiori Launchpad增添雪花纷飞的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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