CN115858069A

CN115858069A - Page animation display method and device

Info

Publication number: CN115858069A
Application number: CN202211582334.5A
Authority: CN
Inventors: 李彦; 陈姗; 申鹏飞; 刘柏良
Original assignee: Shanghai Bilibili Technology Co Ltd
Current assignee: Shanghai Bilibili Technology Co Ltd
Priority date: 2022-12-09
Filing date: 2022-12-09
Publication date: 2023-03-28

Abstract

The application provides a page animation display method and a page animation display device, wherein the page animation display method comprises the following steps: responding to a trigger operation aiming at a target object in a current page, and identifying the display type of the current page and the trigger position of the trigger operation; determining a linkage object corresponding to the trigger operation from the page elements associated with the display types, and taking the position of the linkage object in the current page as a target position; generating a virtual moving path according to the trigger position and the target position; and displaying a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object. The page animation display method provided by the method can be applied to various clients capable of displaying page animation, and is wide in application range and simple in implementation process.

Description

Page animation display method and device

Technical Field

The application relates to the technical field of computers, in particular to a page animation display method. The application also relates to a page animation display device, a computing device and a computer readable storage medium.

Background

With the development of computer and network technologies, the contents of web pages are becoming rich and the display effect is becoming stronger. In an Application program (APP) at a mobile terminal, the Application of a page animation is common, such as a vector animation, and after a user performs a related operation, the user behavior is connected with a subsequent use path in the form of the vector animation.

Compared with a smaller screen at a mobile terminal, a device screen at a computer terminal (WEB terminal) is generally larger and has a complex device size, and a plurality of scenes such as browser scaling exist, so that the planning difficulty of page animation is increased, and the situation is rare. Therefore, an effective solution to solve the above problems is needed.

Disclosure of Invention

In view of this, the present application provides a method for displaying animation on a page. The application also relates to a page animation display device, a computing device and a computer readable storage medium, which are used for solving the technical defect that the page animation is difficult to realize in the prior art.

According to a first aspect of the embodiments of the present application, there is provided a page animation display method, including:

responding to a trigger operation aiming at a target object in a current page, and identifying the display type of the current page and the trigger position of the trigger operation;

determining a linkage object corresponding to the trigger operation from the page elements associated with the display types, and taking the position of the linkage object in the current page as a target position;

generating a virtual moving path according to the trigger position and the target position;

and displaying a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object.

Optionally, the identifying the display type of the current page includes:

identifying the page size of the current page;

and comparing the page size with a set size, and determining the display type of the current page according to the comparison result.

Optionally, the determining, from the page elements associated with the display type, the linkage object corresponding to the trigger operation includes:

acquiring a page structure associated with the display type, wherein the page structure comprises at least one page element and an operation corresponding relation, and the operation corresponding relation represents the association relation between each page element and each trigger operation;

and determining a linkage object corresponding to the trigger operation from the at least one page element according to the operation corresponding relation.

Optionally, before the position of the linkage object in the current page is taken as a target position, the method further includes:

identifying the distance between the linkage object and each boundary of the current page;

and determining the position of the linkage object in the current page according to the distance.

Optionally, the displaying a page animation that the setting icon moves along the virtual moving path includes:

determining a display position corresponding to the current moment on the virtual moving path according to the current display time length and the set animation time length from the display of the set icon;

and displaying the setting icon at the display position.

Optionally, the determining, according to the current display duration and the set animation duration, the display position corresponding to the current time on the virtual movement path includes:

determining the display progress according to the current display duration and the set animation duration;

and determining a display position corresponding to the current moment on the virtual moving path according to the display progress and the length of the virtual moving path.

Optionally, the generating a virtual moving path according to the trigger position and the target position includes:

taking a position in the current page, which is away from the trigger position by a first preset distance, as a first reference position, and taking a position in the current page, which is away from the target position by a second preset distance, as a second reference position;

and generating a virtual moving path according to a preset curve algorithm according to the trigger position, the first reference position, the second reference position and the target position.

Optionally, the displaying the page animation in which the setting icon moves along the virtual moving path includes:

determining the display progress according to the current display time length and the set animation time length from the display of the set icon;

according to the display progress, performing interpolation calculation on the trigger position, the first reference position, the second reference position and the target position to determine a display position corresponding to the current moment on the virtual moving path;

and displaying the setting icon at the display position.

Optionally, performing interpolation calculation on the trigger position, the first reference position, the second reference position, and the target position according to the display progress, and determining a display position corresponding to the current time on the virtual movement path includes:

according to the display progress, performing interpolation calculation on every two positions of the trigger position, the first reference position, the second reference position and the target position to obtain three first interpolation positions;

according to the display progress, carrying out interpolation calculation on every two first interpolation positions in the three first interpolation positions to obtain two second interpolation positions;

and carrying out interpolation calculation on the two second interpolation positions according to the display progress to obtain a display position corresponding to the current moment on the virtual moving path.

Optionally, the identifying, in response to a trigger operation for a target object in a current page, a display type of the current page and a trigger position of the trigger operation includes:

responding to a trigger operation aiming at a target object in a current page, and sending a request corresponding to the trigger operation to a server;

and under the condition that passing information fed back by the server end aiming at the request is received, identifying the display type of the current page and the trigger position of the trigger operation.

Optionally, after displaying the page animation in which the setting icon moves along the virtual moving path on the current page, the method further includes:

displaying a specified pattern at the target location to characterize the trigger operation trigger completion.

According to a second aspect of embodiments of the present application, there is provided a page animation display device, including:

the identification module is configured to respond to a trigger operation aiming at a target object in a current page, and identify the display type of the current page and the trigger position of the trigger operation;

the determining module is configured to determine a linkage object corresponding to the trigger operation from the page elements associated with the display types, and take the position of the linkage object in the current page as a target position;

a generating module configured to generate a virtual movement path according to the trigger position and the target position;

and the first display module is configured to display a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object.

According to a third aspect of embodiments of the present application, there is provided a computing device comprising a memory, a processor and computer instructions stored on the memory and executable on the processor, the processor implementing the steps of the page animation display method when executing the computer instructions.

According to a fourth aspect of embodiments of the present application, there is provided a computer-readable storage medium storing computer instructions which, when executed by a processor, implement the steps of the page animation display method.

The page animation display method provided by the application responds to a trigger operation aiming at a target object in a current page, and identifies the display type of the current page and the trigger position of the trigger operation; determining a linkage object corresponding to the trigger operation from the page elements associated with the display type, and taking the position of the linkage object in the current page as a target position; generating a virtual moving path according to the trigger position and the target position; and displaying a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object. According to the embodiment of the application, after a user performs a certain trigger operation in the man-machine interaction process, for the purposes of increasing interaction interestingness, strengthening interaction positive feedback, optimizing service indexes and the like, the mode of adding the page animation is adopted to enhance communication with the user, and the use experience of the user is improved. Based on the identification of the display type of the current page, the display of the page animation can be realized aiming at different browsers, screen sizes, zooming and other scenes, and the accurate planning of the page animation and the forward feedback after the triggering operation are promoted.

Drawings

FIG. 1 is a flowchart of a method for displaying animation on a page according to an embodiment of the present disclosure;

fig. 2A is a schematic diagram illustrating an effect of obtaining a target position in a page animation display method according to an embodiment of the present application;

fig. 2B is a schematic diagram illustrating an effect of drawing a setting icon in a page animation display method according to an embodiment of the present application;

fig. 2C is a schematic page diagram of a current page in a method for displaying a page animation according to an embodiment of the present application;

FIG. 2D is a schematic diagram of a current page in another method for displaying animation of a page according to an embodiment of the present application;

FIG. 2E is a schematic diagram of a virtual moving path in a method for displaying a page animation according to an embodiment of the present application;

fig. 2F is a schematic page diagram of a current page in another method for displaying a page animation according to an embodiment of the present application;

FIG. 3 is a flowchart illustrating a method for displaying animation of a webpage applied to a video browsing webpage according to an embodiment of the present application;

FIG. 4 is a schematic structural diagram of an animation display device for pages according to an embodiment of the present application;

fig. 5 is a block diagram of a computing device according to an embodiment of the present application.

Detailed Description

In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. This application is capable of implementation in many different ways than those herein set forth and of similar import by those skilled in the art without departing from the spirit of this application and is therefore not limited to the specific implementations disclosed below.

The terminology used in the one or more embodiments of the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of the present application. As used in one or more embodiments of the present application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used in one or more embodiments of the present application refers to and encompasses any and all possible combinations of one or more of the associated listed items.

It should be understood that, although the terms first, second, etc. may be used herein in one or more embodiments to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first aspect may be termed a second aspect, and, similarly, a second aspect may be termed a first aspect, without departing from the scope of one or more embodiments of the present application. The word "if" as used herein may be interpreted as "at" \8230; "or" when 8230; \8230; "or" in response to a determination ", depending on the context.

First, the noun terms to which one or more embodiments of the present application relate are explained.

Vector animation: describing complex curves on a screen by using a mathematical function, and recording animation of changed picture information by using abstract motion characteristics of a graph;

later on, see again: a function that adds the video of interest to the queue store.

WebGL (Web graphics library) is a JavaScript API that can render high-performance interactive 3D and 2D graphics in any compatible Web browser without the use of plug-ins. WebGL does this by introducing an API that is very consistent with opengles2.0, this API may be used in the HTML5< canvas > element. This consistency makes it possible for the API to take advantage of the user hardware graphics acceleration provided by the device.

Bezier curve: beziercurve, also known as a Betz curve or a Bezier curve, is a mathematical curve applied to two-dimensional graphics applications. The general vector graphic software accurately draws a curve through the curve, the Betz curve consists of line segments and nodes, the nodes are draggable pivots, and the line segments are like telescopic rubber bands. Bezier curves are fairly important parametric curves in computer graphics.

The method provided by one or more embodiments of the present description may be applied to page animation display in various scenes, such as page animation display in a video collection scene, page animation display in a music download scene, page animation display in an electronic book reading scene, and the like, and is specifically selected according to an actual situation, which is not limited in this description embodiment.

The present application provides a page animation display method, and the present application also relates to a page animation display device, a computing device, and a computer readable storage medium, which are individually detailed in the following embodiments.

Fig. 1 shows a flowchart of a method for displaying a page animation according to an embodiment of the present application, which specifically includes the following steps:

step 102: in response to a trigger operation aiming at a target object in a current page, identifying a display type of the current page and a trigger position of the trigger operation.

Specifically, the current page refers to a webpage that the user is browsing. The object may be a page element in the current page, such as a video, a file, a video, music, a link, an image, and the like, as well as a control associated with the video, or a button identifier, a favorite control, and the like. The target object refers to an object selected by a user through a mouse, a keyboard, a voice device, a gesture device, and the like. The display type refers to a display type corresponding to the current page, such as a zoom type, a zoom-in type, and the like. The triggering operation refers to an operation corresponding to the target object selected by the user, such as clicking, double clicking, long pressing and the like; such as favorites, praise, comments, etc. The trigger position refers to the position of the trigger operation in the current page.

In practical application, when a user browses a webpage, that is, a current page, a certain type of operation is performed on a target object in the current page through a mouse or a keyboard. Correspondingly, the client receives the trigger operation aiming at the target object, further identifies the display type of the current page, and positions the trigger position of the trigger operation through the position identification device.

In an implementation manner of this specification, the client may obtain a display identifier of the current page, and identify the display type of the current page according to the display identifier. For example, the display type corresponding to the display identifier 1 is a zoom type, the display type corresponding to the display identifier 2 is an amplification type, if the display identifier of the current page acquired by the client is 1, the display type of the current page is the zoom type, and if the display identifier of the current page acquired by the client is 2, the display type of the current page is the amplification type. Therefore, the display identifier can be carried in the page data, the acquisition is simple and convenient, and the display type of the current page is identified based on the display identifier, so that the efficiency of identifying the display type can be improved.

In another implementation manner of this specification, the client may obtain a page size of the current page, and identify a display type of the current page according to the page size. That is, the specific implementation process of identifying the display type of the current page may be as follows:

identifying the page size of the current page;

Specifically, the page size refers to the window size of the current page, and can be represented by the resolution of the current page. The size is a reference size set for measuring a display type of a current page.

In practical application, the client may obtain the window size of the current page, that is, the page size, based on the display data of the current page on the display device. Then comparing the page size with a set size, and if the page size is larger than or equal to the set size, the display type of the current page is an amplification type; if the page size is smaller than the set size, the display type of the current page is the zoom type.

For example, the size is set to the resolution 1100. If the resolution of the current page is identified to be greater than or equal to 1100, the display type of the current page is an amplification type, and if the resolution of the current page is identified to be less than 1100, the display type of the current page is a zoom type.

Due to the fact that the WEB end page has the self-adaptive logic, switching can be performed between different display types according to adjustment of a page window corresponding to a user, the display type of the current page is identified to be a zooming type or an amplifying type through page size identification, identification efficiency is guaranteed, and meanwhile accuracy of identification can be improved.

Optionally, the client may identify the display type of the current page and the trigger position of the trigger operation on the basis of receiving the trigger operation. Therefore, the efficiency of page animation display can be improved, and the delay of page animation display can be reduced.

Optionally, the client may further perform a request to the server on the basis of receiving the trigger operation, and identify the display type of the current page and the trigger position of the trigger operation after the request passes. That is, in response to the trigger operation for the target object in the current page, the display type of the current page and the trigger position of the trigger operation are identified, and the specific implementation process may be as follows:

In practical applications, because the triggering operation may change the content or the associated content of the current page, such as the triggering operation of uploading a text, and the triggering operation such as approval, the client needs to make a request to the server, that is, the client sends a request corresponding to the triggering operation to the server. If the client receives the passing information fed back by the server, the client identifies the display type of the current page and the trigger position of the trigger operation again, and executes the relevant process of displaying the page; and if the client does not receive the passing information fed back by the server, the client does not identify the display type of the current page and the trigger position of the trigger operation, namely the relevant process of displaying the page is not executed.

Therefore, the execution process of displaying the page animation is performed after the passing information of the server is received, and the problem that the user thinks the triggering operation is effective due to the fact that the triggering operation is not effective when the network is disconnected and the system fails can be avoided, so that the page animation is displayed, and the user satisfaction is improved.

It should be noted that, if the client receives the passing information fed back by the server after the set receiving time is exceeded, the display type of the current page and the trigger position of the trigger operation are not identified by default, that is, the relevant process of displaying the page is not executed. Therefore, the problem that the visual confusion of the user is caused by the fact that the user displays the page animation after the user starts other operations due to too long receiving time can be avoided, and the viscosity of the user is further improved.

In addition, if the client receives the failure information fed back by the server, the display type of the current page and the trigger position of the trigger operation are not identified by default, that is, the relevant process of displaying the page is not executed.

Step 104: and determining a linkage object corresponding to the trigger operation from the page elements associated with the display types, and taking the position of the linkage object in the current page as a target position.

Specifically, the page elements, that is, the web page elements, include characters, pictures, audio, animations, videos, controls, and the like. The linkage object refers to an object that is passively affected when a trigger operation is performed on a target object.

In practical applications, page elements associated with different display types are different. In order to ensure the accuracy of the linkage object, the linkage object corresponding to the trigger operation needs to be selected from the page elements associated with the display types. Then, a position acquisition function is called to acquire the position of the linkage object as a target position.

In one or more alternative embodiments of the present specification, the page result may be determined based on the display type, and then the association object may be determined from each page element in the page structure according to the operation correspondence in the page structure. That is, the determining, from the page elements associated with the display type, the linkage object corresponding to the trigger operation includes:

Specifically, the operation correspondence represents a correspondence between the page element and each operation, for example, the page element corresponding to the collection operation has a collection column, and the page element corresponding to the played video has a history. The page structure refers to the page layout of the current page, and includes what page elements are in the current page, the hierarchical structure among the page elements, and the operation correspondence, for example, the current page includes a navigation bar, a favorite, a historical browsing record, a user center, a video display area, and 5 videos, where the favorite, the historical browsing record, and the user center are displayed in the navigation bar, and the 5 videos are displayed in the video display area.

In practical application, the page structures corresponding to different display types are different, the corresponding page structure can be obtained according to the display type of the current page, and then the linkage object is determined from each page element contained in the page structure according to the corresponding relation between the trigger operation and the operation. Thus, the accuracy and efficiency of determining the linkage object can be improved.

Illustratively, if the display type of the current page is an enlarged type, then each functional page element (favorite bar, user preference, history record, etc.) in the page structure is shown in the page in the form of "icon + text", for example, the page element of the favorite bar is "star + favorite bar", and the page element of the user preference is "

+ Collection column ", page element of History play record is" + "or>

+ Collection column "; if the display type of the current page is zoom type, then each element in the page structure is shown in the page in the form of "icon", for example, the page element of the favorite column is "four-star", and the page element preferred by the user is ≥ h>

Page element of history play record is->

Assuming that the display type of the current page is a zoom type, the obtained page structure comprises "fourstars

And

and an operational correspondence, wherein the operational correspondence is: the praise operation corresponds to user preference, the collection operation corresponds to the collection column, and the play operation corresponds to the historical play record. If the trigger operation is a collection operation, "' is a linkage object.

In one or more alternative embodiments of the present description, the trigger action may also be based on the type of attribute that triggered the action, and determining a linkage object corresponding to the trigger operation from the page elements associated with the display types. The attribute types of the trigger operation, such as collection, approval, deletion, comment, modification and the like, are firstly identified, and the page elements corresponding to different attribute types are different. And matching the page element triggering the operation with each page element associated with the display type, and determining the successfully matched page element as an associated object. Therefore, through matching, the process of determining the corresponding association can be simplified, and the efficiency of determining the associated object is improved.

Optionally, after the linkage object is determined, image recognition may be performed on the current page, the linkage object in the current page is recognized, then a coordinate system is established with a reference point of the current page as an origin, such as a point at the upper left corner and a point at the upper right corner, and the position of the linkage object is determined according to the recognized linkage object.

Optionally, the page data in the current page carries a standard position of the linkage object in a standard page corresponding to the display type, then a display scale is determined according to the page size of the standard page and the page size of the current page, and the position of the linkage object is calculated according to the display scale and the standard position.

Optionally, the distance of the linkage object from the boundaries of the current page may also be determined, thus, the location of the linkage object of \27448isdetermined. That is, before the position of the linkage object in the current page is taken as the target position, the method further includes:

Specifically, the boundary refers to four edges of the current page, including an upper boundary, a lower boundary, a left boundary, and a right boundary.

In practical application, the distance from the top of the linkage object to the upper boundary of the current page, the distance from the bottom of the linkage object to the lower boundary of the current page, the distance from the left side of the linkage object to the left boundary of the current page and the distance from the right side of the linkage object to the right boundary of the current page can be obtained; the distance between the top of the linkage object and the upper boundary of the current page, the distance between the bottom of the linkage object and the upper boundary of the current page, the distance between the left side of the linkage object and the left boundary of the current page, the distance between the right side of the linkage object and the left boundary of the current page, and the like can be obtained. And then determining the size and the position of the linkage object in the current page. Therefore, the processing process that the client side carries out image recognition and other calculation quantities is large can be avoided, the complexity of standard page setting on the current page can be avoided, and the efficiency and the accuracy of position determination are improved while the data processing quantity is reduced.

Referring to fig. 2A, fig. 2A is a schematic diagram illustrating an effect of obtaining a target position in a page animation display method according to an embodiment of the present application: getBoundingClientRect function is called, and the return value is a DOMRect object, which is the smallest rectangle (including padding and border-width) that contains the entire page element, i.e., the linkage object. The object describes the position and size of the linkage object using read-only attributes in pixel units of left, top, right, bottom, x, y, width, and height. Attributes other than width and height are calculated with respect to the upper left corner of the view window.

Step 106: and generating a virtual moving path according to the trigger position and the target position.

Specifically, the virtual movement path refers to a path along which an object moves in the page animation.

In practical application, after the trigger position and the target position are determined, a virtual moving path can be generated by taking the trigger position as a starting point and the target position as an end point; a virtual moving path can be generated by taking the trigger position as an end point and the target position as a starting point; or generating a first sub virtual moving path by taking the triggering position as a circle center and the first set distance as a radius, generating a second sub virtual moving path by taking the triggering position as a circle center and the second set distance as a radius, and forming the virtual moving path by the first sub virtual moving path and the second sub virtual moving path. The method for generating the virtual moving path may be other methods, and the present application does not limit this.

The generated virtual movement path may be a straight line, a curved line, or a broken line, which is not limited in this application.

Step 108: and displaying a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object.

Specifically, the page animation may be a vector animation, or may be a simple animation such as blinking or lighting set for the target object. The setting icon may be a preset icon such as a red dot, a little plane, a flower, or the like, or may be a reduced icon of a target object such as a video cover, a caption of a novel, a title of music, or the like.

And displaying a page animation in which the set icon moves along the virtual moving path on the current page. Therefore, the page animation representation target object can be subjected to linkage reaction with the associated object of the target position under the trigger operation, and the richness of the page animation is improved.

In actual implementation, when the page animation in which the setting icon moves along the virtual moving path is displayed, the operation type of the trigger operation may be determined first, and the moving direction of the setting icon is determined based on the operation type of the trigger operation. Namely displaying a page animation of a set icon moving from the trigger position to the target position along the virtual moving path under the condition that the operation type of the trigger operation is addition; and displaying a page animation of a set icon moving from the target position to the trigger position along the virtual moving path under the condition that the operation type of the trigger operation is moving out.

For example, the triggering operation is a favorite operation, which represents that the user wants to add the target object to the favorite, that is, the operation type of the favorite operation is addition, and taking the trigger position as a starting point and the target position as an end point, setting the icon to move from the trigger position to the target position, and representing to add the target object to the favorite. For another example, the triggering operation is canceling the favorite operation, the representation user wants to move the target object out of the favorite, that is, the operation type of the favorite operation is moving out, the triggering position is an end point, the target position is a start point, the icon is set to move from the target position to the triggering position, and the representation moves the target object out of the favorite.

In addition, after the trigger position and the target position are determined, page animation display corresponding to the target animation can be directly performed on the trigger position and the target position of the current page respectively, and page animation display can also be performed between the trigger position and the target position of the current page. For example, a page animation of 'putting fireworks' is shown at the trigger position and the target position respectively, and a page animation of a small plane flying from the trigger position to the target position is shown.

In one or more alternative embodiments of the present specification, the preset icon is moved at a set speed, that is, on the current page, a page animation in which the preset icon is moved along the virtual moving path at the preset speed is displayed. At this time, the duration of the page animation is related to the path length of the virtual moving path or the distance between the trigger position and the target position, so that the displayed page animation is different based on different path lengths or distances, and the diversity of the page animation can be improved.

In one or more alternative embodiments of the present specification, the animation playing time lengths of the different page animations are the same, that is, the length of time for which the icon is set to move along the virtual moving path is the same. That is, on the current page, the page animation that the set icon moves along the virtual moving path within the set animation time length is displayed. At this time, the preset icon moving speed is related to the path length of the virtual moving path or the spacing distance between the trigger position and the target position, so that the moving speeds of the preset icons in the displayed page animation are different based on different path lengths or spacing distances, and the diversity of the page animation can be improved.

