CN112700519A

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

Info

Publication number: CN112700519A
Application number: CN202011615381.6A
Authority: CN
Inventors: 钟永安
Original assignee: Guangzhou Cubesili Information Technology Co Ltd
Current assignee: Guangzhou Cubesili Information Technology Co Ltd
Priority date: 2020-12-30
Filing date: 2020-12-30
Publication date: 2021-04-23

Abstract

The embodiment of the application provides a method and a device for displaying animation, electronic equipment and a computer readable storage medium, which relate to the field of computer application, and the method comprises the steps of obtaining sequence frames of SVGA animation; configuring the transformation parameters of the animation elements corresponding to each sequence frame and calculating to obtain the corresponding poses of the animation elements; rendering the animation elements into corresponding pre-rendering canvas through a drawing interface respectively according to the pose to obtain pre-rendering animation; and rendering the pre-rendering animation in the pre-rendering canvas to a target canvas for displaying. This technical scheme has realized setting up extra transform animation when SVGA animation is broadcast, and will need a plurality of SVGA animations of simultaneous play to demonstrate on same target canvas of rendering, is favorable to richening the show form of animation, reduces the rendering of target canvas simultaneously, reduces the consumption of CPU when the animation is rendered.

Description

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

Technical Field

The present application relates to the field of computer applications, and in particular, to an animation display method, an animation display device, an electronic device, and a computer-readable storage medium.

Background

Often, cool animations are visible on a typical web page or video interface. In video live animation, an SVGA (Scalable Vector Graphics animation) mode is generally adopted to draw animation. The principle of the SVGA animation is that a file in an SVG format is analyzed into data such as key frames, vector paths, styles and the like, and then the data acts on picture resources.

When the SVGA animation is played, the animation can be played only according to the preset animation effect, and a user is difficult to carry out secondary editing on the SVGA animation so as to realize additional animations such as displacement, scaling and rotation, and the animation display effect is single; in addition, when the traditional SVGA animation is played, each SVGA animation element corresponds to a visible canvas (canvas), and the more canvas visible in the page, the performance of the browser page is reduced, and the jamming is easily caused.

Disclosure of Invention

The purpose of the present application is to solve at least one of the above technical drawbacks, and in particular, to solve the problem that secondary editing of an animation is difficult to implement and a page is easy to be jammed.

In a first aspect, an embodiment of the present application provides an animation display method, including the following steps:

acquiring a sequence frame of the SVGA animation;

configuring transformation parameters of animation elements corresponding to the sequence frames, and calculating the poses corresponding to the animation elements according to the transformation parameters;

rendering the animation elements into corresponding pre-rendering canvas through a drawing interface respectively according to the pose to obtain pre-rendering animation;

and rendering the pre-rendering animations in the pre-rendering canvases into a target canvases for displaying.

In a possible implementation manner, before the step of obtaining the sequence frames of the SVGA animation, the method further includes:

loading SVGA animation, and performing silent playing;

and in the process of playing the SVGA animation in a silent manner, calling an image data interface to record the SVGA animation at a preset recording rate to obtain a sequence frame of the SVGA animation.

In a possible implementation manner, the step of calculating the pose corresponding to the animation element according to the transformation parameter includes:

carrying out 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;

and determining the pose of the animation element according to the animation transformation result of the animation element.

In a possible implementation manner, the step of rendering the animation elements to the corresponding pre-rendering canvas through the drawing interfaces respectively according to the pose to obtain the pre-rendering animation includes:

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

and rendering at least two animation elements to a rendering area corresponding to the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animation.

In one possible implementation, the step of determining a rendering area of the animation element on the pre-rendering canvas according to the pose includes:

determining the minimum circumscribed rectangle of the animation element according to the pose;

and determining the minimum bounding rectangle as a rendering area of the animation element on a pre-rendering canvas.

In a possible implementation manner, the step of rendering at least two animation elements to a rendering area corresponding to the same prerendering canvas through a drawing interface to obtain a prerendering animation includes:

calling a webGL interface, and rendering four vertexes corresponding to the animation elements on a rendering area corresponding to the pre-rendering canvas through the webGL interface;

after four vertexes are rendered, rendering a texture image of the animation element in an area surrounded by connecting lines of the four vertexes;

and drawing texture images corresponding to at least two animation elements on the same pre-rendering canvas to obtain the pre-rendering animation.

In a possible implementation manner, the step of rendering the prerendered animations in each prerendered canvas to a target canvas for playing includes:

calling an image drawing interface of a target canvas, and rendering the pre-rendering animation rendered into the pre-rendering canvas onto the corresponding target canvas;

and displaying the animation through the target canvas.

In a second aspect, an embodiment of the present application provides an animation display device, including:

the sequence frame acquisition module is used for acquiring sequence frames of the SVGA animation;

the animation pose calculation module is used for configuring the transformation parameters of the animation elements corresponding to the sequence frames and calculating the poses corresponding to the animation elements according to the transformation parameters;

the animation pre-rendering module is used for rendering the animation elements into corresponding pre-rendering canvases through drawing interfaces respectively according to the poses to obtain pre-rendering animations;

and the animation display module is used for rendering the pre-rendering animation in each pre-rendering canvas to a target canvas for display.

In a third aspect, an embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the animation display method according to the first aspect is implemented.

In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the animation display method according to the first aspect is implemented.

The animation display method, the animation display device, the electronic equipment and the computer readable storage medium provided by the embodiments obtain the sequence frame of the SVGA animation; configuring the transformation parameters of the animation elements corresponding to each sequence frame and calculating to obtain the corresponding poses of the animation elements; rendering the animation elements into corresponding pre-rendering canvas through a drawing interface respectively according to the pose to obtain pre-rendering animation; and rendering the pre-rendering animation in the pre-rendering canvas to a target canvas for displaying. This technical scheme has realized setting up extra transform animation when SVGA animation is broadcast, and will need a plurality of SVGA animations of simultaneous play to demonstrate on same target canvas of rendering, is favorable to richening the show form of animation, reduces the rendering of target canvas simultaneously, reduces the consumption of CPU when the animation is rendered.

Additional aspects and advantages of the present application will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the present application.

Drawings

The foregoing and/or additional aspects and advantages of the present application will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:

FIG. 1 is a schematic diagram of an application environment for which an animation display provided by an embodiment of the present application is applicable;

FIG. 2 is a flowchart of an animation display method according to an embodiment of the present disclosure;

FIG. 3 is a flowchart of a method for generating pre-rendering animation according to an embodiment of the present disclosure;

FIG. 4A is a flow chart of an initialization phase of an animation display provided by an embodiment of the application;

FIG. 4B is a flowchart of a rendering display phase of an animation display provided by an embodiment of the present application;

FIG. 5 is a schematic structural diagram of an animation display device according to an embodiment of the present disclosure;

fig. 6 is a schematic structural diagram of an electronic device suitable for rendering of a page animation according to an embodiment of the present application.

Detailed Description

Reference will now be made in detail to embodiments of the present application, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are exemplary only for the purpose of explaining the present application and are not to be construed as limiting the present application.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof. It will be 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 may also be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. As used herein, the term "and/or" includes all or any element and all combinations of one or more of the associated listed items.

It will be understood by those within the art that, unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. It will be further understood that terms, such as those defined in commonly used dictionaries, should be interpreted as having a meaning that is consistent with their meaning in the context of the prior art and will not be interpreted in an idealized or overly formal sense unless expressly so defined herein.

The following terms are introduced and explained in relation to the present application:

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

webGL (web Graphics Library): the 3D drawing protocol is realized, the webGL allows JavaScript and OpenGL ES 2.0 to be combined together, hardware 3D accelerated rendering can be provided for HTML5 Canvas by adding one JavaScript binding of OpenGL ES 2.0, a web developer can more smoothly display 3D scenes and models in a browser by means of a system display card, and complicated navigation and data visualization can be created.

Canvas (Canvas): is for drawing graphics on a web page. A canvas of HTML5 uses JavaScript to draw images on web pages. The canvas is a rectangular area, each pixel of which can be controlled. Canvas has a variety of drawing paths, rectangles, circles, characters, and methods of adding images.

Before explaining the embodiments of the present application in detail, an application scenario of the embodiments of the present application will be described. The method provided by the embodiment of the application is applied to an animation display scene.

With the development of live broadcast services, in order to improve the display effect of live broadcast pages, cool animation can be displayed on the live broadcast pages to enhance attraction. Fig. 1 is a schematic view of an application environment suitable for animation display provided in an embodiment of the present application, and as shown in fig. 1, a sequence frame of a related animation is obtained by using a related engine in a browser 101, for example, an animation display engine, animation elements in the sequence frame are rendered on a page after being transformed to obtain a page animation, and the page animation is delivered to a terminal device 102 for display. The terminal device 102 includes a smart phone, a notebook computer, a desktop computer, a tablet, and other devices capable of browsing pages.

When the SVGA animation is played, the animation can only be played according to the preset animation effect, and a user cannot perform displacement, scaling, rotation and other transformations on the SVGA animation, so that the animation display effect is single, if the SVGA animation display effect is required to be changed, a developer needs to rewrite the display codes of the SVGA animation, and the work load is large and complex.

