Gif animation playing method and device, computer equipment and storage medium

Abstract

The invention belongs to the technical field of animation, and relates to a gif animation playing method and device, computer equipment and a storage medium, and the method comprises the steps: obtaining all pictures of a webpage, and filtering the pictures to obtain gif pictures; carrying out image decoding on the gif picture; circularly acquiring all animation layer information of the gif picture after image decoding; according to the animation layer information, drawing a gif layer into a growth graph through a canvas Canvas; modifying the src of the gif picture, and making a background frame-by-frame animation by using a long picture; and monitoring whether the gif picture enters a visual range, if not, pausing playing of the long picture, and if yes, recovering playing of the long picture. A real gif animation is removed, and frame-by-frame animation is realized through a css style to reduce resource occupation and loss; meanwhile, when it is judged that the gif picture is out of the visual range of the browser, the frame-by-frame animation is paused, and resource occupation and loss caused by gif animation rendering of the browser are reduced.

Description

Technical Field

[0001] The present invention relates to the field of animation technology, and in particular to a GIF animation playing method, device, computer equipment and storage medium. Background Art

[0002] With the development of electronic technology, image technology is also developing rapidly. Pictures have different formats such as bmp, gif, jpg, jpeg, png, etc. Only gif format pictures support animation and transparent state. Gif files are compressed and stored together by multiple color bitmap files, and then read out and displayed on the screen one by one, forming the simplest animation. Because gif files are easy to make and have strong visual effects, they are widely used on the Internet, and the stock of materials on the Internet is large and varied.

[0003] However, with the development of the times, especially the widespread application of mobile Internet, developers have higher and higher requirements for performance. GIF animations will occupy a lot of memory resources and consume a lot of CPU resources when playing. Especially when playing multiple GIF animations on the mobile phone, it may cause memory overflow or even system crash.

[0004] Therefore, many websites now use the first frame of the gif animation to generate a static image, and then guide users to click or mouse over it before the gif animation plays. The principle is to modify the link address of the image after the mouse interaction and load the real gif animation. This method can save resource consumption to a certain extent, but it still cannot solve the problem of resource loss once the gif animation is played. Summary of the invention

[0005] The purpose of the embodiments of the present invention is to provide a GIF animation playback method, device, computer equipment and storage medium to solve the problem of large resource loss in GIF animation playback in the prior art.

[0006] In order to solve the above technical problems, the present invention provides a GIF animation playback method, which adopts the following technical solution, including:

[0007] Get all the pictures on the web page, filter the pictures and get gif pictures;

[0008] Perform image decoding on the gif picture;

[0009] Loop to obtain all animation layer information of the gif image after image decoding;

[0010] According to the animation layer information, the gif layer is drawn into a long image through the canvas;

[0011] Modify the src of the gif image, and use the long image to create a background frame-by-frame animation;

[0012] Monitor whether the gif image enters the visual range, if not, pause the long image, if yes, resume playing the long image.

[0013] Preferably, the step of obtaining all images on a webpage and filtering the images to obtain a GIF image specifically includes:

[0014] Load the web page through the browser;

[0015] Get all the pictures on the web page through javascript;

[0016] The plurality of images are filtered using the file name suffix ".gif" to obtain gif images.

[0017] Preferably, the step of decoding the gif picture specifically includes:

[0018] According to the gif image, the image resource is obtained through the fetch native function;

[0019] According to the picture resource, the picture is decoded by the ImageDecoder method.

[0020] Preferably, the step of cyclically acquiring all animation layer information of the gif picture after image decoding specifically includes:

[0021] Design callback function;

[0022] Through the callback function, all animation layer information of the gif image after image decoding is obtained cyclically.

[0023] Preferably, the step of drawing the gif layer into a long image through a canvas according to the animation layer information specifically includes:

[0024] Create a canvas in the document and obtain a 2D drawing environment;

[0025] Get the style object of the gif image after it is merged in the browser;

[0026] The layers are traversed in a loop and drawn on the canvas in order. Preferably, the step of modifying the src of the gif image and using the long image to create a background frame-by-frame animation specifically includes:

[0027] Define the css animation class;

[0028] Change the address of the gif image to a one-pixel transparent image;

