Animation image playing control method and device, equipment, medium and program product

Abstract

The invention discloses an animation image playing control method and device, equipment, a medium and a program product, and relates to the technical field of multimedia, and the method comprises the steps: obtaining a to-be-controlled animation image, decoding the animation image, and obtaining a plurality of frame images corresponding to the animation image; allocating a frame identifier to each frame image, and generating a mapping relationship between each frame identifier and each frame image; displaying the animation image after the mapping relation is constructed in a display interface, wherein the display interface comprises an image playing control; and in response to a trigger operation for the image playing control, performing playing control on the animation image based on the mapping relationship, and updating a playing picture in the display interface. According to the technical scheme of the invention, the method can achieve the precise control of the frame level of the animation image, and greatly improves the auditing efficiency.

Description

Technical Field

[0001] This application relates to the field of multimedia technology, specifically to methods, devices, equipment, media, and program products for controlling the playback of animated images. Background Technology

[0002] In multimedia content production and review scenarios such as game art pipelines and UI animation review, a large amount of work involves viewing and analyzing animated images such as GIFs and WebP. Related technologies typically employ a timeline-based continuous automatic playback mode, which has weak user interaction control capabilities and generally lacks precise manipulation of individual frames. When users need to observe, compare, or annotate specific frames in detail, it is often difficult to pause at the target frame in real time or directly jump to a frame at a specified sequence position, severely impacting the efficiency and accuracy of review and approval work. Summary of the Invention

[0003] In view of this, this application provides a method, apparatus, device, medium, and program product for controlling the playback of animated images, in order to solve the problems of low efficiency and inconvenience caused by inaccurate control during the review of animated images.

[0004] In a first aspect, this application provides a method for controlling the playback of an animated image, comprising: acquiring an animated image to be controlled; decoding the animated image to obtain multiple frame images corresponding to the animated image; assigning frame identifiers to each frame image and generating a mapping relationship between each frame identifier and each frame image; displaying the animated image after constructing the mapping relationship in a display interface, the display interface including an image playback control; and, in response to a trigger operation on the image playback control, controlling the playback of the animated image based on the mapping relationship and updating the playback screen in the display interface.

[0005] In one optional implementation, assigning a frame identifier to each frame image and generating a mapping relationship between each frame identifier and each frame image includes: obtaining the decoding order of multiple frame images; assigning a frame identifier to each frame image according to the decoding order and generating a mapping relationship between each frame identifier and each frame image.

[0006] In one optional implementation, assigning a frame identifier to each frame image includes: storing the frame data corresponding to each frame image into a preset array; using the frame data corresponding to each frame image as array elements, and determining the subscript of the array element as the frame identifier corresponding to each frame image.

[0007] In one optional implementation, the image playback control includes a previous frame control and a next frame control; in response to a trigger operation on the image playback control, playback control of the animation image is performed based on a mapping relationship, and the playback screen in the display interface is updated, including: in response to a trigger operation on the previous frame control or the next frame control, updating the frame identifier corresponding to the currently displayed frame image, and determining a first target frame identifier; determining a first target frame image corresponding to the first target frame identifier based on the mapping relationship, and displaying the first target frame image in the display interface.

[0008] In one optional implementation, the image playback control includes a playback progress control; in response to a trigger operation on the image playback control, the animation image is controlled to play based on a mapping relationship, and the playback screen in the display interface is updated, further comprising: in response to a drag operation on the playback progress control, determining a second target frame identifier based on the drag position corresponding to the drag operation; determining a second target frame image corresponding to the second target frame identifier based on the mapping relationship, and displaying the second target frame image in the display interface.

[0009] In one optional implementation, in response to a drag operation on the playback progress control, determining a second target frame identifier based on the drag position corresponding to the drag operation includes: obtaining the total number of frames corresponding to the animation image and the length of the playback progress control; in response to a drag operation on the playback progress control, determining the proportional relationship between the drag position and the length; and determining the second target frame identifier corresponding to the drag position based on the correspondence between the proportional relationship and the total number of frames.

[0010] In one optional implementation, the image playback control includes a playback control and a pause control; in response to a trigger operation on the image playback control, playback control of the animated image is performed based on a mapping relationship, and the playback screen in the display interface is updated, further comprising: in response to a trigger operation on the playback control, switching each frame image according to the playback time corresponding to each frame image, and displaying an animated image with continuous animation effect in the display interface; in response to a trigger operation on the pause control, determining a third target frame identifier corresponding to the pause operation, and displaying a third target frame image corresponding to the third target frame identifier in the display interface based on a mapping relationship.

[0011] In one optional implementation, the image playback control includes a playback control control; in response to a trigger operation on the image playback control, playback control of the animation image is performed based on a mapping relationship, and the playback screen in the display interface is updated, further comprising: when the animation image is in a playback state, in response to a trigger operation on the playback control control, pausing the animation image, determining a third target frame identifier corresponding to the pause operation, and displaying a third target frame image corresponding to the third target frame identifier in the display interface based on the mapping relationship; when the animation image is in a paused state, in response to a trigger operation on the playback control control, switching each frame image according to the playback time corresponding to each frame image, and displaying an animation image with continuous animation effects in the display interface.

[0012] In one alternative implementation, multiple decoded frame images and their mapping relationships are cached; when the same animation image is loaded again, playback control is performed based on the cached multiple frame images and their mapping relationships.

[0013] In one alternative implementation, in response to a trigger operation on an image playback control, playback control of an animated image is performed based on a mapping relationship, including: in response to a trigger operation on an image playback control, determining an image playback control type; and, under the mapping relationship, performing playback control of the animated image based on the image playback control type.

[0014] Secondly, this application provides a playback control device for an animated image, comprising: an acquisition module for acquiring an animated image to be controlled, decoding the animated image to obtain multiple frame images corresponding to the animated image; an identification module for assigning frame identifiers to each frame image and generating a mapping relationship between each frame identifier and each frame image; a display module for displaying the animated image after the mapping relationship is constructed in a display interface, the display interface including an image playback control; and a control module for responding to a trigger operation on the image playback control, controlling the playback of the animated image based on the mapping relationship, and updating the playback screen in the display interface.

[0015] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the animation image playback control method of the first aspect or any corresponding embodiment described above.

[0016] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to execute the animation image playback control method of the first aspect or any corresponding embodiment described above.

[0017] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the animation image playback control method of the first aspect or any corresponding embodiment described above.

[0018] The animation image playback control method provided in this application, by decoding the animation image and obtaining all its frame images, fundamentally breaks the inherent mode of traditional players that play continuously based on a timeline, providing a data foundation for achieving frame-level precise control. Assigning an independent identifier to each frame and establishing a mapping relationship with the image content completely solves the pain point of related technologies being unable to accurately locate specific frames, allowing users to directly access any frame in the animation, greatly improving the accuracy and convenience of operation. Integrating dedicated image playback controls into the display interface transforms frame-level control capabilities into intuitive user interaction, significantly reducing the technical threshold and learning cost of professional review operations. Finally, by responding to control operations and updating the screen in real time based on the pre-built mapping relationship, a high degree of synchronization between user commands and system responses is ensured, achieving smooth and precise playback control. Therefore, this application not only effectively overcomes the core defects of low efficiency and inconvenient operation in related animation review processes, but also provides an efficient and reliable solution for refined review of animation content through a frame-level mapping and control mechanism. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the specific embodiments or related technologies of this application, the drawings used in the description of the specific embodiments or related technologies will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this application;

[0021] Figure 2 This is a schematic flowchart of a first method for controlling the playback of animated images according to an embodiment of this application;

[0022] Figure 3 This is a second flowchart illustrating a method for controlling the playback of animated images according to an embodiment of this application;

[0023] Figure 4 This is a schematic diagram of a third method for controlling the playback of animated images according to an embodiment of this application;

[0024] Figure 5 This is a schematic diagram of the display interface according to an embodiment of this application;

[0025] Figure 6 This is a structural block diagram of an animation image playback control device according to an embodiment of this application;

[0026] Figure 7 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0027] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0028] It is understood that before using the technical solutions disclosed in the various embodiments of this application, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this application in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0029] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0030] As one optional application scenario in this application embodiment, Figure 1 This diagram illustrates an application scenario of a playback control system for animated images. For example... Figure 1 As shown, the system may include at least one terminal device and at least one server. Figure 1 The system is illustrated in the example, which includes a computer 101, a mobile terminal 102, and a server 103, and the terminal devices such as the computer 101 and the mobile terminal 102 are connected to the server 103 through a network 110.

[0031] The terminal device can specifically be a smartphone, tablet, laptop, PDA, desktop computer, game console, smart TV, smart wearable device, in-vehicle terminal, VR (Virtual Reality) device, AR (Augmented Reality) device, etc. Server 103 can be a standalone physical server, a server cluster, a distributed system, or a cloud server providing cloud services. Network 110 can be a wired or wireless network, examples of which include, but are not limited to, the Internet, corporate intranet, local area network, wide area network, mobile communication network, and combinations thereof.

[0032] In traditional animation review scenarios, reviewers typically need to repeatedly review the same animation and meticulously analyze specific frames. For example, in game character animation, an art director might need to examine the precise frames where a character's feet leave the ground during a jump, or analyze the trajectory of a weapon being swung. Different review criteria usually correspond to different frame numbers, requiring reviewers to quickly locate and focus on these keyframes.

[0033] For example, if reviewers find an issue with a character's pose in a particular frame, they need to pause that frame and annotate it; or they need to compare the character's displacement changes between frames 15 and 30. This level of detail in review requires reviewers to have precise control over animation playback. Traditional animation playback methods require reviewers to rely on visual observation of rapidly playing animation or to use the pause function to try and capture specific moments. This approach not only demands high reaction speed from reviewers but also has a low success rate and is inefficient. Furthermore, this low efficiency extends the review cycle, increases project communication costs, and ultimately impacts the overall development schedule.

[0034] The animation image playback control method provided in this application establishes a precise mapping relationship between frame identifiers and frame images, providing frame-level precise positioning capabilities. Users can quickly jump to any specified frame by operating the playback controls, achieving precise control over the animation image. This precise control method eliminates the need for users to repeatedly try pausing or rely on external tools, reducing the skill requirements for users and enabling fast and accurate frame positioning, thus improving the efficiency and accuracy of animation review.

[0035] According to an embodiment of this application, a method for controlling the playback of animated images is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0036] This embodiment provides a method for controlling the playback of animated images, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 2 This is a flowchart of a method for controlling the playback of animated images according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps:

[0037] Step S201: Obtain the animation image to be controlled, decode the animation image, and obtain multiple frame images corresponding to the animation image.

[0038] An animated image refers to a dynamic image file, composed of multiple static images arranged in a time sequence, such as a GIF animation file. A frame image refers to each static image in an animated image, and is the basic unit of animation. Specifically, the animated image file data is obtained through methods such as file selectors on electronic devices, network downloads, or direct reading from memory. Subsequently, a specialized decoding library is called or used to parse the binary data of the file. The decoder analyzes the file structure frame by frame, separating the compressed image data of each frame (e.g., compressed using the LZW algorithm), the display delay of that frame, the size and position of the frame, and other information, and decompresses it to restore it into bitmap data that can be directly understood and rendered by the display device, ultimately resulting in an ordered set containing all frame image data and their attributes.

[0039] Step S202: Assign frame identifiers to each frame image and generate a mapping relationship between each frame identifier and each frame image.

[0040] A frame identifier is a unique number or identifier assigned to each frame of an image, used for precise frame identification and location. A mapping relationship refers to the association between frame identifiers and their corresponding frame images, enabling quick access to images through the identifier. Specifically, after decoding all frame image data, each frame is automatically assigned a unique, continuously increasing numerical index according to the parsing order (i.e., their order of appearance in the animation image file). This index serves as the identifier for that frame, for example, starting from 0. Then, a data structure is established to directly associate the frame identifier with the corresponding frame image data object. For example, the complete data of frame n is stored in the nth position of an array. In this way, the complete frame object containing image data and other attributes, mapped to it, can be immediately found in the array through the frame identifier, thus establishing a one-to-one mapping relationship.

[0041] Step S203: Display the animated image after the mapping relationship is constructed in the display interface, which includes an image playback control.

[0042] The display interface refers to the visual interface through which users interact with the system, used to display animated images and control elements; for example, it can be a web display interface. Image playback controls are interactive elements within the interface used to control animation playback, such as play, pause, and progress bar buttons. Specifically, a graphical display area is drawn on the screen to display frame images; in a web environment, this can be achieved using HTML5. <canvas>The canvas element. Simultaneously, a series of interactive controls are drawn around or overlaid on the display area, such as "play / pause" buttons, "previous frame / next frame" buttons, and a draggable progress bar, collectively forming a player interface. During initialization, the first frame (i.e., the frame with frame identifier 0) is displayed by default, achieved by drawing the image data of the first frame from the array onto the graphics display area.

[0043] In step S204, in response to the trigger operation of the image playback control, the playback control of the animation image is performed based on the mapping relationship, and the playback screen in the display interface is updated.

[0044] The playback screen refers to the current frame image content displayed in real time on the screen interface. Specifically, a corresponding event listener is bound to each image playback control, such as listening for button click events, progress bar drag and click events, etc. When the user triggers these operations, the corresponding event handling function is called. This function parses the user's operation intent (such as "jump to the next frame", "jump to the specified position on the progress bar", etc.) and calculates the identifier of the target frame based on the operation, such as the current frame identifier +1, or the specific frame number calculated based on the progress bar percentage, etc. Subsequently, the processing function uses the established mapping relationship to quickly find the corresponding frame image data from the array through the target frame identifier. Finally, the found frame image data is redrawn onto the canvas of the display interface, thereby updating the playback screen seen by the user and achieving precise control over the animation.

[0045] The animation image playback control method provided in this application, by decoding the animation image and obtaining all its frame images, fundamentally breaks the inherent mode of traditional players that play continuously based on a timeline, providing a data foundation for achieving frame-level precise control. Assigning an independent identifier to each frame and establishing a mapping relationship with the image content completely solves the pain point of related technologies being unable to accurately locate specific frames, allowing users to directly access any frame in the animation, greatly improving the accuracy and convenience of operation. Integrating dedicated image playback controls into the display interface transforms frame-level control capabilities into intuitive user interaction, significantly reducing the technical threshold and learning cost of professional review operations. Finally, by responding to control operations and updating the screen in real time based on the pre-built mapping relationship, a high degree of synchronization between user commands and system responses is ensured, achieving smooth and precise playback control. Therefore, this application not only effectively overcomes the core defects of low efficiency and inconvenient operation in related animation review processes, but also provides an efficient and reliable solution for refined review of animation content through a frame-level mapping and control mechanism.

[0046] This embodiment provides a method for controlling the playback of animated images, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 3 This is a flowchart of a method for controlling the playback of animated images according to an embodiment of this application, such as... Figure 3 As shown, the process includes the following steps:

[0047] Step S301: Obtain the animation image to be controlled, decode the animation image to obtain multiple frame images corresponding to the animation image. For details, please refer to [link to relevant documentation]. Figure 2 Step S201 of the illustrated embodiment will not be described again here.

[0048] Step S302: Assign frame identifiers to each frame image and generate a mapping relationship between each frame identifier and each frame image.

[0049] Specifically, step S302 includes:

[0050] Step S3021: Obtain the decoding order of multiple frame images.

[0051] The decoding order is determined by the binary structure of the animation image file itself and the decoding library used. When parsing animation images, the decoding library reads data sequentially according to the logical screen descriptor, global color table, and subsequently the graphics control extension block and image descriptor block as defined in the animation format specification. The decoder starts scanning from the beginning of the animation image file, decoding each image data block as a frame. The order in which the decoder encounters and processes frames is the frame decoding order. In most cases, this order is completely consistent with the playback time order of the animation images; that is, the first frame is decoded first, the second frame next, and so on, until the last frame.

[0052] Step S3022: According to the decoding order, assign frame identifiers to each frame image and generate the mapping relationship between each frame identifier and each frame image.

[0053] After decoding each frame, a frame identifier is immediately assigned to it. This assignment process strictly follows the decoding order. The first frame decoded (usually the first frame in chronological order) is assigned identifier 0, the next frame decoded is assigned identifier 1, and so on, assigning identifier N-1 to the Nth frame, thus generating a mapping relationship between each frame identifier and each frame image.

[0054] In some optional implementations, a frame identifier is assigned to each frame image, including:

[0055] Step a1: Store the frame data corresponding to each frame image into a preset array.

[0056] A pre-defined array is an array structure created in advance during the decoding of animation images to store the data of all frames. The length of this array is typically equal to the total number of frames in the animation, with each array position corresponding to the data of one frame. Specifically, before starting to decode the animation image file, an empty array is pre-initialized, for example, `let frameArray = []`. Subsequently, in the decoder's loop, for each successfully decoded frame, a complete data object containing all the information of that frame is generated, including but not limited to: image bitmap data, the top-left corner coordinates of the frame, the frame's width and height, delay time, transparency index, and processing method. The decoder immediately calls the array's `push()` method to append this newly generated data object to the end of `frameArray`. Through this operation, the data of all frames is sequentially stored in this pre-defined array according to the order of decoding.

[0057] Step a2: Use the frame data corresponding to each frame image as array elements, and determine the subscript of the array elements as the frame identifier corresponding to each frame image.

[0058] Array elements refer to the content stored at each position in the array, namely the image data and related attributes of each frame. Specifically, frameArray[0] stores the data of the first frame, frameArray[1] stores the data of the second frame, ..., frameArray[totalFrames-1] stores the data of the last frame. At this time, the array indexing mechanism itself provides the function of finding data by identifier. When it is necessary to display or operate the nth frame (for example, when the user jumps to the 5th frame), there is no need for a complex search algorithm. Just use the identifier of the frame (the number 5) as the index to access the corresponding position of the array (frameArray[5]) and you can get all the data of the frame instantly. Therefore, the subscript of the array is directly adopted and defined as the identifier of the frame. This design is extremely efficient because the time complexity of the array index access is O(1), which ensures the instantaneousness of the frame jump operation.

[0059] In the above implementation, by utilizing arrays—a basic and efficient data structure—frame data is stored sequentially as elements, and array indices are directly used as frame identifiers, greatly simplifying the frame identifier allocation process. This approach eliminates the need to maintain an additional identifier generation and management system, significantly reducing system complexity and resource overhead. The inherent characteristics of array indices—uniqueness, continuity, and integer type—make them an ideal choice for frame identifiers. This ensures that each frame image has a unique corresponding identifier, and the sequential nature of the indices intuitively reflects the order of the frame sequence, providing near-instantaneous access speed for identifier-based frame retrieval and navigation. This implementation method is structurally clear, stable, and reliable, greatly improving the overall performance of mapping relationship construction and access.

[0060] Step S303: Display the animated image after establishing the mapping relationship in the display interface, which includes image playback controls. For details, please refer to [link to relevant documentation]. Figure 2 Step S203 of the illustrated embodiment will not be described again here.

[0061] Step S304: In response to a trigger operation on the image playback control, playback control of the animation image is performed based on the mapping relationship, and the playback screen in the display interface is updated. For details, please refer to [link to relevant documentation]. Figure 2 Step S204 of the illustrated embodiment will not be described again here.

[0062] The animation image playback control method provided in this application allocates frame identifiers directly based on the decoding order of the frame images, making the mapping relationship generation process extremely natural, efficient, and unambiguous. This ensures that the frame identifier allocation logic is highly consistent with the inherent data structure and decoding process of the animation images, eliminating the need for complex sorting algorithms or additional processing logic and simplifying the system implementation complexity. The resulting mapping relationship naturally maintains the sequential order between frames, laying a reliable and intuitive foundation for subsequent precise playback control based on the frame sequence. This sequential consistency guarantees the accuracy and predictability of playback control, ensuring that user operations on the controls strictly correspond to the expected frame images.

[0063] This embodiment provides a method for controlling the playback of animated images, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 4 This is a flowchart of a method for controlling the playback of animated images according to an embodiment of this application, such as... Figure 4 As shown, the process includes the following steps:

[0064] Step S401: Obtain the animation image to be controlled, decode the animation image to obtain multiple frame images corresponding to the animation image. For details, please refer to [link to relevant documentation]. Figure 3 Step S301 of the illustrated embodiment will not be described again here.

[0065] Step S402: Assign frame identifiers to each frame image and generate a mapping relationship between each frame identifier and each frame image. For details, please refer to [link to relevant documentation]. Figure 3 Step S302 of the illustrated embodiment will not be described again here.

[0066] Step S403: Display the animated image after establishing the mapping relationship in the display interface, which includes image playback controls. For details, please refer to [link to relevant documentation]. Figure 3 Step S303 of the illustrated embodiment will not be described again here.

[0067] In step S404, in response to the trigger operation of the image playback control, the playback control of the animation image is performed based on the mapping relationship, and the playback screen in the display interface is updated.

[0068] Specifically, the image playback control includes a previous frame control and a next frame control, and step S404 includes:

[0069] Step S4041: In response to a trigger operation on the control control of the previous frame or the control control of the next frame, update the frame identifier corresponding to the currently displayed frame image and determine the first target frame identifier.

[0070] The "Previous Frame" control refers to a button on the display interface; clicking it causes the animation to rewind one frame. The "Next Frame" control refers to another button on the display interface; clicking it causes the animation to advance one frame. Specifically, when a user clicks the "Previous Frame" or "Next Frame" button, a click event is triggered. The event handler first reads an internal state variable that records the identifier (frame number) of the currently displayed frame. Then, based on which button was clicked, a simple arithmetic operation is performed on this current frame identifier. If the "Next Frame" was clicked, the current frame identifier is incremented by 1; if the "Previous Frame" was clicked, it is decremented by 1. After the calculation, a boundary check is immediately performed to ensure that the result value is not less than 0 (first frame) or greater than the total number of frames minus 1 (last frame). This new frame number, obtained after calculation and verification, is the first target frame identifier. For example, if the current display is frame 5 and the user clicks "Next Frame," the target identifier is 6.

[0071] Step S4042: Determine the first target frame image corresponding to the first target frame identifier based on the mapping relationship, and display the first target frame image in the display interface.

[0072] The first target frame identifier refers to the number of the target frame that needs to be calculated after the user clicks the previous or next frame control. The first target frame image refers to the specific frame image data that is found by looking up the calculated first target frame identifier through the previously established mapping relationship. Specifically, after determining the first target frame identifier (e.g., the number 6), the previously established mapping relationship, i.e., the frame data array indexed by the frame identifier, is used to quickly locate the target frame image. The target identifier number is directly used as the index of the array to access the array (e.g., frameArray[6]), thereby instantly obtaining the complete data object of the frame stored at the corresponding position, i.e., the data of the first target frame image. Subsequently, the graphics rendering API (e.g., the drawImage or putImageData method of Canvas) is called to draw the image data of the target frame onto the display interface, thereby updating the screen seen by the user and completing the frame switching display.

[0073] The animation image playback control method provided in this application directly converts the user's trigger operation into an arithmetic update of the current frame identifier, thereby obtaining a clear target frame identifier. Then, using the established mapping relationship, the frame image corresponding to the target identifier is quickly retrieved and the screen update is completed. This method simplifies browsing complex animation sequences into simple step-by-step or step-back operations, allowing users to carefully examine each frame and completely eliminating the reliance on timeline estimation or repeated pauses. This direct jump mechanism based on frame identifiers ensures that the operation response is instantaneous and absolutely accurate, greatly enhancing the user's control precision and operational experience when analyzing, reviewing, or editing animation content.

[0074] In some optional implementations, the image playback control includes a playback progress control, and step S404 further includes:

[0075] Step b1: In response to a drag operation on the playback progress control, determine the second target frame identifier based on the drag position corresponding to the drag operation.

[0076] The playback progress control refers to a visual progress bar on the display interface, usually a line with a draggable slider. The drag position refers to the specific coordinates of the drag pointer on the progress bar when the user drags it. The second target frame identifier is the number of the target frame calculated based on the user's drag position. Specifically, when the user drags the playback progress control using a mouse or touchscreen, the relative proportion of the drag position to the total length of the progress bar is obtained in real time, usually expressed as a percentage or standardized coordinate value. This proportion reflects the animation playback progress position the user expects to jump to. Based on the mapping relationship between this proportion and the total number of animation frames, the corresponding second target frame identifier is determined through calculation. This identifier must be constrained within the valid frame range, and finally, the specific frame image is located and updated through the mapping relationship between the frame identifier and the frame image.

[0077] In some alternative implementations, step b1 above includes:

[0078] Step b11: Obtain the total number of frames corresponding to the animation image and the length of the playback progress control.

[0079] The total frame count refers to the total number of static frames contained in the animated image. Specifically, the total frame count is determined during the decoding process and stored as metadata in the aforementioned frame data array or a separate state variable; for example, the array's length property represents the total frame count. This value can be read directly from this internal data structure.

[0080] The playback progress control is a... or <input range> HTML elements, specifically, use the Document Object Model (DOM) API to obtain the actual visual width (in pixels) of the UI element after it is rendered on the page; this pixel value is its length.

[0081] Step b12, in response to a drag operation on the playback progress control, determines the proportional relationship between the drag position and length.

[0082] The proportional relationship refers to the percentage of the total length of the progress bar that the dragged position represents. Specifically, when a user clicks and drags on the progress bar, a series of mouse or touch events are triggered. The event object contains a property that represents the horizontal position of the drag pointer relative to the leftmost edge of the progress bar control. Dividing this drag position pixel value by the previously obtained total progress bar length pixel value yields a floating-point number between 0.0 and 1.0. This value is the proportional relationship; it precisely represents the relative position of the drag point within the entire progress bar length. For example, 0.5 represents the exact center, and 0.75 represents three-quarters of the way across the bar.

[0083] Step b13: Based on the correspondence between the ratio and the total number of frames, determine the second target frame identifier corresponding to the drag position.

[0084] Multiply the calculated ratio (e.g., 0.75) by the total number of frames (e.g., 100 frames), i.e., 0.75 × 100 = 75. The result is a floating-point number representing the target frame position. Since the frame identifier must be an integer, this result is rounded, typically using rounding down or up, to ensure coverage of all frames. This rounded integer (e.g., 75) is the calculated second target frame identifier. Finally, a boundary check is also required to ensure that the identifier is within the valid frame number range (e.g., between 0 and 99).

[0085] Step b2: Determine the second target frame image corresponding to the second target frame identifier based on the mapping relationship, and display the second target frame image in the display interface.

[0086] The second target frame image refers to the specific frame image data found from the array through a mapping relationship based on the calculated second target frame identifier. Specifically, the calculated second target frame identifier (an integer, such as frame 50) is used as the key index to directly query the previously established mapping relationship data structure, such as an array storing all frame data. By accessing frameArray

[50] , the complete image data object of frame 50, i.e., the second target frame image, is obtained instantly. Subsequently, the graphics rendering interface is immediately called to draw the image data of this frame onto the display interface, thereby updating the screen content and completing the jump and display of the specified frame to the user.

[0087] In the above implementation, users can easily position themselves on the progress bar with a simple drag gesture, instantly converting the visual position of the drag into a clear target frame identifier. Then, using a pre-established, reliable mapping between frame identifiers and frame images, the corresponding target frame image can be retrieved and displayed instantly, much like a key-value lookup. This method transforms the previously fuzzy, time-estimated process of repeatedly trying different frames into a precise and predictable operation, enabling users to access any frame almost instantaneously within long animations. It completely eliminates the inefficient traditional model where users need to guess the approximate time point corresponding to the drag position and then correct the positioning through playback, providing an efficient navigation tool for reviewing, analyzing, and editing animations.

[0088] In some optional implementations, the image playback control includes a playback control and a pause control, and step S404 further includes:

[0089] Step c1: In response to the trigger operation of the playback control, switch the frame images according to the playback time corresponding to each frame image, and display the animated image with continuous animation effect in the display interface.

[0090] The play control refers to a button used to start continuous playback of the animation. Specifically, when the user clicks the play button, it first checks if the animation is currently paused or stopped. If so, a timer is started or a requestAnimationFrame loop is used. The core logic of this timer is that, based on the delay time (Duration, stored in the frame data object) of the current frame to be displayed, after waiting for the corresponding number of milliseconds, the current frame flag is automatically incremented by 1, i.e., switching to the next frame. Then, the image data of the next frame is obtained through a mapping relationship and drawn onto the display screen. This process is continuously repeated, reading the delay time of each frame in turn and waiting for the corresponding interval before displaying the next frame, thus creating a visually coherent animation effect until all frames have been played or the user interrupts playback.

[0091] Step c2: In response to the trigger operation of the pause control, determine the third target frame identifier corresponding to the pause operation, and display the third target frame image corresponding to the third target frame identifier in the display interface based on the mapping relationship.

[0092] The pause control is a button used to interrupt continuous animation playback. Specifically, when the user clicks the pause button, the running animation loop needs to be stopped immediately, the timer cleared, or the requestAnimationFrame callback canceled. At this point, playback stops at a certain frame. The frame identifier corresponding to the currently displayed frame is read and recorded, that is, the value stored in the internal state variable currentFrameIndex. This identifier is the third target frame identifier. Then, using this identifier as an index again, the corresponding frame image data (frameArray[currentFrameIndex]) is retrieved from the mapping relationship and immediately drawn onto the display interface. This redraw ensures stable display of the image at the moment of pause, eliminating any display deviations that may be caused by the asynchronous nature of the timer.

[0093] In the above implementation, when a user triggers a playback operation, the animation follows its inherent temporal attributes, switching sequentially according to the frame playback time intervals, faithfully reproducing the original design's continuous animation effect and ensuring smooth viewing. When a user triggers a pause operation, the system instantly captures and records the precise frame identifier corresponding to the pause moment, and immediately uses the established mapping relationship to retrieve and display the image of that specific frame. This method solves the problems of blurred images, inaccurate frame stops, or stopping on non-target frames that may occur when traditional players pause, transforming pause from a vague concept of a time point into a precise lock on a specific frame image. It allows users to reliably interrupt continuous playback and perform static and detailed observation of any frame, perfectly integrating the needs of dynamic browsing and static analysis, greatly enhancing the reliability of basic interactive control and the accuracy of user intent execution.

[0094] In some optional implementations, the image playback control includes playback control controls, and step S404 further includes:

[0095] Step d1: When the animation image is in playback mode, in response to the trigger operation of the playback control, the animation image is paused, the third target frame identifier corresponding to the pause operation is determined, and the third target frame image corresponding to the third target frame identifier is displayed in the display interface based on the mapping relationship.

[0096] The playback control is a single button integrating play and pause functions, whose icon and function dynamically change based on the current state of the animation. Specifically, when the animation is playing (the timer is running), the user clicks the same "play / pause" toggle button. Recognizing that it is currently in playback mode, the click is interpreted as a pause command. It first immediately executes the pause logic, clearing the timer driving the animation and interrupting the continuous frame switching process. Next, it captures the identifier of the frame currently displayed on the screen; this identifier is the third target frame identifier. Finally, based on this identifier, it retrieves the exact frame data from the cache and clearly freezes that frame for display to the user.

[0097] Step d2: When the animation image is paused, in response to the trigger operation of the playback control, the frame images are switched according to the playback time corresponding to each frame image, and the animation image with continuous animation effect is displayed on the display interface.

[0098] When the animation is paused (timer not running), the user clicks the "Play / Pause" toggle button. Recognizing the current paused state, the click is interpreted as a play command. Playback does not resume from the first frame, but rather from the currently paused position, i.e., the frame pointed to by the third target frame identifier, restarting the timer loop. Starting from the next frame, based on the delay time recorded for each frame, subsequent frames are sequentially switched and rendered, thus restoring and continuing the smooth animation.

[0099] In the above implementation, when the animation is playing, triggering the playback control will pause the animation, immediately capturing and locking the precise frame identifier corresponding to the currently displayed frame, and instantly freezing and displaying the target frame image based on a stable mapping relationship, achieving a seamless and precise transition from dynamic to static. When the animation is paused, triggering the same control will switch to playback, sequentially switching subsequent frame images from the currently paused frame position according to the inherent playback time interval of each frame image, smoothly restoring and presenting a continuous animation effect. This method highly integrates two basic and complementary control functions into a single control, which not only simplifies the user interface layout and reduces the user's cognitive load and operation path, but also ensures the accurate execution of operation intentions through its state-aware characteristics. It perfectly solves the problem of operation continuity when users frequently switch between different states. Users do not need to manually switch modes or find different buttons; they only need to interact with the same control to achieve intelligent state alternation, greatly enhancing the intuitiveness, convenience, and smoothness of the user experience.

[0100] In some optional implementations, the playback control of the above-mentioned animated images further includes:

[0101] Step e1: Cache the decoded frame images and their mapping relationships.

[0102] Create a global cache manager. Upon successful decoding of an animation image file, the decoding artifacts—the mapping metadata—are not discarded. Instead, they are stored in this cache manager as a complete record, indexed by a unique key. This key is typically a unique identifier for the animation image file, such as its complete URL or a hash value generated from the file content. This results in cache entries forming a key-value pair structure: {[file URL]:{frameArray:[...],totalFrames:100,...}}. The entire mapping (containing image data and attributes for all frames) and metadata such as the total number of frames in the file are cached together, ensuring a complete restoration of the previous decoding state when needed next time.

[0103] Step e2: When the same animation image is loaded again, playback control is performed based on the cached multiple frame images and their mapping relationship.

[0104] When an animated image needs to be loaded, the cache is checked first. The cache manager is queried using the URL of the file to be loaded (or other unique identifier) ​​as the key. If a corresponding cached entry is found, the time-consuming download and decoding process is completely skipped, and the previously stored array of frame data and all necessary metadata (such as the total number of frames) is read directly from the cache. Subsequently, all playback control operations (such as playback, skipping, and frame-by-frame viewing) are performed directly based on this cached data. Since the data is already in memory, these operations are completed almost instantaneously, greatly improving response speed and user experience while saving computing resources.

[0105] In the above implementation, after the animation image is loaded and decoded for the first time, the decoding results obtained by consuming computational resources—that is, multiple independent frame images and their complete mapping relationship with frame identifiers—are stored. When the user requests to load the same animation image again, there is no need to repeat the time-consuming decoding process and mapping relationship construction process; instead, these ready-made data can be quickly read and reused directly from the cache. This method greatly reduces the repetitive computation work on the same animation file, avoiding the waste of computational resources and time, thereby achieving an order-of-magnitude improvement in loading speed for the second and subsequent times, achieving near-instantaneous response. It effectively solves the problem of excessively long waiting times and unnecessary occupation of system resources when users repeatedly view the same animation content, providing users with a smooth, efficient, and responsive operating experience.

[0106] In some alternative implementations, in response to a trigger operation on an image playback control, playback control of the animated image is performed based on a mapping relationship, including:

[0107] Step f1: In response to a trigger operation on the image playback control, determine the image playback control type.

[0108] Image playback control types are an abstract classification of various operation commands issued by the user through interface controls. Specifically, when a user interacts with any control on the interface (such as a button, progress bar, etc.), a UI event is triggered. The event handler function is called and receives an event object. The specific type of operation is determined by analyzing the properties of this event object. The most direct method is to check the source of the event. For example, if the event comes from a button with the ID 'btn-prev', then the control type is "previous frame"; if it comes from a slider with the ID 'progress-bar', then the type is "progress jump"; if it comes from a button with the ID 'btn-play-pause', then it is necessary to further determine whether it is "play" or "pause" based on the current playback state. This branching logic categorizes diverse user operations into clear, predefined control commands.

[0109] In some optional implementations, keyboard shortcut function mapping is also supported to further improve the convenience and efficiency of operation. Specifically, by listening to global keyboard events (such as keydown or keypress events), specific key combinations are mapped to corresponding image playback control types. For example, pressing the right arrow key (→) can be mapped to the "next frame" command, the left arrow key (←) to the "previous frame" command, and the space bar to the "play / pause" toggle command. When the user presses these shortcut keys, the corresponding event handling logic is triggered, just like handling UI control events, converting the key events into explicit control types, and then executing the corresponding playback control operations based on the mapping relationship. This integration of keyboard shortcuts not only conforms to the operating habits of professional users but also greatly improves the operating efficiency in high-frequency interaction scenarios, achieving a seamless integration of mouse and keyboard dual operation modes.

[0110] Step f2: Under the mapping relationship, control the playback of the animation image based on the image playback control type.

[0111] Once the specific control type is determined (such as "next frame", "jump to 50%", "pause", etc.), the pre-defined algorithm logic corresponding to that type is executed. All these algorithms are based on previously established and cached mapping relationships. For example, if the type is "next frame", the current frame number is incremented by 1, and the new number is used as an index to retrieve and render the frame from the array; if the type is "jump to 50%", the target frame number is calculated, and the target number is used as an index to retrieve and render the frame from the array; if the type is "play", a loop is started, and within the loop, the current frame number is incremented by 1, the frame is retrieved, and rendered. Regardless of the complexity of the instruction, the core is to convert the instruction into a target frame number, and then utilize the array's index access characteristics to directly retrieve the corresponding frame data from the mapping relationship for rendering, thereby achieving precise control over the animation.

[0112] In the above implementation, the system can intelligently identify and parse the user's interaction intent, categorizing it into a specific image playback control type. Subsequently, within the established and robust framework of the mapping relationship between frame identifiers and frame images, the corresponding playback logic is executed based on the identified control type. This architecture clearly decouples the control type from the mapping-based control execution, making the playback control engine a highly modular and adaptable system with strong versatility and scalability. The same core control logic can easily support multiple existing or future control types without changing the underlying infrastructure. It provides the player with a unified and efficient processing paradigm, responding consistently and reliably regardless of the user's actions, ensuring consistency and predictability of behavior between different control functions, while significantly reducing the complexity and maintenance costs when adding new control functions to the system.

[0113] The following embodiment will illustrate the above-mentioned method for controlling the playback of animated images using a specific scenario.

[0114] like Figure 5 As shown, the animation image is acquired and decoded to obtain multiple frame images. The frame data of each frame image is stored in a preset array according to the decoding order, with the array index serving as the frame identifier for each frame image, generating a mapping relationship between frame identifiers and frame images. Then, a playback progress bar, a previous frame control (<<), and a playback control are included. The animation image is displayed in the display interface of the next frame control (>>). When the user drags the playback progress bar to the current position, the target frame identifier is determined based on the ratio of the drag position to the progress bar length and the total number of frames. For example, the current corresponding frame image is frame 18, and the frame is displayed through the mapping relationship, that is, the character in the picture is in the state of digging. If the previous frame control is triggered, the current frame identifier will be updated and the previous frame image will be displayed. If the playback control is triggered, the frames will be switched continuously according to the playback time of each frame to present a continuous animation effect. If the next frame control is triggered, the next frame image will be displayed, thereby realizing precise playback control of the animation image.

[0115] This embodiment also provides a playback control device for animated images, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0116] This embodiment provides a playback control device for animated images, such as... Figure 6 As shown, it includes:

[0117] The acquisition module 601 is used to acquire the animation image to be controlled, decode the animation image, and obtain multiple frame images corresponding to the animation image;

[0118] The identification module 602 is used to assign frame identifiers to each frame image and generate a mapping relationship between each frame identifier and each frame image;

[0119] Display module 603 is used to display the animated image after the mapping relationship is constructed in the display interface, which includes image playback controls;

[0120] The control module 604 is used to respond to the trigger operation of the image playback control, control the playback of the animation image based on the mapping relationship, and update the playback screen in the display interface.

[0121] In some alternative implementations, the identification module 602 includes:

[0122] The acquisition submodule is used to determine the decoding order of multiple frame images;

[0123] The generation submodule is used to assign frame identifiers to each frame image according to the decoding order and generate the mapping relationship between each frame identifier and each frame image.

[0124] In some alternative implementations, the generation submodule includes:

[0125] The storage unit is used to store the frame data corresponding to each frame image into a preset array;

[0126] The first determining unit is used to determine the subscript of each array element as the frame identifier corresponding to each frame image, using the frame data corresponding to each frame image as the array element.

[0127] In some optional implementations, the image playback control includes a previous frame control and a next frame control; the control module 604 includes:

[0128] The update submodule is used to update the frame identifier corresponding to the currently displayed frame image in response to the trigger operation of the control control of the previous frame or the control control of the next frame, and to determine the first target frame identifier.

[0129] The first display submodule is used to determine the first target frame image corresponding to the first target frame identifier based on the mapping relationship, and to display the first target frame image in the display interface.

[0130] In some optional implementations, the image playback control includes a playback progress control; the control module 604 further includes:

[0131] The determination submodule is used to respond to drag operations on the playback progress control and determine the second target frame identifier based on the drag position corresponding to the drag operation;

[0132] The second display submodule is used to determine the second target frame image corresponding to the second target frame identifier based on the mapping relationship, and to display the second target frame image in the display interface.

[0133] In some alternative implementations, determining the submodule includes:

[0134] The acquisition unit is used to obtain the total number of frames corresponding to the animation image and the length of the playback progress control.

[0135] The second determining unit is used to determine the proportional relationship between the drag position and the length in response to a drag operation on the playback progress control;

[0136] The third determining unit is used to determine the second target frame identifier corresponding to the drag position based on the correspondence between the proportional relationship and the total number of frames.

[0137] In some optional implementations, the image playback control includes a play control and a pause control; the control module 604 further includes:

[0138] The third display submodule is used to respond to the trigger operation of the playback control, switch the frame images according to the playback time corresponding to each frame image, and display the animated images with continuous animation effects in the display interface.

[0139] The fourth display submodule is used to respond to the trigger operation of the pause control, determine the third target frame identifier corresponding to the pause operation, and display the third target frame image corresponding to the third target frame identifier in the display interface based on the mapping relationship.

[0140] In some optional implementations, the image playback control includes playback control controls; the control module 604 further includes:

[0141] The fifth display submodule is used to pause the animation image in response to the trigger operation of the playback control when the animation image is in playback state, determine the third target frame identifier corresponding to the pause operation, and display the third target frame image corresponding to the third target frame identifier in the display interface based on the mapping relationship.

[0142] The sixth display submodule is used to switch between frames according to the playback time corresponding to each frame image when the animation image is paused, in response to the trigger operation of the playback control control, and display the animation image with continuous animation effect in the display interface.

[0143] In some optional embodiments, the above-mentioned animation image playback control device further includes:

[0144] The caching module is used to cache multiple decoded frame images and their mapping relationships;

[0145] The first playback module is used to control playback based on multiple cached frame images and their mapping relationships when the same animation image is loaded again.

[0146] In some optional embodiments, the above-mentioned animation image playback control device further includes:

[0147] The determination module is used to determine the image playback control type in response to a trigger operation on the image playback control;

[0148] The second playback module is used to control the playback of animated images based on the image playback control type under the mapping relationship.

[0149] The animation image playback control device provided in this application embodiment can execute the animation image playback control method provided in any embodiment of this application, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.

[0150] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0151] The following is a detailed reference. Figure 7 The diagram illustrates a structural schematic suitable for implementing the electronic device described in the embodiments of this application. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 701, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 702 or a program loaded from memory 708 into random access memory (RAM) 703. The RAM 703 also stores various programs and data required for the operation of the electronic device. The processor 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0152] Typically, the following devices can be connected to I / O interface 705: input devices 706 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 707 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 708 including, for example, magnetic tapes, hard disks, etc.; and communication devices 709. Communication device 709 allows electronic devices to exchange data via wireless or wired communication with other devices. Although Figure 7 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0153] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 709, or installed from memory 708, or installed from ROM 702. When the computer program is executed by processor 701, it performs the functions defined in the animation image playback control method of embodiments of this application.

[0154] Figure 7 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0155] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded via a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the animation image playback control method shown in the above embodiments is implemented.

[0156] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0157] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims. < / canvas>

Claims

1. A method for controlling the playback of animated images, characterized in that, The method includes: The animation image to be controlled is acquired, and the animation image is decoded to obtain multiple frame images corresponding to the animation image; Assign a frame identifier to each of the frame images, and generate a mapping relationship between each frame identifier and each of the frame images; The animated image after the mapping relationship is constructed is displayed in the display interface, which includes an image playback control. In response to a trigger operation on the image playback control, the animation image is controlled for playback based on the mapping relationship, and the playback screen in the display interface is updated.

2. The method according to claim 1, characterized in that, Assigning frame identifiers to each of the frame images and generating a mapping relationship between each frame identifier and each of the frame images includes: Obtain the decoding order of the multiple frame images; According to the decoding order, a frame identifier is assigned to each frame image, and a mapping relationship between each frame identifier and each frame image is generated.

3. The method according to claim 2, characterized in that, Assigning a frame identifier to each of the aforementioned frame images includes: Store the frame data corresponding to each frame image into a preset array; The frame data corresponding to each frame image is used as an array element, and the index of the array element is determined as the frame identifier corresponding to each frame image.

4. The method according to claim 1, characterized in that, The image playback control includes a previous frame control and a next frame control; the step of responding to a trigger operation on the image playback control, controlling the playback of the animation image based on the mapping relationship, and updating the playback screen in the display interface includes: In response to a trigger operation on the previous frame control or the next frame control, the frame identifier corresponding to the currently displayed frame image is updated to determine the first target frame identifier. Based on the mapping relationship, a first target frame image corresponding to the first target frame identifier is determined, and the first target frame image is displayed in the display interface.

5. The method according to claim 1 or 4, characterized in that, The image playback control includes a playback progress control; the step of controlling the playback of the animation image based on the mapping relationship and updating the playback screen in the display interface in response to a trigger operation on the image playback control further includes: In response to a drag operation on the playback progress control, a second target frame identifier is determined based on the drag position corresponding to the drag operation; Based on the mapping relationship, a second target frame image corresponding to the second target frame identifier is determined, and the second target frame image is displayed in the display interface.

6. The method according to claim 5, characterized in that, The step of determining the second target frame identifier based on the drag position corresponding to the drag operation in response to a drag operation on the playback progress control includes: Obtain the total number of frames corresponding to the animation image and the length of the playback progress control; In response to a drag operation on the playback progress control, a proportional relationship between the drag position and the length is determined; Based on the correspondence between the ratio and the total number of frames, the second target frame identifier corresponding to the drag position is determined.

7. The method according to claim 1 or 4, characterized in that, The image playback control includes a play control and a pause control; the step of controlling the playback of the animation image based on the mapping relationship and updating the playback screen in the display interface in response to a trigger operation on the image playback control further includes: In response to a trigger operation on the playback control, the frame images are switched according to the playback time corresponding to each frame image, and an animated image with continuous animation effect is displayed in the display interface. In response to a trigger operation on the pause control, a third target frame identifier corresponding to the pause operation is determined, and a third target frame image corresponding to the third target frame identifier is displayed on the display interface based on the mapping relationship.

8. The method according to claim 1 or 4, characterized in that, The image playback control includes a playback control control; the step of responding to a trigger operation on the image playback control, controlling the playback of the animation image based on the mapping relationship, and updating the playback screen in the display interface, further includes: When the animation image is in playback state, in response to the trigger operation of the playback control control, the animation image is paused, the third target frame identifier corresponding to the pause operation is determined, and the third target frame image corresponding to the third target frame identifier is displayed in the display interface based on the mapping relationship; When the animation image is paused, in response to the trigger operation of the playback control control, the frame images are switched according to the playback time corresponding to each frame image, and the animation image with continuous animation effect is displayed in the display interface.

9. The method according to claim 1, characterized in that, The method further includes: Cache multiple decoded frame images and the mapping relationship; When the same animation image is loaded again, playback control is performed based on the cached multiple frame images and the mapping relationship.

10. The method according to claim 1, characterized in that, The step of controlling the playback of the animated image based on the mapping relationship in response to a trigger operation on the image playback control includes: In response to a trigger operation on the image playback control, the image playback control type is determined; Under the mapping relationship, the animation image is controlled for playback based on the image playback control type.

11. A playback control device for animated images, characterized in that, The device includes: The acquisition module is used to acquire the animation image to be controlled, decode the animation image, and obtain multiple frame images corresponding to the animation image; The identification module is used to assign frame identifiers to each of the frame images and generate a mapping relationship between each frame identifier and each of the frame images; The display module is used to display the animated image after the mapping relationship is constructed in the display interface, the display interface including image playback controls; The control module is used to respond to a trigger operation on the image playback control, control the playback of the animation image based on the mapping relationship, and update the playback screen in the display interface.

12. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the playback control method for the animated image according to any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to execute the playback control method for the animated image according to any one of claims 1 to 10.

14. A computer program product, characterized in that, It includes computer instructions for causing a computer to execute the playback control method for the animated image according to any one of claims 1 to 10.

Images