For example, a game "balloon" applied to a live room is developed. The balloon is continuously floated on the browser page, moves on the page, and plays SVGA animation, such as animation of balloon explosion when the user clicks the balloon. If the traditional SVGA animation is used, when too many balloons explode in the same screen, because the SVGA animation needs to be re-analyzed every time, each SVGA animation element can generate a corresponding visible canvas in a page, the more visible canvases are in the page, the more performance is consumed, and finally the stagnation is caused, and a developer wants to edit the SVGA animation of the balloon explosion in the playing process, such as ascending, amplifying, rotating and the like, the traditional SVGA player is unsupported.

The animation display method, device, equipment and computer readable storage medium provided by the application aim to solve the technical problems in the prior art.

The following describes the technical solutions of the present application and how to solve the above technical problems with specific embodiments. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments.

Embodiments of the present application will be described in detail below with reference to the accompanying drawings.

Fig. 2 is a flowchart of an animation display method provided in an embodiment of the present application, which may be applied to an animation display engine, such as an animation display engine of a browser.

As shown in fig. 2, the animation display method may include the steps of:

and S210, acquiring a sequence frame of the SVGA animation.

And acquiring the sequence frame of the SVGA animation from the address in which the SVGA animation is stored in advance. The SVGA animation can be local animation, also can be animation downloaded from a network in advance, and also can be animation made by self.

Before step S210, the following steps may be further included:

and S200A1, loading the SVGA animation, and performing silent playing.

And acquiring a storage address of the SVGA animation, and loading a specified SVga file through the SVGA player, wherein the specified SVga file is the SVGA animation used for rendering on a page.

And carrying out silent playing on the SVGA animation by using an SVGA player.

S200A2, in the process of playing the SVGA animation in a silent mode, calling an image data interface to record the SVGA animation at a preset recording rate, and obtaining and caching sequence frames of the SVGA animation.

In this embodiment, the image data interface may be the getImageData interface in the Canvas.

In the embodiment, during the silent playing of the SVGA animation, the getImageData interface in the Canvas is called to record the SVGA animation at the preset recording rate, so as to obtain the sequence frame of the SVGA animation and cache the sequence frame, wherein the preset recording rate is consistent with the target playing rate of the finally displayed animation.

For example, the original playout rate for SVGA animations is 20 frames/second, while the target playout rate for animations ultimately presented by the user is 60 frames/second. Therefore, the new SVGA animation is recorded again at the preset recording speed which is the same as the target playing speed for caching, so that the SVGA animation can be conveniently embedded into other canvas animations based on canvas subsequently, and the consistency of the playing speed of the new SVGA animation and the playing speed of the subsequent canvas animation is ensured. When animation rendering is needed, SVGA sequence frames are obtained from the cache, so that waste of computing resources is avoided

S220, configuring the transformation parameters of the corresponding animation elements in each sequence frame, and calculating the pose corresponding to the animation elements according to the transformation parameters.

Based on the layout of the animation elements on the presentation page, that is, the layout of the animation elements on the page, such as position information and height information, in the present embodiment, the animation transformation code is written to configure the transformation parameters of the animation effect of the animation elements.

The following exemplary configuration of the transformation parameters for an animation element:

origin＝{x:100,y:100,width:100,height:100}

animat＝{x:200,y:200,width:50,height:50}

animatOption＝{time:5000,timeFn:linear}

wherein origin is the original coordinate position, and animat is the animation ending coordinate position.

animation is an option of animation, which includes duration (time) and animation speed type (timeFn, which is generally 3, moving at a constant speed, moving at a slow speed and moving at a slow speed).

The animation effect represented by the transformation parameters is as follows: the animation elements move 100 units to the right/below respectively at a constant speed within 5 seconds from the original coordinates, and the area is reduced by 0.5 times.

Of course, in other embodiments, different transformation parameters may be set according to actual conditions to achieve different animation effects.

And acquiring the animation transformation codes which are written in advance, and analyzing the animation transformation codes to obtain transformation parameters preset for each animation element. The transformation parameters comprise at least one of animation scaling parameters, rotation parameters, moving tracks, animation starting positions, animation ending positions, animation moving speeds, moving directions and preset display duration.

In this embodiment, the animation elements render different poses on the page over time, the poses including position and pose. The position refers to a position where the animation element is rendered at a certain moment, and the posture refers to a size, a rotation angle and the like of the animation element which is subjected to scaling processing when the animation element is rendered at a certain moment.

For example, the preset animation element has the transformation effect corresponding to the transformation parameter: the page animation is played at a speed of 60 frames per second, for example, if the coordinates of the original position of the balloon animation element are 0, and it is required to move 240 units to the right within 2 seconds, it is required to move 2 units per frame. If the preset display time length is 2 seconds, the current actual display time length is 0.5 seconds, and the remaining time is 1.5 seconds, the animation element is drawn at the position of the position coordinate 60, and if the corresponding remaining time is 0.5 seconds, the current animation element needs to be drawn at the position of 180 through calculation.

The above example is explained by displacement transformation, the principles of scaling transformation and rotation transformation of animation elements are the same, and the position corresponding to the displacement transformation and the posture corresponding to the scaling transformation and the rotation transformation are combined to obtain the rendering posture of the current animation element.

And S230, rendering the animation elements to corresponding pre-rendering canvases through drawing interfaces respectively according to the poses to obtain pre-rendering animations.

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

In this embodiment, animation elements are rendered onto corresponding pre-rendering canvases respectively by combining with corresponding poses thereof through a drawing interface, such as a webGL interface, that is, SVGA animations are rendered onto the pre-rendering canvases through the webGL interface, so as to obtain pre-rendering animations.

Furthermore, a plurality of animation elements displayed at the same time can be drawn in the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animation.

For example, multiple "balloon" animations are presented distributed at different locations on the same page, and multiple "balloon" animations, such as "balloon 1", "balloon 2", and "balloon 3", are presented simultaneously while the page is presented. At this time, "balloon 1", "balloon 2", and "balloon 3" may all be drawn on the same invisible prerendering canvas, resulting in a prerendering animation. In this embodiment, the pre-rendered animation may be a frame of independent animation.

S240, rendering the pre-rendering animations in the pre-rendering canvases into a target canvas for displaying.

And rendering the pre-rendering animation drawn on the pre-rendering canvas to a target canvas as a whole for showing.

In an embodiment, the rendering the prerendered animations in each prerendered canvas to the target canvas for playing in step S240 may include the following steps:

s2401, calling an image drawing interface of a target canvas, and rendering the pre-rendering animation rendered into the pre-rendering canvas onto the corresponding target canvas.

The image drawing interface may be a drawImage interface that draws an image, canvas, or video on a target canvas using a drawImage () method. The drawImage () method can also draw certain portions of the image and/or increase or decrease the size of the image.

In this embodiment, a drawImage interface of a target canvas is called to render a rendering animation drawn on a pre-rendering canvas onto the corresponding target canvas, which is a visible canvas. It can be understood that drawing multiple animation elements on the same invisible prerender canvas obtains an integral frame of prerender animation (which can be regarded as an image), and then transferring the prerender animation to the visible target canvas.

S2402, displaying the animation through the target canvas.

The size of the pre-rendering canvas is the same as that of the target canvas, so that the pre-rendering animation on the pre-rendering canvas is directly transferred to the target canvas for display.

According to the animation display method provided by the embodiment, sequence frames of the SVGA animation are obtained, transformation parameters of animation elements corresponding to the sequence frames are configured, the pose corresponding to each animation element is obtained through calculation according to the transformation parameters, the animation elements are respectively rendered into corresponding pre-rendering canvases through drawing interfaces according to the poses to obtain pre-rendering animations, and the pre-rendering animations in the pre-rendering canvases are rendered into a target canvas for display. This technical scheme has realized setting up extra transform animation when SVGA animation is broadcast, and will need a plurality of SVGA animations of simultaneous play to demonstrate on same target canvas of rendering, is favorable to richening the show form of animation, reduces the rendering of target canvas simultaneously, reduces the consumption of CPU when the animation is rendered.

In the related technology, the traditional SVGA does not provide an interface to allow a developer to carry out secondary editing on the SVGA animation so as to realize secondary animation such as displacement, scaling or rotation; in addition, when a plurality of SVGA animation elements are played simultaneously in a page, the plurality of Canvas can cause the performance waste of the playing device and even the blocking when the SVGA animation elements are played simultaneously. According to the technical scheme, the SVGA animation can be edited for the second time, extra animations such as displacement, scaling or rotation can be set when the SVGA is played, and the situation that a developer needs to export some animations again is avoided. A plurality of animation elements are rendered on a visible target canvas after being drawn together by using the invisible pre-rendering canvas, so that the number of the target canvas is reduced, and the consumption of a CPU (Central processing Unit) during animation display is reduced.

In order to more clearly illustrate the technical solution of the present application, the following provides more embodiments for the rendering method based on the page animation.

In an embodiment, the calculating the pose corresponding to the animation element according to the transformation parameter in step S220 may include the following steps:

s2201, performing animation transformation on the animation element according to the transformation parameters.

Wherein the animation transformation comprises: at least one of animation scaling, animation rotation, and animation movement; the transformation parameters comprise at least one of animation scaling parameters, rotation parameters, moving tracks, animation starting positions, animation ending positions, animation moving speeds, moving directions and preset display duration.

And each animation element is provided with a corresponding preset display duration. If the animation effect corresponding to the transformation parameter of the balloon animation element is as follows: the balloon floated from bottom to top and disappeared after 5 seconds of display. In this embodiment, the preset display duration refers to a maximum time length of the animation element displayed on the page, and the actual display duration refers to a time length of the current animation element displayed on the page.

And if the actual display duration of the current animation element is detected to reach the preset display duration, removing the current animation element from the element queue, for example, removing the balloon animation element from the element queue, and reading the next animation element, for example, a eight-treasure box. If the actual display duration of the current animation element is detected to be shorter than the preset display duration, calculating a transformation matrix corresponding to the current animation element according to the remaining time corresponding to the preset display duration, performing animation transformation on the animation element according to the transformation matrix, performing animation transformation on the animation element by using the transformation matrix,

for example, describing by displacement transformation, the original coordinate position of the current animation element is (0,0) and the ending coordinate position of the current animation element is (100,0), the preset display duration (i.e., the movement duration) is 5 seconds, and the animation element moves at a constant speed. If the actual display time length is 2 seconds, the remaining display time length is 3 seconds, and at this time, the current position is calculated to be (40, 0).

Similarly, the original deflection angle of the current animation element is 0 degrees, the ending deflection angle is 90 degrees, the preset display duration is 5 seconds, and the animation element deflects at a constant speed. If the actual display time is 2 seconds, the remaining display time is 3 seconds, and at this time, the current deflection angle is calculated to be 32 °.

And calculating a transformation matrix of the current animation element at the current time by presetting the remaining time corresponding to the display duration, wherein the transformation matrix comprises a scaling matrix, a displacement matrix, a rotation matrix and the like.

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

In this embodiment, a transformation matrix corresponding to the transformed animation is obtained according to the animation transformation result of the animation element, and the transformation matrix may include a scaling matrix, a displacement matrix, a rotation matrix, and the like. Furthermore, the calculation result obtained by multiplying each transformation matrix is used as the pose of the animation element. In this embodiment, if no scaling, displacement or rotation occurs, the corresponding transformation matrix is represented by "1".

In an embodiment, the rendering the animation elements to the corresponding pre-rendering canvas through the drawing interfaces according to the pose in step S230 to obtain the pre-rendering animation may include the following steps:

s2301, determining a rendering area of the animation element on the pre-rendering canvas according to the pose.

In this embodiment, the poses of the animation elements are different, and the rendering areas occupied by the animation elements on the pre-rendering canvas are also different, for example, the rendering areas of the animation elements on the pre-rendering canvas are determined according to the information related to the poses of the animation elements, such as the sizes, the rotation angles, the shapes, and the like of the animation elements.

And determining the position coordinates of key points in the animation elements according to the poses of the animation elements, and determining the rendering area of the animation elements on the pre-rendering canvas according to the position coordinates of the key points. An area surrounded by a line connecting the key points on the outline of the animation element is determined as a rendering area on the pre-rendering canvas.

In an embodiment, the step S2301 of determining the rendering area of the animation element on the pre-rendering canvas according to the pose may include the steps of:

(1) and determining the minimum bounding rectangle of the animation element according to the pose.

The Minimum Bounding Rectangle (MBR) refers to the maximum range of a plurality of two-dimensional shapes (such as points, lines, and polygons) represented by two-dimensional coordinates, that is, a rectangle whose boundary is defined by the maximum abscissa, the minimum abscissa, the maximum ordinate, and the minimum ordinate of each vertex of a given two-dimensional shape.

In this embodiment, four vertices corresponding to the animation element are determined according to the pose, and an area surrounded by the four vertices connected in sequence is determined as the minimum external rectangle of the animation element.

(2) And determining the minimum bounding rectangle as a rendering area of the animation element on a pre-rendering canvas.

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,

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

And calling a drawing interface, such as a webGL interface, to render the poses of at least two animation elements to corresponding rendering areas in the same pre-rendering canvas according to the poses determined by the transformation parameters, so as to obtain the pre-rendering animation. Prerendered animations may be understood as animations that are rendered on an invisible canvas, not really presented to the user.

In this embodiment, a CSS-based page animation is rendered based on webGL using a Graphics algorithm, and multiple animation elements are combined into one canvas for presentation, so that multiple animation elements are rendered at one time on the same canvas, and a page redrawing rate is reduced, where the page redrawing rate refers to the number of times that animation elements are rendered onto a page per second by using a CPU (Central Processing Unit)/GPU (Graphics Processing Unit) when animation elements change.

Fig. 3 is a flowchart of a method for generating a pre-rendering animation according to an embodiment of the present disclosure, and as shown in fig. 3, in an embodiment, rendering at least two animation elements to a rendering area corresponding to a same pre-rendering canvas through a drawing interface in step S2302 to obtain the pre-rendering animation may include the following steps:

s301, calling a webGL interface, and rendering four vertexes corresponding to the animation elements on a rendering area corresponding to the pre-rendering canvas through the webGL interface.

WebGL enables 3D rendering of web pages in a canvas using an OpenGL ES 2.0 based API without using any plug-ins in a browser that supports HTML < canvas > tags.

In general, animation elements are generally rectangular in shape, such as rectangles and squares. After four vertexes of the animation element on the diagonal line are determined, an area surrounded by sequential connection lines of the four vertexes can be determined as an area occupied by the animation element.

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

S302, after four vertexes are rendered, rendering the texture image of the animation element in the area enclosed by the four vertexes.

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

Furthermore, after four vertexes 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 an area surrounded by connecting lines of the four vertexes.

Specifically, the rendering process of each animation element may include at least one of the following steps:

(1) setting 4 vertex original coordinates through webGL.vertexAttribPointer;

(2) setting 4 vertex displacement matrixes through webGL. unifomMatrix 4fv to realize displacement transformation of animation elements;

(3) setting 4 vertex rotation matrixes through webGL. unifomMatrix 4fv to realize the rotation transformation of animation elements;

(4) setting 4 vertex scaling matrixes through webGL. unifomMatrix 4fv to realize scaling transformation of animation elements;

(5) binding the texture rendered by the current animation element to the vertex range through webGL.bindTexture;

(6) draw 4 vertices into the canvas through webgl. drawarrays, the texture will automatically attach to the vertex range.

S303, drawing the texture images corresponding to the at least two animation elements on the same pre-rendering canvas to obtain the pre-rendering animation.

Based on the example, the vertexes of at least two animation elements are rendered on the same pre-rendering canvas, and the pre-rendering animation based on the pre-rendering canvas is obtained in the rendering area surrounded by the vertex connecting line by rendering the texture images corresponding to the at least two animation elements.

Optionally, each frame of page corresponds to one rendering queue, and when all elements in the rendering queue are rendered, rendering of the animation of the next frame of page is performed.

According to the animation display method provided by the embodiment, a plurality of animation elements are drawn on the same pre-rendering canvas to obtain the pre-rendering animation, the pre-rendering animation is rendered on the target canvas for rendering, and then the pre-rendering animation is displayed on the page, so that the number of the target canvas is reduced when the page is rendered, the consumption of a CPU (central processing unit) in the rendering engine during animation processing is reduced, and the page jam is avoided.

To explain the present application in more detail, the following exemplarily explains the technical solution of the present application with reference to fig. 4A and 4B. Fig. 4A is a flowchart of an initialization phase of an animation display provided in an embodiment of the present application, and fig. 4B is a flowchart of a rendering display phase of the animation display provided in the embodiment of the present application.

In the present embodiment, the animation display includes an initialization phase and a rendering display phase.

As shown in FIG. 4A, the initialization phase of the animation display includes:

S401A, initializing an animation display engine by a browser end;

S402A, setting the playing speed of the target canvas.

S403A, loading the SVGA animation from the specified source SVGA file.

S404A, playing the SVGA animation in a canvas special for SVGA recording in a silent mode, and recording the SVGA animation at a preset recording rate.

And the preset recording rate is the same as the playing rate of the target canvas.

And S405A, caching the recorded sequence frames of the SVGA animation for subsequent use.

As shown in fig. 4B, the rendering and presenting phase of the animation presentation includes:

S401B, obtaining sequence frames of the SVGA animation.

S402B, configuring the transformation parameters of the animation elements corresponding to the sequence frames.

The transformation parameters comprise at least one of animation scaling parameters, rotation parameters, moving tracks, animation starting positions, animation ending positions, animation moving speeds, moving directions and preset display duration.

And S403B, calculating the pose corresponding to the animation element according to the transformation parameters.

S404B, rendering four vertexes of the animation element to a pre-rendering canvas through a webGL interface according to the pose.

S405, 405B, rendering the texture image corresponding to the animation element on the pre-rendering canvas through the webGL interface.

And rendering the texture image of the current frame animation element on the same geometric plane through a texture unit mechanism of the webGL to obtain the texture images corresponding to a plurality of animation elements.

S406, 406B, if the target canvas exists, rendering the pre-rendering animation on the pre-rendering canvas to the target canvas.

Under the scene that the target canvas exists, the pre-rendering canvas is invisible, the target canvas is visible, and the pre-rendering canvas and the target canvas are the same in size.

