WO2021051597A1

WO2021051597A1 - Animation playing method and apparatus, and computer device and storage medium

Info

Publication number: WO2021051597A1
Application number: PCT/CN2019/118265
Authority: WO
Inventors: 孙葛亮; 顾研; 袁超文
Original assignee: 平安科技（深圳）有限公司
Priority date: 2019-09-18
Filing date: 2019-11-14
Publication date: 2021-03-25
Also published as: CN110647703A

Abstract

An animation playing method, comprising: decomposing a dynamic image file into a sequence frame image, and acquiring frame image data corresponding to each frame; compressing each piece of frame image data, and converting the compressed frame image data to image data of a base64 format; converting the image data of the base64 format to a picture file object of a Blob format, and generating, according to each picture file object of the Blob format, a key frame animation based on a cascading style sheet; and when an animation loading request sent based on a webpage is received, loading the key frame animation into the corresponding webpage.

Description

Animation playing method, device, computer equipment and storage medium

This application claims the priority of a Chinese patent application filed with the Chinese Patent Office on September 18, 2019. The application number is 2019108819381 and the application name is "animation playback method, device, computer equipment and storage medium". The entire content is incorporated by reference. In this application.

Technical field

This application relates to an animation playback method, device, computer equipment and storage medium.

Background technique

With the development of web page technology, more and more web pages display dynamic images to achieve page animation effects and enrich web page content. At present, common dynamic pictures are graphics interchange format (Graphics Interchange Format, GIF) images. GIF image files store multiple images. These images are read out one by one and displayed on the screen to form the effect of the dynamic picture. , To realize the display of simple animation; however, the inventor realized that when HTML5-based web pages play GIF images to achieve animation effects, due to the large dynamic image files, it often takes a long time to load GIF images during the web page loading process , Resulting in slow animation playback speed and poor fluency.

Summary of the invention

According to various embodiments disclosed in the present application, an animation playback method, device, computer equipment, and storage medium are provided.

An animation playback method includes:

Decompose the dynamic image file into a sequence of frame images, and obtain the frame image data corresponding to each frame;

Compressing each of the frame image data, and converting the compressed frame image data into base64 format image data;

Converting each of the image data in the base64 format into a picture file object in the Blob format;

Generate key frames based on the cascading style sheet for each of the picture file objects in the Blob format one by one to obtain the key frame animation; and

When receiving the animation loading request based on the web page, the key frame animation is loaded into the corresponding web page.

An animation playback device, the device includes:

The image data acquisition module is used to decompose the dynamic image file into a sequence of frame images and acquire the frame image data corresponding to each frame;

An image encoding acquisition module, used to compress each of the frame image data, and convert the compressed frame image data into base64 format image data;

A key frame animation generating module, used to convert each of the image data in the base64 format into a picture file object in the Blob format; generate the key frames based on the cascading style sheet one by one from the picture file objects in the Blob format to obtain the key frames Animation; and

The animation playing module is used to load the key frame animation to the corresponding web page when receiving a moving image loading request based on the web page.

A computer device, including a memory and one or more processors, the memory stores computer readable instructions, and when the computer readable instructions are executed by the processor, the one or more processors execute The following steps:

Generate key frames based on the cascading style sheet one by one of the picture file objects in the Blob format to obtain the key frame animation; and

One or more non-volatile computer-readable storage media storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors perform the following steps:

The details of one or more embodiments of the present application are set forth in the following drawings and description. Other features and advantages of this application will become apparent from the description, drawings and claims.

Description of the drawings

In order to more clearly describe the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative work, other drawings can be obtained from these drawings.

Fig. 1 is an application scenario diagram of an animation playing method according to one or more embodiments.

Figure 2 is a block diagram of a computer device according to one or more embodiments.

Fig. 3 is a schematic flowchart of an animation playing method according to one or more embodiments.

Fig. 4 is a schematic flowchart of an animation playing method in another embodiment.

Fig. 5 is a block diagram of an animation playing method and apparatus according to one or more embodiments.

detailed description

In order to make the technical solutions and advantages of the present application clearer, the following further describes the present application in detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain the present application, and are not used to limit the present application.

Fig. 1 is an application environment diagram of an animation playing method in an embodiment. The animation playing method is applied to computer equipment, and the computer equipment may be a server. As shown in Fig. 1, taking the computer device as the server 102 as an example, the server 102 obtains a dynamic image file that originally needs to be played, such as a GIF image file, and the server 102 decomposes the GIF image file into frame-by-frame image data. After the frame image data is compressed, the compressed image data is converted into image data in base64 format, and then the image data in base64 format is converted into a picture file object in Blob format, and finally a stacking style sheet is generated based on the picture file object (Cascading Style Sheets, CSS) key frame animation, when the user accesses the web page through the browser, the web page can directly load the key frame animation based on CSS to realize the playback of image file objects corresponding to multiple frame image data to form For dynamic animation, this method converts the image data of each frame in a dynamic image file with a large file volume into a small image file object in Blob format, and uses image coding to encode each frame in a CSS-based key frame. Frame images are played to achieve animation effects, so that the animation loading speed and the smoothness of animation playback are improved.

Fig. 2 is a schematic diagram of the internal structure of a computer device in an embodiment. As shown in Figure 2, the computer device includes a processor, a memory, a network interface, and a database connected through a system bus. The processor of the computer device is used to provide calculation and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database of the computer equipment is used to store different data information such as GIF image data and image coding. The network interface of the computer device is used to communicate with an external terminal through a network connection. The computer program is executed by the processor to realize an animation playback method.

Those skilled in the art can understand that the illustrations shown in FIG. 1 and FIG. 2 are only part of the scenarios related to the solution of the present application, and do not constitute a limitation on the application environment of the present application.

In one of the embodiments, as shown in FIG. 3, an animation playback method is provided. Taking the method applied to the server in FIG. 1 as an example for description, the method includes the following steps:

Step 202: Decompose the dynamic image file into a sequence of frame images, and obtain frame image data corresponding to each frame.

In this step, the dynamic image file can be a GIF (Graphics Interchange Format, image interchange format) image file, flash image file, etc.; the dynamic image file stores multiple image data, and the dynamic image file displays these image data one by one. Read the display to form an animation; specifically, the server obtains a sequence of frame images from the dynamic image file by analyzing the dynamic image file, and extracts the frame image data corresponding to each frame image.

Step 204: Compress each frame of image data, and convert the compressed frame of image data into base64 format image data.

In this step, base64 is the encoding method used to transmit 8bit byte codes, and the Tiantu cave data in base64 format is a string of string codes that can be directly written into HTML web pages or Cascading Style Sheets (CSS) . After obtaining the frame image data, the server can compress the frame image data to reduce the data volume of the frame image data, and then transcode the frame image data into base64 format image encoding.

Specifically, after the server obtains the frame image data corresponding to each frame in the dynamic image file, it can compress the frame image data of each frame through the image processing compression tool under the condition that the picture is not distorted, so as to reduce the The file volume of one frame of frame image data; after the frame image data is compressed, the server uses the Webpack packaging tool to transcode the compressed frame image data into base64 format image encoding.

Step 206: Convert the image data in each base64 format into a picture file object in the Blob format, and generate a key frame animation based on the cascading style sheet according to the picture file object in each Blob format.

Among them, the Blob (Binary Large Object) format is a binary type of large object; the server converts the image encoding into a text data string in the Blob format to obtain the image file object, which further compresses the image data while ensuring the accuracy of the image remains unchanged. volume.

Wherein, the step of generating a key frame animation based on the cascading style sheet according to the picture file objects in each Blob format includes generating key frames based on the cascading style sheet for each picture file object in the Blob format one by one to obtain the key frame animation. Specifically, after the server further compresses the image data in the base64 format into the image file object in the Blob format, the image file object corresponding to the frame image data of each frame is generated one by one based on the key frame of the cascading style sheet to form the key frame animation ; Subsequent loading of the image file object with a small file size when loading the key frame, while maintaining the image quality and high precision without affecting the fluency, ensuring the image loading and rendering, and improving the fluency of animation playback.

Step 208: When receiving the animation loading request based on the web page, load the key frame animation to the corresponding web page.

When receiving the web page loading request sent by the client, the server responds to the loading request. When the web page is loaded, it directly loads the CSS-based key frame animation, so that the original dynamic image file is performed in the form of CSS key frame animation Play.

