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增添雪花纷飞的效果的更多相关文章

  1. 如何查找SAP Fiori launchpad Designer的准确路径即url地址

    比如我们知道在SPRO里下面这个路径的customizing activity里打开Fiori Launchpad designer: SAP Netweaver->UI technologie ...

  2. UI5-学习篇-18-云端UI5应用部署到Fiori Launchpad

    UI5应用发布SCP 选择UI5应用项目,右键 Deploy - Deploy to SAP Cloud Platform 输入云平台子账号,项目名称,应用名称,如下图所示: 点击Open the r ...

  3. Fiori Launchpad Tile点击后跳转的调试技巧

    在SAP Fiori launchpad 里点击某个tile之后,后台会计算出跳转的目标url返回给前台. 下图中一个个白色的方框就成为tile.每个tile点击之后,会打开一个对应的Fiori应用. ...

  4. 【Fiori系列】为什么SAP Fiori活的如此精致

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]为什么SAP Fiori活的如 ...

  5. 如何将BSP应用配置成Fiori Launchpad上的一个tile

    当我们通过WebIDE或者Eclipse的插件Team Provider把一个本地开发好的UI5应用部署到了ABAP Netweaver服务器上之后,我们可以将该UI5应用配置成Fiori launc ...

  6. 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...

  7. 【FIORI系列】SAP 一文读懂SAP Fiori是什么

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fio ...

  8. SAP Fiori和UI5的初学者导航

    你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等着别人 ...

  9. SAP Fiori应用的三种部署方式

    封面图片来自Google搜索,关键字: Fiori Deployment 方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体 在SAP成都labs我曾经担任过CRM这几个 ...

随机推荐

  1. sql server中raiserror的用法(动态参数传值)

    1.raiserrror定义: 返回用户定义的错误信息并设系统标志,记录发生错误.通过使用 RAISERROR 语句,客户端可以从 sysmessages 表中检索条目, 或者使用用户指定的严重度和状 ...

  2. BGP MPLS IP V匹N基本概念

    BGP/MPLS IP VPN基本概念 Site 在介绍VPN时经常会提到"Site",Site(站点)的含义可以从下述几个方面理解: · Site是指相互之间具备IP连通性的一组 ...

  3. webService和Restful

    restful是一种架构风格,其核心是面向资源,更简单:而webService底层SOAP协议,主要核心是面向活动:两个都是通过web请求调用接口 RESTful是什么: 首先要了解什么是REST,R ...

  4. openvswitch2.11.0修改源码后重新编译

    一:推文 https://www.jianshu.com/p/923f49c290f5(可以删除运行当中的DataPath内核) https://github.com/ebiken/doc-netwo ...

  5. VSCode安装MathJax插件

    曾经我一直照网上的教程安装了半天都没有安装好,直到我找到了一个叫"Markdown+Math"的插件,安装好之后就可以用了.

  6. Centos7中rc.local设置springboot项目开机自启动

    在Centos7下,rc.local文件,开机默认是不执行的 1.进入rc.local中 路径如下图

  7. snapde的批量文件数据过滤保存功能

    一.snapde基本介绍 Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 二.snapde批量数据筛选功能 如果想要对很多文件筛选出来 ...

  8. oracle登录信息对应

    登录数据库填写的是,配置文件中自己定义的值 2. 查询非纯数字值的字段内容 select trim(translate(RTRIM(LTRIM(ITEM_NUMBER)), '#0123456789' ...

  9. (转)Intellij Idea工具栏添加打开选中文件的资源管理器位置

    背景:在idea的view>toolbar上面添加工具按钮,能够简化操作,现在添加打开资源管理按钮,后续功能待研究 Intellij Idea工具栏添加打开选中文件的资源管理器位置 工具栏-右击 ...

  10. redis相关文章

    redis主从复制相关文章    <redis如何实现主从数据的同步>      <一篇文章让你明白Redis主从同步>      <redis-sentinel的理解实 ...