CN111124374B - 基于Electron与HTML5实现特效动画的方法 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及特效动画处理技术领域，特别是涉及基于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画布到所述组件对应的区域，隐藏所述组件的内容。

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

可选的，利用动画机制绘制不同状态的遮罩效果进一步包括，在每次绘制前利用所备份的Canvas画布中的内容初始化Canvas画布。

可选的，所述标记点是通过Electron随机产生的，其中，所述标记点标记的是其在所述图片上的位置。

可选的，利用Electron将当前组件区域截成图片进一步包括，只有单个组件需要实现特效动画时，根据所述组件的位置、所述组件的大小及所述标记点设定截图区域。

可选的，所述截图区域与所述组件区域大小相同。

可选的，在动画开始时，利用所述标记点判断所述图片效果与所述组件的运行效果是否一致，若不一致对所述图片进行提示。

可选的，所述动画执行完毕后释放资源进一步包括，释放所使用的资源空间，将所述Canvas画布从所述组件对应的区域移除，显示所隐藏的组件内容。

本发明提供的基于Electron与HTML5的实现特效动画的方法，动画开始的时候，使用Electron将组件对应区域截成一张图片，并在每张截成后的图片上标记至少5个标记点，将图片绘制在Canvas画布中并添加遮罩层，通过不同的特效效果绘制不同的遮罩层，并且根据动画的运行状态来不停的绘制效果动画来完成特效动画，动画执行完毕后移除特效效果，释放资源。本发明提供的方法相对于现有技术中的其他实现方式，可以实现所有组件都可以展示特效动画，并且执行性能和开发效率都得到了一定的提升。

附图说明

图1为本发明基于Electron与HTML5的实现特效动画的方法的流程图；

图2为本发明基于Electron与HTML5的实现特效动画的方法的实施例运行到30％时的遮罩效果图。

具体实施方式

为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的首选实施例。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本发明的公开内容更加透彻全面。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。

如图1所示，本实施例提供的基于Electron与HTML5的实现特效动画的方法，通过动画开始的时候，将需要执行特效动画的组件通过截图的方式生成一张与组件大小相同的图片，再使用HTML5中的画布将截下来的图片展示，再添加遮罩层，通过不同的特效效果绘制不同的遮罩层，并且根据动画的运行状态来不停的绘制效果动画来完成特效动画。

本发明实施例具体包含以下步骤：

步骤S1：使用Electron将组件对应区域截成一张图片，并在每张截成后的图片上标记至少5个标记点；

步骤S2：结合每张截成后的图片上的标记点将图片绘制在Canvas画布中，并结合每张截成后的图片上不同的标记点添加不同状态的遮罩层；

步骤S3：结合Canvas画布和不同状态的遮罩层，通过动画机制来绘制不同状态下的遮罩效果；

步骤S4：根据各自实际情况并结合动画的开始、完成等事件操作组件实际展示状态来共同实现组件的特效动画，动画执行完毕后移除特效效果，释放资源。

在本实施例中，更进一步的，步骤S1中，使用Electron将组件对应区域截成一张图片，目的是动态生成图片效果相对于之前准备好的图片效果虽然会占用一定的资源，但是动画的开始时间并不是一定的，可能是通过用户点击鼠标、键盘触发或通过后台代码自动触发，触发动画时组件的状态不一定。如果中途组件被移动、缩放、旋转、修改过样式等会导致图片效果与实际运行效果不一致，因此，动态生成是必要的，即使组件上方被其他组件遮住，截图后的效果再叠加到对应区域时也会无缝实现拼接，看不出任何其他不良效果。

在通过Electron截图的时候需要注意，只有单个组件需要实现特效动画，只需当前组件区域大小的图，截图时需要根据组件位置、大小信息及在每张截成后的图片上标记至少5个标记点设定截屏截图区域，不需要大于或小于组件区域的图片，这样不仅会导致填充图片内容变形还会因为使用大图导致加载和截图时的性能降低。

在本实施例中，更进一步的，步骤S2中，结合每张截成后的图片上的标记点将图片绘制在Canvas画布中，并结合每张截成后的图片上不同的标记点添加不同状态的遮罩层，将截好的图片生成Base64编码的图片数据，将Base64数据对象赋值给图片对象Image，等待Image加载完毕后将图片内容绘制到Canvas中。

