CN110727825A - 动画播放的控制方法、装置、服务器和存储介质 - Google Patents
动画播放的控制方法、装置、服务器和存储介质 Download PDFInfo
- Publication number
- CN110727825A CN110727825A CN201910893762.1A CN201910893762A CN110727825A CN 110727825 A CN110727825 A CN 110727825A CN 201910893762 A CN201910893762 A CN 201910893762A CN 110727825 A CN110727825 A CN 110727825A
- Authority
- CN
- China
- Prior art keywords
- animation
- playing
- static frame
- canvas
- frame picture
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
- G06F16/74—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
- G06F16/71—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
- G06F16/78—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Multimedia (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Library & Information Science (AREA)
- Software Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例提供了一种动画播放的控制方法、装置、服务器和存储介质。该动画播放的控制方法包括：获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。达到了控制动画的播放进度的效果。
Description
技术领域
本发明实施例涉及网页绘图技术领域，尤其涉及一种动画播放的控制方法、装置、服务器和存储介质。
背景技术
随着Html5的迅速发展，如何利用Html5进行绘图越来越重要。
在Html5 Canvas出现之后，网页的绘图能力得到了极大提升，以前只有通过Flash实现的复杂绘图和动画效果，都可以使用Canvas绘图实现了，基于Canvas可以在web浏览器中实现在线visio画图、在线思维导图，在线幻灯片制作、在线视频内容编辑、在线photoshop等功能，产生了非常多的云端富媒体编辑的应用。
然而，Canvas绘图接口仅支持加载显示静态图片，制作动画也只能在canvas之外，使用HTML<img>标签加载动画内容，无法控制动画的播放进度。
发明内容
本发明实施例提供一种动画播放的控制方法、装置、服务器和存储介质，以实现控制动画的播放进度的效果。
第一方面，本发明实施例提供了一种动画播放的控制方法，包括：
获取一组或多组动画的多个静态帧图片；
将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
可选的，在所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放之后，还包括：
判断所述播放指针是否到达动画的结束位置；
如果所述播放指针到达所述动画的结束位置，则停止播放。
可选的，在所述停止播放之前，还包括：
判断所述动画是否为循环播放状态；
如果所述动画为循环播放状态，则基于取模运算获取继续播放的静态帧图片以继续进行播放；
如果所述动画不为循环播放状态，则停止在最后一个所述静态帧图片。
可选的，所述获取一组或多组动画的多个静态帧图片，包括：
获取一组或多组图像互换格式GIF文件；
解析所述GIF文件以得到所述多个静态帧图片。
可选的，所述描述数据包括预设缩放比例，所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放，包括：
对所述静态帧图片按预设缩放比例进行缩放；
加载进行缩放后的静态帧图片至所述canvas的预设位置以进行播放。
可选的，所述描述数据包括层级信息，所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放，包括：
根据所述层级信息将多组动画的静态帧图片同时加载至所述canvas的不同预设位置以同时进行播放多组动画。
可选的，所述将多组动画的静态帧图片同时加载至所述canvas的不同预设位置，包括：
获取每一组动画的元素覆盖层级关系z-index值；
根据所述z-index值对每一层动画进行上下层级的排序。
第二方面，本发明实施例提供了一种动画播放的控制装置，包括：
获取模块，用于获取一组或多组动画的多个静态帧图片；
映射模块，用于将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
查找模块，用于基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
加载模块，用于根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
第三方面，本发明实施例提供了一种服务器，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任意实施例所述的动画播放的控制方法。
第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所述的动画播放的控制方法。
本发明实施例通过获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放，解决了使用HTML<img>标签加载动画内容，无法控制动画的播放进度的问题，实现了控制动画的播放进度的效果。
附图说明
图1是本发明实施例一提供的一种动画播放的控制方法的流程示意图；
图2是本发明实施例一提供的基于时间轴控制动画播放进度的示意图；
图3是本发明实施例一提供的基于时间轴控制多组动画播放进度的示意图；
图4是本发明实施例二提供的一种动画播放的控制方法的流程示意图；
图5是本发明实施例二提供的一种动画播放的控制方法的流程示意图；
图6是本发明实施例三提供的一种动画播放的控制装置的结构示意图；
图7是本发明实施例四提供的一种服务器的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时处理可以被终止，但是还可以具有未包括在附图中的附加步骤。处理可以对应于方法、函数、规程、子例程、子程序等等。
此外，术语“第一”、“第二”等可在本文中用于描述各种方向、动作、步骤或元件等，但这些方向、动作、步骤或元件不受这些术语限制。这些术语仅用于将第一个方向、动作、步骤或元件与另一个方向、动作、步骤或元件区分。举例来说，在不脱离本申请的范围的情况下，可以将第一信息为第二信息，且类似地，可将第二信息称为第一信息。第一信息和第二信息两者都是信息，但其不是同一信息。术语“第一”、“第二”等而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
实施例一
图1为本发明实施例一提供的一种动画播放的控制方法的流程示意图，可适用于在canvas控制动画播放的场景，该方法可以由动画播放的控制装置来执行，该装置可以采用软件和/或硬件的方式实现，并可集成在服务器上。
如图1所示，本发明实施例一提供的动画播放的控制方法，应用于画布canvas平台，包括：
S110、获取一组或多组动画的多个静态帧图片。
其中，静态帧图片是指构成动画的单元，以图片的形式存在。具体的，多个静态帧图片按顺序进行展示，就能组合成动画的形式展示给用户观看。在本实施例中，静态帧图片可以是需要制作新动画而得到的图片；也可以是将已有的动画，例如GIF动画的文件解析得到，此处不作限制。
可选的，以动画为GIF动画为例，本步骤具体可以包括：
获取一组或多组图像互换格式GIF文件；解析所述GIF文件以得到所述多个静态帧图片。
其中，GIF文件可以通过AJAX请求加载，从而获得GIF文件。具体的，GIF文件需要存放在页面容器相同的域名下，如果存放在其它域名下，则需要设置跨域资源共享(Cross-origin resource sharing，CORS)才能正确加载到GIF文件。GIF文件可以通过串表压缩LZW算法进行解析以得到多个静态帧图片。
S120、将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上。
其中，描述数据是指与静态帧图片相关的信息或数据。具体的，描述数据包括但不限于静态帧图片的标识、静态帧图片的存储路径，在canvas的X坐标、在canvas的Y坐标、缩放比例等，此处不作限制。在本实施例中，描述数据可以通过二位数据表的形式，使用JSON格式序列化存储到磁盘上，以供后续进行调用。预设顺序是指静态帧图片的播放顺序。以静态帧图片为GIF动画的文件解析得到为例，预设顺序可以是原GIF动画的播放顺序，也可以重新定义，此处不作限制。时间轴是指反映当前时间进度的单位。具体的，时间轴包括开始节点和结束节点，开始节点和结束节点为时间轴的时间长度区间。映射是指静态帧图片和时间轴的对应关系。在本步骤中，如果静态帧图片为多组动画的图片，则可以将多组不同的静态帧图片同时映射到时间轴上。
S130、基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片。
其中，播放指针用于判断当前时间应该展示哪张静态帧图片。位置信息是指播放指针在时间轴上的位置。具体的，按照时间流逝，播放指针在时间轴上移动，则可以根据播放指针在时间轴上的位置信息查找对应的静态帧图片。参考图2，图2是基于时间轴控制动画播放进度的示意图。通过图2可知，静态帧图片映射在时间轴上，可以根据播放指针的位置信息，获取对应的静态帧进行显示。在本步骤中，如果静态帧图片为多组动画的图片，则可以根据播放指针的位置信息，同时获取多组静态帧图片在canvas上进行显示。参考图3，图3是基于时间轴控制多组动画播放进度的示意图。通过图3可知，多组静态帧图片映射在时间轴上，当播放指针到达时间轴上的某一位置时，则查找多组静态帧图片，以在canvas的预设位置进行显示。
S140、根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
其中，预设位置是指静态帧图片在canvas中显示的位置。具体的，描述数据中包括静态帧图片在canvas的X轴、Y轴，则可以根据描述数据确定静态帧图片在canvas的预设位置，将静态帧图片加载至canvas的预设顺序以进行播放。在本实施例中，随着播放指针在时间轴上的移动，根据静态帧图片在时间轴上的映射关系，可以获取对应的静态帧图片在canvas的预设位置进行显示。按照时间的流逝，持续显示多个静态帧图片，将多个静态帧图片以动画的形式进行播放。
在本实施例中，通过canvas渲染动画的静态帧图片，使得动画播放的效果更好。此外，通过将静态帧图片映射至时间轴上，根据播放指针在时间轴的位置信息，查找对应的静态帧图片在canvas的预设位置上显示，达到了控制动画的播放进度的效果。
在一代替实施例中，可选的，在步骤S140之后，包括：
判断所述播放指针是否到达动画的结束位置；如果所述播放指针到达所述动画的结束位置，则停止播放。
其中，结束位置是指在时间轴上，动画播放的位置，即动画最后一帧的静态帧图片的时间位置。当播放指针到达结束位置时，则停止播放。
可选的，在停止播放之前，还可以包括：
判断所述动画是否为循环播放状态；如果所述动画为循环播放状态，则基于取模运算获取继续播放的静态帧图片以继续进行播放；如果所述动画不为循环播放状态，则停止在最后一个所述静态帧图片。
其中，取模运算是指取余数的运算。具体的，当播放指针到达动画的结束位置时，但未到达时间轴的结束节点，如果动画为循环播放状态，则可以根据时间轴的结束节点和动画的结束位置此区间的时间，和每一帧静态帧图片的持续时间，以获取相应数量的静态帧图片，从而继续播放。如果动画不为循环播放状态，则停止在最后一个静态帧图片即可。
本发明实施例的技术方案，通过获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。静态帧图片的描述数据映射在时间轴上，可以根据播放指针在时间轴的位置信息，查找对应的静态帧图片进行显示，达到了控制动画的播放进度的技术效果。此外，使用canvas渲染动画的静态帧图片，可以让动画播放的效果更好。
实施例二
图4是本发明实施例二提供的一种动画播放的控制方法的流程示意图。本实施例是在上述技术方案的进一步细化，适用于在canvas控制动画播放的场景。该方法可以由动画播放的控制装置来执行，该装置可以采用软件和/或硬件的方式实现，并可集成在服务器上。
如图4所示，本发明实施例二提供的动画播放的控制方法包括：
S210、获取一组或多组动画的多个静态帧图片。
其中，静态帧图片是指构成动画的单元，以图片的形式存在。具体的，多个静态帧图片按顺序进行展示，就能组合成动画的形式展示给用户观看。在本实施例中，静态帧图片可以是需要制作新动画而得到的图片；也可以是将已有的动画，例如GIF动画的文件解析得到，此处不作限制。
S220、将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上。
其中，描述数据是指与静态帧图片相关的信息或数据。在本实施例中，描述数据包括预设缩放比例。预设缩放比例是指将静态帧图片进行缩小，以在canvas中进行显示。具体的，canvas渲染环境的区域是有限的，该区域为限制方阵，如果一组动画的图片数量过大或者图片过大，又或者是多组图片的图片总数量过多，则需要建立多个canvas以存放所有静态帧图片。通过对多个静态帧图片进行缩放，则可以将所有静态帧图片在一个画布中显示，节省了系统的资源利用率。
S230、基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片。
其中，播放指针用于判断当前时间应该展示哪张静态帧图片。位置信息是指播放指针在时间轴上的位置。具体的，按照时间流逝，播放指针在时间轴上移动，则可以根据播放指针在时间轴上的位置信息查找对应的静态帧图片。
S240、对所述静态帧图片按预设缩放比例进行缩放。
在本实施例中，可将所有静态帧图片以同一预设缩放比例进行缩放，以提高动画的观赏性。
S250、加载进行缩放后的静态帧图片至所述canvas的预设位置以进行播放。
其中，预设位置是指静态帧图片在canvas中显示的位置。
参考图5，在一代替实施例中，步骤S220中的描述数据包括层级信息，步骤S240和步骤S250可以代替为：
S241、根据所述层级信息将多组动画的静态帧图片同时加载至所述canvas的不同预设位置以同时进行播放多组动画。
其中，层级信息是指判断每一组动画上下层级的信息。
可选的，本步骤具体包括：
获取每一组动画的元素覆盖层级关系z-index值；根据所述z-index值对每一层动画进行上下层级的排序。
其中，z-index值是指确定元素的堆叠顺序的属性值。该属性值设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。具体的，z-index值更高，即堆叠顺序更高的元素会处于堆叠顺序较低的元素的前面。在本实施例中，z-index值用于判断不同组动画之间的堆叠顺序。根据所述z-index值对每一层动画进行上下层级的排序。canvas按堆叠顺序进行渲染，z-index值大的将显示在上层，产生覆盖效果。例如，有A、B两组动画，A组的z-index值高于B组的z-index值；其中两组动画的预设区域有重叠，A租的动画在重叠区域会覆盖B组的动画。
本发明实施例的技术方案，通过获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。静态帧图片的描述数据映射在时间轴上，可以根据播放指针在时间轴的位置信息，查找对应的静态帧图片进行显示，达到了控制动画的播放进度的技术效果。此外，使用canvas渲染动画的静态帧图片，可以让动画播放的效果更好。此外，通过将静态帧图片按照预设缩放比例进行缩放，只需要建立一个canvas即可实现控制动画的播放，降低了系统的资源利用率。
实施例三
图6是本发明实施例三提供的一种动画播放的控制装置的结构示意图，本实施例可适用于在canvas控制动画播放的场景，该装置可以采用软件和/或硬件的方式实现，并可集成在服务器上。
如图6所示，本实施例提供的动画播放的控制装置可以包括获取模块310、映射模块320、查找模块330和加载模块340，其中：
获取模块310，用于获取一组或多组动画的多个静态帧图片；
映射模块320，用于将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
查找模块330，用于基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
加载模块340，用于根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
可选的，该装置还包括：
判断模块，用于判断所述播放指针是否到达动画的结束位置；
停止模块，用于如果所述播放指针到达所述动画的结束位置，则停止播放。
可选的，该判断模块还用于判断所述动画是否为循环播放状态；
该装置还包括播放模块，用于如果所述动画为循环播放状态，则基于取模运算获取继续播放的静态帧图片以继续进行播放，如果所述动画不为循环播放状态，则停止在最后一个所述静态帧图片。
可选的，该获取模块310包括：
文件获取单元，用于获取一组或多组图像互换格式GIF文件；
解析单元，用于解析所述GIF文件以得到所述多个静态帧图片。
可选的，所述描述数据包括预设缩放比例，该加载模块340包括：
缩放单元，用于对所述静态帧图片按预设缩放比例进行缩放；
加载单元，用于加载进行缩放后的静态帧图片至所述canvas的预设位置以进行播放。
可选的，所述描述数据包括层级信息，该加载单元还用于根据所述层级信息将多组动画的静态帧图片同时加载至所述canvas的不同预设位置以同时进行播放多组动画。
可选的，该加载单元包括：
获取子单元，用于获取每一组动画的元素覆盖层级关系z-index值；
排序子单元，用于根据所述z-index值对每一层动画进行上下层级的排序。
本发明实施例所提供的动画播放的控制装置可执行本发明任意实施例所提供的动画播放的控制方法，具备执行方法相应的功能模块和有益效果。本发明实施例中未详尽描述的内容可以参考本发明任意方法实施例中的描述。
实施例四
图7是本发明实施例四提供的一种服务器的结构示意图。图7示出了适于用来实现本发明实施方式的示例性服务器612的框图。图7显示的服务器612仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图7所示，服务器612以通用服务器的形式表现。服务器612的组件可以包括但不限于：一个或者多个处理器616，存储装置628，连接不同系统组件(包括存储装置628和处理器616)的总线618。
总线618表示几类总线结构中的一种或多种，包括存储装置总线或者存储装置控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry SubversiveAlliance，ISA)总线，微通道体系结构(Micro Channel Architecture，MAC)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(Peripheral Component Interconnect，PCI)总线。
服务器612典型地包括多种计算机系统可读介质。这些介质可以是任何能够被服务器612访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
存储装置628可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(Random Access Memory，RAM)630和/或高速缓存存储器632。终端612可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统634可以用于读写不可移动的、非易失性磁介质(图7未显示，通常称为“硬盘驱动器”)。尽管图7中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘，例如只读光盘(Compact Disc Read-Only Memory，CD-ROM),数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线618相连。存储装置628可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。
具有一组(至少一个)程序模块642的程序/实用工具640，可以存储在例如存储装置628中，这样的程序模块642包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块642通常执行本发明所描述的实施例中的功能和/或方法。
服务器612也可以与一个或多个外部设备614(例如键盘、指向终端、显示器624等)通信，还可与一个或者多个使得用户能与该服务器612交互的终端通信，和/或与使得该服务器612能与一个或多个其它计算终端进行通信的任何终端(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口622进行。并且，服务器612还可以通过网络适配器620与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网(Wide AreaNetwork，WAN)和/或公共网络，例如因特网)通信。如图7所示，网络适配器620通过总线618与服务器612的其它模块通信。应当明白，尽管图中未示出，可以结合服务器612使用其它硬件和/或软件模块，包括但不限于：微代码、终端驱动器、冗余处理器、外部磁盘驱动阵列、磁盘阵列(Redundant Arrays of Independent Disks，RAID)系统、磁带驱动器以及数据备份存储系统等。
处理器616通过运行存储在存储装置628中的程序，从而执行各种功能应用以及数据处理，例如实现本发明任意实施例所提供的一种动画播放的控制方法，该方法可以包括：
获取一组或多组动画的多个静态帧图片；
将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
本发明实施例的技术方案，通过获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。静态帧图片的描述数据映射在时间轴上，可以根据播放指针在时间轴的位置信息，查找对应的静态帧图片进行显示，达到了控制动画的播放进度的技术效果。此外，使用canvas渲染动画的静态帧图片，可以让动画播放的效果更好。
实施例五
本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所提供的一种动画播放的控制方法，该方法可以包括：
获取一组或多组动画的多个静态帧图片；
将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
本发明实施例的计算机可读存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
存储介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或终端上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
本发明实施例的技术方案，通过获取一组或多组动画的多个静态帧图片；将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。静态帧图片的描述数据映射在时间轴上，可以根据播放指针在时间轴的位置信息，查找对应的静态帧图片进行显示，达到了控制动画的播放进度的技术效果。此外，使用canvas渲染动画的静态帧图片，可以让动画播放的效果更好。
注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种动画播放的控制方法，应用于画布canvas平台，其特征在于，包括：
获取一组或多组动画的多个静态帧图片；
将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
2.如权利要求1所述的动画播放的控制方法，其特征在于，在所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放之后，还包括：
判断所述播放指针是否到达动画的结束位置；
如果所述播放指针到达所述动画的结束位置，则停止播放。
3.如权利要求2所述的动画播放的控制方法，其特征在于，在所述停止播放之前，还包括：
判断所述动画是否为循环播放状态；
如果所述动画为循环播放状态，则基于取模运算获取继续播放的静态帧图片以继续进行播放；
如果所述动画不为循环播放状态，则停止在最后一个所述静态帧图片。
4.如权利要求1所述的动画播放的控制方法，其特征在于，所述获取一组或多组动画的多个静态帧图片，包括：
获取一组或多组图像互换格式GIF文件；
解析所述GIF文件以得到所述多个静态帧图片。
5.如权利要求1所述的动画播放的控制方法，其特征在于，所述描述数据包括预设缩放比例，所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放，包括：
对所述静态帧图片按预设缩放比例进行缩放；
加载进行缩放后的静态帧图片至所述canvas的预设位置以进行播放。
6.如权利要求1所述的动画播放的控制方法，其特征在于，所述描述数据包括层级信息，所述根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放，包括：
根据所述层级信息将多组动画的静态帧图片同时加载至所述canvas的不同预设位置以同时进行播放多组动画。
7.如权利要求6所述的动画播放的控制方法，其特征在于，所述将多组动画的静态帧图片同时加载至所述canvas的不同预设位置，包括：
获取每一组动画的元素覆盖层级关系z-index值；
根据所述z-index值对每一层动画进行上下层级的排序。
8.一种动画播放的控制装置，应用于画布canvas平台，其特征在于，包括：
获取模块，用于获取一组或多组动画的多个静态帧图片；
映射模块，用于将所述静态帧图片的描述数据按预设顺序映射到canvas的时间轴上；
查找模块，用于基于播放指针在所述时间轴上移动的位置信息查找对应的所述静态帧图片；
加载模块，用于根据所述描述数据加载所述静态帧图片至canvas的预设位置以进行播放。
9.一种服务器，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的动画播放的控制方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一项所述的动画播放的控制方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910893762.1A CN110727825A (zh) | 2019-09-20 | 2019-09-20 | 动画播放的控制方法、装置、服务器和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910893762.1A CN110727825A (zh) | 2019-09-20 | 2019-09-20 | 动画播放的控制方法、装置、服务器和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110727825A true CN110727825A (zh) | 2020-01-24 |
Family
ID=69218165
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910893762.1A Pending CN110727825A (zh) | 2019-09-20 | 2019-09-20 | 动画播放的控制方法、装置、服务器和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110727825A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443913A (zh) * | 2020-03-27 | 2020-07-24 | 网易（杭州）网络有限公司 | 交互动画配置方法及装置、存储介质及电子设备 |
| CN111880877A (zh) * | 2020-07-24 | 2020-11-03 | 上海米哈游天命科技有限公司 | 一种动画切换方法、装置、设备及存储介质 |
| CN112637539A (zh) * | 2020-12-15 | 2021-04-09 | 浪潮云信息技术股份公司 | 一种基于Canvas绘制录像回放时间轴的方法 |
| CN114339338A (zh) * | 2021-12-30 | 2022-04-12 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于车载视频的图像自定义渲染方法及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105657574A (zh) * | 2014-11-12 | 2016-06-08 | 阿里巴巴集团控股有限公司 | 一种视频文件制作方法以及装置 |
| CN106385635A (zh) * | 2016-09-18 | 2017-02-08 | 福建天泉教育科技有限公司 | Gif动画实时控制方法及播放器 |
| CN106569834A (zh) * | 2016-11-14 | 2017-04-19 | 福建天泉教育科技有限公司 | 基于浏览器的动画制作方法及系统 |
| CN106887030A (zh) * | 2016-06-17 | 2017-06-23 | 阿里巴巴集团控股有限公司 | 一种动画生成方法和装置 |
| CN109002282A (zh) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | 一种在web页面开发中实现动画效果的方法和装置 |
-
2019
- 2019-09-20 CN CN201910893762.1A patent/CN110727825A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105657574A (zh) * | 2014-11-12 | 2016-06-08 | 阿里巴巴集团控股有限公司 | 一种视频文件制作方法以及装置 |
| CN106887030A (zh) * | 2016-06-17 | 2017-06-23 | 阿里巴巴集团控股有限公司 | 一种动画生成方法和装置 |
| CN106385635A (zh) * | 2016-09-18 | 2017-02-08 | 福建天泉教育科技有限公司 | Gif动画实时控制方法及播放器 |
| CN106569834A (zh) * | 2016-11-14 | 2017-04-19 | 福建天泉教育科技有限公司 | 基于浏览器的动画制作方法及系统 |
| CN109002282A (zh) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | 一种在web页面开发中实现动画效果的方法和装置 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443913A (zh) * | 2020-03-27 | 2020-07-24 | 网易（杭州）网络有限公司 | 交互动画配置方法及装置、存储介质及电子设备 |
| CN111443913B (zh) * | 2020-03-27 | 2023-05-12 | 网易（杭州）网络有限公司 | 交互动画配置方法及装置、存储介质及电子设备 |
| CN111880877A (zh) * | 2020-07-24 | 2020-11-03 | 上海米哈游天命科技有限公司 | 一种动画切换方法、装置、设备及存储介质 |
| CN111880877B (zh) * | 2020-07-24 | 2023-10-31 | 上海米哈游天命科技有限公司 | 一种动画切换方法、装置、设备及存储介质 |
| CN112637539A (zh) * | 2020-12-15 | 2021-04-09 | 浪潮云信息技术股份公司 | 一种基于Canvas绘制录像回放时间轴的方法 |
| CN114339338A (zh) * | 2021-12-30 | 2022-04-12 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于车载视频的图像自定义渲染方法及存储介质 |
| CN114339338B (zh) * | 2021-12-30 | 2024-04-05 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于车载视频的图像自定义渲染方法及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110727825A (zh) | 动画播放的控制方法、装置、服务器和存储介质 | |
| WO2017173781A1 (zh) | 视频帧截取方法和装置 | |
| CN111899322B (zh) | 视频处理方法、动画渲染sdk和设备及计算机存储介质 | |
| US9037957B2 (en) | Prioritizing asset loading in multimedia application | |
| CN110990090A (zh) | 动态壁纸显示方法、设备以及计算机可读介质 | |
| CN111882634A (zh) | 一种图像渲染方法、装置、设备及存储介质 | |
| CN110807161A (zh) | 一种页面骨架渲染方法、装置、设备及介质 | |
| CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
| CN110750664A (zh) | 图片的显示方法及装置 | |
| CN111813465A (zh) | 一种信息获取方法、装置、介质和设备 | |
| CN109558118B (zh) | 创建智能小程序的原生组件的方法、装置、设备和存储介质 | |
| CN112306594A (zh) | 一种基于移动端的渲染方法、装置及存储介质 | |
| CN112492399B (zh) | 信息显示方法、装置及电子设备 | |
| CN112367295B (zh) | 插件展示方法及装置、存储介质及电子设备 | |
| CN114461214A (zh) | 一种页面显示方法、装置、电子设备及存储介质 | |
| KR101996159B1 (ko) | 정보 제시 방법 및 장치 | |
| CN114090666A (zh) | 幻灯片显示方法、装置、设备以及存储介质 | |
| US20180090174A1 (en) | Video generation of project revision history | |
| CN112652039A (zh) | 动画分段数据获取方法、分段方法、装置、设备及介质 | |
| CN113559503A (zh) | 视频生成方法、设备及计算机可读介质 | |
| CN107741992B (zh) | 会议记录的网络存储方法、装置、智能平板和存储介质 | |
| CN111083552A (zh) | 一种缩略图生成方法、装置、设备和介质 | |
| CN112988276B (zh) | 一种资源包的生成方法、装置、电子设备及存储介质 | |
| CN112233206B (zh) | 字符图像生成方法、装置、设备及存储介质 | |
| CN108875080B (zh) | 一种图像搜索方法、装置、服务器及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |