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

权利要求书

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

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

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

为所述Canvas画布添加不同状态的遮罩层进一步包括：

将canvase. globalCompositeOperation设置为source-over，将所述Canvas画布设置为所述组件的大小，添加所述Canvas画布到所述组件对应的区域，隐藏所述组件的内容；

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

利用动画机制绘制不同状态的遮罩效果进一步包括：

在动画运行过程中，根据动画执行频率，不间断地绘制遮罩层，在每次绘制前都重新利用所述图片来初始化所述Canvas画布，每次绘制都使用所述图片与当前遮罩层做与操作，相交的部位显示，不相交的部位不显示，传递动画执行的进度，利用动画机制绘制不同状态下的遮罩效果；

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

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

3.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，所述标记点是通过Electron随机产生的，其中，所述标记点标记的是其在所述图片上的位置。

4.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，利用Electron将当前组件区域截成图片进一步包括，只有单个组件需要实现特效动画时，根据所述组件的位置、所述组件的大小及所述标记点设定截图区域。

5.如权利要求4所述的基于Electron与HTML5实现特效动画的方法，其特征在于，所述截图区域与所述组件区域大小相同。

6.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，在动画开始时，利用所述标记点判断所述图片效果与所述组件的运行效果是否一致，若不一致对所述图片进行提示。

7.如权利要求1所述的基于Electron与HTML5实现特效动画的方法，其特征在于，所述动画执行完毕后释放资源进一步包括，释放所使用的资源空间，将所述Canvas画布从所述组件对应的区域移除，显示所隐藏的组件内容。