由于所有操作都是在本地，并且没有网络资源的下载，所有速度会很快，唯一占用资源的地方就是组件的大小，组件越大会导致生成图片的时间越久，然后将当前未操作的Canvas画布中的内容备份一份，以提供给绘制遮罩动画的过程中使用。

为画布添加遮罩，即将canvase.globalCompositeOperation设置为source-over，即，将后面绘制的内容与原来的内容做与操作，相交的部位显示，不相交的部位不显示内容，最后将配置好的画布对象设置为原来组件的大小，并添加到组件对应的区域，并将原来组件中的内容全部隐藏。隐藏组件中的内容目的有三个，其一是防止动画执行过程中组件被改变，其二是隐藏不必要的渲染内容能降低整个场景渲染的性能消耗，其三是隐藏相同的内容能防止出现运行中的效果不一致、重影等影响最终呈现效果的问题。

在本实施例中，更进一步的，步骤S3中，如图2所示，在动画开始前，之前两步的内容都会依次完成，到了这一步就是在动画运行过程中，根据动画执行频率，基本在每秒30帧左右，来不间断的调用遮罩层绘制方法，并且会传递动画执行的进度。

以百叶窗效果为例：为了实现从右到左打开百叶窗效果，从可见到不可见效果，按每个叶片宽度100为例，首先计算当前组件有多少个叶片；然后，通过动画传递过来的进度，这里是百分比，即动画运行到当前帧的状态绘制每一叶片的矩形区域，比如：组件大小为1000*1000，每个叶片为100，那么就得绘制10个叶片，因为是从右到左，叶片的宽度会随时间的推移而变小，直到最后为0。

在每次绘制前都需要重新按初始保存的画布内容来初始化画布，因为每次绘制都是集合与操作，每次绘制都需要使用原先的图片与当前遮罩内容做与操作，之前保存初始状态也是为了这个目的，每个矩形的宽高一致，因为百叶窗的每片叶子都是一样大的，就是位置不同，平铺这10片叶片，只是将X轴移动，而Y轴不变，X轴依次是0、100、200…900这10个数，每次迭代时X轴坐标不变，这是由最终效果决定的。

为方便解说使用从右向左进行举例，如果以从左向右为例，则每次不仅宽度会改变，而且X轴的位置也会变，在动画运行到30％的时候，每个叶片的宽度为100*(1-30％)＝70，在70％时为100*(1-70％)＝30，就这样不停的绘制来形成这个百叶窗特效，其它特效方法是一样的，就是绘制遮罩的图形不一样，也就是算法不一样。

在本实施例中，更进一步的，步骤S4中，根据各自实际情况并结合动画的开始、完成等事件操作组件实际展示状态来共同实现组件的特效动画。当动画执行完毕后得释放掉其使用的资源空间并且将画布从组件对应的节点中移除掉，还要把之前隐藏的组件内容显示出来，在本实施例中由于百叶窗效果将组件看起来运行到动画结束后应该隐藏的效果，但是显示原来的组件内容后，并没有隐藏内容，可以在动画结束事件中将内容再隐藏。因为每个特效动画的结果不一致，因此，必须统一的将原来内容显示。。

综上所述，在本实施例中，本实施例提供的基于Electron与HTML5的特效动画在可视化中的应用方法，使用Electron将组件对应区域截成一张图片，并在每张截成后的图片上标记至少5个标记点，每张截成后的图片上通过Electron随机产生的标记点可以判断在动画开始时组件是否被移动、缩放、旋转、修改过样式等会导致图片效果与实际运行效果不一致的情况，当出现上述情况时，标记点会自动判断出，并将上述图片单独发出进行提示。

本发明实施例使用Electron将组件对应区域截成一张图片，将图片绘制在Canvas画布中并添加遮罩层，通过动画机制来绘制不同状态下的遮罩效果，动画执行完毕后移除特效效果，释放资源，对于其它实现方式可以保证所有组件都可以展示特效动画，并且执行性能和开发效率都得到了一定的提升。

以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (7)

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画布从所述组件对应的区域移除，显示所隐藏的组件内容。