CN117076801A - Animation display method, electronic device and readable storage medium - Google Patents
Animation display method, electronic device and readable storage medium Download PDFInfo
- Publication number
- CN117076801A CN117076801A CN202310886306.0A CN202310886306A CN117076801A CN 117076801 A CN117076801 A CN 117076801A CN 202310886306 A CN202310886306 A CN 202310886306A CN 117076801 A CN117076801 A CN 117076801A
- Authority
- CN
- China
- Prior art keywords
- animation
- target
- application page
- parameter
- determining
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 76
- 238000013507 mapping Methods 0.000 claims description 36
- 238000004590 computer program Methods 0.000 claims description 22
- 230000004044 response Effects 0.000 claims description 10
- 230000006870 function Effects 0.000 claims description 9
- 230000008569 process Effects 0.000 abstract description 23
- 238000009877 rendering Methods 0.000 abstract description 23
- 230000000903 blocking effect Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000001514 detection method Methods 0.000 description 3
- 230000001747 exhibiting effect Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000012938 design process Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides an animation display method, electronic equipment and a readable storage medium, and relates to the technical field of computers. The method is applied to the electronic equipment, and comprises the following steps: responding to the sliding operation of an application page, and acquiring the target sliding distance of the application page; determining a target animation in the first animation and a target image in the target animation according to the target sliding distance and a first preset parameter of at least one first animation; the first preset parameter is used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation; and displaying the target image in the target animation on the application page. The animation display method provided by the application can solve the problems of long rendering time, web page blocking and even browser crash caused by complex animation rendering scheduling process in the web page of the browser to a certain extent.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to an animation display method, an electronic device, and a readable storage medium.
Background
In the current webpage design scheme, many designers like to insert animations in the browser webpage and display corresponding contents in the browser webpage in an animation playing mode. In the process of animation display, the electronic equipment needs to timely render and display images in the animation, but a plurality of different animations may be triggered at different time points in a webpage of a browser, and the different animations have different time axes, so that the electronic equipment needs to acquire corresponding image resources for rendering according to the trigger time points and corresponding time axes of the different animations, the scheduling process is complex, the rendering time is increased, the phenomenon of webpage blocking is generated, and even the browser collapses.
Disclosure of Invention
The embodiment of the application provides an animation display method, electronic equipment and a readable storage medium, which can solve the problems of web page jam and even browser crash caused by longer rendering time due to complex animation rendering scheduling process in a browser web page to a certain extent.
In a first aspect, an embodiment of the present application provides an animation display method, where the method is applied to an electronic device, and the method includes:
Responding to the sliding operation of an application page, and acquiring a target sliding distance between the application page and the application page;
determining a target animation in the first animation and a target image in the target animation according to the target sliding distance and a first preset parameter of at least one first animation; the first preset parameter is used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation;
and displaying the target image in the target animation on the application page.
According to the animation display method provided by the application, the target image in the target animation corresponding to the sliding operation can be displayed in the application page along with the sliding operation of the user in the application page. In the process of browsing the webpage by the user, based on the sliding operation of the user on the application page, the browser can acquire the target sliding distance, directly determine the target animation corresponding to the target sliding distance and the target image in the target animation according to the corresponding relation between the sliding distance of the application page and the image in the first animation, and compared with the mode of inquiring the time axis of each first animation one by one to determine the target image in the related art, the scheduling process of the target image is greatly simplified, the time for rendering the data is shortened, the rendering performance of the browser is improved, and the problems that the rendering time is long, webpage jam is generated and even the browser collapses due to the complex scheduling process are effectively avoided.
In a possible implementation manner of the first aspect, the displaying, on the application page, a first control, and the obtaining, in response to a sliding operation of the application page, a target sliding distance of the application page includes:
responding to the sliding operation of the first control, and acquiring the actual position of the first control;
and determining the target sliding distance according to the actual position and the preset initial distance.
In a possible implementation manner of the first aspect, the first preset parameter includes a first offset range corresponding to the first animation;
the determining the target animation in the first animation and the target image in the target animation according to the target sliding distance and the first preset parameter of at least one first animation comprises the following steps:
determining a first animation corresponding to the first offset range containing the target sliding distance as a target animation;
and determining a target image in the target animation according to the target sliding distance and a first offset range corresponding to the target animation.
In a possible implementation manner of the first aspect, the method further includes:
acquiring a play starting point parameter and a play duration parameter of the first animation;
Determining a play ending parameter of the first animation according to the play starting point parameter and the play duration parameter;
obtaining the maximum sliding distance of the application page;
determining a mapping proportion according to the maximum sliding distance and the maximum value in the play end parameter of each first animation;
and respectively determining a first offset range corresponding to each first animation according to the play starting point parameter of each first animation, the play ending parameter of each first east lake Add and the mapping proportion.
In a possible implementation manner of the first aspect, the determining, according to the target sliding distance and the first offset range corresponding to the target animation, a target image in the target animation includes:
determining progress indication parameters of the target animation according to a first offset range corresponding to the target animation and the target sliding distance;
and determining the target image from the images corresponding to the target animation according to the progress indication parameters of the target animation.
In a possible implementation manner of the first aspect, before the displaying the target image in the target animation on the application page, the method further includes:
Determining a display parameter value of the display attribute of the target animation according to the mapping relation between the progress indication parameter and the display attribute of the target animation;
accordingly, the displaying the target image in the target animation on the application page comprises the following steps:
and displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.
In a possible implementation manner of the first aspect, the mapping relationship of the display attribute is a bessel rate function.
In a possible implementation manner of the first aspect, the determining, according to the first offset range corresponding to the target animation and the target sliding distance, a progress indication parameter of the target animation includes:
determining the actual offset distance of the target animation according to the target sliding distance and the minimum offset value in the first offset range corresponding to the target animation;
determining the total offset distance of the target animation according to the first offset range of the target animation;
and determining the progress indication parameter of the target animation according to the actual offset distance of the target animation and the total offset distance of the target animation.
In a second aspect, an embodiment of the present application provides an animation exhibiting apparatus, including:
the acquisition unit is used for responding to the sliding operation of the application page and acquiring the target sliding distance of the application page;
the determining unit is used for determining a target animation in the first animation and a target image in the target animation according to the sliding distance and at least one first preset parameter of the first animation, wherein the first preset parameter is used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation;
and the display unit is used for displaying the target image in the target animation on the application page.
In a third aspect, an embodiment of the present application provides an electronic device comprising a memory, at least one processor, and a computer program stored in the memory and executable on the processor, the processor implementing the method according to any one of the first aspects when executing the computer program.
In a fourth aspect, embodiments of the present application provide a computer readable storage medium storing a computer program which, when executed by a processor, implements a method as in any of the first aspects above.
In a fifth aspect, embodiments of the present application provide a computer program product for, when run on an electronic device, causing the electronic device to perform the method of any one of the first aspects.
It will be appreciated that the advantages of the second to fifth aspects may be found in the relevant description of the first aspect, and are not described here again.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort to a person skilled in the art.
FIG. 1 is a flow chart of an animation display method according to an embodiment of the present application;
FIG. 2 is a schematic diagram of a first control in an application page as a scroll bar according to an embodiment of the present application;
FIG. 3 is a schematic diagram of a first control in an application page according to an embodiment of the present application;
fig. 4 is a schematic structural diagram of an animation display device according to an embodiment of the present application;
Fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth such as the particular system architecture, techniques, etc., in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
In the current webpage design scheme, many designers like to insert animations in the browser webpage and display corresponding contents in the browser webpage in an animation playing mode. In the process of animation display, the electronic equipment needs to timely render and display images in the animation, but a plurality of different animations may be triggered at different time points in a webpage of a browser, and the different animations have different time axes, so that the electronic equipment needs to acquire corresponding image resources for rendering according to the trigger time points and corresponding time axes of the different animations, the scheduling process is complex, the rendering time is increased, the phenomenon of webpage blocking is generated, and even the browser collapses.
In order to avoid the phenomenon that the browser is blocked and even crashed due to the fact that the rendering time is increased due to the fact that the scheduling process of rendering data is complex in the process of viewing the webpage by the browser. The embodiment of the application provides an animation display method, electronic equipment and a readable storage medium, wherein the method can display target images in target animation corresponding to sliding operation in an application page along with the sliding operation of a user in the application page. That is, the browser can obtain the target sliding distance, and directly determine the target animation corresponding to the target sliding distance and the target image in the target animation according to the corresponding relation between the sliding distance of the application page and the images in the first animation, compared with the mode of querying the time axis of each first animation one by one to determine the target image in the related art, the scheduling process of the target image is greatly simplified, the time for rendering data is shortened, the rendering performance of the browser is improved, the problem that the rendering time of the browser is longer due to the complex scheduling process, web page is blocked, and even the browser collapses is avoided to a certain extent.
The animation display method provided by the embodiment of the application can be applied to electronic equipment. The electronic device may be a mobile phone, a tablet computer, a wearable device, an Augmented Reality (AR)/Virtual Reality (VR) device, a notebook computer, an Ultra-Mobile Personal Computer (UMPC), a netbook, a personal digital assistant (Personal Digital Assistant, PDA), an on-board device, a smart screen, a cloud server, or the like, and the embodiment of the present application does not limit the specific type of the electronic device.
The technical scheme of the application is described in detail below with reference to the accompanying drawings. The embodiments described below by referring to the drawings are illustrative and intended to explain the present application and should not be construed as limiting the application.
Fig. 1 is a schematic flow chart of an animation display method according to an embodiment of the application, referring to fig. 1, the method includes the following steps S101 to S103.
S101, responding to the sliding operation of the application page, and acquiring the target sliding distance of the application page.
It should be understood that the Application page may be a page displayed by an electronic device (e.g., a smart phone or a notebook computer) after a user triggers an Application icon of any Application program (APP) on a desktop of the electronic device to select and launch the corresponding APP; the user may open any page in the activated APP after a series of operations such as searching for a website of a certain website, searching for a corresponding device name, and the like.
In some possible embodiments, the screen of the electronic device is a touch screen, and the sliding operation of the application page may refer to an operation of sliding the application page up or down (or left or right) after the user touches an arbitrary position of the application page.
In other possible embodiments, the sliding operation of the application page may refer to an operation of sliding the application page up or down (or left or right) after the user selects any position of the application page through an input device such as a mouse, a touch pad, or the like.
In other possible embodiments, the sliding operation of the application page may refer to an operation in which the user controls the application page to slide up or down (or left or right) through a specific key on an input device such as a keyboard, a handle, or the like.
In other possible embodiments, the sliding operation of the application page may also be a sliding operation of a first control in the application page, where the first control may be a scroll bar as shown in fig. 2, and the first control may also be a directional control that moves up (or down) a preset distance as shown in fig. 3. The present application is not particularly limited to the first control.
In the example where the first control is a scroll bar, the sliding operation on the application page is an operation of dragging up and down the scroll bar. Based on the fact that the first control is a control which moves upwards (or downwards) by a preset distance, the sliding operation of the application page is a clicking operation of the control which moves upwards (or downwards) by the preset distance. The present application is not particularly limited to the sliding operation.
In the embodiment of the application, the target sliding distance of the application page may refer to an actual offset value of the application page, that is, an offset value between the current position of the application page and the initial position of the application page, after the user slides the application page or the first control in the application page. That is, the target sliding distance of the application page may be the same as the actual offset value of the application page or the first control in the application page.
By way of example and not limitation, after a user touches an application icon of any APP to select and launch the corresponding APP, a home page corresponding to the APP may be displayed on the desktop of the electronic device, the user may touch any location in the home page and slide upward to flip up the content presented by the home page, in which case the target sliding distance may be the distance the home page flipped up, and in some possible embodiments the target sliding distance may also correspond to the distance the user slides up.
It will be appreciated that, taking the first control in fig. 2 as a scroll bar as an example, the target sliding distance of the application page may also be the actual offset distance of the scroll bar during the process of the user dragging the scroll bar upward (or downward). As another example, taking the first control in fig. 3 as a direction control that moves up (or down) by a preset distance as an example, the target sliding distance of the application page may also be determined according to the number of clicks of the control that moves up (or down) by the preset distance by the user.
It should be noted that, in the actual application, the target sliding distance of the application page may also be different from the actual position of the application page or the first control in the application page. The application page is displayed with a first control, and the obtaining the target sliding distance of the application page in response to the sliding operation of the application page specifically may include: responding to the sliding operation of the first control, and acquiring the actual position of the first control; and determining the target sliding distance according to the actual position and the preset initial distance.
It should be appreciated that the preset initial distance may be preconfigured, the actual position of the first control may be obtained based on the sliding operation of the user on the first control, and the target sliding distance of the first control may be obtained by subtracting the preset initial distance from the distance value corresponding to the actual position of the first control.
Similarly, the preset initial distance of the application page may be preset, the actual position of the application page may be obtained based on the sliding operation of the user on the application page, and then the preset initial distance of the application page may be subtracted by using the distance value corresponding to the actual position of the application page, so as to obtain the target sliding distance of the application page. The method for acquiring the target sliding distance of the application page according to the embodiment of the application is not particularly limited.
For example, assuming that in the application page design process, a preset initial distance of the preset configuration application page (or the first control) is 500 pixels (px), based on a sliding operation of the application page (or the first control) by the user, the obtained actual position of the application page (or the first control) is 700px, then it may be determined that the target sliding distance of the application page (or the first control) is 200px according to the preset initial distance and the actual position.
S102, determining a target animation in the first animation and a target image in the target animation according to the target sliding distance and at least one first preset parameter of the first animation; the first preset parameter is used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation.
It should be appreciated that one or more first animations are included in the application page, each first animation comprising one or more images. In the embodiment of the application, at least one target animation and a target image in the at least one target animation can be determined from one or more first animations according to the first preset parameters of the one or more first animations and the target sliding distance of the application page, so that an icon image corresponding to the sliding operation of the application page is displayed in the application page.
It should be noted that, in the embodiment of the present application, the number of target animations determined from the at least one first animation may be one or more, that is, the target image displayed in the application page along with the sliding operation of the user on the application page or the first control in the application page may include the image of the at least one target animation. The setting accords with the actual application scene, and the situation that the application scene is limited because one sliding operation can only bind one image of one animation can be effectively avoided.
In some embodiments, the first preset parameter may include a first offset range corresponding to the first animation; the first preset parameters may further include a play start point parameter of each first animation, a play duration parameter of each first animation, and a maximum sliding distance of the application page.
Specifically, the method for determining the first offset range of each first animation may include: acquiring a play starting point parameter and a play duration parameter of a first animation; determining a play ending parameter of the first animation according to the play starting point parameter and the play duration parameter; obtaining the maximum sliding distance of an application page; determining a mapping proportion according to the maximum sliding distance and the maximum value in the play end parameters of each first animation; and respectively determining a first offset range corresponding to each first animation according to the play starting point parameter of each first animation, the play ending parameter of each first animation and the mapping proportion.
It should be understood that the play start parameter of the first animation refers to a parameter corresponding to a start play time of the first animation; the playing duration parameter refers to a parameter corresponding to the playing duration of the first animation; the play end parameter is a parameter corresponding to the play end time of the first animation. It can be understood that after the play start point parameter and the play duration parameter of the first animation are obtained, the sum of the play start point parameter and the play duration parameter is taken to obtain the play end parameter of the first animation.
In the embodiment of the application, aiming at the situation that the application page is directly slid, the maximum sliding distance of the application page refers to the maximum distance that a user can slide up and down (or left and right) on the application page; for the case that the first control is a scroll bar, the maximum sliding distance of the application page may refer to the maximum distance that the user can drag the first control up and down (or left and right); for the case that the first control is a control moving up (or down) by a preset distance, the maximum sliding distance of the application page may be the product of the number of clicks of the control moving up (or down) by the preset distance by the user and the preset distance moved by the control in turn per click after the application page is displayed.
In an example in which the first control is a scroll bar, the method for obtaining the maximum sliding distance of the application page may specifically include: responding to the maximum sliding operation of the first control, controlling the first control to move to the bottommost part of the application page, and acquiring the actual position of the first control after the movement; and determining the target sliding distance according to the actual position and the preset initial distance. In other possible implementations, the maximum sliding distance may also be a preset value. The method for determining the maximum sliding distance of the application page according to the present application is not particularly limited.
For example, still taking the preset initial distance of the preset configuration application page as 500px as an example, in response to the maximum sliding operation on the first control, the actual position of the first control after moving is obtained to be 1500px, and then the maximum sliding distance of the application page may be determined to be 1000px according to the preset initial distance and the actual position of the first control.
After the play start parameters and the play duration parameters of each first animation are respectively determined, the maximum sliding distance of the application page can be obtained, and then the mapping proportion is determined according to the maximum sliding distance of the application page and the maximum value in the play end parameters of each first animation; according to the play start point parameter of each first animation, the play end parameter of each first animation and the mapping proportion, the first offset range corresponding to each first animation can be determined respectively.
It should be understood that the first offset range corresponding to each first animation refers to a sliding range of the application page corresponding to the animation play duration of each first animation. The animation playing duration time refers to the sliding range of the application page instead of the actual playing time, and the scheme of the application replaces the traditional time axis with the first offset range, and controls the playing of the first animation through the sliding distance, so that the scheduling difficulty of each first animation is reduced.
As an example and not by way of limitation, assume that a certain application page includes two first animations, namely, an animation a and an animation B, where a play start parameter of the animation a is 0 and a play duration parameter of the animation a is 1; the playing start parameter of the animation B is 1, and the playing duration parameter of the animation B is also 1; then it may be determined that the play end parameter of animation a is 1 and that the play end parameter of animation B is 2. The maximum play end parameters of the animation B in the two first animations can be determined according to the play end parameters of the animation a and the animation B, and then, assuming that the obtained maximum sliding distance of the application page is 1000px, the mapping ratio between the sliding distance of the application page and the play time of the animation can be determined according to the maximum sliding distance and the play end parameters of the animation B to be 500:1, that is, the sliding distance of the application page corresponding to the animation B playing 1 unit time is 500px.
After the mapping proportion is determined, according to the playing start point parameter of the animation A being 0, the playing duration parameter of the animation A being 1 and the mapping proportion being 500:1, it can be determined that the application page has a sliding range of 0px to 500px corresponding to the beginning to the end of the animation a (i.e., 0 to 1). Similarly, according to the play start parameter of the animation B being 1, the play duration parameter of the animation B being 1 and the mapping ratio 500:1, it can be determined that the application page has a sliding range of 500px to 1000px, and the corresponding animation B starts to end (i.e., 1 to 2).
It should be noted that, in the above example, the first offset range corresponding to the animation a in the two first animations is 0px to 500px; the first offset range corresponding to the animation B is 500 px-1000 px.
In another example, it is assumed that two first animations are included in a certain application page, respectively, wherein a play start parameter of the animation a is 0, and a play duration parameter of the animation a is 1; the playing start parameter of the animation B is 1, and the playing duration parameter of the animation B is 2; the maximum sliding distance of the application page is 1000px; then it can be determined that the play end parameter of the animation a is 1, the play end parameter of the animation B is 3, and the play end parameter of the animation B is the largest among the two first animations, so that the mapping ratio between the sliding distance of the application page and the play time of the animation is 1000:3, 333.333333:1 (the result of the mapping proportion may set the corresponding decimal point number according to the actual application).
Based on the mapping proportion, the starting end to the ending end of the corresponding animation A when the sliding range of the application page is 0 px-333.333333 px; and when the sliding range of the application page is 333.333333 px-1000 px, the animation B is correspondingly started to finish.
For another example, it is assumed that two first animations are also included in a certain application page, which are respectively an animation a and an animation B, where a play start parameter of the animation a is 2, and a play duration parameter of the animation a is 1; the playing start parameter of the animation B is 2, and the playing duration parameter of the animation B is 2; the maximum sliding distance of the application page is 1000px; then it may be determined that the play end parameter of the animation a is 3, the play end parameter of the animation B is 4, and the play end parameter of the animation B is the largest among the two first animations, so that it may be determined that the mapping ratio between the sliding distance of the application page and the play time of the animation is 1000 according to the play end parameter of the animation B and the maximum sliding distance of the application page: 4, namely 250:1.
based on the mapping proportion, the corresponding animation A from beginning to end (namely 2-3) when the sliding range of the application page is 500 px-750 px can be obtained; the application page slides in the range of 500 px-1000 px, and corresponds to the beginning to the end of the animation B (namely 2-4). It is noted that when the sliding range of the application page is 500px to 750px, the animation A is played from the beginning to the end, and at the same time, the animation B is played, and half of the animation B is played.
It should be noted that, the play end parameters and play duration parameters of each first animation may be configured in advance, so as to determine, from at least one first animation, a second animation that ends playing finally according to the play end parameters, then obtain a maximum sliding distance of the application page, determine a mapping ratio according to the maximum sliding distance and the play end parameters of the second animation, and finally determine, according to the play start parameters of each first animation, the play end parameters of each first animation, and the mapping ratio, a first offset range corresponding to each first animation. The method for determining the first offset range of each first animation according to the embodiment of the application is not particularly limited.
After determining the first offset range of each first animation, determining the target animation in at least one first animation and the target image in the target animation according to the target sliding distance and the first preset parameter of at least one first animation specifically may include: determining a first animation corresponding to a first offset range containing the target sliding distance as a target animation; and determining a target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation.
For example, assume that the target sliding distance of the application page is 200px, and the application page includes two first animations, namely an animation a and an animation B, where a first offset range corresponding to the animation a is 0 px-500 px; for example, the first offset range corresponding to the animation B is 500px to 1000px, and since the target sliding distance 200px is within the first offset range of the animation a, the animation a may be used as the target animation, and then the target image in the animation a may be further determined according to the target sliding distance and the first offset range of the animation a.
In one possible implementation manner of the present application, determining the target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation may specifically include: determining progress indication parameters of the target animation according to the first offset range and the target sliding distance corresponding to the target animation; and determining a target image from the images corresponding to the target animation according to the progress indication parameters of the target animation.
It should be appreciated that the progress indication parameter of the target animation may be expressed as a percentage of the already played time length of the target animation to the play time length parameter.
In some embodiments, determining the progress indication parameter of the target animation according to the first offset range and the target sliding distance corresponding to the target animation includes: determining the actual offset distance of the target animation according to the target sliding distance and the minimum offset value in the first offset range corresponding to the target animation; determining the total offset distance of the target animation according to the first offset range of the target animation; and determining the progress indication parameter of the target animation according to the actual offset distance of the target animation and the total offset distance of the target animation.
It should be noted that, since there is a corresponding mapping ratio between the maximum sliding distance of the application page and the maximum value of the play end parameters of each first animation, the progress indication parameter of the target animation may also be expressed as a ratio between the actual offset distance of the target animation and the total offset distance of the target animation.
Assuming that the target sliding distance of the application page is 200px, the application page comprises two first animations, namely an animation A and an animation B, wherein the first offset range corresponding to the animation A is 0 px-500 px; the first offset range corresponding to the animation B is 500 px-1000 px, and the animation a is a target animation, for example, according to the first offset range of the animation a, the minimum offset value in the first offset range can be determined to be 0px, the total offset distance of the animation a is 500px, based on the target sliding distance 200px, the actual offset distance of the animation a can be determined to be 200px, and according to the actual offset distance and the total offset distance of the animation a, the progress indication parameter of the animation a can be further determined to be 200/500=40%.
After the progress indicating parameter of the target animation is determined based on the first offset range and the target sliding distance of the target animation, the target image can be determined from the images corresponding to the target animation according to the progress indicating parameter of the target animation.
In some embodiments, it may further include: according to the mapping relation between the progress indication parameter and the display attribute of the target animation, determining the display parameter value of the display attribute of the target animation; accordingly, displaying the target image in the target animation on the application page comprises the following steps: and displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.
It should be appreciated that the display properties of the target animation include, but are not limited to, the transparency of the font or target object in the target animation, the rotation angle of the target object in the target animation, and the like.
In one possible embodiment of the present application, the mapping relationship of the display attribute may be a mapping ratio relationship between a progress indication parameter of the target animation and the display attribute of the target animation. For example, assume that, with the target sliding distance of the application page being 250px, the progress indicating parameter of the animation a is 50%, and the transparency of a font of a certain line is changed from 0 to 1, where the display attribute of the animation a is the transparency of the font, when the progress indicating parameter of the animation a is 50%, the transparency of the font in the animation a is also executed by 50%, that is, 0.5, that is, when the target sliding distance of the application page is 250px, the specific value of the transparency of the font correspondingly displayed is 0.5.
In other possible embodiments, the mapping relationship of the display attribute may also be a bessel rate function. Specifically, the bessel rate function may be expressed as the following formula (1):
in the above formula (1), Γ (z) is Γ function; m is 0 to infinity; α=0, 1,2; j (J) α (x) Display parameter values representing display attributes. It should be noted that, when the mapping relationship of the display attribute is a bessel rate function, in an actual application, the corresponding target animation may be displayed according to the rate of the sliding operation of the user on the application page or the first control in the application page, so as to improve the user experience.
Assuming that the target sliding distance of the application page is 250px, the progress indication parameter of the animation a is 50%, the transparency of a font of a certain line is changed from 0 to 1, where the display attribute of the animation a is transparency of the font, and due to the influence of the bezier rate function, when the target sliding distance of the application page is 250px, the specific value of transparency of a corresponding font of a certain line is 0.7853552869588659, and if the display parameter value retains 6 decimal places, the specific value of transparency of a font of a certain line is 0.785355 when the target sliding distance of the application page is 250 px.
Of course, in the actual design process, the mapping relationship of other display attributes may be customized, which is not limited in the embodiment of the present application.
S103, displaying the target image in the target animation on the application page.
It should be understood that, in the embodiment of the present application, the target image corresponding to the mapping proportion relationship in the target animation may be directly displayed on the application page according to the mapping proportion relationship between the progress indication parameter of the target animation and the display attribute of the target animation; and displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.
In order to speed up the presentation rate of target images in target animations in application pages during the actual programming process, in some embodiments, the graphics processor (Graphics Processing Unit, GPU) animation may be turned on with a particular style name (e.g., a will-change style name). In some embodiments, if the process of rendering the target animation by the browser is started by using the GPU animation, in order to avoid the phenomenon that other non-target images (such as static characters or images in an application page) or running unreasonable codes in the rendering process can be manually removed, in order to avoid the phenomenon that the number stored in the GPU increases due to the fact that other non-target images also participate in the process of rendering the GPU animation, and application page jams or browser running is generated.
For example, in google browserFor example, a user may find a layering (Layer) tool in a control panel of the browser, and then delete other non-target images or running unreasonable codes in the rendering process in pages correspondingly presented by the Layer tool.
In some embodiments, in order to further increase the speed of displaying the target image, the required resources may also be preloaded by lazy loading. For example, in response to a user's start operation on an application page, only resources of a first part of pages in the application page (the size of the first part of pages corresponds to the size of a current visual window) may be loaded; or may both load resources in a first partial page and then preload resources of a second partial page adjacent to the first partial page. The present application is not particularly limited thereto.
It should be noted that, according to the animation display method provided by the embodiment of the application, through actual scene test, the refresh frequency of most (about 99%) application pages in the browser can reach 45 frames per second. That is, in the process that the user slides the application page up and down (or left and right), the animation in the application page can be displayed smoothly in real time, so that the user experience is greatly improved.
According to the animation display method provided by the application, the target image in the target animation corresponding to the sliding operation can be displayed in the application page along with the sliding operation of the user in the application page. In the process of browsing the webpage by the user, based on the sliding operation of the user on the application page, the browser can acquire the target sliding distance, directly determine the target animation corresponding to the target sliding distance and the target image in the target animation according to the corresponding relation between the sliding distance of the application page and the image in the first animation, and compared with the mode of inquiring the time axis of each first animation one by one to determine the target image in the related art, the scheduling process of the target image is greatly simplified, the time for rendering the data is shortened, the rendering performance of the browser is improved, and the problems that the rendering time is long, webpage jam is generated and even the browser collapses due to the complex scheduling process are effectively avoided.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus/electronic device and method may be implemented in other manners. For example, the apparatus/electronic device embodiments described above are merely illustrative, e.g., the division of modules or units is merely a logical functional division, and there may be additional divisions when actually implemented, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted, or not performed. The specific content of each unit implementation may refer to the specific description in the other embodiments, and will not be repeated here.
The units described above as separate components may or may not be physically separate, and components shown as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
Based on the same inventive concept, an embodiment of the present application provides an animation exhibiting apparatus 200, referring to fig. 4, the animation exhibiting apparatus 200 includes:
an obtaining unit 201, configured to obtain a target sliding distance of an application page in response to a sliding operation of the application page;
a determining unit 202, configured to determine a target animation in the first animation and a target image in the target animation according to the target sliding distance and a first preset parameter of at least one first animation; the first preset parameters are used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation;
and the display unit 203 is used for displaying the target image in the target animation on the application page.
In some embodiments, the application page is displayed with a first control, and the obtaining unit 201 is further configured to:
Responding to the sliding operation of the first control, and acquiring the actual position of the first control;
and determining the target sliding distance according to the actual position and the preset initial distance.
In some embodiments, the first preset parameter includes a first offset range corresponding to the first animation;
the determining unit 202 is further configured to:
determining a first animation corresponding to a first offset range containing the target sliding distance as a target animation;
and determining a target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation.
In some embodiments, animation display device 200 further comprises:
the first acquisition subunit is used for acquiring the play starting point parameter and the play duration parameter of the first animation;
the first determining unit is used for determining a play ending parameter of the first animation according to the play starting point parameter and the play duration parameter;
the second acquisition subunit is used for acquiring the maximum sliding distance of the application page;
the second determining unit is used for determining a mapping proportion according to the maximum sliding distance and the maximum value in the playing end parameters of each first animation;
and the third determining unit is used for respectively determining a first offset range corresponding to each first animation according to the play start point parameter of each first animation, the play end parameter of each first east lake Add and the mapping proportion.
In some embodiments, determining the target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation includes:
determining progress indication parameters of the target animation according to the first offset range and the target sliding distance corresponding to the target animation;
and determining a target image from the images corresponding to the target animation according to the progress indication parameters of the target animation.
In some embodiments, before the target image in the target animation is presented on the application page, the animation presenting apparatus 200 further includes:
a fourth determining unit, configured to determine a display parameter value of a display attribute of the target animation according to a mapping relationship between the progress indication parameter and the display attribute of the target animation;
accordingly, the display unit 203 is further configured to: and displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.
In some embodiments, the mapping of display attributes is a Bessel rate function.
In some embodiments, determining the progress indication parameter of the target animation according to the first offset range and the target sliding distance corresponding to the target animation includes:
determining the actual offset distance of the target animation according to the target sliding distance and the minimum offset value in the first offset range corresponding to the target animation;
Determining the total offset distance of the target animation according to the first offset range of the target animation;
and determining the progress indication parameter of the target animation according to the actual offset distance of the target animation and the total offset distance of the target animation.
The embodiment of the application also provides electronic equipment. As shown in fig. 5, the electronic device 300 includes: at least one processor 301, a memory 302 and a computer program 303 stored in the memory 302 and executable on the at least one processor 301, the processor 301 implementing the database creation method based on photothermal reflection coefficients provided by the application when executing the computer program 303.
By way of example, the computer program 303 may be divided into one or more modules/units, which are stored in the memory 302 and executed by the processor 301 to accomplish the present application. One or more of the modules/units may be a series of computer program instruction segments capable of performing particular functions for describing the execution of the computer program in the electronic device 300.
It will be appreciated by those skilled in the art that fig. 5 is merely an example of an electronic device 300 and is not intended to be limiting, and may include more or fewer components than shown, or may combine certain components, or different components, e.g., electronic device 300 may further include an input-output device, a network access device, a bus, etc.
The processor 301 may be a central processing unit (Central Processing Unit, CPU), but may also be other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 302 may be an internal storage unit of the electronic device 300, such as a hard disk or a memory of the electronic device 300. The memory 302 may also be an external storage device of the electronic device 300, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card) or the like, which are provided on the electronic device 300. Further, the memory 302 may also include both internal storage units and external storage devices of the electronic device 300. The memory 302 is used to store computer programs and other programs and data required by the electronic device 300. The memory 302 may also be used to temporarily store data that has been output or is to be output.
The electronic device 300 provided in this embodiment may perform the above-mentioned method embodiments, and its implementation principle and technical effects are similar, and will not be described herein.
Embodiments of the present application also provide a computer readable storage medium storing a computer program which, when executed by a processor, performs the steps of the respective method embodiments described above.
Embodiments of the present application provide a computer program product which, when run on an electronic device, causes the electronic device to perform steps that may be carried out in the various method embodiments described above.
The integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the present application may implement all or part of the flow of the above-described method embodiments, and may be implemented by a computer program to instruct related hardware, where the computer program may be stored in a computer readable storage medium, and where the computer program, when executed by a processor, may implement the steps of the above-described method embodiments. Wherein the computer program comprises computer program code which may be in the form of source code, object code, executable files or in some intermediate form, etc. The computer readable medium may include at least: any entity or device capable of carrying computer program code to a camera/electronics device, recording medium, computer Memory, ROM (Read-Only Memory), RAM (Random Access Memory, random-access Memory), CD-ROM (Compact Disc Read-Only Memory), magnetic tape, floppy disk, optical data storage device, and so forth. The computer readable storage medium mentioned in the present application may be a non-volatile storage medium, in other words, a non-transitory storage medium.
In the foregoing embodiments, the descriptions of the embodiments are emphasized, and in part, not described or illustrated in any particular embodiment, reference is made to the related descriptions of other embodiments.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus/device and method may be implemented in other manners. For example, the apparatus/device embodiments described above are merely illustrative, e.g., the division of modules or elements is merely a logical functional division, and there may be additional divisions when actually implemented, e.g., multiple elements or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection via interfaces, devices or units, which may be in electrical, mechanical or other forms.
It should be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, 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 should also be understood that the term "and/or" as used in the present specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes such combinations.
As used in the present description and the appended claims, the term "if" may be interpreted as "when..once" or "in response to a determination" or "in response to detection" depending on the context. Similarly, the phrase "if a determination" or "if a [ described condition or event ] is detected" may be interpreted in the context of meaning "upon determination" or "in response to determination" or "upon detection of a [ described condition or event ]" or "in response to detection of a [ described condition or event ]".
Furthermore, the terms "first," "second," "third," and the like in the description of the present specification and in the appended claims, are used for distinguishing between descriptions and not necessarily for indicating or implying a relative importance.
Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," and the like in the specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments" unless expressly specified otherwise. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless expressly specified otherwise.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and not for limiting the same; although the application has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some or all of the technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit of the application.
Claims (10)
1. An animation display method, wherein the method is applied to an electronic device, and the method comprises the following steps:
responding to the sliding operation of an application page, and acquiring the target sliding distance of the application page;
determining a target animation in the first animation and a target image in the target animation according to the target sliding distance and a first preset parameter of at least one first animation; the first preset parameter is used for indicating the corresponding relation between the sliding distance of the application page and the image in the first animation;
and displaying the target image in the target animation on the application page.
2. The method according to claim 1, wherein the application page is displayed with a first control, and the obtaining the target sliding distance of the application page in response to the sliding operation of the application page includes:
responding to the sliding operation of the first control, and acquiring the actual position of the first control;
and determining the target sliding distance according to the actual position and the preset initial distance.
3. The method according to claim 1 or 2, wherein the first preset parameter includes a first offset range corresponding to the first animation;
The determining the target animation in the first animation and the target image in the target animation according to the target sliding distance and the first preset parameter of at least one first animation comprises the following steps:
determining a first animation corresponding to a first offset range containing the target sliding distance as a target animation;
and determining a target image in the target animation according to the target sliding distance and a first offset range corresponding to the target animation.
4. A method according to claim 3, characterized in that the method further comprises:
acquiring a play starting point parameter and a play duration parameter of the first animation;
determining a play ending parameter of the first animation according to the play starting point parameter and the play duration parameter;
obtaining the maximum sliding distance of the application page;
determining a mapping proportion according to the maximum sliding distance and the maximum value in the play end parameter of each first animation;
and respectively determining a first offset range corresponding to each first animation according to the play starting point parameter of each first animation, the play ending parameter of each first animation and the mapping proportion.
5. The method of claim 3, wherein determining the target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation comprises:
determining progress indication parameters of the target animation according to a first offset range corresponding to the target animation and the target sliding distance;
and determining the target image from the images corresponding to the target animation according to the progress indication parameters of the target animation.
6. The method of claim 5, wherein prior to presenting the target image in the target animation on the application page, the method further comprises:
determining a display parameter value of the display attribute of the target animation according to the mapping relation between the progress indication parameter and the display attribute of the target animation;
accordingly, the displaying the target image in the target animation on the application page comprises the following steps:
and displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.
7. The method of claim 6, wherein the mapping of the display attributes is a bezier rate function.
8. The method of claim 5, wherein determining the progress indication parameter of the target animation according to the first offset range corresponding to the target animation and the target sliding distance comprises:
determining the actual offset distance of the target animation according to the target sliding distance and the minimum offset value in the first offset range corresponding to the target animation;
determining the total offset distance of the target animation according to the first offset range of the target animation;
and determining the progress indication parameter of the target animation according to the actual offset distance of the target animation and the total offset distance of the target animation.
9. An electronic device comprising a memory, at least one processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the method of any one of claims 1 to 8 when executing the computer program.
10. A computer readable storage medium storing a computer program, characterized in that the computer program when executed by a processor implements the method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310886306.0A CN117076801A (en) | 2023-07-18 | 2023-07-18 | Animation display method, electronic device and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310886306.0A CN117076801A (en) | 2023-07-18 | 2023-07-18 | Animation display method, electronic device and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117076801A true CN117076801A (en) | 2023-11-17 |
Family
ID=88708777
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310886306.0A Pending CN117076801A (en) | 2023-07-18 | 2023-07-18 | Animation display method, electronic device and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117076801A (en) |
-
2023
- 2023-07-18 CN CN202310886306.0A patent/CN117076801A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10261669B2 (en) | Publishing electronic documents utilizing navigation information | |
| US10146419B2 (en) | Method and system for section-based editing of a website page | |
| US8479115B2 (en) | Predictive scrolling | |
| EP2815299B1 (en) | Thumbnail-image selection of applications | |
| KR101683224B1 (en) | Multipoint pinch gesture control of search results | |
| US9142044B2 (en) | Apparatus, systems and methods for layout of scene graphs using node bounding areas | |
| NL2008222C2 (en) | Selective rendering of off-screen content. | |
| US8839142B2 (en) | Desktop system object removal | |
| US9619435B2 (en) | Methods and apparatus for modifying typographic attributes | |
| US20140082533A1 (en) | Navigation Interface for Electronic Content | |
| US20130080910A1 (en) | Dynamic visualization of page element access rates in a web application | |
| US10706811B2 (en) | Method and device for controlling display of a flexible display screen | |
| US20170177196A1 (en) | Providing selection areas for selectable objects in graphical interface | |
| US8542207B1 (en) | Pencil eraser gesture and gesture recognition method for touch-enabled user interfaces | |
| US9195772B2 (en) | Delayed image decoding | |
| US10310715B2 (en) | Transition controlled e-book animations | |
| US10373363B2 (en) | Systems and methods for visually creating and editing scrolling actions | |
| US20160070460A1 (en) | In situ assignment of image asset attributes | |
| US20130232403A1 (en) | Method and system for the use of adjustment handles to facilitate dynamic layout editing | |
| CN107943805B (en) | Animation rendering and publishing method and device | |
| CN111597009B (en) | Application program display method and device and terminal equipment | |
| CN106681590B (en) | Method and device for displaying screen content of driving recording device | |
| US8160389B2 (en) | Method for overlapping visual slices | |
| US20180039381A1 (en) | User interface for application interface manipulation | |
| CN111522610A (en) | Information display method, device and equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |