CN113947650B - 动画处理方法、装置、电子设备及介质 - Google Patents

Abstract

本申请实施例提供动画处理方法、装置、电子设备及介质。该方法包括：响应于动画处理请求，将舞台容器插入canvas画布中；将目标元素插入舞台容器；根据动画处理请求中携带的目标元素的参数，调用元素动画库提供的调用接口；向调用接口输入参数，在舞台容器中生成具有目标动画的目标元素，以使目标元素实现预设动画效果。通过上述方案，预先建立元素动画库并对外提供可调用接口。进行动画处理时，基于元素动画库将舞台容器插入到画布中，进而在舞台容器中插入目标元素。上述方案通过舞台容器实现对目标元素的动画处理，不仅能够简化基于画布进行动画处理的流程，还允许对画布当中各目标元素分别处理，能够有效提高动画处理效率。

Description

动画处理方法、装置、电子设备及介质

技术领域

本申请涉及计算机技术领域，尤其涉及动画处理方法、装置、电子设备及介质。

背景技术

Canvas作为HTML5新增标签，可以实现基于HTML5进行图像绘制以及动画展示。比如，在HTML5页面中展示具有动画效果的图像、文字等等。

但是，现有技术中，canvas作为HTML5的原生标签，在进行图像绘制以及动画效果实现的时候，需要基于canvas的基础属性、方法实现。若想要实现的动画效果比较复杂，则需要工作人员根据坐标信息、路径信息等在画布中进行逐一绘制。此外，由于canvas在进行图像动画绘制的时候，基于画布完成的，也就是在进行事件响应的时候也只能以画布为响应单元执行相应操作，画布中的单个目标动画不支持事件响应；在进行多帧图像动画绘制的时候，需要基于整个画布进行绘制，增加了绘制的工作量。

发明内容

本申请实施例提供动画处理方法、装置、电子设备及介质，用以提升基于canvas绘图的绘图效率。

第一方面，本申请实施例提供一种动画处理方法，该方法包括：

响应于动画处理请求，将舞台容器插入canvas画布中；

将所述动画处理请求指定的目标元素插入所述舞台容器；

根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口；

向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

第二方面，本申请实施例提供一种动画处理装置，所述装置包括：

舞台生成模块，用于响应于动画处理请求，将舞台容器插入canvas画布中；

元素处理模块，用于将所述动画处理请求指定的目标元素插入所述舞台容器；

元素动画库，用于基于所述动画处理请求中携带的所述目标元素的参数，调用所述元素动画库中的调用接口；

动画生成模块，用于向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

第三方面，本申请实施例提供一种电子设备，包括：存储器、处理器；其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行第一方面所述方法。

第四方面，本申请实施例提供一种计算机可读介质，其上存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现第二方面所述方法。

在本申请中，响应于动画处理请求，将舞台容器插入canvas画布中；将所述动画处理请求指定的目标元素插入所述舞台容器；根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口；向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。通过上述方案，通过预先建立元素动画库并对外提供可调用接口，在进行动画处理的时候，基于元素动画库将舞台容器插入到画布中，进而在舞台容器中插入目标元素。可以通过舞台容器实现对目标元素的动画处理，不仅能够简化基于画布进行动画处理的流程，还提供了对画布当中各目标元素分别处理的便利条件，能够有效提高动画处理效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种动画处理方法的流程示意图；

图2为本申请实施例提供的基于容器实现动画处理方法的流程示意图；

图3为本申请实施例提供的一种对目标动画进行修改方法的流程示意图；

图4为本申请实施例举例说明的基于容器实现目标动画处理过程的示意图；

图5为本申请实施例提供的一种动画处理装置的结构示意图。

具体实施方式

随着HTML5相关技术的发展，为了满足用户多样化需求，会提供很多供用户选择的功能标签。比如，Canvas标签，该标签主要是可以实现基于HTML5进行图像绘制以及动画展示。HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其中的每一像素。canva有多种绘制路径、矩形、圆形、字符以及添加图像的方法。基于canvas中绘制或者添加的很多各种图像、文本，但是这些图像或文本的任何修改操作都无法单独实现的，比如，需要对canvas中多个图像中某一个的尺寸进行修改，则需要整个canvas整体更新。因此，本申请技术方案提出一种能够减轻基于canvas实现动画处理工作量的方案。

现在将参照若干示例性实施例来论述本申请的内容。应当理解，论述了这些实施例仅是为了使得本领域普通技术人员能够更好地理解且因此实现本申请的内容，而不是暗示对本申请的范围的任何限制。

如本文中所使用的，术语“包括”及其变体要被解读为意味着“包括但不限于”的开放式术语。术语“基于”要被解读为“至少部分地基于”。术语“一个实施例”和“一种实施例”要被解读为“至少一个实施例”。术语“另一个实施例”要被解读为“至少一个其他实施例”。

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

需要说明的是，本申请技术方案中，在进行动画处理前，需要生成包含有各种基类(包括基础属性和方法)，比如，容器(Container)、图片(Image)、文本(Text)等元素的基类。在元素动画库中包含的各种元素是基于原生canvas封装得到的，对外暴露出各种供用户调用的API。用户在使用的时候，可以直接调用元素动画库提供的各种接口(API)，而不再需要进行声明、设置等繁琐操作。通过元素动画库可以有效提高基于canvas实现动画处理的效率。

图1为本申请实施例提供的一种动画处理方法的流程示意图，如图1所示，方法包括：

101：响应于动画处理请求，将舞台容器插入canvas画布中。

102：将所述动画处理请求指定的目标元素插入所述舞台容器。

103：根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口。

104：向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

具体地，前述目标元素可以为预设元素动画库提供的已有元素，也可以为用户自定义的元素，目标元素可以为多种类型，例如：文字、图片以及容器类元素。此外，步骤102中所说的目标元素也可以是由用户直接绘制的。若是从第三方获得的或者预选绘制的目标元素，则可以采用插入、导入等操作方式将目标元素放入到舞台容器当中。

针对于不同类型的目标元素用户可设定不同的参数，可选地，文本元素对应的参数可包括：字体、字体颜色、字号，是否为粗体、是否为斜体、坐标、居中方式、是否有阴影、等参数，也可以为针对该文本元素实现打字机效果的参数等等。其中，文本元素中可包括一个或多个文字。相应地，图片元素对应的参数信息可包括：宽高信息、中心坐标、图片左上角的坐标等参数，以及基于用户创建的图片实现动画效果的参数等等。进一步地，文本元素、图片元素可以利用元素动画库所提供的API实现多种动画效果，将在下述实施例中进行举例说明。

容器类元素对应的参数可以包括：子集元素(可以为文本元素和/或图片元素)、以及对容器类元素的子集元素进行增删改的操作指令信息。具体地，用户可通过预设元素动画库提供的操作容器类元素子集的子集操作API，对子集进行增删改，在对容器类的子集进行管理时，可对容器里的子集进行排序，还可具体根据用户的插入子集的位置，扩充容器类的子集。

进一步地，前述预设元素动画库可以为包括一个或多个调用接口(API)的元素动画库。用户针对目标元素设置的参数，可具体根据用户通过预设元素动画库中包含的调用接口输入的参数确定。当用户有需要对某个目标元素的动画处理需求的时候，可以发送动画处理请求，在该动画处理请求当中携带有对应目标元素的参数以及接口调用信息。进而，根据接口调用信息确定目标元素的调用接口。

进一步地，前述输入调用接口的参数可以包括目标元素对应的坐标信息。需要说明的是，这里所说的舞台容器是插入到canvas画布中的，因此，舞台容器对应的坐标信息是相对于canvas画布确定的绝对坐标信息，舞台容器与canvas画布的相对位置关系的参考点可以根据实际需要进行选择，这里不做具体限定，比如可以选择中心点作为参考点或者左上角点作为参考点。

需要说明的是，为了实现目标元素在舞台容器的展示效果以及使得目标元素能够基于舞台容器实现单独的动画处理任务，在进行舞台容器搭建的时候，需要一些准备工作，比如，命名顶层元素名称、初始化页面、初始化元素创建，加载文字与图片资源、预加载页面等底层设置。其中，本申请中的预设元素动画库对应的命名空间中可定义有元素名称、PC端类事件集、移动终端类事件集等等在预设元素动画库中频繁使用的变量名。具体地，在具体构建canvas的舞台容器时，可包括两种情况，即若检测到用户创建的是div元素，则为该div元素创建canvas并基于前述预设元素动画库中的创建舞台的功能程序为该canvas创建舞台；若用户创建的是canvas，则直接为该canvas创建舞台。在一个canvas当中，可能包含有一个舞台容器，在舞台容器当中又可能包含有至少一个目标元素。

在有需要对目标元素进行动画处理的需求的时候，可以将舞台容器作为实现动画处理的最小单元。换言之，目标元素可具体展示于canvas对应的舞台容器上，该舞台容器为canvas的下级元素，可用于展示多个目标元素，且该多个目标元素与舞台容器关联，当控制舞台容器的缩放或移动时，则舞台容器中的多个目标元素适应性全部缩放或移动。比如，需要对目标元素实现缩放的目标动画或者实现旋转的目标动画，那么可以根据舞台容器的坐标信息以及舞台容器相对于canvas画布之间的坐标关系完实现预设动画效果(将在下述实施例中进行具体举例说明，具体可参考下述实施例这里就不重复赘述了)。而且用户可以通过调用接口实现各种目标动画，能够有效提升工作人员进行动画处理的工作效率。

在本申请一个或者多个实施例中，所述将元素动画库中的舞台容器和目标元素插入canvas画布中，将所述动画处理请求指定的目标元素插入所述舞台容器，包括：获取所述动画处理请求中携带的舞台容器参数和目标元素参数；获取用于对所述舞台容器所在canvas画布进行初始化所需的基类、父级元素、初始化事件和画笔；基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理，以及插入所述目标元素到所述舞台容器中。

当用户有针对目标元素的动画处理需求的时候，如前文所述，可以通过利用元素动画库在canvas画布中直接插入舞台容器，以便后续将目标元素是放入到舞台容器当中的。后续动画效果的都是通过舞台容器来实现的。在进行初始化时，还需要获取初始化所需的基类、目标元素的父级元素、初始化事件和画笔。在实现动画效果的时候，在有的情况下，父级元素是会对子元素产生影响的，因此，初始化是需要确定出当前目标元素有哪个父级元素。这里所说的事件可以是点击事件、拖动事件、移动事件、按下事件等等。这里所说的画笔是为了实现目标元素绘制或修改。进而，基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理，进而将目标元素插入舞台容器当中。

在本申请一个或多个实施例当中，所述根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口，包括：获取所述动画处理请求中携带的针对所述目标元素中任一目标动画的动画帧频参数和用于响应用户触发事件的接口调用信息；通过所述目标元素的调用接口绑定对应的事件类型；基于所述目标元素的调用接口设定所述目标动画的动画帧频参数。

这里所说的目标元素的参数包括针对该元素所设置的动画帧频参数、心跳ticker、尺寸、坐标等等。用户所触发的事件可以是前文所述的点击事件、拖动事件、移动事件、按下事件等等。在实际应用中，用户会直接或间接对目标元素进行动画处理，比如，旋转、缩放等等。为了实现前述动画处理效果，用户可以采用多种操作方式，每种操作方式对应一种事件，比如，用户的点击操作方式对应点击事件、用户的拖动操作方式对应拖动事件、用户的移动操作方式对应移动事件、用户按下操作方式对应按下事件。每种事件都由元素动画库提供对应的调用接口来帮助实现对应功能。因此，根据动画效果需要调用对应的可调用接口API的时候，为其绑定所需事件类型。此外，还可以根据动画效果的需要通过调用接口板顶对应的动画帧频参数等。由此可见，用户为了实现以下动画效果，可以直接通过元素动画库调用对应的接口来实现对应功能，而不再需要通过声明、设置等一系列复制流程，能够有效提升动画处理的工作效率。

在本申请一个或多个实施例当中，所述事件类型包括：点击事件、移动事件、拖动事件、按下事件中至少一种。所述通过所述目标元素的调用接口绑定对应的事件类型，包括：确定所述目标元素对应的事件类型，以及所述动画处理请求中用于表征所述目标元素对应舞台容器在所述canvas画布中的坐标参数；确定所述坐标参数与所述事件类型之间的关联关系；根据所述关联关系，对所述目标元素的调用接口绑定所述事件类型。

如前文所述可知，在通过canvas直接进行绘制或者直接向其中添加图像的时候，针对canvas中任何图像的修改操作都需要canvas整体更新(也就是canvas中未修改的图像或文本也要一起进行重新生成)。利用本申请技术方案，当需要对目标元素进行动画处理(比如，放大或者移动)，可以借助舞台容器实现。具体来说，当需要对目标元素进行缩放的时候，实际上是对舞台容器进行缩放，进而实现目标元素缩放效果。

由于上述各类型事件绑定在canvas上，所以对于每一个舞台容器，是需要计算出其相对于canvas画布的绝对位置信息。在实际应用中，舞台容器(记为A)是可能有自己的父级的，所以它的位置信息会受到父级“舞台容器”的影响，所以分两种情况去讨论：父级不存在缩放和旋转，父级存在缩放或旋转。在第二种情况下，父级是可以既有缩放又有旋转的。

父级不存在缩放和旋转。这种情况比较简单，只要从最初的父亲开始，记为A0，记录A0的左上角坐标信息[A0x,A0y]，以及宽高信息[A0w,A0h]。这两个信息都是相对于canvas画布自身的，是一个绝对位置信息。然后对于A0的孩子A1，根据其相对于A0的坐标和宽高信息，计算出其相对于canvas画布的绝对坐标[A1x,A1y]和位置(宽高)信息[A1w,A1h]。以此类推，就可以算出父级A最终相对于canvas画布的坐标和宽高信息。

父级存在缩放或旋转，可以分开来看。旋转只会影响到目标元素的坐标信息，而不会影响宽高信息，缩放则都会产生影响。

先看旋转，平面上任意一点绕着另外一点旋转一定角度比较简单，以旋转点为圆心，两点为半径，建立一个圆形坐标即可计算。所以只要先确定“舞台容器”的旋转中心，然后分别计算四个顶点绕这个旋转中心旋转一定角度后得到的位置信息即可。然后对于父级的旋转对目标元素的影响，可以这样来看。因为旋转首先得确定中心点，父级旋转多少角度，对应的目标元素也会旋转多少角度，所以先算出目标元素的中心点在父级旋转后的位置信息，然后通过公式再计算目标元素四个坐标点绕中心点的旋转，这里的旋转角度就是父级旋转角度和目标元素旋转角度的累加，这样就能计算出父级的旋转到目标元素旋转后的最终坐标信息。

再来看缩放，对于缩放来说，也是先得确定缩放中心。对于网页元素来说，缩放所做的事情，就是各个点到缩放中心点的距离，缩放了多少。比如，放大2倍，缩小2倍等等。这里也先计算出一个公式，用于计算平面上一个点绕缩放中心缩放[x,y]后的坐标信息。因为x轴和y轴的缩放可能不一样，所以给出了一个数组。跟旋转一样，父级的缩放多少，当前元素也会缩放多少，所以会记录一个累计缩放值，然后先算出目标元素的旋转中心点信息，然后计算出当前元素的宽高，经累计缩放后宽高值，然后通过公式，计算出各个顶点相对于该缩放中心缩放后的最终坐标信息。

对于缩放和旋转的情况就不再讨论，因为不管是先缩放再旋转，还是先旋转再缩放来计算，结果都是一样。

在本申请一个或者多个实施例中，如图2为本申请实施例提供的基于容器实现动画处理方法的流程示意图。从图2中可以看到具体包括如下步骤：

201：确定用户触发操作对应的事件类型和触发坐标值。

202：从所述舞台容器中确定绑定有所述事件类型的至少一个目标元素。

203：在所述目标元素按照所述动画帧频参数进行刷新时，根据所述舞台容器中所述至少一个目标元素分别对应的坐标参数与所述触发坐标值进行对比的对比结果，确定所述触发操作对应的更新动画并通过所述舞台容器展示所述事件类型对应的动画效果。

在展示目标元素后，还可进一步根据用户触发的事件作出响应，也就是说，本申请中，还可通过相关API，使得用户对元素进行事件绑定，以实现页面交互。

如前文所述事件类型可以包括很多种，例如：点击事件、移动事件、拖动事件按下事件、悬浮事件等等。本申请方案中用户通过相关API对目标元素已绑定的事件进行解绑，具体地，绑定事件与解绑事件可分别通过预设元素动画库中的on和off方法。

具体地，针对于用户触发的事件对应的端(PC端或移动终端)的类别不同，本申请还提供了统一的事件判别模块，无需用户自身输入事件的端的类别，进而在检测到用户触发的事件时，可根据该事件判别模块，判断事件是否是PC端事件或者是移动端事件的变量，根据对应的响应模块进行响应。

