Animation display method and device, electronic equipment and computer readable storage medium

Abstract

The embodiment of the application provides an animation display method and device, electronic equipment and a computer readable storage medium, relates to the field of computer application, and the method obtains the sequence frame of the SVGA animation; the transformation parameter of the animation element corresponding to each sequence frame is configured, and the pose corresponding to the animation element is calculated; the animation element is respectively rendered into the corresponding pre-rendering canvas through a drawing interface according to the pose, and a pre-rendering animation is obtained; and the pre-rendering animation in the pre-rendering canvas is rendered into a target canvas for display. The technical scheme realizes setting an additional transformation animation when the SVGA animation is played, and renders multiple SVGA animations that need to be played simultaneously onto the same target canvas for display, which is beneficial to enriching the display form of the animation, reducing the rendering of the target canvas, and reducing the consumption of the CPU during animation rendering.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of computer application, in particular, the present application relates to an animation display method and device, electronic equipment and computer readable storage medium. BACKGROUND

[0002] On a general web page or video interface, cool animations can often be seen. In video live animation, the SVGA (Scalable Vector Graphics Animation) method is usually used to draw animations. The principle of SVGA animation is to parse the SVG format file into key frames, vector paths and style data, and then act on the picture resource.

[0003] When playing SVGA animation, only the preset animation effect can be played, and users cannot perform secondary editing on the SVGA animation to realize additional animations such as displacement, scaling and rotation, so that the animation display effect is single. In addition, when playing traditional SVGA animation, each SVGA animation element corresponds to a visible canvas, and the more visible canvas in the page, the more the browser page performance is reduced, which is easy to cause lag. SUMMARY

[0004] The purpose of the present application is to at least solve one of the above technical defects, in particular, to solve the problem that it is difficult to realize secondary editing of animation and easy to cause page lag.

[0005] In a first aspect, an animation display method is provided, comprising the following steps:

[0006] Obtaining sequence frames of SVGA animation;

[0007] Configuring transformation parameters of animation elements corresponding to each sequence frame, and calculating poses of the animation elements corresponding to the transformation parameters;

[0008] According to the poses, the animation elements are respectively rendered into corresponding pre-rendering canvases through a drawing interface to obtain pre-rendering animations;

[0009] Rendering the pre-rendering animations in each pre-rendering canvas into a target canvas for display.

[0010] In a possible implementation, before the step of obtaining sequence frames of SVGA animation, the method further comprises:

[0011] Loading SVGA animation and performing silent playing;

[0012] During the process of playing the SVGA animation in silence, an image data interface is called to record the SVGA animation at a preset recording rate, so as to obtain the sequence frames of the SVGA animation.

[0013] In a possible implementation, the step of calculating the pose of the animation element according to the transformation parameter comprises:

[0014] performing animation transformation on the animation element according to the transformation parameter, wherein the animation transformation comprises at least one of animation scaling, animation rotation and animation movement;

[0015] determining the pose of the animation element according to the animation transformation result of the animation element.

[0016] In a possible implementation, the step of rendering the animation element into a corresponding pre-rendering canvas according to the pose by using a drawing interface to obtain a pre-rendering animation comprises:

[0017] determining a rendering area of the animation element on the pre-rendering canvas according to the pose;

[0018] rendering at least two animation elements onto a corresponding rendering area of the same pre-rendering canvas by using a drawing interface to obtain the pre-rendering animation.

[0019] In a possible implementation, the step of determining the rendering area of the animation element on the pre-rendering canvas according to the pose comprises:

[0020] determining a minimum circumscribed rectangle of the animation element according to the pose;

[0021] determining the minimum circumscribed rectangle as the rendering area of the animation element on the pre-rendering canvas.

[0022] In a possible implementation, the step of rendering at least two animation elements onto a corresponding rendering area of the same pre-rendering canvas by using a drawing interface to obtain a pre-rendering animation comprises:

[0023] calling a webGL interface to render four vertices corresponding to the animation element on the rendering area of the pre-rendering canvas by using the webGL interface;

[0024] after the four vertices are rendered, rendering a texture image of the animation element in an area surrounded by the four vertices;

[0025] drawing texture images corresponding to at least two animation elements onto the same pre-rendering canvas to obtain a pre-rendering animation.

[0026] In a possible implementation, the step of rendering the pre-rendered animation in each of the pre-rendering canvases into a target canvas for playing includes:

[0027] calling an image drawing interface of the target canvas to render the pre-rendered animation rendered into the pre-rendering canvas onto a corresponding target canvas;

[0028] displaying the animation through the target canvas.

[0029] In a second aspect, an embodiment of the present application provides an animation display device, comprising:

[0030] a sequence frame acquisition module configured to acquire sequence frames of an SVGA animation;

[0031] an animation pose calculation module configured to configure transformation parameters of animation elements corresponding to each of the sequence frames, and to calculate poses of the animation elements according to the transformation parameters;

[0032] an animation pre-rendering module configured to render the animation elements into corresponding pre-rendering canvases through a drawing interface according to the poses, to obtain pre-rendered animations;

[0033] an animation display module configured to render the pre-rendered animations in each of the pre-rendering canvases into a target canvas for display.

[0034] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the animation display method of the first aspect when executing the program.

[0035] In a fourth aspect, an embodiment of the present application provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the program is executable on a processor to implement the animation display method of the first aspect.

