基于Canvas的动画播放速度调整方法及装置与流程

本申请涉及动画领域，具体而言，涉及一种基于Canvas的动画播放速度调整方法及装置。

背景技术：

目前，在使用HTML5Canvas绘制动画的过程时，会使用动画帧绘制技术，将每一帧按照一定顺序串联起来播放，只要帧播放速度合适，就可以创建一个流畅的动画。在很多场景下，对帧播放速度有不同的要求，需要能够动态、合理地调整动画帧的播放速度，才能制作出合规格的动画效果。相关技术中，通过调整动画帧之间的时间间隔来达到改变帧播放速度的效果。通过调整动画帧之间的播放间隔时间，改变动画在两个动画帧之间停留的时间，目前，时间间隔只能根据开发人员的经验来判断，然而，随着两个动画帧之间时间间隔的扩大，动画播放容易出现卡顿现象。

针对相关技术中当两个动画帧之间时间间隔的扩大时，动画播放容易出现卡顿现象的问题，目前尚未提出有效的解决方案。

技术实现要素：

本申请的主要目的在于提供一种基于Canvas的动画播放速度调整方法及装置，以解决相关技术中当两个动画帧之间时间间隔的扩大时，动画播放容易出现卡顿现象的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种基于Canvas的动画播放速度调整方法。该方法包括：分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；分别根据多个目标变化差值绘制多个目标动画帧；以及顺序播放第一动画帧、多个目标动画帧和第二动画帧。

进一步地，计算目标帧数包括：确定第一动画帧和第二动画帧之间的时间间隔； 确定单位时间间隔需要创建的动画帧的帧数；以及计算目标帧数，其中，目标帧数为时间间隔与单位时间间隔需要创建的动画帧的帧数的乘积。

进一步地，分别根据多个目标变化差值绘制多个目标动画帧包括：分别根据第一动画帧的Canvas画布上每个像素点数据、目标帧数和多个目标变化差值，计算目标帧数组像素点数据，得到多组像素点数据；以及分别根据多组像素点数据绘制多个目标动画帧。

进一步地，分别计算多个目标变化差值包括：分别计算多个像素点差值，其中，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；以及根据多个像素点差值，分别计算多个目标变化差值，其中，目标变化差值是多个像素点差值与目标帧数的比值。

进一步地，在分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据之后，在计算目标帧数之前，该方法还包括：将获取到的第一动画帧的Canvas画布上所有像素点数据存储至第一临时变量并将获取到的第二动画帧的Canvas画布上所有像素点数据存储至第二临时变量。

为了实现上述目的，根据本申请的另一方面，提供了一种基于Canvas的动画播放速度调整装置。该装置包括：获取单元，用于分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；第一计算单元，用于计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；第二计算单元，用于分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；绘制单元，用于分别根据多个目标变化差值绘制多个目标动画帧；以及播放单元，用于顺序播放第一动画帧、多个目标动画帧和第二动画帧。

进一步地，第一计算单元包括：第一确定模块，用于确定第一动画帧和第二动画帧之间的时间间隔；第二确定模块，用于确定单位时间间隔需要创建的动画帧的帧数；以及第一计算模块，用于计算目标帧数，其中，目标帧数为时间间隔与单位时间间隔需要创建的动画帧的帧数的乘积。

进一步地，绘制单元包括：第二计算模块，用于分别根据第一动画帧的Canvas画布上每个像素点数据、目标帧数和多个目标变化差值，计算目标帧数组像素点数据，得到多组像素点数据；以及绘制模块，用于分别根据多组像素点数据绘制多个目标动画帧。

进一步地，第二计算单元包括：第三计算模块，用于分别计算多个像素点差值，其中，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；以及第四计算模块，用于根据多个像素点差值，分别计算多个目标变化差值，其中，目标变化差值是多个像素点差值与目标帧数的比值。

进一步地，该装置还包括：存储单元，用于将获取到的第一动画帧的Canvas画布上所有像素点数据存储至第一临时变量并将获取到的第二动画帧的Canvas画布上所有像素点数据存储至第二临时变量。