为了便于理解，下面将以PC端通过鼠标触发事件为例进行说明，如何基于canvas中舞台容器实现对目标元素的动画处理。

如前文缩放相关实施例所述，在拿到了容器相对于画布(若有父级节点还需要获取父级节点中有关点的位置)各个点的位置信息后，可以基于公式去计算鼠标位置信息，是否在这几个点围成的区域范围内了。以舞台容器为凸多边形为例，凸多边形就是把一个多边形任意一边边向两方无限延长成为一条直线，如果多多边形的其他各边均在此直线的同旁，那么这个多边形就叫做凸多边形。拿四边形ABCD来说，从某一方向，顺时针或者逆时针。如果点E在这个多边形各边组成的向量的同一边，则点E就在这个多边形内。顺时针来说，如果E在各个向量的左边，则E在四边形ABCD内部。确定E相对某个向量的位置关系方法如下，对于平面上的向量AB，AE，对他们进行叉乘即AB乘以AC，如果值小于0，则AB在AC的左边，否则，AB在AC的右边。这样绕着ABCD四边形，计算看看E点是否都在各边所构成的向量的同一边，顺时针为左边，逆时针为右边，如果满足都在同一边，则说明E在ABCD内部。

若当前canvas画布当中只有一个舞台容器，则当判断鼠标的触发坐标值位于ABCD(舞台容器)内部之后，可以明确当前触发事件就是针对该舞台容器中的目标元素的。进而使得目标元素实现对应的目标动画。

在一些场景中，因为可能有别的舞台容器和这个包含有目标元素的舞台容器产生位置重叠。仅通过触发事件对应的触发坐标值是否在这个舞台容器内部是不能直接判断出该触发事件就是针对该目标元素的。因为，在向舞台容器中添加或绘制元素的时候，会对所有的元素按照绘制顺序进行排序的一个数组，因为按照绘制顺序，最上层的东西也就是能最先看到的容器，在数组的最后面。这样，在这个数组里面找到用户点击事件对应的元素。然后从后开始遍历，如果后面也有元素所在容器满足触发坐标值在它的容器范围内，则说明用户实际想要点击的目标元素被遮挡了，那么这个事件就不会响应。如果没有，则说明我们确实是点击在了我们的目标上面，则响应对应的点击事件。

如图3为本申请实施例提供的一种对目标动画进行修改方法的流程示意图。从图3中可以看到具体包括如下步骤：

301：若接收到用户发出的目标动画修改请求，确定所述目标动画中待修改的原始参数。

302：基于所述舞台容器，将所述目标动画对应的原始参数替换为所述目标动画修改请求中携带的新参数。

在实际应用中，canvas画布中通常会有多个目标元素同时进行展示，但是在一些调整或者修改操作当中，可能仅仅是针对多个目标元素当中的某一个进行相关操作。因此，在接收到用户通过客户端发出的针对目标元素的某个目标动画的修改请求，首选需要确定一下，用户想要修改的目标动画中待修改的原始参数。进而，以舞台容器为动画处理单元，通过调用接口实现将原始参数替换为新参数，从而完成对目标动画的修改。由于本申请中可以为每个动画设置唯一的ticker心跳类，因此，当对目标动画的修改完成后，根据心跳周期完成动画刷新。当然，也可以是针对目标元素的添加新动画，处理方法与修改动画类似，这里就不再重复赘述，但是需要强调的是，修改动画也可以基于舞台容器逐个完成，而不需要对canvas整体刷新。

本申请中所述的目标动画比如可以是，针对于文本元素可高效实现打字机效果，针对于图片元素可高效实现关键帧动画效果。

在本申请的一些可选的实施例中，获取到的是用户针对目标元素调用接口输入参数以实现目标动画的关键帧动画效果，则输入参数中可包括有：动画的Ticker心跳信息,该心跳信息可以改变动画的循环频率，还可包括用来设置动画的开始、循环、结束等的方法，还可进一步包括监听功能信息，这些参数还可用来管理动画中的画笔等实体。另外，输入参数中可包括以下至少之一：图片的展示顺序、各图片对应的坐标、旋转角度等等。

相应地，若获取到的是用户针对目标元素输入参数为用户针对文本元素设置的打字机动画效果，则输入参数具体可包括有：打字机效果对应的打字速度(例如动画帧率为60/s)、文字之间的间隔等等。例如，定义一个map，并设置动画帧率为60，以及通过调用接口实现typerTo方法、typerPause方法以及typerRemove方法。