[0036] The animation display method, device, electronic device, and computer readable storage medium provided by the above embodiments acquire sequence frames of an SVGA animation, configure transformation parameters of animation elements corresponding to each of the sequence frames, and calculate poses of the animation elements; the animation elements are rendered into corresponding pre-rendering canvases through a drawing interface according to the poses, to obtain pre-rendered animations; and the pre-rendered animations in the pre-rendering canvases are rendered into a target canvas for display. The technical solution realizes setting of an additional transformation animation during SVGA animation playing, and renders multiple SVGA animations that need to be played simultaneously onto the same target canvas for display, which is beneficial to enriching the display form of the animation, and simultaneously reduces the rendering of the target canvas and the consumption of the CPU during animation rendering.

[0037] Additional aspects and advantages of the application will be set forth in part in the description which follows, and in part will become apparent to those skilled in the art upon examination of the following and the attached drawings. BRIEF DESCRIPTION OF DRAWINGS

[0038] The above and / or additional aspects and advantages of the present application will become apparent and be more readily understood through reference to the following description, taken in conjunction with the accompanying drawings, wherein:

[0039] Figure 1 is a schematic diagram of an application environment to which an animation display provided by embodiments of the present application is applied;

[0040] Figure 2 is a flowchart of an animation display method provided by embodiments of the present application;

[0041] Figure 3 is a flowchart of a pre-rendered animation generation method provided by embodiments of the present application;

[0042] Figure 4A is a flowchart of an initialization stage of an animation display provided by embodiments of the present application;

[0043] Figure 4B is a flowchart of a rendering display stage of an animation display provided by embodiments of the present application;

[0044] Figure 5 is a structural schematic diagram of an animation display device provided by embodiments of the present application;

[0045] Figure 6 is a structural schematic diagram of an electronic device suitable for rendering of a page animation provided by embodiments of the present application. DETAILED DESCRIPTION

[0046] Embodiments of the present application are described in detail below with reference to the attached drawings, which are meant to be exemplary and not limiting.

[0047] It is to be understood that the singular forms "a," "an," and "the" include plural referents unless the context clearly dictates otherwise. It is further understood that the terms "comprise" (or comprise), "comprises" (or comprises) and "comprising" (or comprising) when used in this specification, specify the presence of stated features, integers, steps, operations, elements, or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, or groups thereof. It is further understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements can be present. In addition, the word "connected" or "coupled" as used herein can include wirelessly connected or wirelessly coupled. As used herein, the term "and / or" includes any and all combinations of one or more of the associated listed items.

[0048] It is to be understood that the terms so used are intended to encompass common and dictionary definitions of terms as well as the definitions in context of the relevant art. It will be further understood that terms, such as those defined in a dictionary, should be interpreted as having a meaning that is consistent with their meaning in the context of the relevant art and will not be interpreted in an idealized or overly formal sense unless expressly so defined herein.

[0049] The following terms are introduced and explained in the context of the present application:

[0050] SVGA (Scalable Vector Graphics Animation) is a cross-platform open source animation format, which is compatible with iOS / Android / Web.

[0051] webGL (web Graphics Library) is a 3D drawing protocol. webGL allows JavaScript and OpenGL ES 2.0 to be combined together. By adding a JavaScript binding of OpenGL ES 2.0, webGL can provide hardware 3D accelerated rendering for HTML5 Canvas. web developers can use system graphics cards to display 3D scenes and models more smoothly in browsers, and create complex navigation and data visualization.

[0052] Canvas is used to draw graphics on a web page. HTML5 canvas uses JavaScript to draw images on a web page. Canvas is a rectangular area that can control each pixel. Canvas has multiple methods to draw paths, rectangles, circles, characters, and add images.

[0053] Before providing a detailed explanation of the embodiments of this application, the application scenarios of these embodiments will be introduced first. The method provided in these embodiments is applied to animation display scenarios.

[0054] With the development of live streaming, cool animations are displayed on live streaming pages to enhance their appeal and improve the viewing experience. Figure 1 This is a schematic diagram illustrating the application environment to which the animation provided in this application embodiment applies, such as... Figure 1 As shown, the browser 101 uses relevant engines, such as an animation rendering engine, to obtain the sequence frames of the relevant animation. The animation elements in the sequence frames are then transformed and rendered on the page to obtain the page animation, which is then sent to the terminal device 102 for display. The terminal device 102 includes devices capable of page browsing, such as smartphones, laptops, desktop computers, and tablets.

[0055] Stunning animations are frequently seen on web pages and video interfaces. In live video animations, SVGA (Scalable Vector Graphics Animation) is commonly used. The principle of SVGA animation is to parse SVG format files into keyframes, vector paths, and styles, and then apply this data to image resources.

[0056] When playing SVGA animations, they can only be played according to the preset animation effects. Users cannot perform transformations such as translation, scaling, and rotation on SVGA animations, resulting in a monotonous animation display effect. If you want to change the display effect of SVGA animations, the developers need to rewrite the display code of SVGA animations, which is a lot of work and very complicated.

[0057] For example, consider developing a game called "Balloon Popping" for live streaming. Balloons continuously float up on the browser page, moving and playing SVGA animations, such as the popping animation when the user clicks on a balloon. Using traditional SVGA animations, when there are too many popping balloons on screen, each playback requires re-parsing, and each SVGA animation element generates a corresponding visible canvas. The more visible canvases on the page, the more performance is consumed, eventually leading to stuttering. Furthermore, the developers want the balloon popping SVGA animation to be editable during playback, such as rising, zooming, and rotating, which traditional SVGA players do not support.

[0058] The animation display method, apparatus, device, and computer-readable storage medium provided in this application are intended to solve the above-mentioned technical problems of the prior art.

[0059] The technical solutions of the present application and how the technical solutions solve the above technical problems will be described in detail below with specific examples. The following specific examples can be combined with each other, and the same or similar concepts or processes can not be described again in some examples.

[0060] The embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0061] Figure 2 is a flowchart of an animation display method provided by an embodiment of the present application. The method can be applied to an animation display engine, such as an animation display engine of a browser.

[0062] As shown in Figure 2 , the animation display method can include the following steps:

[0063] S210, obtaining sequence frames of an SVGA animation.

[0064] The sequence frames of the SVGA animation are obtained from an address where the SVGA animation is pre-stored. The SVGA animation can be a local animation, an animation downloaded from a network in advance, or a self-made animation.

[0065] Before step S210, the following steps can also be included:

[0066] S200A1, loading the SVGA animation and performing silent playing.

[0067] The storage address of the SVGA animation is obtained, and a specified.svga file is loaded by an SVGA player, wherein the specified.svga file is an SVGA animation used for rendering on a page.

[0068] The SVGA player is used to perform silent playing of the SVGA animation.

[0069] S200A2, during the silent playing of the SVGA animation, calling an image data interface to record the SVGA animation at a preset recording rate, obtaining sequence frames of the SVGA animation and performing caching.

[0070] In this embodiment, the image data interface can be the getImageData interface in the Canvas canvas.

[0071] Since the original play rate of the SVGA animation can not be consistent with the target play speed of the animation finally displayed by the user, in this embodiment, the SVGA animation is recorded at a preset recording rate in the process of silently playing the SVGA animation by calling the getImageData interface in the Canvas canvas to obtain the sequence frames of the SVGA animation and cache them, where the preset recording rate is consistent with the target play speed of the animation finally displayed.

[0072] For example, the original play rate of the SVGA animation is 20 frames per second, and the target play speed of the animation finally displayed by the user is 60 frames per second. Therefore, the new SVGA animation is recorded at the preset recording rate which is the same as the target play speed for caching, which facilitates subsequent embedding into other canvas-based animation and ensures the consistency of the play rate of the new SVGA animation and the subsequent canvas animation. When animation rendering is needed, the SVGA sequence frames are obtained from the cache to avoid waste of computing resources

[0073] S220, configure the transformation parameters of the corresponding animation element in each sequence frame, and calculate the pose corresponding to the animation element according to the transformation parameters.

[0074] Based on the layout of the animation element on the display page, that is, the layout of the position information, height information and the like of the animation element on the page, in this embodiment, the transformation parameters of the animation effect of the animation element are configured by writing animation transformation code.

[0075] The transformation parameters of a certain animation element are configured as follows:

[0076] origin={x:100,y:100,width:100,height:100}

[0077] animat={x:200,y:200,width:50,height:50}

[0078] animatOption={time:5000,timeFn:linear}

[0079] Wherein, origin is the original coordinate position, and animat is the end coordinate position of the animation.

[0080] animatOption is the animation option, which includes the duration (time) and the animation speed type (timeFn, generally 3 types, uniform speed, from fast to slow deceleration and from slow to fast acceleration).

[0081] The animation effect represented by the above transformation parameter is that the animation element moves 100 units right / down at a constant speed in 5 seconds, and the area is reduced by 0.5 times.

[0082] Of course, in other embodiments, different transformation parameters can also be set according to actual conditions to achieve different animation effects.

[0083] The animation transformation code that has been pre-written is parsed to obtain the preset transformation parameters of each animation element. The transformation parameters include at least one of animation scaling parameters, rotation parameters, movement trajectories, animation start positions, animation end positions, animation movement speeds, movement directions, and preset display durations.

[0084] In this embodiment, the pose of the animation element rendered on the page is different over time, and the pose includes position and attitude. The position refers to the position of the animation element rendered at a certain time, and the attitude refers to the size after scaling processing, the angle of rotation, etc. of the animation element rendered at a certain time.

[0085] For example, the preset transformation parameters of the animation element correspond to the transformation effect that the page animation is played at a speed of 60 frames per second, such as a balloon animation element with an original position coordinate of 0, which needs to move 240 units to the right within 2 seconds. Therefore, each frame needs to move 2 units. If the preset display duration is 2 seconds, the current actual display duration is 0.5 seconds, and the remaining time is 1.5 seconds, then the animation element is depicted at position 60. If the corresponding remaining time is 0.5 seconds, then the current animation element needs to be depicted at position 180.

[0086] The above example is described by displacement transformation, and the principles of scaling transformation and rotation transformation of the animation element are the same. The position corresponding to the displacement transformation is combined with the attitude corresponding to the scaling transformation and the rotation transformation to obtain the pose of the current animation element for rendering.

[0087] S230, according to the pose, the animation element is respectively rendered into the corresponding pre-rendering canvas through the drawing interface, and a pre-rendering animation is obtained.

[0088] The pre-rendering canvas and the target canvas are canvases of the same size, wherein the pre-rendering canvas is an invisible canvas, and the target canvas is a visible canvas.

[0089] In this embodiment, the animation element is combined with its corresponding pose and respectively rendered onto the corresponding pre-rendering canvas through the drawing interface, such as the webGL interface, that is, the SVGA animation is drawn onto the pre-rendering canvas through the webGL interface to obtain a pre-rendering animation.

[0090] Further, the multiple animation elements displayed simultaneously can be drawn in the same pre-rendering canvas through the drawing interface to obtain a pre-rendering animation.

[0091] For example, multiple "balloon" animations are displayed in different locations of the same page, and when the page is displayed, multiple "balloon" animations such as "balloon 1", "balloon 2" and "balloon 3" are displayed simultaneously. At this time, "balloon 1", "balloon 2" and "balloon 3" can be drawn on the same invisible pre-rendering canvas to obtain a pre-rendering animation. In this embodiment, the pre-rendering animation can be a frame-independent animation.