In the above animation playback method, the dynamic image file is decomposed into a sequence of frame images to obtain the frame image data corresponding to each frame, and the image data of each frame is compressed, and the compressed frame image data is converted into base64 format. After the image data, the image data in the base64 format is converted into the image file object in the Blob format, and the key frame animation based on the cascading style sheet is generated according to the image file object in the Blob format, and then the animation based on the web page is received. When loading the request, the key frame animation is loaded into the corresponding web page. This method converts the frame image data of each frame in the dynamic image file with a large file volume into a small Blob format image file object to realize the preservation of the image At the same time of accuracy, the file volume is compressed, and the image file object is played to each frame of image in the form of CSS-based key frames to achieve animation effects, so that the animation loading speed and the smoothness of animation playback are improved.

In one of the embodiments, the step of generating key frames based on the cascading style sheet for each Blob format picture file object to obtain the key frame animation includes: setting the key frame according to the sequence of each frame image data in the sequence of frame images The trigger percentage value of each key frame in the animation; the Blob format picture file object corresponding to the image data of each frame is set as the image style of each key frame to obtain the key frame animation.

Among them, the trigger percentage value of the key frame refers to different time nodes in the key frame animation; setting the trigger percentage value of each key frame also defines that different key frames are displayed at different percentage values (time nodes).

Specifically, the server can determine the display order of the image data of each frame according to the sequence of the image data of each frame in the sequence of frame images, so as to set the trigger percentage value of the key frame according to the display order of the image data of each frame, thereby changing The image code corresponding to the frame image data is written into the corresponding key frame as the element state, and the picture style of each key frame in the key frame animation is set, so that a frame image data is displayed at a trigger percentage value (time node) to realize animation playback effect.

In one of the embodiments, the step of setting the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence frame image includes: obtaining the display duration of the key frame animation; The sequence of the frame image data and the display duration determine the display time of the frame image data corresponding to each frame; the trigger percentage value of each key frame in the key frame animation is set according to the display time.

The display duration refers to the time it takes for the key frame animation to be played once. In one embodiment, the server may obtain the playing time of the dynamic image file and determine it as the display duration of the key frame animation, or the server may obtain the preset key frame animation The frame rate and the number of frame image data determine the display duration of the key frame animation.

Specifically, after the server obtains the display duration of the key frame animation, it can determine the display time of each frame of image data according to the playback time and the sequence of each frame of image data, and then set the key corresponding to each frame of image data according to the display time. The trigger percentage value of the frame.

In one of the embodiments, the step of generating a key frame animation based on the cascading style sheet according to the sequence between the frame image data and each picture file object includes: creating a request link for each picture file object in the Blob format; The corresponding request links are respectively set as the picture style of each key frame, and the key frame animation is obtained.

In this embodiment, the request link of the picture file object refers to the request address of the picture file object; after the server converts the image code into a text data string in the Blob format, it saves the picture file object in the Blob format and generates this The request address Blob URL of the picture file object is written into the corresponding key frame as the element state of the request address of the picture file object to realize the setting of the picture style of each key frame in the key frame animation. The length of the Blob URL is generally relatively short. When displaying large pictures, compared to the base64 format image encoding that directly uses the frame image data, the use of the request address of the picture file object can effectively increase the loading speed of the picture, thereby improving the loading speed and smoothness of the animation degree.

In one of the embodiments, as shown in Fig. 4, an animation playback method is provided. Taking the method applied to the server in Fig. 1 as an example for description, the method includes the following steps:

Step 302: Determine the decoding algorithm of the dynamic image file according to the file type of the dynamic image file;

Step 304: Parse the dynamic image file to obtain image data blocks in the dynamic image file;

Step 306: Use a decoding algorithm to decode the image data block to obtain a decoded sequence of frame images;

Step 308: Obtain frame image data corresponding to each frame;

Step 310: Compress each frame of image data, and convert the compressed frame of image data into base64 format image data;

Step 312: Convert each image data in base64 format into a picture file object in Blob format;

Step 314: Obtain the display duration of the key frame animation;

Step 316: Determine the display time of the frame image data corresponding to each frame according to the sequence and display duration of each frame image data in the sequence of frame images;

Step 318: Set the trigger percentage value of each key frame in the key frame animation according to the display moment;

Step 320: Create a request link for each Blob format picture file object, and set the request link corresponding to each frame of image data to the picture style of each key frame to obtain the key frame animation;

Step 322: When receiving the animation loading request based on the web page, load the key frame animation to the corresponding web page.

In this embodiment, by decomposing the dynamic image file frame by frame into frame image data, and compressing the frame image data of each frame, the compressed frame image data is converted from the frame image data of the ordinary picture format, such as jpg format— >base64 format image encoding—>Blob format image file object conversion, the finally obtained Blob format image file object maintains the accuracy of the image, while the file volume is compressed, so that the image file object corresponding to the frame image data is used as an element The state is written into the corresponding key frame to realize the setting of the picture style of each key frame in the key frame animation, so that a frame image data is displayed at a trigger percentage value (time node) to realize the animation playback effect. When the user accesses the web through a browser The loading speed of the animation in the web page is increased while the web page is being used, and the clarity and smoothness of the animation are also improved.

In one of the embodiments, the step of decomposing the dynamic image file into a sequence of frame images and obtaining the frame image data corresponding to each frame includes the following steps: determining the decoding algorithm for the dynamic image file according to the file type of the dynamic image file; Analyze the dynamic image file to obtain the image data block in the dynamic image file; use the decoding algorithm to decode the image data block to obtain the decoded sequence frame image.

In this embodiment, the image data block is the data block that stores the image data; the server determines the decoding algorithm of the dynamic image file through the type of the dynamic image file, and the decoding process is to use the decoding algorithm to encode and compress the image data block in the dynamic image file. After decoding, the decoded data stream is obtained, that is, multiple consecutive frame images are obtained, so that the frame image data corresponding to each frame is obtained in the decoded data stream.

Taking the dynamic image file as a GIF image file as an example, the structure of the GIF image file includes three parts: the file header, the image interchange format data stream, and the file format terminator. Among them, the image interchange format data stream is the image data that stores the image data. Block, and obtained by encoding using the LZW compression algorithm. After determining that the file type of the dynamic image file is a GIF image, the server determines that the decoding algorithm is the LZW decoding algorithm, and uses the LZW decoding algorithm to decode the image interchange format data stream in the GIF dynamic image file to obtain the GIF dynamic image file Sequence of frame images. By decomposing the GIF dynamic image file into a sequence of frame images, the image of each frame in the GIF dynamic image file is obtained, so that the subsequent realization of the GIF dynamic image file is displayed in the form of CSS key frame animation.

It should be understood that although the various steps in the flowcharts of FIG. 3 and FIG. 4 are displayed in sequence as indicated by the arrows, these steps are not necessarily performed in sequence in the order indicated by the arrows. Unless there is a clear description in this article, there is no strict order for the execution of these steps, and these steps can be executed in other orders. Moreover, at least part of the steps in Figure 3 and Figure 4 may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. These sub-steps or The execution order of the stages is not necessarily carried out sequentially, but may be executed alternately or alternately with at least a part of other steps or sub-steps or stages of other steps.

In one of the embodiments, as shown in FIG. 5, an animation playback device is provided, including: a frame image data acquisition module 410, an image encoding acquisition module 420, a key frame animation generation module 430, and an animation playback module 440, wherein:

The image data acquisition module 410 is used for decomposing the dynamic image file into a sequence of frame images, and acquiring frame image data corresponding to each frame;

The image encoding acquisition module 420 is used to compress each frame of image data and convert the compressed frame image data into base64 format image data;

The key frame animation generating module 430 is used to convert the image data of each base64 format into the picture file object of the Blob format; generate the key frame based on the cascading style sheet one by one of the picture file objects of each Blob format to obtain the key frame animation; and

The animation playing module 440 is configured to load the key frame animation into the corresponding web page when receiving the animation loading request based on the web page.

In one of the embodiments, the key frame animation generation module is used to set the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence frame image; the Blob format corresponding to each frame image data The image file object of is set to the image style of each key frame, and the key frame animation is obtained.

In one of the embodiments, the key frame animation generation module is also used to obtain the display duration of the key frame animation; according to the sequence and display duration of each frame image data in the sequence of frame images, the display of the frame image data corresponding to each frame is determined Time: Set the trigger percentage value of each key frame in the key frame animation according to the display time.

In one of the embodiments, the key frame animation generation module is also used to create a request link for each Blob format picture file object; the request link corresponding to each frame of image data is set to the picture style of each key frame to obtain the key frame Animation.

In one of the embodiments, the image data acquisition module is used to determine the decoding algorithm of the dynamic image file according to the file type of the dynamic image file; parse the dynamic image file to obtain the image data block in the dynamic image file; The data block is decoded, and the decoded sequence frame image is obtained.

For the specific limitation of the animation playback device, please refer to the above limitation of the animation playback method, which will not be repeated here. The various modules in the above-mentioned animation playback device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules may be embedded in the form of hardware or independent of the processor in the computer equipment, or may be stored in the memory of the computer equipment in the form of software, so that the processor can call and execute the operations corresponding to the above-mentioned modules.

In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as shown in FIG. 2. The computer equipment includes a processor, a memory, a network interface, and a database connected through a system bus. Among them, the processor of the computer device is used to provide calculation and control capabilities. The memory of the computer device includes a non-volatile computer-readable storage medium and internal memory. The non-volatile computer-readable storage medium stores an operating system, computer-readable instructions, and a database. The internal memory provides an environment for the operation of the operating system and computer-readable instructions in the non-volatile computer-readable storage medium. The database of the computer equipment is used to store dynamic image files, image data and other data. The network interface of the computer device is used to communicate with an external terminal through a network connection. The computer readable instruction is executed by the processor to realize an animation playback method.

Those skilled in the art can understand that the structure shown in FIG. 2 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may Including more or fewer parts than shown in the figure, or combining some parts, or having a different arrangement of parts.

A computer device includes a memory and one or more processors. The memory stores computer-readable instructions. When the computer-readable instructions are executed by the processor, the one or more processors perform the following steps:

Compress each frame of image data, and convert the compressed frame image data into base64 format image data;

Convert image data in base64 format into picture file objects in Blob format; generate key frames based on cascading style sheets one by one from picture file objects in Blob format to obtain key frame animation; and

In one of the embodiments, the processor executes computer-readable instructions to realize the step of generating key frames based on the cascading style sheet for each Blob format picture file object one by one to obtain the key frame animation, which specifically implements the following steps: according to the sequence of frame images Set the trigger percentage value of each key frame in the key frame animation in the sequence of each frame of image data in the key frame animation; set the Blob format picture file object corresponding to each frame of image data to the image style of each key frame to obtain the key frame animation.

In one of the embodiments, the processor executes computer-readable instructions to implement the step of setting the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images, which specifically includes the following steps: obtaining key frames Animation display time; according to the sequence and display duration of each frame image data in the sequence of frame images, determine the display time of the frame image data corresponding to each frame; set the trigger percentage value of each key frame in the key frame animation according to the display time.

In one of the embodiments, the processor executes computer-readable instructions to implement the steps of setting the Blob format picture file object corresponding to each frame of image data to the image style of each key frame to obtain the key frame animation, which specifically implements the following steps : Create a request link for each Blob format picture file object; set the request link corresponding to each frame of image data to the picture style of each key frame to obtain the key frame animation.

In one of the embodiments, the processor executes computer-readable instructions to realize the step of decomposing the dynamic image file into a sequence of frame images, specifically implementing the following steps: determining the file type of the dynamic image file and the decoding algorithm of the dynamic image file; analyzing the dynamic image file The image file obtains the image data block in the dynamic image file; the image data block is decoded by the decoding algorithm to obtain the decoded sequence frame image.

In one of the embodiments, the computer-readable instructions are executed by the processor to generate key frames based on the cascading style sheet for each picture file object in the Blob format, and when the key frame animation is obtained, the following steps are specifically implemented: according to the sequence Set the sequence of each frame of image data in the frame image, set the trigger percentage value of each key frame in the key frame animation; set the Blob format picture file object corresponding to each frame of image data to the image style of each key frame to obtain the key frame Animation.

In one of the embodiments, when the computer-readable instruction is executed by the processor, the step of setting the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images is also implemented, which specifically implements the following steps: Obtain the display duration of the key frame animation; determine the display time of the frame image data corresponding to each frame according to the sequence and display duration of each frame image data in the sequence frame image; set the trigger percentage of each key frame in the key frame animation according to the display time value.

In one of the embodiments, the computer-readable instructions are executed by the processor to implement the steps of setting the Blob format picture file object corresponding to each frame of image data to the image style of each key frame to obtain the key frame animation. The specific implementation is as follows Steps: Create request links for picture file objects in each Blob format; set the request links corresponding to each frame of image data to the picture style of each key frame to obtain the key frame animation.

In one of the embodiments, when the computer-readable instructions are executed by the processor, the step of decomposing the dynamic image file into a sequence of frame images is also implemented, and the following steps are specifically implemented: determining the file type of the dynamic image file and the decoding algorithm of the dynamic image file Analyze the dynamic image file to obtain the image data block in the dynamic image file; use the decoding algorithm to decode the image data block to obtain the decoded sequence frame image.

A person of ordinary skill in the art can understand that all or part of the processes in the methods of the above-mentioned embodiments can be implemented by instructing relevant hardware through computer-readable instructions. The computer-readable instructions can be stored in a non-volatile computer. In a readable storage medium, when the computer-readable instructions are executed, they may include the processes of the above-mentioned method embodiments. Wherein, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and/or volatile memory. Non-volatile memory may include read only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not a limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain Channel (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

The technical features of the above embodiments can be combined arbitrarily. In order to make the description concise, all possible combinations of the technical features in the above embodiments are not described. However, as long as there is no contradiction in the combination of these technical features, they should be It is considered as the range described in this specification.

The above examples only express a few implementation modes of the present application, and the description is relatively specific and detailed, but it should not be understood as a limitation on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of this application, several modifications and improvements can be made, and these all fall within the protection scope of this application. Therefore, the scope of protection of the patent of this application shall be subject to the appended claims.

Claims

An animation playback method, including:

Decompose the dynamic image file into a sequence of frame images, and obtain the frame image data corresponding to each frame;

Compressing each of the frame image data, and converting the compressed frame image data into base64 format image data;

Converting each of the image data in the base64 format into a picture file object in the Blob format;

Generate key frames based on the cascading style sheet one by one of the picture file objects in the Blob format to obtain the key frame animation; and

When receiving the animation loading request based on the web page, the key frame animation is loaded into the corresponding web page.
The method according to claim 1, wherein the generating key frames based on a cascading style sheet one by one of the picture file objects in the Blob format to obtain the key frame animation comprises:

Set the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images; and

The picture file objects in the Blob format corresponding to each of the frame image data are respectively set as the image styles of each key frame to obtain the key frame animation.
The method according to claim 2, wherein the setting the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images comprises:

Acquiring the display duration of the key frame animation;

Determining the display time of the frame image data corresponding to each frame according to the sequence of each frame image data in the sequence of frame images and the display duration; and

The trigger percentage value of each key frame in the key frame animation is set according to the display moment.
The method according to claim 2, wherein the setting the picture file object in the Blob format corresponding to each of the frame image data to the image style of each key frame respectively to obtain the key frame animation comprises:

Creating a request link for each of the image file objects in the Blob format; and

The request link corresponding to each frame image data is respectively set as the picture style of each key frame to obtain the key frame animation.
The method according to any one of claims 1 to 4, wherein the decomposing a dynamic image file into a sequence of frame images comprises:

Determining a decoding algorithm for the dynamic image file according to the file type of the dynamic image file;

Parse the dynamic image file to obtain image data blocks in the dynamic image file; and

Use the decoding algorithm to decode the image data block to obtain a decoded sequence of frame images.
An animation playback device, including:

The image data acquisition module is used to decompose the dynamic image file into a sequence of frame images and acquire the frame image data corresponding to each frame;

An image encoding acquisition module, used to compress each of the frame image data, and convert the compressed frame image data into base64 format image data;

A key frame animation generating module, used to convert each of the image data in the base64 format into a picture file object in the Blob format; generate the key frames based on the cascading style sheet one by one from the picture file objects in the Blob format to obtain the key frames Animation; and

The animation playing module is used to load the key frame animation to the corresponding web page when receiving a moving image loading request based on the web page.
The device according to claim 6, wherein the key frame animation generating module is configured to:

Set the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images; and

The picture file objects in the Blob format corresponding to each of the frame image data are respectively set as the image styles of each key frame to obtain the key frame animation.
The device according to claim 7, wherein the key frame animation generating module is specifically configured to:

Acquiring the display duration of the key frame animation;

Determining the display time of the frame image data corresponding to each frame according to the sequence of each frame image data in the sequence of frame images and the display duration; and

The trigger percentage value of each key frame in the key frame animation is set according to the display moment.
The device according to claim 7, wherein the key frame animation generating module is configured to:

Creating a request link for each of the image file objects in the Blob format; and

The request link corresponding to each frame image data is respectively set as the picture style of each key frame to obtain the key frame animation.
The device according to claim 6, wherein the image data acquisition module is specifically configured to:

Determining a decoding algorithm for the dynamic image file according to the file type of the dynamic image file;

Parse the dynamic image file to obtain image data blocks in the dynamic image file; and

Use the decoding algorithm to decode the image data block to obtain a decoded sequence of frame images.
A computer device includes a memory and one or more processors. The memory stores computer-readable instructions. When the computer-readable instructions are executed by the one or more processors, the one or more Each processor performs the following steps:

Decompose the dynamic image file into a sequence of frame images, and obtain the frame image data corresponding to each frame;

Compressing each of the frame image data, and converting the compressed frame image data into base64 format image data;

Converting each of the image data in the base64 format into a picture file object in the Blob format;

Generate key frames based on the cascading style sheet one by one of the picture file objects in the Blob format to obtain the key frame animation; and

When receiving the animation loading request based on the web page, the key frame animation is loaded into the corresponding web page.
The computer device according to claim 11, wherein the processor further executes the following steps when executing the computer-readable instruction:

Set the trigger percentage value of each key frame in the key frame animation according to the sequence of each frame image data in the sequence of frame images; and

The picture file objects in the Blob format corresponding to each of the frame image data are respectively set as the image styles of each key frame to obtain the key frame animation.
The computer device according to claim 12, wherein the processor further executes the following steps when executing the computer-readable instruction:

Acquiring the display duration of the key frame animation;

Determining the display time of the frame image data corresponding to each frame according to the sequence of each frame image data in the sequence of frame images and the display duration; and

The trigger percentage value of each key frame in the key frame animation is set according to the display moment.
The computer device according to claim 10, wherein the processor further executes the following steps when executing the computer-readable instruction:

Creating a request link for each of the image file objects in the Blob format;

The request link corresponding to each frame image data is respectively set as the picture style of each key frame to obtain the key frame animation.
The computer device according to claim 10, wherein the processor further executes the following steps when executing the computer-readable instruction:

Determining a decoding algorithm for the dynamic image file according to the file type of the dynamic image file;

Parse the dynamic image file to obtain image data blocks in the dynamic image file; and

Use the decoding algorithm to decode the image data block to obtain a decoded sequence of frame images.
One or more non-volatile computer-readable storage media storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors perform the following steps:

Decompose the dynamic image file into a sequence of frame images, and obtain the frame image data corresponding to each frame;

Compressing each of the frame image data, and converting the compressed frame image data into base64 format image data;

Converting each of the image data in the base64 format into a picture file object in the Blob format;

Generate key frames based on the cascading style sheet one by one of the picture file objects in the Blob format to obtain the key frame animation; and

When receiving the animation loading request based on the web page, the key frame animation is loaded into the corresponding web page.
The storage medium according to claim 16, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

According to the sequence of each frame image data in the sequence of frame images, setting the trigger percentage value of each key frame in the key frame animation;

The picture file objects in the Blob format corresponding to each of the frame image data are respectively set as the image styles of each key frame to obtain the key frame animation.
18. The storage medium of claim 17, wherein the following steps are further performed when the computer-readable instructions are executed by the processor:

Acquiring the display duration of the key frame animation;

Determining the display time of the frame image data corresponding to each frame according to the sequence of each frame image data in the sequence of frame images and the display duration;

The trigger percentage value of each key frame in the key frame animation is set according to the display moment.
The storage medium according to claim 16, wherein when the computer-readable instructions are executed by the processor, the following steps are further executed: creating a request link for each of the Blob format picture file objects;

The request link corresponding to each frame image data is respectively set as the picture style of each key frame to obtain the key frame animation.
The storage medium according to claim 16, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

Determining a decoding algorithm for the dynamic image file according to the file type of the dynamic image file;

Parse the dynamic image file to obtain image data blocks in the dynamic image file; and

Use the decoding algorithm to decode the image data block to obtain a decoded sequence of frame images.