S407B, if the target canvas does not exist, the pre-rendering animation on the pre-rendering canvas is directly displayed.

In a scenario where no target canvas exists, the pre-rendering canvas is a visible canvas.

S408B, the rendering of the canvas animation of the frame is completed, and the rendering of the canvas animation of the next frame is carried out.

The above examples are merely used to assist in explaining the technical solutions of the present disclosure, and the drawings and specific flows related thereto do not constitute a limitation on the usage scenarios of the technical solutions of the present disclosure.

The following describes in detail a related embodiment of the animation display device.

Fig. 5 is a schematic structural diagram of an animation demonstration apparatus according to an embodiment of the present application, where the animation demonstration apparatus may be implemented in an animation demonstration engine, such as an animation demonstration engine in a browser.

Specifically, as shown in fig. 5, the animation display apparatus 200 includes a sequence frame acquiring module 210, an animation pose calculating module 220, an animation pre-rendering module 230, and an animation display module;

the sequence frame acquiring module 210 is configured to acquire a sequence frame of an SVGA animation;

an animation pose calculation module 220, configured to configure a transformation parameter of an animation element corresponding to each sequence frame, and calculate a pose corresponding to the animation element according to the transformation parameter;

the animation pre-rendering module 230 is configured to respectively render the animation elements into corresponding pre-rendering canvases through drawing interfaces according to the poses, so as to obtain pre-rendering animations;

and the animation display module 240 is used for rendering the pre-rendering animation in each pre-rendering canvas to a target canvas for display.

The animation display device that this embodiment provided has realized setting up extra transform animation when SVGA animation is broadcast, and will need a plurality of SVGA animations of broadcast simultaneously to demonstrate on same target canvas of rendering up, is favorable to richening the show form of animation, reduces the rendering of target canvas simultaneously, reduces the consumption of the CPU when the animation is rendered.

In one possible implementation, the animation display device 200 further includes: the animation recording module comprises a silent playing unit and an animation recording unit;

the system comprises a silent playing unit, a processing unit and a display unit, wherein the silent playing unit is used for loading SVGA animations and carrying out silent playing; and the animation recording unit is used for calling an image data interface to record the SVGA animation at a preset recording rate in the process of playing the SVGA animation in a silent mode to obtain the sequence frame of the SVGA animation.

In one possible implementation, the animation pose calculation module 220 includes: an animation transformation unit and a pose determination unit;

the animation transformation unit is used for carrying out 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;

and the pose determining unit is used for determining the pose of the animation element according to the animation transformation result of the animation element.

In one possible implementation, the animation pre-rendering module 230 includes: a rendering area determining unit and a pre-rendering animation obtaining unit;

the rendering area determining unit is used for determining a rendering area of the animation element on a pre-rendering canvas according to the pose;

and the pre-rendering animation obtaining unit is used for rendering at least two animation elements to a rendering area corresponding to the same pre-rendering canvas through a drawing interface to obtain the pre-rendering animation.

In one possible implementation manner, the rendering area determining unit includes: a rectangle determining subunit and a rendering area determining subunit;

the rectangle determining subunit is used for determining the minimum circumscribed rectangle of the animation element according to the pose; and the rendering area determining subunit is used for determining the minimum bounding rectangle as the rendering area of the animation element on the pre-rendering canvas.

In one possible implementation manner, the pre-rendering animation obtaining unit includes: the system comprises a vertex rendering subunit, a texture image rendering subunit and a pre-rendering animation generating subunit;

the vertex rendering subunit is configured to invoke a webGL interface, and render four vertices corresponding to the animation element on a rendering area corresponding to the pre-rendering canvas through the webGL interface; the texture image rendering subunit is used for rendering the texture image of the animation element in an area surrounded by connecting lines of the four vertexes after the four vertexes are rendered; and the pre-rendering animation generation subunit is used for drawing the texture images corresponding to the at least two animation elements onto the same pre-rendering canvas to obtain the pre-rendering animation.

In one possible implementation, the animation display module 240 includes: the animation rendering unit and the animation display unit;

the system comprises an animation rendering unit, a target canvas generation unit and a target canvas generation unit, wherein the animation rendering unit is used for calling an image drawing interface of the target canvas and rendering the pre-rendering animation rendered into the pre-rendering canvas onto the corresponding target canvas; and the animation display unit is used for displaying the animation through the target canvas.

The animation display device of this embodiment can perform the animation display method shown in the previous embodiments of the present application, and the implementation principles thereof are similar, and are not described herein again.

