基于Electron与HTML5实现特效动画的方法技术

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

The method of special effect animation based on electron and HTML5

【技术实现步骤摘要】
基于Electron与HTML5实现特效动画的方法
本专利技术涉及特效动画处理
，特别是涉及基于Electron与HTML5实现特效动画的方法。
技术介绍
近年来Nodejs的发展速度相对较快，基于Nodejs的开发框架也如雨后春笋般遍地开花，其中，Electron就是基于Nodejs之上的开发框架。为了减少本地程序界面开发难度，加快开发速度，使用Electron和Html5开发的本地应用程序不仅可以开发出相对较为绚丽的界面，而且还可以使用较为丰富的基于Web的前端框架，不仅加快了开发速度，还可以使用Javascript同时作为前后端开发的脚本语言，减少学习成本，但是Electron中渲染的内容还是以HTML为主，虽然HTML5加强了很多的特性，但是对于特效动画方面没有很好的解决方案。在CSS中可以使用mask属性设置某个对象的遮罩，但是此时必须设置对应遮罩的图片，由于所使用的图片是不可以被改变的，因此无法实现动画效果。在可缩放矢量图形SVG(ScalableVectorGraphics)中也可以使用mask特效，但是必须遮罩的对本文档来自技高网...

【技术保护点】
1.基于Electron与HTML5实现特效动画的方法，其特征在于，包括以下步骤：/n利用Electron将组件对应区域截成图片，在所述图片上标记5个以上的标记点；/n结合所述标记点将所述图片绘制在Canvas画布中，为所述Canvas画布添加不同状态的遮罩层；/n结合所述Canvas画布和所述遮罩层，利用动画机制绘制不同状态的遮罩效果；/n利用动画的事件操作组件实现所述组件的特效动画，所述动画执行完毕后释放资源。/n

【技术特征摘要】
1.基于Electron与HTML5实现特效动画的方法，其特征在于，包括以下步骤：
利用Electron将组件对应区域截成图片，在所述图片上标记5个以上的标记点；
结合所述标记点将所述图片绘制在Canvas画布中，为所述Canvas画布添加不同状态的遮罩层；
结合所述Canvas画布和所述遮罩层，利用动画机制绘制不同状态的遮罩效果；
利用动画的事件操作组件实现所述组件的特效动画，所述动画执行完毕后释放资源。


2.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，结合所述标记点将所述图片绘制在Canvas画布中进一步包括，将所述图片生成Base64编码的图片数据，将所述图片数据赋值给图片对象Image，等待所述Image加载完毕后将所述图片绘制到Canvas画布中，备份所述Canvas画布中的内容。


3.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，为所述Canvas画布添加不同状态的遮罩层进一步包括，将canvase.globalCompositeOperation设置为source-over，将所述Canvas画布设置为所述组件的大小，添加所述Canvas画布到所述组件对应的区域，隐藏所述组件的内容。


4.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，利用动画机制绘制不同状态的遮罩效果进一步包括，在动画运行过程中，根据动画执行频率，不间断地调用...

【专利技术属性】
技术研发人员：郑楷洪，肖勇，钱斌，赵云，周密，
申请(专利权)人：南方电网科学研究院有限责任公司，中国南方电网有限责任公司，
类型：发明
国别省市：广东;44