[0092] S240, rendering the pre-rendering animation in each of the pre-rendering canvases into a target canvas for display.

[0093] The pre-rendering animation drawn on the pre-rendering canvas is rendered as a whole into the target canvas for display.

[0094] In an embodiment, the step S240 of rendering the pre-rendering animation in each of the pre-rendering canvases into a target canvas for display can include the following steps:

[0095] S2401, calling the image drawing interface of the target canvas to render the pre-rendering animation rendered in the pre-rendering canvas into the corresponding target canvas.

[0096] The image drawing interface can be a drawImage interface, which draws images, canvases or videos on a target canvas using a drawImage() method. The drawImage() method can also draw some parts of the image, and / or increase or decrease the size of the image.

[0097] In this embodiment, the drawImage interface of the target canvas is called to render the pre-rendering animation drawn on the pre-rendering canvas into the corresponding target canvas, which is a visible canvas. It can be understood that multiple animation elements are drawn on the same invisible pre-rendering canvas to obtain a whole frame of pre-rendering animation (which can be regarded as an image), and then the pre-rendering animation is transferred to the visible target canvas.

[0098] S2402, displaying the animation through the target canvas.

[0099] The pre-rendering canvas and the target canvas have the same size, so that the pre-rendering animation on the pre-rendering canvas can be directly transferred to the target canvas for display.

[0100] The animation display method provided in the embodiment comprises the following steps: obtaining sequence frames of an SVGA animation, configuring transformation parameters of animation elements corresponding to each sequence frame, calculating poses of the animation elements according to the transformation parameters, rendering the animation elements into corresponding pre-rendering canvases through a drawing interface according to the poses, obtaining pre-rendering animations, and rendering the pre-rendering animations in each pre-rendering canvas into a target canvas for display. The technical solution realizes setting of an additional transformation animation during SVGA animation playing, and rendering of multiple SVGA animations that need to be played simultaneously into the same target canvas for display, which is beneficial to enriching the display form of the animation and reducing the rendering of the target canvas and the consumption of the CPU during animation rendering.

[0101] In the related art, the traditional SVGA does not provide an interface for developers to perform secondary editing on the SVGA animation to realize secondary animations such as displacement, scaling or rotation. In addition, the SVGA animation is played by using the traditional SVGA animation player, and a new Canvas canvas is generated for each SVGA animation element played. When multiple SVGA animation elements are played simultaneously in a page, multiple Canvas canvases cause waste of the performance of a playing device and even cause lag. The technical solution can realize secondary editing of the SVGA animation, can set additional animations such as displacement, scaling or rotation during SVGA playing, and avoids the need for developers to re-export an.svga file to modify the.svga file and re-edit the SVGA animation effect when some animations need to be performed, which is complicated. The invisible pre-rendering canvases are used to draw multiple animation elements together and then render the animation elements onto the visible target canvas, which reduces the number of target canvases and reduces the consumption of the CPU during animation display.

[0102] To make the technical solution of the present application clearer, more embodiments of the rendering method based on page animation are provided.

[0103] In an embodiment, the step of calculating the pose of the animation element according to the transformation parameter in step S220 can comprise the following steps:

[0104] S2201, performing animation transformation on the animation element according to the transformation parameter.

[0105] The animation transformation comprises at least one of animation scaling, animation rotation and animation movement, and the transformation parameter comprises at least one of animation scaling parameter, rotation parameter, movement trajectory, animation start position, animation end position, animation movement speed, movement direction and preset display duration.

[0106] Each animation element is provided with a corresponding preset display duration. For example, the animation effect corresponding to the transformation parameter of the "balloon" animation element is that the balloon floats up from bottom to top and disappears after 5 seconds of display. In this embodiment, the preset display duration refers to the maximum time length of display of the animation element on the page, and the actual display duration refers to the time length of display of the current animation element on the page.

[0107] If it is detected that the actual display duration of the current animation element has reached the preset display duration, the current animation element is removed from the element queue, such as the "balloon" animation element, and the next animation element such as "eight-treasure box" is read. If it is detected that the actual display duration of the current animation element has not reached the preset display duration, the transformation matrix corresponding to the current animation element is calculated according to the remaining time corresponding to the preset display duration, and the animation element is animated according to the transformation matrix,

[0108] For example, taking displacement transformation as an example, the original coordinate position of the current animation element is (0, 0) and the end coordinate position is (100, 0), the preset display duration (i.e. the moving duration) is 5 seconds, and the movement is uniform. If the actual display duration is 2 seconds, the remaining display duration is 3 seconds, and the current position is calculated as (40, 0) at this time.

[0109] Similarly, the original deflection angle of the current animation element is 0°, the end deflection angle is 90°, the preset display duration is 5 seconds, and the deflection is uniform. If the actual display duration is 2 seconds, the remaining display duration is 3 seconds, and the current deflection angle is calculated as 32° at this time.

[0110] Through the remaining time corresponding to the preset display duration, the transformation matrix of the current animation element at the current time can be calculated, including scaling matrix, displacement matrix and rotation matrix, etc.

[0111] S2202, determining the pose of the animation element according to the animation transformation result of the animation element.

[0112] In this embodiment, the transformation matrix corresponding to the transformation result of the animation element is obtained according to the animation transformation result of the animation element, and the transformation matrix can include scaling matrix, displacement matrix and rotation matrix, etc. Further, the calculation result obtained by multiplying each transformation matrix is taken as the pose of the animation element. In this embodiment, if scaling, displacement or rotation does not occur, the corresponding transformation matrix is represented by "1".

[0113] In an embodiment, the step S230 of rendering the animation element into the corresponding pre-rendering canvas according to the pose through the drawing interface to obtain a pre-rendered animation can include the following steps:

[0114] S2301, determine a rendering area of the animation element on the pre-rendering canvas according to the pose.

[0115] In the embodiment, the pose of the animation element is different, and the rendering area of the animation element on the pre-rendering canvas is also different. For example, according to the information related to the pose of the animation element, such as the size, rotation angle, shape, etc. of the animation element, the rendering area of the animation element on the pre-rendering canvas is determined.

[0116] According to the pose of the animation element, the position coordinates of the key points in the animation element are determined, and the rendering area of the animation element on the pre-rendering canvas is determined according to the position coordinates of the key points. For example, the area surrounded by the connection line of the key points on the outer contour line of the animation element is determined as the rendering area on the pre-rendering canvas.

[0117] In an embodiment, step S2301 of determining a rendering area of the animation element on the pre-rendering canvas according to the pose can include the following steps:

[0118] (1) determining a minimum bounding rectangle of the animation element according to the pose.

[0119] The minimum bounding rectangle (MBR) refers to the maximum range of a plurality of two-dimensional shapes (such as points, straight lines and polygons) represented by two-dimensional coordinates, that is, a rectangle with the maximum horizontal coordinate, the minimum horizontal coordinate, the maximum vertical coordinate and the minimum vertical coordinate of the vertices of the given two-dimensional shape as the lower boundary.

[0120] In the embodiment, the four vertices corresponding to the animation element are determined according to the pose, and the area surrounded by the connection line of the four vertices in turn is determined as the minimum bounding rectangle of the animation element.

[0121] (2) determining the minimum bounding rectangle as the rendering area of the animation element on the pre-rendering canvas.

[0122] In the embodiment, the area occupied by the minimum bounding rectangle of the animation element on the pre-rendering canvas is determined as the rendering area of the animation element on the pre-rendering canvas,

[0123] S2302, rendering at least two animation elements to the rendering area corresponding to the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animation.

[0124] The drawing interface, such as the webGL interface, is called to render at least two animation elements to the corresponding rendering area in the same pre-rendering canvas according to the pose determined by the transformation parameter, to obtain the pre-rendering animation. The pre-rendering animation can be understood as an animation rendered on an invisible canvas, and is not a real animation displayed to the user.

[0125] In the embodiment, the CSS-based page animation is drawn based on a graphic algorithm based on webGL, and a plurality of animation elements are combined to be presented on one canvas, so that one canvas draws a plurality of animation elements, and the page redraw rate is reduced. The page redraw rate refers to the number of times of drawing per second when the animation element is changed and the CPU / GPU renders the animation element to the page.

[0126] Figure 3 is a flowchart of the pre-rendered animation generation method provided by the embodiment of the application, as shown in Figure 3 In an embodiment, the step of rendering at least two animation elements to the rendering area corresponding to the pre-rendered canvas through a drawing interface in step S2302 to obtain a pre-rendered animation can include the following steps.

[0127] S301, calling a webGL interface, and rendering four vertices corresponding to the animation element on the rendering area corresponding to the pre-rendered canvas through the webGL interface.

[0128] WebGL enables a web page to use the GPU to draw graphics in the browser, so that the web page can use the GPU to draw graphics in the browser. <canvas>In the browser of the label, without using any plug-in, 3D rendering in canvas based on OpenGL ES 2.0 API can be used. The WebGL program is composed of the control code of javascript and the special effect code (shader code, rendering code) executed in the graphics processing unit (GPU) of the computer. The WebGL element can be mixed with other HTML elements and is synthesized with other parts of the page or the background of the page.

[0129] Generally, the shape of the animation element is generally rectangular, such as a rectangle and a square. After determining that the animation element is located at four vertices on a diagonal line, the area surrounded by sequentially connecting the four vertices can be determined as the area occupied by the animation element.

[0130] In the embodiment, the webGL interface is called, and the four vertices corresponding to the animation element are first rendered on the rendering area corresponding to the pre-rendering canvas by using the webGL interface.

[0131] S302, after the four vertices are rendered, the texture image of the animation element is rendered in the area surrounded by the four vertices.

[0132] All the animation elements in the rendering queue contain corresponding texture images.

[0133] Further, after the four vertices are rendered on the pre-rendering canvas, the texture image of the animation element is obtained, and the texture image of the animation element is rendered in the area surrounded by the connecting lines of the four vertices.

[0134] Specifically, the rendering process of each animation element can include at least one of the following steps:

[0135] (1) setting 4 vertex original coordinates by webGL.vertexAttribPointer;

[0136] (2) setting 4 vertex displacement matrices by webGL.uniformMatrix4fv to realize displacement transformation of the animation element;

[0137] (3) setting 4 vertex rotation matrices by webGL.uniformMatrix4fv to realize rotation transformation of the animation element;

[0138] (4) setting 4 vertex scaling matrices by webGL.uniformMatrix4fv to realize scaling transformation of the animation element;

[0139] (5) Bind the texture rendered by the current animation element to the vertex extent using webGL.bindTexture;

[0140] (6) Draw the four vertices onto the canvas using webGL.drawArrays, and the texture will be automatically attached to the vertex area.

[0141] S303. Draw the texture images corresponding to at least two animation elements onto the same pre-rendered canvas to obtain a pre-rendered animation.

