In July 1995, Taiwan Daewoo announced a domestic stand-alone role-playing game for God: "Paladin 1", the so-called "a pack of cigarettes, a cup of tea", will be able to sit all day in front of a computer.
Of course, such a classic game Jerry has clearance countless times. Nuwa ruins trials in the deepest cave, the ice can be learned strongest magic: snow demon.
After the snow demon display, full screen will render the sky snowflakes, attack each other all. This article will explain how to Jerry like SAP Fiori Launchpad increase demon magic snowflakes and snow effect.
Start with this video where a look Fiori Launchpad plus the effect of the snow.
Jerry from 2014 began to learn JavaScript, then from the Internet to collect a lot of cool visual effect of HTML pages, by stepping way to achieve their learning skills.
Through this link to access Jerry HTML5 application process referenced study, a total of 98:
The vast majority of the effect of cool HTML5 applications are implemented by a new JavaScript action this HTML5 canvas tag introduced.
We first achieved snowflake effect locally, and then integrated into the Fiori Launchpad go.
Search engines snow canvas html5 based on keyword search, you can find a lot of results:
In this paper we have chosen this implementation.
Create a local html file, add the following line of code copied into this 119, open the browser, you can see the video in the beginning of the article snow effects.
Everyone from Jerry's Github find the code you can copy and paste directly on:
这个雪花实现最核心的地方是上图第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应用
In addition to using SAP Cordova production of mobile applications, there is in this way
as long as 200 lines of JavaScript, Tesla Motors will be able to bring your side
pure JavaScript implementation calls the device camera and take pictures of features
on how to add applications in the SAP UI5 use the camera to take pictures of the function
For more Jerry's original article, please pay attention to the public number "Wang Zixi":