通过本申请，采用以下步骤：分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；分别根据多个目标变化差值绘制多个目标动画帧；以及顺序播放第一动画帧、多个目标动画帧和第二动画帧，解决了相关技术中当两个动画帧之间时间间隔的扩大时，动画播放容易出现卡顿现象的问题，通过绘制出多个目标动画帧来补充时间间隔被拉长的两个动画帧时间的动画帧，达到合理补充动画帧，使得动画播放流畅，进而实现了在动画播放时不出现卡顿的现象。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的基于Canvas的动画播放速度调整方法的流程图；以及

图2是根据本申请实施例的基于Canvas的动画播放速度调整装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于 本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请的实施例，提供了一种基于Canvas的动画播放速度调整方法。

图1是根据本申请实施例的基于Canvas的动画播放速度调整方法的流程图。如图1所示，该方法包括以下步骤：

步骤S101，分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧。

步骤S102，计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整方法中，计算目标帧数可以通过以下步骤实现：确定第一动画帧和第二动画帧之间的时间间隔；确定单位时间间隔需要创建的动画帧的帧数；以及计算目标帧数，其中，目标帧数为时间间隔与单位时间间隔需要创建的动画帧的帧数的乘积。

例如，确定第一动画帧和第二动画帧之间的时间间隔为1ms，如果每毫秒播放的动画为14帧，则在第一动画帧和第二动画帧之间需要创建的目标帧数为14*1＝14帧。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整方法中，在分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据之后，在计算目标帧数之前，该方法还包括：将获取到的第一动画帧的Canvas画布上所有像素点数据存储至第一临时变量并将获取到的第二动画帧的Canvas画布上所有像素点数据存储至第二临时变量。

通过将获取到的第一动画帧的Canvas画布上所有像素点数据存储至第一临时变量，将获取到的第二动画帧的Canvas画布上所有像素点数据存储至第二临时变量，将像素点数据存储在HTML5Canvas的内存中，保证了在后续需要调用像素点数据时，能够快速的调用像素点数据，从而提升效率。

步骤S103，分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值。

具体地，在本申请实施例提供的基于Canvas的动画播放速度调整方法中，分别计算多个目标变化差值包括：分别计算多个像素点差值，其中，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；以及根据多个像素点差值，分别计算多个目标变化差值，其中，目标变化差值是多个像素点差值与目标帧数的比值。

需要说明的是，对于每个像素点的像素点数据都采用16进制表示，例如，白色像素点数据为：#ffffff，黑色像素点数据为：#000000，六位十六进制可以逐位变化，如果从白色像素点数据变化到黑色像素点数据，每一位都从f变化到0，如果每次减1，则需要减16次。

例如，在第一动画帧上的像素点A的像素点数据为#eeeeee，在第二动画帧上的像素点A的像素点数据为#000000，像素点A的像素点差值为像素点A在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值，即像素点A的像素点差值eeeeee，如果目标帧数为14帧，计算出像素点A的每一位上目标变化差值为1，即，像素点A需要每帧递增的数值为1。

步骤S104，分别根据多个目标变化差值绘制多个目标动画帧。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整方法中，分别根据多个目标变化差值绘制多个目标动画帧包括：分别根据第一动画帧的Canvas画布上每个像素点数据、目标帧数和多个目标变化差值，计算目标帧数组像素点数据，得到多组像素点数据；以及分别根据多组像素点数据绘制多个目标动画帧。

需要说明的是，目标帧数组像素点数据中的目标帧数组是数量词，即计算组数为为目标帧数的像素点数据。

例如，上述计算出像素点A的每一位上目标变化差值为1，即，像素点A需要每帧递增的数值为1，在第一动画帧的像素点A的像素点数据为#eeeeee，在第一动画帧和第二动画帧之间需要创建的目标帧数为14，计算出像素点A在第一目标动画帧的像素点数据为#dddddd，像素点A在第二目标动画帧的像素点数据为#cccccc，像素点A在第三目标动画帧的像素点数据为#bbbbbb……像素点A在第十四目标动画帧的像素点数据为#111111，也分别计算出第一动画帧上的像素点B、像素点C、像素点D等等每个在第一动画帧上的像素点，在多个目标动画帧的像素点数据，即得到多组像素点数据，根据得到的多组像素点数据绘制出多个目标动画帧。

步骤S105，顺序播放第一动画帧、多个目标动画帧和第二动画帧。

顺序播放上述得到的第一动画帧、多个目标动画帧和第二动画帧，从而形成有效的动画。