[0142] Based on the above example, the vertices of at least two animation elements are rendered onto the same pre-rendered canvas, and the texture images corresponding to at least two animation elements are rendered into the rendering area enclosed by the vertex connection lines, thus obtaining a pre-rendered animation based on the pre-rendered canvas.

[0143] Optionally, each frame of the page corresponds to a rendering queue. Once all elements in the rendering queue have been rendered, the next frame of the page animation will begin to be rendered.

[0144] The animation display method provided in this embodiment draws multiple animation elements onto the same pre-rendered canvas to obtain a pre-rendered animation, and then renders the pre-rendered animation onto the target canvas for rendering before displaying it on the page. This reduces the number of target canvases when the page is rendered, reduces the CPU consumption of the rendering engine during animation processing, and helps to avoid page lag.

[0145] To illustrate this application in more detail, the following is in conjunction with... Figure 4A and Figure 4B The technical solution of this application is illustrated by way of example. Figure 4A This is a flowchart of the initialization phase of the animation display provided in the embodiments of this application. Figure 4B This is a flowchart of the rendering and display stage of the animation display provided in the embodiments of this application.

[0146] In this embodiment, the animation display includes an initialization phase and a rendering and display phase.

[0147] like Figure 4A As shown, the initialization phase demonstrated in this animation includes:

[0148] S401A, browser-side initialization animation display engine;

[0149] S402A, Set the playback speed of the target canvas.

[0150] S403A: Load SVGA animations from a specified source SVGA file.

[0151] S404A, playing the SVGA animation in a canvas dedicated to SVGA recording in silence, and recording the SVGA animation at a preset recording rate.

[0152] The preset recording rate is the same as the playing rate of the target canvas.

[0153] S405A, caching the sequence frames of the recorded SVGA animation for subsequent use.

[0154] As shown in Figure 4B The rendering display stage of the animation display includes:

[0155] S401B, obtaining the sequence frames of the SVGA animation.

[0156] S402B, configuring the transformation parameters of the animation elements corresponding to each sequence frame.

[0157] The transformation parameters include at least one of animation scaling parameters, rotation parameters, movement trajectories, animation start positions, animation end positions, animation movement speeds, movement directions, and preset display durations.

[0158] S403B, calculating the poses of the animation elements according to the transformation parameters.

[0159] S404B, rendering four vertices of the animation elements to a pre-rendering canvas through a webGL interface according to the poses.

[0160] S405B, rendering the texture images of the animation elements to the pre-rendering canvas through the webGL interface.

[0161] The texture images of the current frame animation elements are rendered to multiple texture images of the animation elements on the same geometric plane through the texture unit mechanism of the webGL.

[0162] S406B, if there is a target canvas, rendering the pre-rendered animation on the pre-rendering canvas to the target canvas.

[0163] In the case where there is a target canvas, the pre-rendering canvas is an invisible canvas, the target canvas is a visible canvas, and the pre-rendering canvas and the target canvas have the same size.

[0164] S407B, if there is no target canvas, directly displaying the pre-rendered animation on the pre-rendering canvas.

[0165] In the case where there is no target canvas, the pre-rendering canvas is a visible canvas.

[0166] S408B, after the current frame canvas animation rendering is completed, the next frame canvas animation rendering is performed.

[0167] The above examples are only used to assist in explaining the technical solutions of the present disclosure, and the illustrated content and specific processes involved do not constitute a limitation on the use scenarios of the technical solutions of the present disclosure.

[0168] The related embodiments of the animation display device will be described in detail below.

[0169] Figure 5 FIG. 1 is a structural schematic diagram of an animation display device provided by an embodiment of the present application. The animation display device can be executed in an animation display engine, such as an animation display engine in a browser.

[0170] Specifically, as shown in FIG. 2, the animation display device 200 includes a sequence frame acquisition module 210, an animation pose calculation module 220, an animation pre-rendering module 230, and an animation display module 240. Figure 5

[0171] The sequence frame acquisition module 210 is configured to acquire sequence frames of an SVGA animation.

[0172] The animation pose calculation module 220 is configured to configure transformation parameters of animation elements corresponding to each of the sequence frames, and to calculate poses of the animation elements according to the transformation parameters.

[0173] The animation pre-rendering module 230 is configured to render the animation elements into corresponding pre-rendering canvases through a drawing interface according to the poses, to obtain pre-rendering animations.

[0174] The animation display module 240 is configured to render the pre-rendering animations in each of the pre-rendering canvases into a target canvas for display.

[0175] The animation display device provided by the embodiment realizes setting of an additional transformation animation during SVGA animation playing, and renders multiple SVGA animations that need to be played simultaneously into the same target canvas for display, which is beneficial to enriching the display form of the animation and reducing the rendering of the target canvas and the consumption of the CPU during animation rendering.

[0176] In one possible implementation manner, the animation display device 200 further includes an animation recording module including a silent playing unit and an animation recording unit.

[0177] The silent playing unit is configured to load an SVGA animation and perform silent playing. The animation recording unit is configured to call an image data interface to record the SVGA animation at a preset recording rate during the silent playing of the SVGA animation, to obtain sequence frames of the SVGA animation.

[0178] In one possible implementation manner, the animation pose calculation module 220 includes an animation transformation unit and a pose determination unit. ​

[0179] The animation transformation unit is configured to perform animation transformation on the animation elements according to the transformation parameters, wherein the animation transformation includes at least one of animation scaling, animation rotation, and animation movement.

[0180] The pose determination unit is configured to determine the pose of the animation element according to the animation transformation result of the animation element.

[0181] In one possible implementation, the animation pre-rendering module 230 includes a rendering area determination unit and a pre-rendered animation obtaining unit.

