CN110647703A - 动画播放方法、装置、计算机设备和存储介质 - Google Patents
动画播放方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN110647703A CN110647703A CN201910881938.1A CN201910881938A CN110647703A CN 110647703 A CN110647703 A CN 110647703A CN 201910881938 A CN201910881938 A CN 201910881938A CN 110647703 A CN110647703 A CN 110647703A
- Authority
- CN
- China
- Prior art keywords
- frame
- image data
- animation
- key frame
- image
- 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
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000004590 computer program Methods 0.000 claims description 21
- 230000000694 effects Effects 0.000 abstract description 9
- 238000010586 diagram Methods 0.000 description 6
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 239000000284 extract Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
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/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请涉及一种动画播放方法、装置、计算机设备和存储介质。该方法包括将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。本方法通过将文件体积大的动态图像文件中每一帧的帧图像数据转换为体积小的Blob格式的图片文件对象，将图片文件对象以基于CSS的关键帧的方式对每一帧图像进行播放，实现动画效果，使得动画加载速度以及动画播放的流畅性得到提升。
Description
技术领域
本申请涉及图像数据处理技术领域，特别是涉及一种动画播放方法、装置、计算机设备和存储介质。
背景技术
随着网页技术的发展，越来越多的网页页面通过展示动态图像，以实现页面的动画效果，丰富网页页面内容。目前，常见的动态图片为图像互换格式(GraphicsInterchange Format，GIF)图像，GIF图像文件中存储有多幅图像，通过将这些图像逐幅读出并显示到屏幕上，构成了动态图的效果，实现显示简单动画；但是，基于HTML5的网页通过播放GIF图像以实现动画效果时，由于动态图像文件较大，往往导致在网页加载过程中，加载GIF图像所需要的时间长，导致动画播放的速度慢、流畅度差。
发明内容
基于此，有必要针对上述技术问题，提供一种动画播放方法、装置、计算机设备和存储介质。
一种动画播放方法，所述方法包括：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
在其中一个实施例中，所述根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画的步骤，包括：
根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；
将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
在其中一个实施例中，所述根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值的步骤，包括：
获取所述关键帧动画的显示时长；
根据所述序列帧图像中各个帧图像数据的顺序以及所述显示时长，确定所述每一帧对应的帧图像数据的显示时刻；
根据所述显示时刻设置所述关键帧动画中各个关键帧的触发百分比值。
在其中一个实施例中，所述将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画的步骤，包括：
创建各所述Blob格式的图片文件对象的请求链接；
将各所述帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
在其中一个实施例中，所述将动态图像文件分解为序列帧图像的步骤，包括：
根据所述动态图像文件的文件类型确定与所述动态图像文件的解码算法；
解析所述动态图像文件，获得所述动态图像文件中的图像数据块；
利用所述解码算法对所述图像数据块进行解码，得到解码后的序列帧图像。
一种动画播放装置，所述装置包括：
图像数据获取模块，用于将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
图像编码获取模块，用于对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
关键帧动画生成模块，用于将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
动画播放模块，用于在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
在其中一个实施例中，所述关键帧动画生成模块，用于：根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
在其中一个实施例中，所述关键帧动画生成模块，用于：创建各所述Blob格式的图片文件对象的请求链接；将各所述帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
上述动画播放方法、装置、计算机设备和存储介质，上述动画播放方法中，通过将动态图像文件分解为序列帧图像，以获取每一帧对应的帧图像数据，在对各帧图像数据进行压缩，并在将压缩后的帧图像数据转换为base64格式的图像数据后，将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画，后续在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中，本方法通过将文件体积大的动态图像文件中每一帧的帧图像数据转换为体积小的Blob格式的图片文件对象，实现保持图片精度的同时，文件体积得到压缩，将图片文件对象以基于CSS的关键帧的方式对每一帧图像进行播放，实现动画效果，使得动画加载速度以及动画播放的流畅性得到提升。
附图说明
图1为一个实施例中动画播放方法的应用场景图；
图2为一个实施例中计算机设备的内部结构图；
图3为一个实施例中动画播放方法的流程示意图；
图4为另一个实施例中动画播放方法的流程示意图；
图5为一个实施例中动画播放方法装置的结构框图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
图1为一个实施例中动画播放方法的应用环境图。该动画播放方法应用与计算机设备中，该计算机设备可以是服务器。如图1所示，以该计算机设备为服务器102为例，服务器102获取原本需要播放的动态图像文件，例如GIF图像文件，服务器102将该GIF图像文件分解为逐帧的帧图像数据，对每帧图像数据进行压缩后，将压缩后的图像数据转换为格式为base64格式的图像数据，进而将base64格式的图像数据转换为Blob格式的图片文件对象，最终在根据图片文件对象生成基于层叠样式表(Cascading Style Sheets，CSS)的关键帧动画，在用户通过浏览器访问网页页面时，网页页面可直接加载基于CSS的关键帧动画，实现将多个帧图像数据对应的图片文件对象进行播放以形成动态的动画，本方法通过将文件体积大的动态图像文件中每一帧的图像数据转换为体积较小的Blob格式的图片文件对象，并利用图像编码以基于CSS的关键帧的方式对每一帧图像进行播放，实现动画效果，使得动画加载速度以及动画播放的流畅性得到提升。
图2为一个实施例中计算机设备的内部结构示意图。如图2所示，该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储GIF图像数据、图像编码等不同数据信息。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种动画播放方法。
本领域技术人员可以理解，图1以及图2示出的图例，仅仅与本申请方案相关的部分场景，并不构成对本申请应用环境的限定。
在一个实施例中，如图3所示，提供了一种动画播放方法，以该方法应用于图1中的服务器为例进行说明，包括以下步骤：
步骤202：将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据。
本步骤中，动态图像文件可以是GIF(Graphics Interchange Format，图像互换格式)图像文件、flash图像文件等；动态图像文件中存储多幅图像数据，动态图像文件在显示时将这些图像数据逐幅读取显示以形成动画；具体的，服务器通过对动态图像文件进行解析，从中获取序列帧图像，并提取每一帧图像对应的帧图像数据。
步骤204：对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据。
本步骤中，base64是用于传输8bit字节码的编码方式，base64格式的天突穴数据是一串字符串码，可以直接写入至HTML网页或层叠样式表(Cascading Style Sheets，CSS)中。服务器在获取到帧图像数据后，可以对帧图像数据进行压缩，以降低帧图像数据的数据量，然后对帧图像数据进行转码，转换为base64格式的图像编码。
具体的，服务器在获取到动态图像文件中的每一帧对应的帧图像数据后，在保证图片不失真的情况下，可以通过图片处理压缩工具对各帧的帧图像数据进行压缩，以降低每一帧的帧图像数据的文件体积；在对帧图像数据进行压缩后，服务器使用Webpack打包工具将压缩后的帧图像数据转码为base64格式的图像编码。
步骤206：将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画。
其中，Blob(Binary Large Object)格式是二进制类型的大对象；服务器将图像编码转换为以Blob格式的文本数据串形式，得到图片文件对象，在保证图片精度不变的同时，进一步压缩图片数据的体积。
具体的，服务器在将base64格式的图像数据进一步压缩为Blob格式的图片文件对象后，将每一帧的帧图像数据对应的图片文件对象一一生成基于层叠样式表的关键帧，形成关键帧动画；后续在加载关键帧时对文件体积较小图片文件对象进行加载，在保持图片质量高精度的同时不影响流畅性，保证图片加载渲染，提高动画播放的流畅性。
步骤208：在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。
当接收到客户端发送的网页页面加载请求时，服务器响应加载请求，在加载网页页面时，直接将基于CSS的关键帧动画进行加载，使原有的动态图像文件以CSS的关键帧动画形式进行播放。
上述动画播放方法中，通过将动态图像文件分解为序列帧图像，以获取每一帧对应的帧图像数据，在对各帧图像数据进行压缩，并在将压缩后的帧图像数据转换为base64格式的图像数据后，将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画，后续在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中，本方法通过将文件体积大的动态图像文件中每一帧的帧图像数据转换为体积小的Blob格式的图片文件对象，实现保持图片精度的同时，文件体积得到压缩，将图片文件对象以基于CSS的关键帧的方式对每一帧图像进行播放，实现动画效果，使得动画加载速度以及动画播放的流畅性得到提升。
在一个实施例中，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画的步骤，包括：根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
其中，关键帧的触发百分比值是指关键帧动画中不同的时间节点；设置各个关键帧的触发百分比值也就是定义的是在不同百分比值(时间节点)时显示不同的关键帧。
具体地，服务器根据序列帧图像中每帧帧图像数据间的顺序，即可确定每帧帧图像数据的显示顺序，从而根据各帧帧图像数据的显示顺序设置关键帧的触发百分比值，从而将帧图像数据对应的图像编码作为元素状态写入至对应关键帧中，实现设置关键帧动画中各个关键帧的图片样式，使得在一个触发百分比值(时间节点)显示一个帧图像数据，实现动画播放效果。
在一个实施例中，根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值的步骤，包括：获取关键帧动画的显示时长；根据序列帧图像中各个帧图像数据的顺序以及显示时长，确定每一帧对应的帧图像数据的显示时刻；根据显示时刻设置关键帧动画中各个关键帧的触发百分比值。
显示时长是指关键帧动画播放一次所用的时间，在一个实施例中，服务器可以获取动态图像文件的播放时间，确定为关键帧动画的显示时长，或者，服务器可以获取预设的关键帧动画的帧频以及帧图像数据的数量，确定关键帧动画的显示时长。
具体地，服务器在获取到关键帧动画的显示时长后，可以根据播放时间以及各个帧图像数据的顺序，分别确定各个帧图像数据的显示时刻，进而根据显示时刻设置各个帧图像数据所对应的关键帧的触发百分比值。
在一个实施例中，根据帧图像数据间的序列以及各图片文件对象生成基于层叠样式表的关键帧动画的步骤，包括：创建各Blob格式的图片文件对象的请求链接；将各帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
本实施例中，图片文件对象的请求链接是指图片文件对象的请求地址；服务器在将图像编码转换为以Blob格式的文本数据串形式后，将Blob格式的图片文件对象进行保存，并生成该图片文件对象的请求地址Blob URL，通过将图片文件对象的请求地址作为元素状态写入至对应关键帧中，实现设置关键帧动画中各个关键帧的图片样式。Blob URL的长度一般比较短，在显示大图片时，相对于直接使用帧图像数据的base64格式的图像编码，使用图片文件对象的请求地址可以有效提高图片的加载速度，进而提高动画加载速度以及流畅度。
在一个实施例中，如图4所示，提供了一种动画播放方法，以该方法应用于图1中的服务器为例进行说明，包括以下步骤：
步骤302：根据动态图像文件的文件类型确定与动态图像文件的解码算法；
步骤304：解析动态图像文件，获得动态图像文件中的图像数据块；
步骤306：利用解码算法对图像数据块进行解码，得到解码后的序列帧图像；
步骤308：获取每一帧对应的帧图像数据；
步骤310：对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
步骤312：将各base64格式的图像数据转换为Blob格式的图片文件对象；
步骤314：获取关键帧动画的显示时长；
步骤316：根据序列帧图像中各个帧图像数据的顺序以及显示时长，确定每一帧对应的帧图像数据的显示时刻；
步骤318：根据显示时刻设置关键帧动画中各个关键帧的触发百分比值；
步骤320：创建各Blob格式的图片文件对象的请求链接，将各帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画；
步骤322：在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。
本实施例中，通过将动态图像文件逐帧分解为帧图像数据，并对每帧的帧图像数据进行压缩后，对压缩后的帧图像数据进行从普通图片格式例如jpg格式的帧图像数据—>base64格式的图像编码—>Blob格式的图片文件对象的转换，最终获得的Blob格式的图片文件对象在保持图片精度的同时，文件体积得到压缩，从而将帧图像数据对应的图片文件对象作为元素状态写入至对应关键帧中，实现设置关键帧动画中各个关键帧的图片样式，使得在一个触发百分比值(时间节点)显示一个帧图像数据，实现动画播放效果，当用户通过浏览器访问web网页时，web网页中的动画加载速度提升，同时提高了动画的清晰度以及流畅度。
在一个实施例中，将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据的步骤，包括以下步骤：根据动态图像文件的文件类型确定与动态图像文件的解码算法；解析动态图像文件，获得动态图像文件中的图像数据块；利用解码算法对图像数据块进行解码，得到解码后的序列帧图像。
本实施例中，图像数据块为保存着图像数据的数据块；服务器通过动态图像文件的类型确定动态图像文件的解码算法，解码过程就是利用解码算法对动态图像文件中已编码压缩的图像数据块进行解码，得到解码后的数据流，即得到多帧连续的序列帧图像，从而在解码后的数据流中获取每一帧对应的帧帧图像数据。
以动态图像文件为GIF图像文件为例，GIF图像文件的结构包括文件头、图像互换格式数据流和文件格式终结器三部分，其中，图像互换格式数据流为保存着图像数据的图像数据块，且使用LZW压缩算法编码获得的。服务器在确定到动态图像文件的文件类型为GIF图后，确定解码算法为LZW解码算法，并利用LZW解码算法对GIF动态图像文件中的图像互换格式数据流进行解码，获取GIF动态图像文件的序列帧图像。通过对GIF动态图像文件分解为序列帧图像，以获取GIF动态图像文件中每一帧的图像，以便后续实现以CSS关键帧动画的形式展示该GIF动态图像文件。
应该理解的是，虽然图3以及图4的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图3以及图4中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中，如图5所示，提供了一种动画播放装置，包括：帧图像数据获取模块410、图像编码获取模块420、关键帧动画生成模块430和动画播放模块440，其中：
图像数据获取模块410，用于将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
图像编码获取模块420，用于对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
关键帧动画生成模块430，用于将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
动画播放模块440，用于在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。
在一个实施例中，关键帧动画生成模块，用于根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
在一个实施例中，关键帧动画生成模块，还用于获取关键帧动画的显示时长；根据序列帧图像中各个帧图像数据的顺序以及显示时长，确定每一帧对应的帧图像数据的显示时刻；根据显示时刻设置关键帧动画中各个关键帧的触发百分比值。
在一个实施例中，关键帧动画生成模块，还用于创建各Blob格式的图片文件对象的请求链接；将各帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
在一个实施例中，图像数据获取模块，用于根据动态图像文件的文件类型确定与动态图像文件的解码算法；解析动态图像文件，获得动态图像文件中的图像数据块；利用解码算法对图像数据块进行解码，得到解码后的序列帧图像。
关于动画播放装置的具体限定可以参见上文中对于动画播放方法的限定，在此不再赘述。上述动画播放装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
本领域技术人员可以理解，图2中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，提供了一种计算机设备，包括存储器和处理器，该存储器存储有计算机程序，该处理器执行计算机程序时实现以下步骤：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。
在一个实施例中，处理器执行计算机程序实现根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画的步骤，具体实现以下步骤：根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
在一个实施例中，处理器执行计算机程序实现根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值的步骤，具体包括以下步骤：获取关键帧动画的显示时长；根据序列帧图像中各个帧图像数据的顺序以及显示时长，确定每一帧对应的帧图像数据的显示时刻；根据显示时刻设置关键帧动画中各个关键帧的触发百分比值。
在一个实施例中，处理器执行计算机程序实现将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画的步骤，具体实现以下步骤：创建各Blob格式的图片文件对象的请求链接；将各帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
在一个实施例中，处理器执行计算机程序实现将动态图像文件分解为序列帧图像的步骤，具体实现以下步骤：根据动态图像文件的文件类型确定与动态图像文件的解码算法；解析动态图像文件，获得动态图像文件中的图像数据块；利用解码算法对图像数据块进行解码，得到解码后的序列帧图像。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各base64格式的图像数据转换为Blob格式的图片文件对象，根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将关键帧动画加载至对应的网页页面中。
在一个实施例中，计算机程序被处理器执行实现根据各Blob格式的图片文件对象生成基于层叠样式表的关键帧动画的步骤时，具体实现以下步骤：根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
在一个实施例中，计算机程序被处理器执行时还实现根据序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值的步骤，具体实现以下步骤：获取关键帧动画的显示时长；根据序列帧图像中各个帧图像数据的顺序以及显示时长，确定每一帧对应的帧图像数据的显示时刻；根据显示时刻设置关键帧动画中各个关键帧的触发百分比值。
在一个实施例中，计算机程序被处理器执行实现将与各帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画的步骤，具体实现以下步骤：创建各Blob格式的图片文件对象的请求链接；将各帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
在一个实施例中，计算机程序被处理器执行时还实现将动态图像文件分解为序列帧图像的步骤，具体实现以下步骤：根据动态图像文件的文件类型确定与动态图像文件的解码算法；解析动态图像文件，获得动态图像文件中的图像数据块；利用解码算法对图像数据块进行解码，得到解码后的序列帧图像。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种动画播放方法，所述方法包括：
将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
2.根据权利要求1所述的方法，其特征在于，所述根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画的步骤，包括：
根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；
将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
3.根据权利要求2所述的方法，其特征在于，所述根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值的步骤，包括：
获取所述关键帧动画的显示时长；
根据所述序列帧图像中各个帧图像数据的顺序以及所述显示时长，确定所述每一帧对应的帧图像数据的显示时刻；
根据所述显示时刻设置所述关键帧动画中各个关键帧的触发百分比值。
4.根据权利要求2所述的方法，其特征在于，所述将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画的步骤，包括：
创建各所述Blob格式的图片文件对象的请求链接；
将各所述帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
5.根据权利要求1至4任意一项所述的方法，其特征在于，所述将动态图像文件分解为序列帧图像的步骤，包括：
根据所述动态图像文件的文件类型确定与所述动态图像文件的解码算法；
解析所述动态图像文件，获得所述动态图像文件中的图像数据块；
利用所述解码算法对所述图像数据块进行解码，得到解码后的序列帧图像。
6.一种动画播放装置，其特征在于，所述装置包括：
图像数据获取模块，用于将动态图像文件分解为序列帧图像，并获取每一帧对应的帧图像数据；
图像编码获取模块，用于对各所述帧图像数据进行压缩，并将压缩后的帧图像数据转换为base64格式的图像数据；
关键帧动画生成模块，用于将各所述base64格式的图像数据转换为Blob格式的图片文件对象，根据各所述Blob格式的图片文件对象生成基于层叠样式表的关键帧动画；
动画播放模块，用于在接收到基于网页页面发出的动图加载请求时，将所述关键帧动画加载至对应的网页页面中。
7.根据权利要求6所述的装置，其特征在于，所述关键帧动画生成模块，用于：根据所述序列帧图像中各个帧图像数据的顺序，设置关键帧动画中各个关键帧的触发百分比值；将与各所述帧图像数据对应的Blob格式的图片文件对象分别设置为各关键帧的图像样式，得到关键帧动画。
8.根据权利要求7所述的装置，其特征在于，所述关键帧动画生成模块，用于：创建各所述Blob格式的图片文件对象的请求链接；将各所述帧图像数据对应的请求链接分别设置为各关键帧的图片样式，得到关键帧动画。
9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至5中任一项所述方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至5中任一项所述的方法的步骤。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910881938.1A CN110647703A (zh) | 2019-09-18 | 2019-09-18 | 动画播放方法、装置、计算机设备和存储介质 |
| PCT/CN2019/118265 WO2021051597A1 (zh) | 2019-09-18 | 2019-11-14 | 动画播放方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910881938.1A CN110647703A (zh) | 2019-09-18 | 2019-09-18 | 动画播放方法、装置、计算机设备和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110647703A true CN110647703A (zh) | 2020-01-03 |
Family
ID=69010793
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910881938.1A Pending CN110647703A (zh) | 2019-09-18 | 2019-09-18 | 动画播放方法、装置、计算机设备和存储介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN110647703A (zh) |
| WO (1) | WO2021051597A1 (zh) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111163358A (zh) * | 2020-01-07 | 2020-05-15 | 广州虎牙科技有限公司 | Gif图像生成方法、装置、服务器及存储介质 |
| CN111447219A (zh) * | 2020-03-26 | 2020-07-24 | 平安医疗健康管理股份有限公司 | 图像显示方法及装置、存储介质、计算机设备 |
| CN111954006A (zh) * | 2020-06-30 | 2020-11-17 | 深圳点猫科技有限公司 | 一种用于移动端的跨平台视频播放实现方法及装置 |
| CN112256990A (zh) * | 2020-09-01 | 2021-01-22 | 北京沃东天骏信息技术有限公司 | 一种图像处理方法及装置、计算机可读存储介质 |
| CN112380379A (zh) * | 2020-11-18 | 2021-02-19 | 北京字节跳动网络技术有限公司 | 歌词特效展示方法、装置、电子设备及计算机可读介质 |
| CN112435313A (zh) * | 2020-11-10 | 2021-03-02 | 北京百度网讯科技有限公司 | 播放帧动画的方法、装置、电子设备及可读存储介质 |
| CN112802168A (zh) * | 2021-01-26 | 2021-05-14 | 广州欢网科技有限责任公司 | 动画生成方法、装置及电视终端 |
| CN113496534A (zh) * | 2020-03-20 | 2021-10-12 | 阿里巴巴集团控股有限公司 | 动态位图合成方法、装置、电子设备及计算机存储介质 |
| CN113989425A (zh) * | 2021-12-24 | 2022-01-28 | 北京搜狐新动力信息技术有限公司 | 一种帧动画播放方法及装置、存储介质及电子设备 |
| CN113986438A (zh) * | 2021-10-30 | 2022-01-28 | 深圳市快易典教育科技有限公司 | 动画的加载方法、系统、装置及计算机可读存储介质 |
| CN114143490A (zh) * | 2021-11-29 | 2022-03-04 | 云门(深圳)技术有限公司 | 一种在网页中预览sdi视频信号的方法 |
| CN114880613A (zh) * | 2022-05-12 | 2022-08-09 | 苏州轻棹科技有限公司 | 一种图像播放处理方法 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007123470A2 (en) * | 2006-04-26 | 2007-11-01 | Momail Ab | Method and apparatus for adapting electronic mail |
| CN101739442A (zh) * | 2008-11-21 | 2010-06-16 | 国际商业机器公司 | 用于显示信息的系统和方法 |
| WO2010147454A1 (en) * | 2009-06-16 | 2010-12-23 | Emanual System Sdn Bhd | System and method of binary data storage and management in database management systems |
| CN107122486A (zh) * | 2017-05-09 | 2017-09-01 | 中国科学院计算机网络信息中心 | 一种支持blob的多元大数据融合方法和系统 |
| CN107247544A (zh) * | 2015-10-01 | 2017-10-13 | Sap欧洲公司 | 使用交互图像优化软件应用用户界面性能 |
| JP2017200059A (ja) * | 2016-04-27 | 2017-11-02 | 株式会社エムティーアイ | 動画生成・送信方法、動画生成・送信システム、及び動画再生プログラム |
| CN108881997A (zh) * | 2018-07-24 | 2018-11-23 | 北京奇艺世纪科技有限公司 | 动画文件生成及播放方法、装置和系统 |
| CN109547533A (zh) * | 2018-10-26 | 2019-03-29 | 深圳点猫科技有限公司 | 一种教育系统的html5移动端图片上传预处理方法及电子设备 |
-
2019
- 2019-09-18 CN CN201910881938.1A patent/CN110647703A/zh active Pending
- 2019-11-14 WO PCT/CN2019/118265 patent/WO2021051597A1/zh active Application Filing
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007123470A2 (en) * | 2006-04-26 | 2007-11-01 | Momail Ab | Method and apparatus for adapting electronic mail |
| CN101739442A (zh) * | 2008-11-21 | 2010-06-16 | 国际商业机器公司 | 用于显示信息的系统和方法 |
| WO2010147454A1 (en) * | 2009-06-16 | 2010-12-23 | Emanual System Sdn Bhd | System and method of binary data storage and management in database management systems |
| CN107247544A (zh) * | 2015-10-01 | 2017-10-13 | Sap欧洲公司 | 使用交互图像优化软件应用用户界面性能 |
| JP2017200059A (ja) * | 2016-04-27 | 2017-11-02 | 株式会社エムティーアイ | 動画生成・送信方法、動画生成・送信システム、及び動画再生プログラム |
| CN107122486A (zh) * | 2017-05-09 | 2017-09-01 | 中国科学院计算机网络信息中心 | 一种支持blob的多元大数据融合方法和系统 |
| CN108881997A (zh) * | 2018-07-24 | 2018-11-23 | 北京奇艺世纪科技有限公司 | 动画文件生成及播放方法、装置和系统 |
| CN109547533A (zh) * | 2018-10-26 | 2019-03-29 | 深圳点猫科技有限公司 | 一种教育系统的html5移动端图片上传预处理方法及电子设备 |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111163358A (zh) * | 2020-01-07 | 2020-05-15 | 广州虎牙科技有限公司 | Gif图像生成方法、装置、服务器及存储介质 |
| CN113496534B (zh) * | 2020-03-20 | 2024-04-19 | 阿里巴巴集团控股有限公司 | 动态位图合成方法、装置、电子设备及计算机存储介质 |
| CN113496534A (zh) * | 2020-03-20 | 2021-10-12 | 阿里巴巴集团控股有限公司 | 动态位图合成方法、装置、电子设备及计算机存储介质 |
| CN111447219A (zh) * | 2020-03-26 | 2020-07-24 | 平安医疗健康管理股份有限公司 | 图像显示方法及装置、存储介质、计算机设备 |
| CN111447219B (zh) * | 2020-03-26 | 2023-02-03 | 深圳平安医疗健康科技服务有限公司 | 图像显示方法及装置、存储介质、计算机设备 |
| CN111954006A (zh) * | 2020-06-30 | 2020-11-17 | 深圳点猫科技有限公司 | 一种用于移动端的跨平台视频播放实现方法及装置 |
| CN112256990A (zh) * | 2020-09-01 | 2021-01-22 | 北京沃东天骏信息技术有限公司 | 一种图像处理方法及装置、计算机可读存储介质 |
| CN112256990B (zh) * | 2020-09-01 | 2023-09-26 | 北京沃东天骏信息技术有限公司 | 一种图像处理方法及装置、计算机可读存储介质 |
| CN112435313A (zh) * | 2020-11-10 | 2021-03-02 | 北京百度网讯科技有限公司 | 播放帧动画的方法、装置、电子设备及可读存储介质 |
| CN112380379A (zh) * | 2020-11-18 | 2021-02-19 | 北京字节跳动网络技术有限公司 | 歌词特效展示方法、装置、电子设备及计算机可读介质 |
| CN112802168A (zh) * | 2021-01-26 | 2021-05-14 | 广州欢网科技有限责任公司 | 动画生成方法、装置及电视终端 |
| CN113986438B (zh) * | 2021-10-30 | 2024-01-30 | 深圳市快易典教育科技有限公司 | 动画的加载方法、系统、装置及计算机可读存储介质 |
| CN113986438A (zh) * | 2021-10-30 | 2022-01-28 | 深圳市快易典教育科技有限公司 | 动画的加载方法、系统、装置及计算机可读存储介质 |
| CN114143490A (zh) * | 2021-11-29 | 2022-03-04 | 云门(深圳)技术有限公司 | 一种在网页中预览sdi视频信号的方法 |
| CN113989425A (zh) * | 2021-12-24 | 2022-01-28 | 北京搜狐新动力信息技术有限公司 | 一种帧动画播放方法及装置、存储介质及电子设备 |
| CN113989425B (zh) * | 2021-12-24 | 2022-04-26 | 北京搜狐新动力信息技术有限公司 | 一种帧动画播放方法及装置、存储介质及电子设备 |
| CN114880613A (zh) * | 2022-05-12 | 2022-08-09 | 苏州轻棹科技有限公司 | 一种图像播放处理方法 |
| CN114880613B (zh) * | 2022-05-12 | 2024-03-22 | 苏州轻棹科技有限公司 | 一种图像播放处理方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2021051597A1 (zh) | 2021-03-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110647703A (zh) | 动画播放方法、装置、计算机设备和存储介质 | |
| CN108683826B (zh) | 视频数据处理方法、装置、计算机设备和存储介质 | |
| WO2020248948A1 (zh) | 动画文件处理方法、装置、计算机可读存储介质和计算机设备 | |
| JP2012529115A (ja) | ウェブページ最適化 | |
| CN112070863A (zh) | 动画文件处理方法、装置、计算机可读存储介质和计算机设备 | |
| CN111506844B (zh) | 页面处理方法、设备及计算机存储介质 | |
| CN112689197B (zh) | 一种文件格式转换方法、装置、以及计算机存储介质 | |
| US20240040147A1 (en) | Data processing method and apparatus, computer device, and storage medium | |
| CN112650957B (zh) | 图像显示方法、装置、计算机可读存储介质和计算机设备 | |
| CN106293542B (zh) | 一种文件解压缩的方法及装置 | |
| CN105812813B (zh) | 一种授课视频压缩、播放方法及压缩、播放装置 | |
| CN111064986B (zh) | 带透明度的动画数据发送方法、播放方法和计算机设备 | |
| KR100892433B1 (ko) | 이동통신 단말기를 이용한 영상 중계 시스템 및 그 방법 | |
| CN112367521B (zh) | 显示屏内容分享方法、装置、计算机设备和存储介质 | |
| CN114663822A (zh) | 伺服运动轨迹生成方法及装置 | |
| CN112151069B (zh) | 语音数据处理方法、装置、计算机设备和存储介质 | |
| CN112669858A (zh) | 一种数据处理方法及相关装置 | |
| KR20040054115A (ko) | 이동 통신 단말기의 섬네일 이미지 생성 및 브라우징 방법 | |
| CA3118185A1 (en) | Methods, apparatuses, computer programs and computer-readable media for scalable video coding and transmission | |
| KR102377449B1 (ko) | 다중 코덱 기반의 전방위 몰입형 비디오에 대한 디코딩 방법 및 디코딩 장치 | |
| KR101649403B1 (ko) | 어플리케이션 로딩 장치 및 방법 | |
| CN115118385A (zh) | 解码方法及装置 | |
| CN113672761B (zh) | 视频处理方法及装置 | |
| CN112188213B (zh) | 编码方法、装置、计算机设备和存储介质 | |
| JP7130050B2 (ja) | 安全かつデバイス間で一貫性のあるビデオ圧縮 |
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 |