In one or more alternative embodiments of the present specification, the page animation that the display setting icon moves along the virtual moving path may be implemented as follows:

and displaying the setting icon at the display position.

Specifically, the current display duration refers to the length of time that the page animation has been displayed. The set animation duration refers to the total playing duration of the page animation, and may be the set animation duration common to all page animations, the set animation duration common to a certain type of page animations, or the set animation duration corresponding to the current page animation alone.

In practical application, the set icon can move on the virtual moving path at a constant speed. Therefore, the display position of the icon is set, the current display time length, the set animation time length and the virtual moving path can be input into the preset position calculation model, the display position of the set icon on the virtual moving path at the current moment is determined, and the set icon is displayed on the display position. Therefore, the display position of the setting icon at the current moment can be quickly and accurately positioned.

The drawing logic of the setting icon will be described by taking the setting icon as a red dot as an example. Referring to fig. 2B, fig. 2B is a schematic diagram illustrating an effect of drawing a set icon in the method for displaying a page animation according to an embodiment of the present application, when a red dot is displayed, a canvas with a browser window size is initialized to cover an original page for displaying animation, and an interaction event is disabled. Then drawing a red point through a rectangular plane formed by two triangles in the WebGL; determining whether the pixel needs to be drawn into red or not according to the length of the uv coordinate from the center of the plane; performing anti-aliasing treatment on the red point edge through a smoothstep function; the red dots have a size scaling effect in the animation process to enhance dynamic sense, and the dynamic sense is realized through a simple time function.

Optionally, the closer the current display duration is to the set animation duration, the farther the preset icon is from the start point of the virtual movement path, and the closer the preset icon is to the end point of the virtual movement path.

Optionally, the closer the current display duration is to the set animation duration, the closer the preset icon may be to the start point of the virtual movement path and the farther the preset icon may be from the end point of the virtual movement path.

Optionally, the display position corresponding to the current time on the virtual movement path is determined according to the current display duration and the set animation duration, and a specific implementation process may be as follows:

determining a display progress according to the current display duration and the set animation duration;

Specifically, the display progress represents the completion degree of the animation display of the page.

In practical application, the ratio of the current display duration to the set animation duration is used as the display progress, then the display progress is multiplied by the length of the virtual moving path, the distance that the preset icon has moved along the virtual moving path is determined, and the position of the distance on the virtual moving path is determined as the display position corresponding to the preset icon at the current moment. In this manner, the accuracy and efficiency of determining the display position may be improved.

In one or more alternative embodiments of the present disclosure, a virtual moving path may be generated by using a bezier curve algorithm, such as a second-order bezier curve algorithm, a third-order bezier curve algorithm, or the like, a line segment corresponding to the trigger position and the target position may also be directly used as the virtual moving path, or another implementable algorithm may also be used to generate the virtual moving path. This is not a limitation of the present application.

Optionally, in order to improve the ornamental value of the page animation and further improve the viscosity of the user, two reference positions may be set on the basis of the trigger position and the target position, and then the virtual moving path may be generated according to a preset curve algorithm. That is, the virtual moving path is generated according to the trigger position and the target position, and the specific implementation process may be as follows:

Specifically, the first preset distance and the second preset distance may be the same or different.

In practical application, in a current page, determining a position which is above a trigger position and is a first preset distance away from the trigger position as a first reference position, and determining a position which is above a target position and is a second preset distance away from the target position as a second reference position; or, a position which is located on the left side of the trigger position and is away from the trigger position by a first preset distance is determined as a first reference position, and a position which is located on the left side of the target position and is away from the target position by a second preset distance is determined as a second reference position. But may be others, etc. Further, according to a preset curve algorithm, a virtual moving path is generated based on the trigger position, the first reference position, the second reference position and the target position. Therefore, the virtual moving path is generated by setting the first preset distance and the second preset distance, the virtual moving path can be prevented from exceeding the current page, the page animation is not connected, and the ornamental value is reduced.

For example, a position located above the trigger position and spaced apart from the trigger position by a first preset distance is determined as a first reference position, a position located above the target position and spaced apart from the target position by a second preset distance is determined as a second reference position, the trigger position and the target position are taken as a start point and an end point, the first reference position and the second reference position are taken as anchor points, and a virtual movement path is generated according to a cubic bezier curve algorithm.

Optionally, the specific implementation process of the page animation in which the display setting icon moves along the virtual moving path may be as follows:

and displaying the setting icon at the display position.

In practical application, the ratio of the current display duration to the set animation duration is used as the display progress, then, according to the display progress and an interpolation algorithm, interpolation calculation is carried out on the trigger position, the first reference position, the second reference position and the target position, so that the display position of the preset icon at the current moment corresponding to the virtual moving path is obtained, and the set icon is displayed on the display position.

The interpolation calculation may be performed once or a plurality of times. This is not a limitation of the present specification.

In one or more optional embodiments of this specification, a trigger position, a first reference position, a second reference position, and a target position are interpolated three times, that is, the trigger position, the first reference position, the second reference position, and the target position are interpolated to determine a display position corresponding to the current time on the virtual movement path, where a specific implementation process may be as follows:

according to the display progress, performing interpolation calculation on every two first interpolation positions in the three first interpolation positions to obtain two second interpolation positions;

In practical application, according to the display progress, interpolation calculation is respectively carried out on the trigger position and the first reference position, the first reference position and the second reference position, and the second reference position and the target position, so that a first interpolation position corresponding to the trigger position and the first reference position, a first interpolation position corresponding to the first reference position and the second reference position, and a first interpolation position corresponding to the second reference position and the target position are obtained.