[0029] Use the long image as the background to achieve frame-by-frame animation.

[0030] Preferably, the step of monitoring whether the gif image enters the visible range, if not, pausing the playing of the long image, and if yes, resuming the playing of the long image specifically comprises:

[0031] Through the browser API, monitor in real time whether the gif image is within the visible range;

[0032] If it is determined that the gif image is within the visible range, the animation playback of the long image is executed, otherwise the animation playback of the long image is stopped.

[0033] In order to solve the above technical problems, the present invention also provides a GIF animation playback device, which adopts the following technical solution, including:

[0034] The acquisition module is used to acquire all the pictures on the web page, filter the pictures and obtain gif pictures;

[0035] A decoding module, used for decoding the gif image;

[0036] A loop module is used to loop and obtain all animation layer information of the gif image after image decoding;

[0037] A drawing module, used for drawing the gif layer into a long image through a canvas according to the animation layer information;

[0038] Animation module, used to modify the src of the gif image and use the long image to produce background frame-by-frame animation;

[0039] The playing module is used to monitor whether the gif image enters the visual range, if not, pausing the playing of the long image, and if yes, resuming the playing of the long image.

[0040] In order to solve the above technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned GIF animation playback method when executing the computer-readable instructions.

[0041] In order to solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below, and stores computer-readable instructions on the computer-readable storage medium, which implement the steps of the above-mentioned GIF animation playback method when executed by the processor.

[0042] Compared with the prior art, the present invention mainly has the following beneficial effects: by first acquiring multiple pictures, filtering the multiple pictures to obtain gif pictures, then decoding the gif pictures, cyclically acquiring all animation layer information of the gif pictures after image decoding, and then drawing the gif layer into a long picture through the canvas Canvas according to the animation layer information, and then modifying the src of the gif picture, using the long picture to make a background frame-by-frame animation, and finally monitoring whether the background frame-by-frame animation picture enters the visible range, otherwise the background frame-by-frame animation picture is discarded, and if so, the background frame-by-frame animation picture is restored to play; the real gif animation is removed, and the frame-by-frame animation is realized through the CSS style to reduce resource occupation and loss; at the same time, when it is judged that the gif picture is within the visible range of the browser, the frame-by-frame animation is played, and the intelligent stopping and enabling of the animation function is realized; the resource occupation and loss caused by the browser due to the gif animation rendering are greatly reduced, the problem of excessive resource consumption of the browser due to decoding the gif picture is avoided, and the gif animation effect is realized; while not affecting the user experience, the memory is less occupied during the playback process, the CPU consumption is low, and the playback is smooth. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0044] Figure 1 is an exemplary system architecture diagram in which the present invention can be applied;

[0045] Figure 2 It is a flow chart of an embodiment of the gif animation playing method of the present invention;

[0046] Figure 3 It is a structural schematic diagram of an embodiment of a GIF animation playback device of the present invention;

[0047] Figure 4 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0048] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0049] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0050] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0051] like Figure 1 As shown, the system architecture 100 may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 is used to provide a medium for a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or optical fiber cables, etc.

[0052] The user can use the first terminal device 101, the second terminal device 102 or the third terminal device 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the first terminal device 101, the second terminal device 102, and the third terminal device 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0053] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, desktop computers, etc.

[0054] The server 105 may be a server that provides various services, for example, a background server that provides support for pages displayed on the first terminal device 101 , the second terminal device 102 , and the third terminal device 103 .

[0055] It should be noted that the gif animation playing method provided in the embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the gif animation playing device is generally arranged in the server / terminal device.

[0056] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0057] GIF animation: The full name of GIF is Graphics Interchange Format, which can be translated as image interchange format. It is a bitmap graphic file format that reproduces true color images with 8-bit color (i.e. 256 colors). GIF animation is a common animation image format that can be used directly on web pages and is very easy to create.

[0058] JavaScript: is a literally interpreted scripting language (the code is not precompiled), a dynamically typed, weakly typed, prototype-based language with built-in support types, and is often used to add a variety of dynamic features to web pages, providing users with a smoother and more beautiful browsing experience.

[0059] HTML5: is a standard for building web page content and is the fifth major revision of HTML (Hypertext Markup Language). HTML5 adds many new functions and features based on the original HTML4.01 standard, including: video, audio, canvas, geolocation, local storage, Web Workers, Web Sockets, etc. These new features can make web pages richer, more powerful, and provide better user experience.

[0060] Canvas: It is one of the new tags in HTML5. It can be used to draw various graphics on web pages, including simple graphics, complex animations, and interactive games. Canvas is essentially a canvas. Developers can use JavaScript to control and draw the content on the canvas to achieve various complex graphics and animation effects.

[0061] CSS: English full name: Cascading Style Sheets is a computer language used to express the style of files such as HTML or XML. CSS can not only modify web pages statically, but also dynamically format various elements of web pages with various scripting languages.

[0062] Embodiment 1

[0063] Continue to refer Figure 2 , shows a flow chart of an embodiment of a gif animation playing method of the present invention. The gif animation playing method comprises the following steps:

[0064] Step S1, obtain multiple pictures, filter the multiple pictures, and obtain gif pictures.

[0065] In this embodiment, the gif animation playing method is executed on the electronic device (eg Figure 1 The server / terminal device shown in the figure can receive the gif animation playback request through a wired connection or a wireless connection. It should be noted that the above wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0066] In this embodiment, step S1, obtaining multiple pictures, filtering the multiple pictures, and obtaining a gif picture may also specifically include the following steps:

[0067] S11. Load a web page through a browser.

[0068] S12. Get all the images in the web page through javascript.

[0069] By using the browser's own API, such as document.querySelectorAll('img'), you can get all the images on the web page.

[0070] S13. Filter multiple pictures using the file name suffix ".gif" to obtain gif pictures.

[0071] Filtering multiple images with the file name suffix ".gif" is a regular filtering name. For example, / \.gif / i.test(img.src) selects the images with the file name containing .gif.

[0072] When the web page is loaded, you can get all the image elements and filter all the gif images. The following is the code implementation:

[0073]

[0074] Step S2, decoding the gif image.

[0075] In this embodiment, step S2, decoding the gif picture may further specifically include the following steps:

[0076] S21. According to the gif image, obtain the image resource through the fetch native function.

[0077] Fetch is a method of HTTP data request. It is native js and does not use XMLHttpRequest object. It is a global method. fetch() is an upgraded version of XMLHttpRequest and is used to make HTTP requests in JavaScript scripts. The browser provides this object natively. The functions of fetch() are:

[0078] (1) fetch() uses Promise instead of callback function, which greatly simplifies the writing and makes it more concise.

[0079] (2) fetch() adopts a modular design, and the API is scattered across multiple objects (Response object, Request object, Headers object), which is more reasonable.

[0080] (3) fetch() processes data through data stream (Stream object) and can read in blocks, which helps improve website performance and reduce memory usage. It is very useful for requesting large files or slow network speed.

[0081] In usage, fetch() accepts a URL string as a parameter, sends a GET request to the URL by default, and returns a Promise object.

[0082] S22. According to the picture resource, the picture is decoded by the ImageDecoder method.

[0083] ImageDecoder is a new image decoder launched by Android 9. It is not only compatible with conventional jpeg and png images, but also adapts to gif, webp, and heif animated image effects.

[0084] The steps to load and display images using the image decoder ImageDecoder are divided into the following three steps:

[0085] First, call the createSource method of ImageDecoder to obtain the data source from the specified location.

[0086] Secondly, call the decodeDrawable method of imageDecoder to decode the graphics information of the Drawable type from the data source.

[0087] Then, call the setImageDrawable method of the image view to set the graphics object of the image view.

[0088] Compared with the traditional method, ImageDecoder has the following two advantages: First, call the decodeDrawable method with two parameters, and enter the second listener parameter. In the listener, you can get the media type of the image and whether the image is a dynamic image; second, determine whether the decoded graphic object is of the Animatable type. If so, call the start method to play the animation.

[0089] Step S3, looping to obtain all animation layer information of the GIF image after image decoding.

[0090] In this embodiment, step S3, cyclically obtaining all animation layer information of the GIF image after image decoding, may also specifically include the following steps:

[0091] S31. Design callback function.

[0092] A callback function is a function that is passed as a parameter. The use of callback functions can greatly improve programming efficiency, which makes it widely used in modern programming.

[0093] S32, through the callback function, loop to obtain all the animation layer information of the gif image after image decoding.

[0094] Because you cannot get the total number of layers of the image when decoding it with imageDecoder, so you call the decode method, pass in the frameIndex layer number, and try to decode layer by layer until it fails, indicating that there are no more layers.

[0095] Step S32 can be implemented by the following code:

[0096]

[0097]

[0098] Step S4, according to the animation layer information, the gif layer is drawn into a long image through the canvas.

[0099] In this embodiment, step S4, drawing the gif layer into a long image through the canvas according to the animation layer information, can also specifically include the following steps:

[0100] S41. Create a canvas in the document and obtain a 2D drawing environment.

[0101] Creating a canvas in a document and obtaining a 2D drawing environment is preparation for drawing.

[0102] S42. Obtain the style object of the images after they are merged in the browser.

[0103] The goal is to get the actual size and use it as a reference to modify the canvas size so that you can draw layers of the same height and width.

[0104] S43. Loop through the layers and draw them on the canvas in order.

[0105] The ultimate goal is to form a long picture.

[0106] Step S4 can be implemented by the following code:

[0107]

[0108]

[0109] Step S5, modify the src of the gif image and use the long image to create a background frame-by-frame animation.

[0110] Modifying the src of the gif image to a 1-pixel transparent image is equivalent to making the image transparent (similar to a piece of glass) so that the frame-by-frame animation on the back can be seen. In this embodiment, step S5, modifying the src of the image, and using the long image to make the background frame-by-frame animation can also specifically include the following steps:

[0111] S51. Define CSS animation class.

[0112] Defining a CSS animation class means defining it in a CSS file or style tag:

[0113]

[0114] CSS animation is a technology that makes web page elements move, which can improve user experience and web page visibility. CSS animation can be used in many scenarios, such as navigation bar animation: it can make the navigation bar more vivid and interesting under user interaction; button animation: when the user clicks the button, the animation makes the user know the status of the button more clearly; web page loading animation: you can add a waiting animation during the web page loading process to make the user feel that the web page is processing data; responsive design: you can use CSS media queries and animations to create responsive design, so that the web page can present the best effect on screens of different sizes.

[0115] When using CSS animation, you need to pay attention to the smoothness of the animation: animation that is too stiff or stuck will affect the user experience; matching colors: if you use animations with too jumping colors, it will affect the user's visual experience; browser compatibility: different browsers use different CSS prefixes, and you need to decide whether to add prefixes based on actual conditions.

[0116] Step S51 can be implemented using the following code:

[0117] @keyframesmoveGif{0%{background-position:0;}100%{background-position:100%;}}

[0118] S52. Change the image address to a one-pixel transparent image.

[0119] Directly modify the src attribute of the image through JS, and change the image address to a one-pixel transparent image. JavaScript (abbreviated as "JS") is a lightweight, interpreted or just-in-time compiled programming language with function priority. Although it is famous as a scripting language for developing web pages, it is also used in many non-browser environments. JavaScript is a dynamic scripting language based on prototype programming and multiple paradigms, and supports object-oriented, imperative, declarative, and functional programming paradigms.

[0120] For example, you can use code to implement:

[0121] img.src="data:image / gif;base64,R0lGODlhAQABAIAAAAAAAP / / / yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

[0122] Convert a pixel transparent image to base64 characters.

[0123] S53. Use a long image as the background to achieve frame-by-frame animation.

[0124] In specific implementation, you can use CSS style, that is, img.style.cssText content, to use a long image as the background to achieve frame-by-frame animation. CSS (Cascading Style Sheets) style is CSS Cascading Style Sheets (Cascading Style Sheets), which is mainly used to set the appearance display style of the text content (font, size, alignment, etc.), the shape of the picture (width, height, border style, margin, etc.) and the layout of the page in the HTML page. CSS is a computer language used to express the style of files such as HTML (an application of the standard generalized markup language) or XML (a subset of the standard generalized markup language). CSS can not only modify web pages statically, but also dynamically format the elements of the web page in conjunction with various scripting languages. CSS can accurately control the layout of the element position in the web page at the pixel level, supports almost all font and size styles, and has the ability to edit web page objects and model styles.

[0125] For example, the following code can be used to implement it:

[0126]

[0127]

[0128] Step S6, monitoring whether the gif image enters the visible range, if not, pausing the long image, if yes, resuming the long image.

[0129] In this embodiment, step S6, monitoring whether the gif image enters the visible range, if not, pausing the long image, and if yes, resuming the long image, may also specifically include the following steps:

[0130] S61. Monitor in real time whether the gif image is within the visible range through the browser API.

[0131] A gif image is equivalent to a window, and a long image is equivalent to the scenery outside the window. It is possible to monitor whether it is in the visible range. The background animation is in the unlabeled layer behind the label and cannot be monitored. Step S61 can be implemented through the JS execution mechanism of the browser. The browser is multi-process, which includes: GPU process, third-party plug-in process, browser rendering process and Browser process. Among them, the browser rendering JS is performed through the browser rendering process. The browser rendering engine is multi-threaded, including the following threads: GUI rendering thread, for interface rendering; JS engine thread, for JS processing; event triggering thread, for event processing; timer thread, for timer processing; http asynchronous request thread, for asynchronous request processing. In the JS engine thread, it can be divided into synchronous and asynchronous tasks, among which: synchronous tasks are all executed by the main thread to form an execution stack; asynchronous tasks are processed by event triggering threads or timer threads to form a task queue; when all tasks in the execution stack are processed and the main thread is idle, tasks will be extracted from the task queue and executed in the execution stack. The above is the execution mechanism of JS in the browser.

[0132] S62: If it is determined that the gif image is within the visible range, the animation playback of the long image is executed; otherwise, the animation playback of the long image is paused.

[0133] Through the monitoring function, you can get the image tag, and then directly modify the image style attributes to achieve it. The browser can only monitor whether the image itself is in the visible range, and cannot monitor the background animation itself. There is no need to filter and monitor the background animation itself. The image will repeatedly appear in the visible range as the browser scrolls. When it is not in the visible range, just pause the animation.

[0134] Step S6 can be implemented by the following code:

[0135]

[0136] The implementation of this embodiment has the following beneficial effects: by first acquiring multiple images, filtering the multiple images to obtain gif images, then decoding the gif images, cyclically acquiring all animation layer information of the gif images after image decoding, and then drawing the gif layer into a long image through the canvas Canvas according to the animation layer information, and then modifying the src of the gif image, using the long image to make a background frame-by-frame animation, and finally monitoring whether the background frame-by-frame animation image enters the visible range, otherwise the background frame-by-frame animation image is discarded, and if so, the background frame-by-frame animation image is restored to play; the real gif animation is removed, and the frame-by-frame animation is realized through the CSS style to reduce resource occupation and loss; at the same time, the frame-by-frame animation is played only when it is determined that the gif image is within the visible range of the browser, realizing the intelligent stopping and enabling of the animation function; the resource occupation and loss caused by the browser due to gif animation rendering are greatly reduced, the problem of excessive resource consumption of the browser due to decoding the gif image is avoided, and the gif animation effect is realized; while not affecting the user experience, the memory is less occupied, the CPU consumption is low, and the playback is smooth during the playback process.

[0137] The present invention can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0138] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0139] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0140] Embodiment 2

[0141] Further references Figure 3 , as a response to the above Figure 2 The present invention provides an embodiment of a gif animation playback device, and the device embodiment is similar to Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0142] like Figure 3 As shown, the gif animation playback device 70 of this embodiment includes: an acquisition module 71, a decoding module 72, a loop module 73, a drawing module 74, an animation module 75 and a playback module 76. Among them:

[0143] The acquisition module 71 is used to acquire all the pictures on the web page, filter the pictures, and obtain gif pictures;

[0144] A decoding module 72, used for decoding the gif image;

[0145] The loop module 73 is used to loop and obtain all the animation layer information of the GIF image after the image is decoded;

[0146] A drawing module 74 is used to draw the gif layer into a long image through a canvas according to the animation layer information;

[0147] Animation module 75, used to modify the src of the gif image and use the long image to make a background frame-by-frame animation;

[0148] The playing module 76 is used to monitor whether the gif image enters the visual range, if not, the playing of the long image is paused, and if yes, the playing of the long image is resumed.

[0149] The implementation of this embodiment has the following beneficial effects: by first acquiring multiple images, filtering the multiple images to obtain gif images, then decoding the gif images, cyclically acquiring all animation layer information of the gif images after image decoding, and then drawing the gif layer into a long image through the canvas Canvas according to the animation layer information, and then modifying the src of the gif image, using the long image to make a background frame-by-frame animation, and finally monitoring whether the background frame-by-frame animation image enters the visible range, otherwise the background frame-by-frame animation image is discarded, and if so, the background frame-by-frame animation image is restored to play; the real gif animation is removed, and the frame-by-frame animation is realized through the CSS style to reduce resource occupation and loss; at the same time, the frame-by-frame animation is played only when it is determined that the gif image is within the visible range of the browser, realizing the intelligent stopping and enabling of the animation function; the resource occupation and loss caused by the browser due to gif animation rendering are greatly reduced, the problem of excessive resource consumption of the browser due to decoding the gif image is avoided, and the gif animation effect is realized; while not affecting the user experience, the memory is less occupied, the CPU consumption is low, and the playback is smooth during the playback process.

[0150] Embodiment 3

[0151] To solve the above technical problems, the embodiment of the present invention also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.

[0152] The above-mentioned computer device 8 includes a memory 81, a processor 82, and a network interface 83 that are interconnected and communicated through a system bus. It should be noted that the figure only shows a computer device 8 having components of a memory 81, a processor 82, and a network interface 83, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0153] The computer device may be a desktop computer, a notebook computer, a PDA, a cloud server, etc. The computer device may interact with the user through a keyboard, a mouse, a remote control, a touch pad, or a voice control device.

[0154] The memory 81 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 81 can be an internal storage unit of the computer device 8, such as a hard disk or memory of the computer device 8. In other embodiments, the memory 81 can also be an external storage device of the computer device 8, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 8. Of course, the memory 81 can also include both the internal storage unit of the computer device 8 and its external storage device. In this embodiment, the memory 81 is usually used to store the operating system and various application software installed on the computer device 8, such as computer-readable instructions of the gif animation playback method, etc. In addition, the memory 81 can also be used to temporarily store various types of data that have been output or are to be output.

[0155] The processor 82 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 82 is generally used to control the overall operation of the computer device 8. In this embodiment, the processor 82 is used to run the computer-readable instructions stored in the memory 81 or process data, such as running the computer-readable instructions of the gif animation playing method.

[0156] The network interface 83 may include a wireless network interface or a wired network interface. The network interface 83 is generally used to establish a communication connection between the computer device 8 and other electronic devices.

[0157] The implementation of this embodiment has the following beneficial effects: by first acquiring multiple images, filtering the multiple images to obtain gif images, then decoding the gif images, cyclically acquiring all animation layer information of the gif images after image decoding, and then drawing the gif layer into a long image through the canvas Canvas according to the animation layer information, and then modifying the src of the gif image, using the long image to make a background frame-by-frame animation, and finally monitoring whether the background frame-by-frame animation image enters the visible range, otherwise the background frame-by-frame animation image is discarded, and if so, the background frame-by-frame animation image is restored to play; the real gif animation is removed, and the frame-by-frame animation is realized through the CSS style to reduce resource occupation and loss; at the same time, the frame-by-frame animation is played only when it is determined that the gif image is within the visible range of the browser, realizing the intelligent stopping and enabling of the animation function; the resource occupation and loss caused by the browser due to gif animation rendering are greatly reduced, the problem of excessive resource consumption of the browser due to decoding the gif image is avoided, and the gif animation effect is realized; while not affecting the user experience, the memory is less occupied, the CPU consumption is low, and the playback is smooth during the playback process.

[0158] Embodiment 4

[0159] The present invention also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions. The computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the GIF animation playback method as described above.

[0160] The implementation of this embodiment has the following beneficial effects: by first acquiring multiple images, filtering the multiple images to obtain gif images, then decoding the gif images, cyclically acquiring all animation layer information of the gif images after image decoding, and then drawing the gif layer into a long image through the canvas Canvas according to the animation layer information, and then modifying the src of the gif image, using the long image to make a background frame-by-frame animation, and finally monitoring whether the background frame-by-frame animation image enters the visible range, otherwise the background frame-by-frame animation image is discarded, and if so, the background frame-by-frame animation image is restored to play; the real gif animation is removed, and the frame-by-frame animation is realized through the CSS style to reduce resource occupation and loss; at the same time, the frame-by-frame animation is played only when it is determined that the gif image is within the visible range of the browser, realizing the intelligent stopping and enabling of the animation function; the resource occupation and loss caused by the browser due to gif animation rendering are greatly reduced, the problem of excessive resource consumption of the browser due to decoding the gif image is avoided, and the gif animation effect is realized; while not affecting the user experience, the memory is less occupied, the CPU consumption is low, and the playback is smooth during the playback process.

[0161] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the various embodiment methods of the present invention.

[0162] Obviously, the embodiments described above are only some embodiments of the present invention, rather than all embodiments. The preferred embodiments of the present invention are given in the accompanying drawings, but they do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to perform equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of the present invention, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present invention.

Claims

1. A method for playing a gif animation, characterized in that: The steps include: Get all the pictures on the web page, filter the pictures and get gif pictures; Perform image decoding on the gif picture; Loop to obtain all animation layer information of the gif image after image decoding; According to the animation layer information, the gif layer is drawn into a long image through the canvas; Modify the src of the gif image, and use the long image to create a background frame-by-frame animation; Monitor whether the gif image enters the visual range, if not, pause playing the long image, if yes, resume playing the long image.

2. The method for playing a gif animation according to claim 1, characterized in that: The step of obtaining all the images on the web page and filtering the images to obtain the gif images specifically includes: Load the web page through the browser; Get all the pictures on the web page through javascript; The plurality of images are filtered using the file name suffix ".gif" to obtain gif images.

3. The gif animation playing method according to claim 1, characterized in that: The step of decoding the gif picture specifically includes: According to the gif image, the image resource is obtained through the fetch native function; According to the picture resource, the picture is decoded by the ImageDecoder method.

4. The method for playing a gif animation according to claim 3, characterized in that: The step of cyclically obtaining all animation layer information of the GIF image after image decoding specifically includes: Design callback function; Through the callback function, all animation layer information of the gif image after image decoding is obtained cyclically.

5. The GIF animation playing method according to claim 1, characterized in that: The step of drawing the gif layer into a long image through the canvas according to the animation layer information specifically includes: Create a canvas in the document and obtain a 2D drawing environment; Get the style object of the gif image after it is merged in the browser; Loop through the layers and draw them on the canvas in order.

6. The gif animation playing method according to claim 1, characterized in that: The step of modifying the src of the gif picture and using the long picture to produce a background frame-by-frame animation specifically includes: Define the css animation class; Change the address of the gif image to a one-pixel transparent image; Use the long image as the background to achieve frame-by-frame animation.

7. The method for playing a GIF animation according to any one of claims 1 to 6, characterized in that: The step of monitoring whether the gif image enters the visible range, if not, pausing the long image, and if yes, resuming the long image specifically comprises: Through the browser API, monitor in real time whether the gif image is within the visible range; If it is determined that the gif image is within the visible range, the animation playback of the long image is executed, otherwise the animation playback of the long image is paused.

8. A gif animation playback device, characterized in that: include: The acquisition module is used to acquire all the pictures on the web page, filter the pictures and obtain gif pictures; A decoding module, used for decoding the gif image; A loop module is used to loop and obtain all animation layer information of the gif image after image decoding; A drawing module, used for drawing the gif layer into a long image through a canvas according to the animation layer information; Animation module, used to modify the src of the gif image and use the long image to produce background frame-by-frame animation; The playing module is used to monitor whether the gif image enters the visual range, if not, pausing the playing of the long image, and if yes, resuming the playing of the long image.

9. A computer device, comprising a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the GIF animation playback method as described in any one of claims 1 to 7 when executing the computer-readable instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the GIF animation playing method according to any one of claims 1 to 7 are implemented.

Images