本文Jerry会介绍如何给SAP Fiori Launchpad增加和雪妖施法一样的雪花纷飞效果。
先从下面的视频里看下Fiori Launchpad加了雪花后的效果。
Jerry从2014年开始学习JavaScript，当时从网上搜集了很多视觉效果酷炫的HTML页面，通过单步调试的方式学习其实现技巧。
可以通过下面这个链接访问Jerry学习过程中参考的HTML5应用，总共98个：
http://jerrywang-sap.cn/FioriODataTestTool2014/
绝大多数效果酷炫的HTML5应用都是通过JavaScript操作canvas这个HTML5引入的新标签实现的。
我们首先在本地实现雪花效果，然后再集成到Fiori Launchpad里去。
搜索引擎里根据关键字snow canvas html5搜索，能找到很多结果：
本文我们选择这个实现：https://codepen.io/pimskie/pen/jEVPNx
本地新建一个html文件，把下面这119行代码拷贝进去，用浏览器打开，即可看到文章开头视频里那个雪花效果了。
大家可以从Jerry的Github上找到可以直接复制粘贴的代码：
https://github.com/i042416/KnowlegeRepository/blob/master/practice/279_snow.html
这个雪花实现最核心的地方是上图第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帮助里介绍的步骤，部署到生产环境里，这里不再赘述。
https://help.sap.com/viewer/webide-flpextensibility/5eb4f24a0f4f49bbaa8b6ffcffb1c079.html
如果把雪花的填充颜色的RGB值改成0 0 0会是什么效果？纯白的雪花会变成黑色。看这个视频：
https://v.qq.com/x/page/a3028t4vxjq.html
看起来效果很像圣斗士黑暗四天王里黑暗白鸟的绝招。黑暗白鸟发出的黑色暴风雪，号称能够让熊熊燃烧的火焰立即熄灭。
本文是通过SAP社区这篇博客启发而写的，感谢作者Meli Lauber带给Jerry的启发。