通过上述步骤，根据两个像素点的颜色十六进制值的变化量来绘制每一帧的画布上各个像素点的颜色，从而创造动画帧，补充到相邻播放的动画帧的时间间隔内。从而合理补充动画帧，调整动画播放速度，使得动画播放流畅。

本申请实施例提供的基于Canvas的动画播放速度调整方法，通过分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；分别根据多个目标变化差值绘制多个目标动画帧；以及顺序播放第一动画帧、多个目标动画帧和第二动画帧，解决了相关技术中当两个动画帧之间时间间隔的扩大时，动画播放容易出现卡顿现象的问题，通过绘制出多个目标动画帧来补充时间间隔被拉长的两个动画帧时间的动画帧，达到合理补充动画帧，使得动画播放流畅，进而实现了在动画播放时不出现卡顿的现象。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种基于Canvas的动画播放速度调整装置，需要说明的是，本申请实施例的基于Canvas的动画播放速度调整装置可以用于执行本申请实施例所提供的基于Canvas的动画播放速度调整方法。以下对本申请实施例提供的基于Canvas的动画播放速度调整装置进行介绍。

图2是根据本申请实施例的基于Canvas的动画播放速度调整装置的示意图。如图2所示，该装置包括：获取单元10、第一计算单元20、第二计算单元30、绘制单元40和播放单元50。

获取单元10，用于分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧。

第一计算单元20，用于计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数。

第二计算单元30，用于分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值。

绘制单元40，用于分别根据多个目标变化差值绘制多个目标动画帧。

播放单元50，用于顺序播放第一动画帧、多个目标动画帧和第二动画帧。

本申请实施例提供的基于Canvas的动画播放速度调整装置，通过获取单元10分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；第一计算单元20计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；第二计算单元30分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；绘制单元40分别根据多个目标变化差值绘制多个目标动画帧；以及播放单元50顺序播放第一动画帧、多个目标动画帧和第二动画帧，解决了相关技术中当两个动画帧之间时间间隔的扩大时，动画播放容易出现卡顿现象的问题，通过绘制单元40绘制出多个目标动画帧来补充时间间隔被拉长的两个动画帧时间的动画帧，达到合理补充动画帧，使得动画播放流畅，进而实现了在动画播放时不出现卡顿的现象。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整装置中，第一计算单元20包括：第一确定模块，用于确定第一动画帧和第二动画帧之间的时间间隔；第二确定模块，用于确定单位时间间隔需要创建的动画帧的帧数；以及第一计算模块，用于计算目标帧数，其中，目标帧数为时间间隔与单位时间间隔需要创建的动画帧的帧数的乘积。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整装置中，绘制单元40包括：第二计算模块，用于分别根据第一动画帧的Canvas画布上每个像素点数据、目标帧数和多个目标变化差值，计算目标帧数组像素点数据，得到多组像素点数据；以及绘制模块，用于分别根据多组像素点数据绘制多个目标动画帧。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整装置中，第二计算单元30包括：第三计算模块，用于分别计算多个像素点差值，其中，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；以及第四计算模块，用于根据多个像素点差值，分别计算多个目标变化差值，其中，目标变化差值是多个像素点差值与目标帧数的比值。

可选地，在本申请实施例提供的基于Canvas的动画播放速度调整装置中，该装 置还包括：存储单元，用于将获取到的第一动画帧的Canvas画布上所有像素点数据存储至第一临时变量并将获取到的第二动画帧的Canvas画布上所有像素点数据存储至第二临时变量。

所述基于Canvas的动画播放速度调整装置包括处理器和存储器，上述获取单元10、第一计算单元20、第二计算单元30、绘制单元40和播放单元500等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元实现相应功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来调整Canvas动画的播放速度。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品的实施例，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：分别获取第一动画帧的Canvas画布上所有像素点数据和第二动画帧的Canvas画布上所有像素点数据，其中，第一动画帧和第二动画帧是相邻播放的动画帧；计算目标帧数，其中，目标帧数为在第一动画帧和第二动画帧之间需要创建的动画帧的帧数；分别计算多个目标变化差值，其中，多个目标变化差值分别为多个像素点差值与目标帧数的比值，多个像素点差值分别为多个像素点在第一动画帧上的像素点数据与在第二动画帧上的像素点数据之间的差值；分别根据多个目标变化差值绘制多个目标动画帧；以及顺序播放第一动画帧、多个目标动画帧和第二动画帧。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显 示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。