[0182] The rendering area determination unit is configured to determine the rendering area of the animation element on the pre-rendering canvas according to the pose.

[0183] The pre-rendered animation obtaining unit is configured to render at least two animation elements to the same rendering area of the pre-rendering canvas through a drawing interface to obtain the pre-rendered animation.

[0184] In one possible implementation, the rendering area determination unit includes a rectangle determination subunit and a rendering area determination subunit.

[0185] The rectangle determination subunit is configured to determine the minimum circumscribed rectangle of the animation element according to the pose, and the rendering area determination subunit is configured to determine the minimum circumscribed rectangle as the rendering area of the animation element on the pre-rendering canvas.

[0186] In one possible implementation, the pre-rendered animation obtaining unit includes a vertex rendering subunit, a texture image rendering subunit, and a pre-rendered animation generation subunit.

[0187] The vertex rendering subunit is configured to call a webGL interface to render four vertices corresponding to the animation element on the rendering area of the pre-rendering canvas through the webGL interface, the texture image rendering subunit is configured to render a texture image of the animation element in the area enclosed by the four vertices after the four vertices are rendered, and the pre-rendered animation generation subunit is configured to draw the texture images corresponding to at least two animation elements to the same pre-rendering canvas to obtain the pre-rendered animation.

[0188] In one possible implementation, the animation display module 240 includes an animation rendering unit and an animation display unit.

[0189] The animation rendering unit is configured to call an image drawing interface of a target canvas to render the pre-rendered animation in the pre-rendering canvas to the corresponding target canvas, and the animation display unit is configured to display the animation through the target canvas.

[0190] The animation display device of the embodiment can perform the animation display method shown in the foregoing embodiments of the application, and the implementation principle is similar, which will not be described here again.

[0191] The electronic device provided in the embodiments of the application includes a memory and a processor, and at least one program stored in the memory and used for being executed by the processor to achieve the following compared with the prior art: additional transformation animation is set when SVGA animation is played, and multiple SVGA animations that need to be played simultaneously are rendered to the same target canvas for display, which is beneficial to enrich the display form of the animation and reduce the rendering of the target canvas and the consumption of CPU during animation rendering.

[0192] In an optional embodiment, an electronic device is provided, as shown in Figure 6 The electronic device 4000 shown in Figure 6 The electronic device 4000 shown in

[0193] The processor 4001 can be a CPU (Central Processing Unit, central processor), a general-purpose processor, a DSP (Digital Signal Processor, data signal processor), an ASIC (Application Specific Integrated Circuit, application specific integrated circuit), an FPGA (Field Programmable Gate Array, field programmable gate array) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. It can implement or execute various exemplary logical blocks, modules and circuits described in combination with the disclosure. The processor 4001 can also be a combination of computing functions, such as one or more microprocessor combinations, combinations of DSP and microprocessor, etc.

[0194] The bus 4002 can include a path that transmits information between the above-described components. The bus 4002 can be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The bus 4002 can be divided into an address bus, a data bus, a control bus, etc. For convenience of representation, Figure 6 Only one thick line is used in the middle, but it does not mean that there is only one bus or one type of bus.

[0195] The memory 4003 can be a ROM (Read Only Memory) or other type of static storage device that can store static information and instructions, a RAM (Random Access Memory) or other type of dynamic storage device that can store information and instructions, an EEPROM (Electrically Erasable Programmable Read Only Memory), a CD-ROM (Compact Disc Read Only Memory) or other optical disk storage, a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited thereto.

[0196] The memory 4003 is used to store application program codes for implementing the scheme of the present application, and is controlled by the processor 4001 to perform. The processor 4001 is used to execute the application program codes stored in the memory 4003 to realize the content shown in the foregoing method embodiments.

[0197] The electronic device includes, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (Personal Digital Assistant), a PAD (Tablet Personal Computer), a PMP (Portable Multimedia Player), a car terminal (for example, a car navigation terminal), etc., and a fixed terminal such as a digital TV, a desktop computer, etc. Figure 6 The electronic device shown is only an example, and should not bring any limitation to the function and use range of the embodiments of the present disclosure.

[0198] The embodiment of the present application provides a computer readable storage medium, and the computer readable storage medium stores a computer program. When the computer program is executed on a computer, the computer can execute the corresponding content in the foregoing method embodiment. Compared with the prior art, the embodiment of the present application realizes setting of an additional transformation animation when SVGA animation is played, and renders a plurality of SVGA animations which need to be played simultaneously to the same target canvas for display, which is beneficial to enriching the display form of the animation and simultaneously reducing the rendering of the target canvas and the consumption of CPU during animation rendering.

[0199] The embodiment of the present application provides a computer program product or computer program, and the computer program product or computer program comprises computer instructions stored in a computer readable storage medium. A computer device, such as a processor of an electronic device, reads the computer instructions from the computer readable storage medium, and the processor executes the computer instructions, so that the computer device is executed to realize the following cases:

[0200] Obtaining sequence frames of SVGA animation;

[0201] Configuring transformation parameters of animation elements corresponding to each sequence frame, and calculating poses of the animation elements according to the transformation parameters;

[0202] According to the poses, the animation elements are respectively rendered into corresponding pre-rendering canvases through a drawing interface to obtain pre-rendering animations;

[0203] The pre-rendering animations in each pre-rendering canvas are rendered into a target canvas for display.