另外，本申请的方案还可以基于用户通过调用接口API输入的参数实现遮蔽层的动画效果。实现遮蔽层动画效果步骤包括，对operation进行的初始化设置，并对需要再处理的属性进行属性拦截，对canvas中的原生方法(比如，drawRect方法和drawArc方法)进行重新封装，最后返回并对外暴露Mask类，以便可以通过API调用实现遮蔽动画效果。

为了便于理解，下面对目标元素基于容器实现目标动画处理过程进行举例说明。

如图4为本申请实施例举例说明的基于容器实现目标动画处理过程的示意图。在canvas画布中展示有三个元素，即元素A、元素B以及元素C，其中，元素A未绑定任何事件，元素B绑定有拖拽事件、元素C绑定有点击事件，以PC端为例，目标元素展示于canvas画布后，用户可通过鼠标点击canvas画布(对应的事件为点击事件)，鼠标点击的位置为触发坐标值，假设该触发坐标值为C1。

进一步地，则遍历展示于canvas画布的全部展示元素：元素A、元素C，以及元素B，在元素A、元素C，以及元素B中，确定出绑定有事件，且绑定的事件为点击事件的待确认元素C；若待确认元素C在所述canvas画布中所占的坐标区域范围包括所述触发坐标值，且待确认元素C在所述触发坐标值对应的位置处未被其他元素覆盖，则控制待确认元素C对点击操作进行响应。

具体地，针对于如何确定待确认元素在canvas画布中所占的坐标区域范围，本申请还提供了以下方法：

具体地，若待确认元素为矩形，在绘制待确认元素(可以为步骤101中的目标元素)时，可根据用户设置的展示待确认元素时，相对于canvas画布待确认元素的左上角的基准坐标信息，以及用户设置的待确认元素的宽高绘制待确认元素。进而，可根据待确认元素的基准坐标信息、待确认元素的宽高确定其所在舞台容器在canvas画布所占的坐标区域范围，进一步根据前述触发坐标值，与舞台容器所占的坐标区域范围，判断触发坐标值是否属于舞台容器所占的坐标区域范围内，若是，则表示舞台容器在所述canvas画布中所占的坐标区域范围，包括所述触发坐标值。

针对于传统canvas，事件仅可绑定于canvas，本申请提出了元素的概念，通过将canvas画布的坐标区域与舞台容器元素绑定，从而达到舞台容器中目标元素与事件绑定的效果。

进一步地，在获取到用户针对目标元素设置的参数后，需基于canvas的刷新频率展示具有所述参数对应的属性的所述目标元素。用户可对canvas的刷新频率进行自定义，其设置的canvas的刷新频率，可以与浏览器的原刷新频率不同。基于此，上述方法还包括：获取用户设置的针对所述canvas的展示内容的动画帧频对应的刷新频率；获取所述canvas对应的浏览器的原始刷新频率；在检测到所述原始刷新频率对应的刷新请求时，确定所述刷新请求对应的刷新时刻距离前一次所述canvas刷新的时间间隔是否达到所述目标刷新频率对应的刷新周期，若是，基于所述刷新请求对所述canvas进行刷新，若否，不对所述刷新请求进行响应。

具体地，用户可通过前述预设元素动画库提供的调用接口API，设定前述动画帧频参数(也就是目标刷新频率)，若该刷目标刷新频率为10/s，原始刷新频率为20/s，假设计时为0时canvas刷新第一次，在0.05秒时，将接收到原始刷新频率对应的刷新请求，但是，根据目标刷新频率，自0秒后，下一刷新时刻为0.1秒，目标刷新频率对应的刷新周期为0.1秒，当接收到0.05秒时原始刷新频率对应的刷新请求时，则不对该刷新请求进行响应，当接收到0.1秒时，原始刷新频率对应的刷新请求时，检测到0.1距离前一次刷新时刻0秒的时间间隔为0.1，则对canvas进行刷新。