Then, according to the display progress, interpolation calculation is carried out on the first interpolation position, the second first interpolation position and the third first interpolation position, and the second interpolation position corresponding to the first interpolation position, the second first interpolation position and the third first interpolation position are obtained. And finally, carrying out interpolation calculation on the two second interpolation positions according to the display progress to obtain a third interpolation position, namely the display position corresponding to the current moment on the virtual moving path. In this way, the accuracy of determining the display position can be improved.

For example, during the display of the page animation, the ratio of the current display duration to the set animation duration is used as the animation playing percentage, i.e., the display progress t, and the display position of the set icon at the current time on the virtual moving path is obtained through 6 times of interpolation in total in 3 stages according to the anchor point and the coordinate point of the bezier curve, i.e., the trigger position p0, the first reference position p1, the second reference position p2, and the target position p3, where p0 and p3 are two anchor points, p1 and p2 are two control points, and the first-time interpolation algorithm: a = lerp (p 0, p1, t); b = lerp (p 1, p2, t); c = lerp (p 2, p3, t). And (3) a second interpolation algorithm: d = lerp (a, b, t); e = lerp (b, c, t). Third interpolation algorithm, point = lerp (d, e, t). Wherein, a, b and c are all the first interpolation positions, d and e are the second interpolation positions, and point is the display position.

Alternatively, after the page animation display is completed, the current page may be restored to the state before the page animation display.

Optionally, after the page animation is displayed, that is, after the page animation that the set icon moves along the virtual moving path is displayed on the current page, a specified pattern is displayed at the target position to represent that the trigger operation is triggered to be completed. For example, unread red dots are exposed in html at the associated object, i.e., dimension red dots are displayed at the target location.

It should be noted that, the display page animation is implemented by relying on the WebGL technology, and the page animation will not be displayed on the browser web page that does not support the WebGL technology, and only the specified pattern is displayed at the target position, for example, the red dot is displayed at the top navigation bar collection icon. In addition, since different modules in the current page, such as a video card and a top navigation bar in a video browsing page, belong to different modules, respectively, informing the top navigation bar from inside the video card to show a red dot at a collection icon is realized by a browser-native event system, customEvent, where the CustomEvent interface represents an event created by a program for a certain purpose.