[0204] It should be noted that the computer-readable medium in the above disclosure can be a computer-readable signal medium or a computer-readable storage medium or any combination of the two. The computer-readable storage medium may, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device or apparatus. In the present disclosure, the computer-readable signal medium can include a data signal carried in a baseband or as a part of a carrier wave, which carries computer-readable program code. Such a propagated data signal can take many forms, including but not limited to an electromagnetic signal, an optical signal or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, which can send, propagate or transmit a program for use by or in conjunction with an instruction execution system, device or apparatus. The program code contained in the computer-readable medium can be transmitted by any suitable medium, including but not limited to a wire, a cable, an RF (radio frequency) or the like, or any suitable combination of the above.

[0205] The computer-readable medium described above can be contained in the electronic device described above; or can exist separately and not be assembled into the electronic device.

[0206] The computer-readable medium described above carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the methods shown in the above embodiments.

[0207] Computer program code for carrying out operations of the present disclosure can be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code can execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computer (for example, through the Internet using an Internet Service Provider).

[0208] The computer program instructions can also be loaded onto a computer or other programmable information processing apparatus to cause a series of operations to be performed on the computer or other programmable information processing apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable information processing apparatus implement the functions / acts specified in the flowchart and / or block diagram block or blocks.

[0209] The modules involved in the embodiments of the present disclosure can be implemented in the manner of software or hardware. Among them, the name of the module does not constitute a limitation to the module itself in some cases. For example, the sequence frame acquisition module can also be described as "a module for acquiring sequence frames".

[0210] It should be understood that although the steps in the flowcharts of the drawings are shown in a sequential order following the arrows, the steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated otherwise herein, the execution of the steps is not strictly limited to the order indicated by the arrows, and can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the drawings can include multiple sub-steps or multiple stages, which are not necessarily executed at the same time, but can be executed at different times, and the execution order of which is not necessarily sequential, but can be round-robin or alternating with at least some of the other steps or sub-steps or stages of other steps.

[0211] The above only describes some embodiments of the present application, and it should be pointed out that for those skilled in the art, without departing from the principles of the present application, a number of improvements and refinements can be made, which should also be considered as the protection scope of the present application.< / canvas>

Claims

1. A method of animating a display, characterized by, The method comprises the following steps: A browser-side initialization stage, setting the playback rate of a target canvas, loading SVGA animations and recording the SVGA animations at a preset recording rate to obtain sequence frames of the SVGA animations and cache the sequence frames; A rendering and display stage of the animations, configuring transformation parameters of animation elements corresponding to the sequence frames of the SVGA animations, calculating poses of the animation elements according to the transformation parameters; According to the poses, rendering the animation elements into pre-rendering canvases of the same size as the target canvas through a drawing interface to obtain merged pre-rendering animations; The pre-rendering canvases are invisible canvases; Rendering the pre-rendering animation frames in the pre-rendering canvases into a visible target canvas for display.

2. The method of claim 1, wherein, Further comprising: Loading the SVGA animations and performing silent playback; During the silent playback of the SVGA animations, calling an image data interface to record the SVGA animations at a preset recording rate to obtain sequence frames of the SVGA animations.

3. The method of claim 1, wherein, The step of calculating the poses of the animation elements according to the transformation parameters comprises: Performing animation transformation on the animation elements according to the transformation parameters; wherein the animation transformation comprises at least one of animation scaling, animation rotation and animation movement; Determining the poses of the animation elements according to the animation transformation results of the animation elements.

4. The method of claim 1, wherein, The step of rendering the animation elements into pre-rendering canvases of the same size as the target canvas through a drawing interface to obtain merged pre-rendering animations comprises: Determining the rendering areas of the animation elements on the pre-rendering canvases according to the poses; Rendering at least two of the animation elements onto the rendering areas corresponding to the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animations.

5. The method of claim 4, wherein, The step of determining the rendering areas of the animation elements on the pre-rendering canvases according to the poses comprises: Determining the minimum bounding rectangles of the animation elements according to the poses; Determining the minimum bounding rectangles as the rendering areas of the animation elements on the pre-rendering canvases.

6. The method of claim 4, wherein, The step of rendering at least two of the animation elements onto the rendering areas corresponding to the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animations comprises: Calling a webGL interface to render four vertices corresponding to the animation elements on the rendering areas corresponding to the pre-rendering canvas through the webGL interface; After the four vertices are rendered, rendering a texture image of the animation elements in the area enclosed by the lines connecting the four vertices; Drawing the texture images corresponding to at least two of the animation elements onto the same pre-rendering canvas to obtain the pre-rendering animations.

7. The method of claim 1, wherein, The step of rendering the pre-rendering animation frames in the pre-rendering canvases into a visible target canvas for display comprises: Calling an image drawing interface of the target canvas to render the pre-rendering animations rendered into the pre-rendering canvases onto corresponding target canvases; Displaying the animations through the target canvases.

8. An animated display device, characterized by Comprise: The sequence frame acquisition module is configured to set a play rate of a target canvas, load SVGA animations, record the SVGA animations at a preset recording rate, and acquire sequence frames of the SVGA animations to be cached in a browser end initialization stage. The animation pose calculation module is configured to configure transformation parameters of animation elements corresponding to the sequence frames of the SVGA animations, and calculate poses of the animation elements according to the transformation parameters in a rendering and display stage of animation display. The animation pre-rendering module is configured to render the animation elements into pre-rendering canvases of the same size as the target canvas according to the poses through a drawing interface, and obtain merged pre-rendering animations. The pre-rendering canvases are invisible canvases. The animation display module is configured to render the pre-rendering animation frames in the pre-rendering canvases into a visible target canvas for display.

9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the program to implement the animation display method in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the program is executed by the processor to implement the animation display method in any one of claims 1-7.

Images