本申请的方案，可适用于游戏开发的场景，省去之前使用canvas需要声明的繁琐步骤，而是直接在页面搭建舞台，且支持预加载、打字机、遮蔽层动画、以及keyframes等的功能，最后暴露出各种API，让开发人员可以轻松实现各类canvas动画需求；为前端人员提供了一种更加便捷的使用canvas动画的途径。具体可基于对原生API的封装，以及元素概念的引入，避免了研发人员在基于canvas绘制图像时，通过大量编写原生API来实现对应的效果，做繁琐的代码编写工作，大大减少了研发人员的工作量，提高了绘制效率。并且，本申请可适用于多种场景，能满足各种复杂业务需求。

基于上实施例可知，相对于现有技术中，进行canvas绘制的时候，需要基于底层基础语言进行路径绘制的复杂过程来说，本申请通过对常规属性、类方法等进行封装，用户通过调用对应的封装后调用接口就能够实现一定的绘制、动画功能，有效提升绘制效率，减轻工作量。

此外，当用户需要为某个目标动画进行多帧绘制的时候，由于目标动画无法响应触发事件，因此，需要分别针对不同帧分别绘制整个canvas的动画；即便是对其中某个目标动画的参数进行修改的情况下，也需要对整个canvas中的动画重新绘制，增加的工作人员的工作量。而本申请中，在canvas中建立舞台容器，当需要对某个目标动画进行修改的时候，可以仅针对目标动画及其参数进行修改，而不需要对canvas中其他无关元素对应的动画进行修改，能够有效提高动画处理效率。

在本申请一个或者多个实施例中，如前文所述，可以为每个动画设定唯一的一个ticker心跳类，换言之，将元素的动画与心跳进行绑定，进而当canvas画布中任一元素有事件响应、动画处理需求的时候，可以根据动画帧频参数实现对应任务。也就是在响应事件的时候，不同于常规的，基于事件进行遍历，而是在基于ticker对动画进行刷新。

图5为本申请实施例提供的一种动画处理装置的结构示意图，该装置可包括：

舞台生成模块51，用于响应于动画处理请求，将舞台容器插入canvas画布中

元素处理模块52，用于将所述动画处理请求指定的目标元素插入所述舞台容器。

元素动画库53，用于基于所述动画处理请求中携带的所述目标元素的参数，调用所述元素动画库中的调用接口。

动画生成模块54，用于向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

可选地，舞台生成模块51，还用于获取所述动画处理请求中携带的舞台容器参数和目标元素参数；获取用于对所述舞台容器所在canvas画布进行初始化所需的基类、父级元素、初始化事件和画笔；基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理，以及插入所述目标元素到所述舞台容器中。

可选地，元素动画库53，用于获取所述动画处理请求中携带的针对所述目标元素中任一目标动画的动画帧频参数和用于响应用户触发事件的接口调用信息；通过所述目标元素的调用接口绑定对应的事件类型；基于所述目标元素的调用接口设定所述目标动画的动画帧频参数。

可选地，所述事件类型包括：点击、移动、拖动、按下中至少一种。动画生成模块54，用于确定所述目标元素对应的事件类型，以及所述动画处理请求中用于表征所述目标元素在所述canvas画布中的坐标参数；确定所述目标元素在所述舞台中的所述坐标参数与所述事件类型之间的关联关系；根据所述关联关系，对所述目标元素的调用接口绑定所述事件类型。

可选地，所述装置还包括：事件响应模块55；确定用户触发操作对应的事件类型和触发坐标值；从所述舞台容器中确定绑定有所述事件类型的至少一个目标元素；在所述目标元素按照所述动画帧频参数进行刷新时，根据所述至少一个目标元素分别对应的坐标参数与所述触发坐标值进行对比的对比结果，确定所述触发操作对应的更新动画并展示所述事件类型对应的动画效果。

本装置实施例中涉及的组成单元的相关实施方式可参见前述内容，此处不再赘述。

本申请还提供了一种电子设备，包括：存储器、处理器；其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行前述的动画处理方法。

本申请还提供了一种系统，包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由所述处理器加载并执行前述的动画处理方法。

本申请还提供了一种计算机可读介质，其上存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现根据前述的动画处理方法。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的各个模块可以是或者也可以不是物理上分开的。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

根据需要，本申请各实施例的系统、方法和装置可以实现为纯粹的软件(例如用Java来编写的软件程序)，也可以根据需要实现为纯粹的硬件(例如专用ASIC芯片或FPGA芯片)，还可以实现为结合了软件和硬件的系统(例如存储有固定代码的固件系统或者带有通用存储器和处理器的系统)。