An embodiment of the present application provides an electronic device, including: a memory and a processor; at least one program stored in the memory for execution by the processor, which when executed by the processor, implements: realized setting up extra transform animation when SVGA animation is broadcast, and will need a plurality of SVGA animations of simultaneous play to demonstrate on same target canvas of rendering, be favorable to richening the show form of animation, reduce the rendering of target canvas simultaneously, reduce the consumption of CPU when the animation is rendered.

In an alternative embodiment, an electronic device is provided, as shown in fig. 6, the electronic device 4000 shown in fig. 6 comprising: a processor 4001 and a memory 4003. Processor 4001 is coupled to memory 4003, such as via bus 4002. Optionally, the electronic device 4000 may further include a transceiver 4004, and the transceiver 4004 may be used for data interaction between the electronic device and other electronic devices, such as transmission of data and/or reception of data. In addition, the transceiver 4004 is not limited to one in practical applications, and the structure of the electronic device 4000 is not limited to the embodiment of the present application.

The Processor 4001 may be a CPU (Central Processing Unit), a general-purpose Processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array) or other Programmable logic device, a transistor logic device, a hardware component, or any combination thereof. Which may implement or perform the various illustrative logical blocks, modules, and circuits described in connection with the disclosure. The processor 4001 may also be a combination that performs a computational function, including, for example, a combination of one or more microprocessors, a combination of a DSP and a microprocessor, or the like.

Bus 4002 may include a path that carries information between the aforementioned components. The bus 4002 may be a PCI (Peripheral Component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The bus 4002 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 6, but this is not intended to represent only one bus or type of bus.

The Memory 4003 may be a ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, a RAM (Random Access Memory) or other types of dynamic storage devices 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 Disc storage, optical Disc storage (including Compact Disc, laser Disc, optical Disc, digital versatile Disc, blu-ray Disc, etc.), a magnetic Disc storage medium or other magnetic storage devices, 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 to these.

The memory 4003 is used for storing application codes for executing the scheme of the present application, and the execution is controlled by the processor 4001. Processor 4001 is configured to execute application code stored in memory 4003 to implement what is shown in the foregoing method embodiments.

Among them, electronic devices include but are not limited to: mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and fixed terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.

The present application provides a computer-readable storage medium, on which a computer program is stored, which, when running on a computer, enables the computer to execute the corresponding content in the foregoing method embodiments. Compared with the prior art, the embodiment of the application realizes that extra transformation animations are set when the SVGA animations are played, and a plurality of SVGA animations needing to be played simultaneously are rendered on the same target canvas for display, so that the display form of the animations is enriched, the rendering of the target canvas is reduced simultaneously, and the consumption of a CPU (central processing unit) during rendering of the animations is reduced.

Embodiments of the present application provide a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. A computer device, such as an electronic device, having a processor that reads the computer instructions from the computer-readable storage medium, the processor executing the computer instructions, such that the computer device, when executed, implements:

acquiring a sequence frame of the SVGA animation;

It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.

The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.

The computer readable medium 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.

Computer program code for carrying out operations for aspects of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may 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 case of a remote computer, the remote computer may 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 may be made to an external computer (for example, through the Internet using an Internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules described in the embodiments of the present disclosure may be implemented by software or hardware. The name of a module does not in some cases constitute a limitation of the module itself, and for example, the sequence frame acquisition module may also be described as a "module acquiring sequence frames".

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

The foregoing is only a partial embodiment of the present application, and it should be noted that, for those skilled in the art, several modifications and decorations can be made without departing from the principle of the present application, and these modifications and decorations should also be regarded as the protection scope of the present application.

Claims

1. An animation display method is characterized by comprising the following steps:

acquiring a sequence frame of the SVGA animation;

2. The method of claim 1, wherein said step of obtaining sequential frames of SVGA animation is preceded by the steps of:

loading SVGA animation, and performing silent playing;

3. The method according to claim 1, wherein the step of calculating the pose corresponding to the animation element according to the transformation parameters comprises:

4. The method according to claim 1, wherein the step of rendering the animation elements into corresponding pre-rendering canvases respectively through drawing interfaces according to the poses to obtain pre-rendering animations comprises:

5. The method of claim 4, wherein the step of determining a rendering area of the animation element on a pre-rendering canvas according to the pose comprises:

6. The method of claim 4, wherein rendering at least two of the animation elements onto a rendering region corresponding to the same pre-rendering canvas through a drawing interface to obtain a pre-rendering animation comprises:

7. The method of claim 1, wherein the step of rendering the pre-rendering animation in each pre-rendering canvas into a target canvas for playing comprises:

and displaying the animation through the target canvas.

8. An animation display device, comprising:

9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the animation display method of any one of claims 1 to 7 when executing the program.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored thereon a computer program which, when being executed by a processor, implements the animation display method as recited in any one of claims 1 to 7.