[发明专利]基于Electron与HTML5实现特效动画的方法

说明书

本发明公开了一种基于Electron与HTML5实现特效动画的方法，包括以下步骤：利用Electron将组件对应区域截成一张图片，并在每张截成后的图片上标记至少5个标记点；结合每张截成后的图片上的标记点将图片绘制在Canvas画布中，添加不同状态的遮罩层；结合Canvas画布和不同状态的遮罩层，通过动画机制来绘制不同状态下的遮罩效果；根据各自实际情况并结合动画的开始、完成等事件操作组件实际展示状态来共同实现组件的特效动，动画执行完毕后移除特效效果，释放资源。本发明相对于现有技术可以实现所有组件都可以展示特效动画，同时执行性能和开发效率都得到了一定的提升。

技术领域

本发明涉及特效动画处理技术领域，特别是涉及基于Electron与HTML5实现特效动画的方法。

背景技术

近年来Nodejs的发展速度相对较快，基于Nodejs的开发框架也如雨后春笋般遍地开花，其中，Electron就是基于Nodejs之上的开发框架。为了减少本地程序界面开发难度，加快开发速度，使用Electron和Html5开发的本地应用程序不仅可以开发出相对较为绚丽的界面，而且还可以使用较为丰富的基于Web的前端框架，不仅加快了开发速度，还可以使用Javascript同时作为前后端开发的脚本语言，减少学习成本，但是Electron中渲染的内容还是以HTML为主，虽然HTML5加强了很多的特性，但是对于特效动画方面没有很好的解决方案。

在CSS中可以使用mask属性设置某个对象的遮罩，但是此时必须设置对应遮罩的图片，由于所使用的图片是不可以被改变的，因此无法实现动画效果。在可缩放矢量图形SVG(Scalable Vector Graphics)中也可以使用mask特效，但是必须遮罩的对象也是SVG，由于SVG中的节点较多，会导致加载过多节点影响渲染性能，而且在SVG中图片和Canvas画布对象的遮罩效果是无效的，也有把图片切成一段一段的，再进行拼接起实现特效动画的效果，比如百叶窗效果，不仅增加了不必要的工作量和计算量，而且只能适用于图片，其它组件无法使用。

发明内容

本发明提供的基于Electron与HTML5实现特效动画的方法，解决了在HTML中无法实现特效动画的问题，本发明提供的方法能实现所有组件都可以展示特效，同时执行性能和开发效率都得到了一定的提升。

本发明的目的，可以通过如下技术方案实现：

基于Electron与HTML5实现特效动画的方法，包括以下步骤：

利用Electron将组件对应区域截成图片，在所述图片上标记5个以上的标记点；

结合所述标记点将所述图片绘制在Canvas画布中，为所述Canvas画布添加不同状态的遮罩层；

结合所述Canvas画布和所述遮罩层，利用动画机制绘制不同状态的遮罩效果；

利用动画的事件操作组件实现所述组件的特效动画，所述动画执行完毕后释放资源。

可选的，结合所述标记点将所述图片绘制在Canvas画布中进一步包括，将所述图片生成Base64编码的图片数据，将所述图片数据赋值给图片对象Image，等待所述Image加载完毕后将所述图片绘制到Canvas画布中，备份所述Canvas画布中的内容。

可选的，为所述Canvas画布添加不同状态的遮罩层进一步包括，将canvase.globalCompositeOperation设置为source-over，将所述Canvas画布设置为所述组件的大小，添加所述Canvas画布到所述组件对应的区域，隐藏所述组件的内容。

可选的，利用动画机制绘制不同状态的遮罩效果进一步包括，在动画运行过程中，根据动画执行频率，不间断地调用遮罩层绘制方法，传递动画执行的进度，利用动画机制绘制不同状态下的遮罩效果。