Illustratively, in a video recommendation page, a user initiates a trigger operation on a certain video (target object), when adding the video to a later review, by acquiring the position of the video, namely the trigger position as the current starting point (the position of the square root in the first video), the position of the favorite column as the target position as the end point, and planning a vector path based on the relative position between the starting point and the end point. Referring to fig. 2C, fig. 2C shows a schematic page diagram of a current page in the method for displaying a page animation according to an embodiment of the present application, when a user clicks the add button on the upper right corner of the card cover of the first video and then looks at the button "√" later, a small red dot appears above the button and flies into the "star favorite column" on the upper right corner of the top navigation column, where the upper right corner of the top navigation column also shows "star" ("in some embodiments"

Preference ". In addition, referring to fig. 2D, on the basis of fig. 2C, fig. 2D shows a page schematic diagram of a current page in another page animation display method provided by an embodiment of the present application: a small round dot is added on the four-star collection column.

The starting point for the triggering of the vector motion effect is the later review function of the top right corner of the card. The cards are distributed at different positions of the whole page, so that the positions of the starting points are different, and the difficulty of path planning is increased. The starting point position can be simply divided into a left side of the end point and a right side of the end point. Referring to fig. 2E, on the basis of fig. 2C, fig. 2E shows a schematic diagram of a virtual moving path in a page animation display method according to an embodiment of the present application: the virtual movement path may also be correspondingly different for different target objects (videos) or trigger positions.

Because most WEB end pages have adaptive logic, the target position can also be changed under screens with different resolutions or current pages with different page sizes. Referring to fig. 2D, when the page size of the current page, that is, the resolution is greater than 1100 (set size), the top navigation bar is displayed as icon + text, as the screen size of the user increases, the target position also changes adaptively according to the page size, the associated object is displayed as an icon "@ favorite bar", and the object indicating the preference of the user is displayed as an icon "

Preference ". Referring to fig. 2F, on the basis of fig. 2D, fig. 2F illustrates a page schematic diagram of a current page in a page animation display method provided by an embodiment of the present application: when the page size of the current page, i.e. the resolution is smaller than 1100 (set size), the top navigation bar is reduced to an icon, and at this time, the target position is also moved to the right side, and the associated object is shown as an icon "four-star", which means that the object preferred by the user is shown as an icon ≥>

In the browsing process of a user, due to the fact that the target position has movement change, in order to guarantee that the target position can be accurately positioned every time by the page animation, when the trigger operation is responded, the page size and the relative position distance between the trigger position and the target position need to be identified again, path dynamic planning is carried out, and finally stable interaction experience is achieved.

Illustratively, the page animation is implemented entirely on the client (i.e., browser), and the server only processes adding data that is later reviewed for recording. For example, after the user clicks the later review icon, the client requests the addition of the later review interface to the server. If the server interface returns normally (the later-watching data is added successfully), recording the position of the later-watching icon as a starting point and acquiring the collection icon of the top navigation bar as an end point at the client, and trying to display the page animation: if the animation of the page is displayed for the first time in the current page, initializing canvas, webglcontext and a shader program required by playing the animation; control points of the bezier curve are calculated from the starting and ending point parameters, and the generated curve is used as a path along which the red point moves. And after the red point moves to the end point, the animation is finished, and the unread red point is immediately displayed by html at the position of the top navigation bar collection icon.

The page animation display method provided by the application responds to a trigger operation aiming at a target object in a current page, and identifies the display type of the current page and the trigger position of the trigger operation; determining a linkage object corresponding to the trigger operation from the page elements associated with the display types, and taking the position of the linkage object in the current page as a target position; generating a virtual moving path according to the trigger position and the target position; and displaying a page animation of a set icon moving along the virtual moving path on the current page, wherein the set icon is an animation image corresponding to the target object. According to the embodiment of the application, after a user performs a certain trigger operation in the man-machine interaction process, for the purposes of increasing interaction interestingness, strengthening interaction positive feedback, optimizing service indexes and the like, the mode of adding the page animation is adopted to enhance communication with the user, and the use experience of the user is improved. Based on the identification of the display type of the current page, the display of the page animation can be realized aiming at different scenes such as browsers, screen sizes and zooming, and the accurate planning of the page animation and the forward feedback after the triggering operation are improved. The page animation display method provided by the method can be applied to various clients capable of displaying page animation, and is wide in application range and simple in implementation process.

The following description will further describe the page animation display method provided by the present application with reference to fig. 3, by taking an application of the page animation display method in a video browsing webpage as an example. Fig. 3 shows a processing flow chart of a method for displaying a page animation applied to a video browsing webpage according to an embodiment of the present application, which specifically includes the following steps:

step 302: and responding to a later review click operation aiming at the target video in the video browsing webpage, and sending a request corresponding to the later review click operation to the server.

Step 304: and under the condition of receiving the passing information fed back by the server, identifying the page size of the video browsing webpage, and comparing the page size with the set size.

Step 306: and if the page size is larger than or equal to the set size, determining the display type of the video browsing webpage to be an amplification type.

Step 308: acquiring an amplification type page structure, wherein the page structure comprises at least one page element and operation corresponding relation; and according to the operation corresponding relation, determining that the linkage object corresponding to the click operation is the four-star + favorite bar from at least one page element.

The operation corresponding relation represents the incidence relation between each page element and each later review click operation.

Step 310: identifying the distance between the linkage object 'four-star + collection bar' and each boundary of the video browsing webpage; and determining the position of the linkage object 'four-star + favorite bar' in the video browsing webpage according to the distance.

Step 312: and if the page size is smaller than the set size, determining that the display type of the video browsing webpage is the zooming type.

Step 314: acquiring a page structure of a zooming type, wherein the page structure comprises at least one page element and an operation corresponding relation; and according to the operation corresponding relation, determining that the linkage object corresponding to the click operation is a star from at least one page element.

Step 316: identification linkage object and video browsing the distance between the boundaries of the web page; and determining the position of the linkage object in the video browsing webpage according to the distance.

Step 318: generating a virtual moving path according to the trigger position and the target position; and displaying page animation of the small red point moving along the virtual moving path on the video browsing webpage.

Optionally, displaying a page animation of the pinky dot moving along the virtual moving path includes:

determining a display position corresponding to the current moment on the virtual moving path from the small red point to the display according to the current display time length and the set animation time length;

at the display position, a small red dot is displayed.

Optionally, determining a display position corresponding to the current time on the virtual movement path according to the current display duration and the set animation duration, including:

Optionally, generating a virtual moving path according to the trigger position and the target position includes:

taking a position in the video browsing webpage, which is a first preset distance away from the trigger position, as a first reference position, and taking a position in the video browsing webpage, which is a second preset distance away from the target position, as a second reference position;

and generating a virtual moving path according to the trigger position, the first reference position, the second reference position and the target position and a preset curve algorithm.

Optionally, displaying a page animation in which the pinky red dot moves along the virtual moving path includes:

determining the display progress according to the current display time length and the set animation time length from the display of the small red point;

according to the display progress, performing interpolation calculation on the trigger position, the first reference position, the second reference position and the target position, and determining a display position corresponding to the current moment on the virtual moving path;

at the display position, a small red dot is displayed.

Optionally, performing interpolation calculation on the trigger position, the first reference position, the second reference position, and the target position according to the display progress, and determining the display position corresponding to the current time on the virtual movement path, includes:

and carrying out interpolation calculation on the two second interpolation positions according to the display progress to obtain the display position corresponding to the current moment on the virtual moving path.

Step 320: at the target location, a small red dot is displayed to characterize the completion of the later review click operation trigger.

The method for displaying the page animation provided by the embodiment realizes that in the process of man-machine interaction, after a user performs certain trigger operation, for the purposes of increasing interaction interest, strengthening interaction positive feedback, optimizing service indexes and the like, the communication with the user is enhanced by adopting a page animation adding mode, so that the use experience of the user is improved. Based on the identification of the display type of the current page, the display of the page animation can be realized aiming at different browsers, screen sizes, zooming and other scenes, and the accurate planning of the page animation and the forward feedback after the triggering operation are promoted.

Corresponding to the above method embodiment, the present application further provides an embodiment of a page animation display device, and fig. 4 shows a schematic structural diagram of a page animation display device provided in an embodiment of the present application. As shown in fig. 4, the apparatus includes:

the identification module 402 is configured to respond to a trigger operation aiming at a target object in a current page, and identify the display type of the current page and the trigger position of the trigger operation;

a first determining module 404, configured to determine, from the page elements associated with the display types, a linkage object corresponding to the trigger operation, and use a position of the linkage object in the current page as a target position;

a generating module 406 configured to generate a virtual movement path according to the trigger position and the target position;

a first display module 408 configured to display a page animation in which a set icon moves along the virtual moving path on the current page, wherein the set icon is an animated character corresponding to the target object.

Optionally, the identifying module 402 is further configured to:

identifying the page size of the current page;

Optionally, the first determining module 404 is further configured to:

Optionally, the apparatus further comprises a second determining module configured to:

Optionally, the first display module 408 is further configured to:

and displaying the setting icon at the display position.

Optionally, the first display module 408 is further configured to:

Optionally, the generating module 406 is further configured to:

Optionally, the first display module 408 is further configured to:

and displaying the setting icon at the display position.

Optionally, the first display module 408 is further configured to:

Optionally, the identifying module 402 is further configured to:

Optionally, the apparatus further comprises a second display module configured to:

The page animation display device provided by the application realizes that in the process of man-machine interaction, after a user performs certain triggering operation, the communication with the user can be enhanced by adopting a page animation adding mode for the purposes of increasing interaction interest, strengthening interaction positive feedback, optimizing service indexes and the like, so that the use experience of the user is improved. Based on the identification of the display type of the current page, the display of the page animation can be realized aiming at different browsers, screen sizes, zooming and other scenes, and the accurate planning of the page animation and the forward feedback after the triggering operation are promoted.

The above is a schematic scheme of a page animation display device of the present embodiment. It should be noted that the technical solution of the page animation display device and the technical solution of the page animation display method belong to the same concept, and details of the technical solution of the page animation display device, which are not described in detail, can be referred to the description of the technical solution of the page animation display method.

Fig. 5 shows a block diagram of a computing device according to an embodiment of the present application. The components of the computing device 500 include, but are not limited to, a memory 510 and a processor 520. Processor 520 is coupled to memory 510 via bus 530, and database 550 is used to store data.

Computing device 500 also includes access device 540, access device 540 enabling computing device 500 to communicate via one or more networks 560. Examples of such networks include a Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a Personal Area Network (PAN), or a combination of communication networks such as the internet. The Access device 540 may include one or more of any type of network interface (e.g., a Network Interface Controller (NIC)) whether wired or wireless, such as an IEEE802.11 Wireless Local Area Network (WLAN) wireless interface, a worldwide interoperability for microwave Access (Wi-MAX) interface, an ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a bluetooth interface, a Near Field Communication (NFC) interface, and so forth.

In one embodiment of the application, the above-described components of computing device 500 and other components not shown in FIG. 5 may also be connected to each other, such as by a bus. It should be understood that the block diagram of the computing device illustrated in FIG. 5 is for purposes of example only and is not intended to limit the scope of the present application. Those skilled in the art may add or replace other components as desired.

Computing device 500 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., tablet computer, personal digital assistant, laptop computer, notebook computer, netbook, etc.), mobile phone (e.g., smartphone), wearable computing device (e.g., smartwatch, smart glasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. Computing device 500 may also be a mobile or stationary server.

Wherein, the processor 520 implements the steps of the method for displaying the page animation when executing the computer instructions.

The above is an illustrative scheme of a computing device of the present embodiment. It should be noted that the technical solution of the computing device and the technical solution of the above-mentioned page animation display method belong to the same concept, and details that are not described in detail in the technical solution of the computing device can be referred to the description of the technical solution of the above-mentioned page animation display method.

An embodiment of the present application further provides a computer readable storage medium, which stores computer instructions, and the computer instructions, when executed by a processor, implement the steps of the method for displaying animation of a page as described above.

The above is an illustrative scheme of a computer-readable storage medium of the present embodiment. It should be noted that the technical solution of the storage medium belongs to the same concept as the technical solution of the above-mentioned page animation display method, and details that are not described in detail in the technical solution of the storage medium can be referred to the description of the technical solution of the above-mentioned page animation display method.

The foregoing description of specific embodiments of the present application has been presented. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.

The computer instructions comprise computer program code which may be in the form of source code, object code, an executable file or some intermediate form, or the like. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, etc.

It should be noted that, for the sake of simplicity, the above-mentioned method embodiments are described as a series of acts or combinations, but those skilled in the art should understand that the present application is not limited by the described order of acts, as some steps may be performed in other orders or simultaneously according to the present application. Further, those skilled in the art will appreciate that the embodiments described in this specification are presently considered to be preferred embodiments and that acts and modules are not required in the present application.

In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

The preferred embodiments of the present application disclosed above are intended only to aid in the explanation of the application. Alternative embodiments are not exhaustive and do not limit the invention to the precise embodiments described. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the application and its practical applications, to thereby enable others skilled in the art to best understand and utilize the application. The application is limited only by the claims and their full scope and equivalents.

Claims

1. A method for displaying animation of a page, comprising:

determining a linkage object corresponding to the trigger operation from the page elements associated with the display type, and taking the position of the linkage object in the current page as a target position;

2. The method of claim 1, wherein the identifying the display type of the current page comprises:

identifying the page size of the current page;

3. The method according to claim 1, wherein the determining, from the page elements associated with the display types, the linkage object corresponding to the trigger operation includes:

4. The method according to claim 1, wherein before the setting the position of the linkage object in the current page as the target position, further comprising:

5. The method of claim 1, wherein displaying the page animation of the set icon moving along the virtual movement path comprises:

and displaying the setting icon at the display position.

6. The method according to claim 5, wherein the determining the display position corresponding to the current time on the virtual movement path according to the current display duration and the set animation duration comprises:

7. The method of claim 1, wherein generating a virtual movement path based on the trigger location and the target location comprises:

8. The method of claim 7, wherein displaying the page animation of the set icon moving along the virtual movement path comprises:

performing interpolation calculation on the trigger position, the first reference position, the second reference position and the target position according to the display progress, determining a display position corresponding to the current moment on the virtual moving path;

and displaying the setting icon at the display position.

9. The method according to claim 8, wherein the interpolating the trigger position, the first reference position, the second reference position and the target position according to the display progress to determine the display position corresponding to the current time on the virtual movement path comprises:

10. The method according to any one of claims 1 to 9, wherein the identifying, in response to a trigger operation for a target object in a current page, a display type of the current page and a trigger position of the trigger operation comprises:

and under the condition that the passing information fed back by the server aiming at the request is received, identifying the display type of the current page and the trigger position of the trigger operation.

11. The method according to any one of claims 1 to 9, wherein after displaying the page animation in which the setting icon moves along the virtual movement path on the current page, the method further comprises:

12. A page animation display device, comprising:

the first determining module is configured to determine a linkage object corresponding to the trigger operation from the page elements associated with the display types, and take the position of the linkage object in the current page as a target position;

13. A computing device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, wherein the processor implements the steps of the method of any one of claims 1-11 when executing the computer instructions.

14. A computer-readable storage medium storing computer instructions, which when executed by a processor, perform the steps of the method of any one of claims 1 to 11.