以上已经描述了本申请的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所公开的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。要求保护的主题的范围仅由所附的权利要求进行限定。

Claims (9)

1.一种动画处理方法，其特征在于，所述方法包括：

响应于动画处理请求，将舞台容器插入canvas画布中；具体包括：获取所述动画处理请求中携带的舞台容器参数和目标元素参数，获取用于对所述舞台容器所在canvas画布进行初始化所需的舞台容器参数包括：基类、父级元素、初始化事件和画笔；基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理；

其中，用于初始化的所述舞台容器参数是根据目标元素在所述舞台容器的展示效果和动画处理任务确定的；

将所述动画处理请求指定的目标元素插入所述舞台容器；

根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口；其中，所述元素动画库中包含有为了实现展示效果和单独的动画处理任务所需的基于原生canvas封装的元素，并以所述调用接口形式对外暴露以便被调用；

向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

2.根据权利要求1所述的方法，其特征在于，所述根据所述动画处理请求中携带的所述目标元素的参数，调用元素动画库提供的调用接口，包括：

获取所述动画处理请求中携带的针对所述目标元素中任一目标动画的动画帧频参数和用于响应用户触发事件的接口调用信息；

通过所述目标元素的调用接口绑定对应的事件类型；

基于所述目标元素的调用接口设定所述目标动画的动画帧频参数。

3.根据权利要求2所述的方法，其特征在于，所述事件类型包括：点击事件、移动事件、拖动事件、按下事件中至少一种；

所述通过所述目标元素的调用接口绑定对应的事件类型，包括：

确定所述目标元素对应的事件类型，以及所述动画处理请求中用于表征所述目标元素对应舞台容器在所述canvas画布中的坐标参数；

确定所述坐标参数与所述事件类型之间的关联关系；

根据所述关联关系，通过所述目标元素的调用接口绑定所述事件类型。

4.根据权利要求3所述的方法，其特征在于，还包括：

确定用户触发操作对应的事件类型和触发坐标值；

从所述舞台容器中确定绑定有所述事件类型的至少一个目标元素；

在所述目标元素按照所述动画帧频参数进行刷新时，根据所述舞台容器中所述至少一个目标元素分别对应的坐标参数与所述触发坐标值进行对比的对比结果，确定所述触发操作对应的更新动画并通过所述舞台容器展示所述事件类型对应的动画效果。

5.根据权利要求3所述的方法，其特征在于，还包括：

若接收到用户发出的目标动画修改请求，确定所述目标动画中待修改的原始参数；

基于所述舞台容器，将所述目标动画对应的原始参数替换为所述目标动画修改请求中携带的新参数。

6.一种动画处理装置，其特征在于，所述装置包括：

舞台生成模块，用于响应于动画处理请求，将舞台容器插入canvas画布中；具体包括：获取所述动画处理请求中携带的舞台容器参数和目标元素参数，获取用于对所述舞台容器所在canvas画布进行初始化所需的舞台容器参数包括：基类、父级元素、初始化事件和画笔；基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理；

其中，用于初始化的所述舞台容器参数是根据目标元素在所述舞台容器的展示效果和动画处理任务确定的；

元素处理模块，用于将所述动画处理请求指定的目标元素插入所述舞台容器；

元素动画库，用于基于所述动画处理请求中携带的所述目标元素的参数，调用所述元素动画库中的调用接口；其中，所述元素动画库中包含有为了实现展示效果和单独的动画处理任务所需的基于原生canvas封装的元素，并以所述调用接口形式对外暴露以便被调用；

动画生成模块，用于向所述调用接口输入所述参数，在所述舞台容器中生成具有目标动画的所述目标元素，以使所述目标元素实现预设动画效果。

7.根据权利要求6所述的装置，其特征在于，所述舞台生成模块，还用于获取所述动画处理请求中携带的舞台容器参数和目标元素参数；

获取用于对所述舞台容器所在canvas画布进行初始化所需的基类、父级元素、初始化事件和画笔；

基于所述基类、父级元素、初始化事件和画笔，在所述canvas画布上对舞台容器进行实例化处理，以及插入所述目标元素到所述舞台容器中。

8.一种电子设备，包括：存储器、处理器；其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1至5中任一项所述方法。

9.一种计算机可读介质，其上存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如权利要求1至5中任一项所述方法。

Images