Animation display method, electronic device, and readable storage medium

Abstract

The application provides an animation display method, an electronic device and a readable storage medium, and relates to the technical field of computers. The method is applied to an electronic device, and the method comprises the following steps: in response to a sliding operation on an application page, obtaining a target sliding distance of the application page; determining a target animation in a first animation and a target image in the target animation according to the target sliding distance and first preset parameters of the first animation; the first preset parameters are used to indicate a corresponding relationship between a sliding distance of the application page and an 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 problem that the rendering time is relatively long, the webpage is stuck, and even the browser crashes due to the relatively complex animation rendering scheduling process in the browser webpage.

Description

TECHNICAL FIELD

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

[0002] In the current webpage design scheme, many designers like to insert animations in the browser webpage to display corresponding contents in the browser webpage in the animation playing mode. In the process of animation display, the electronic device needs to render and display the images in the animation in time. However, there may be multiple different animations in the browser webpage triggered at different time points, and different animations have different time axes, so that the electronic device needs to obtain corresponding image resources for rendering according to the trigger time points and the corresponding time axes of different animations, and the scheduling process is relatively complex, which increases the rendering time and causes the phenomenon of webpage lag, and even leads to the crash of the browser. SUMMARY

[0003] The embodiments of the present application provide an animation display method, an electronic device and a readable storage medium, which can solve the problem of long rendering time, webpage lag and even browser crash caused by the complex animation rendering scheduling process in the browser webpage to a certain extent.

[0004] In a first aspect, the embodiments of the present application provide an animation display method, which is applied to an electronic device, and the method comprises:

[0005] In response to a sliding operation on an application page, a target sliding distance of the application page is obtained;

[0006] According to the target sliding distance and a first preset parameter of at least one first animation, a target animation in the first animation and a target image in the target animation are determined; the first preset parameter is used to indicate the corresponding relationship between the sliding distance of the application page and the images in the first animation;

[0007] A target image in the target animation is displayed on the application page.

[0008] Based on the animation display method provided in the application, the target image in the target animation corresponding to the sliding operation can be displayed in the application page according to 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 obtain the target sliding distance, and according to the corresponding relationship between the sliding distance of the application page and the images in the first animation, directly determine the target animation corresponding to the target sliding distance and the target image in the target animation. Compared with the way 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 of rendering data is shortened, the rendering performance of the browser is improved, and the problem of long rendering time, webpage jamming, and even browser crash caused by the complex scheduling process is effectively avoided.

[0009] In a possible implementation of the first aspect, the application page displays a first control, and the obtaining of the target sliding distance of the application page in response to the sliding operation on the application page comprises:

[0010] obtaining an actual position of the first control in response to the sliding operation on the first control;

[0011] determining the target sliding distance according to the actual position and a preset initial distance.

[0012] In a possible implementation of the first aspect, the first preset parameter comprises a first offset range corresponding to the first animation.

[0013] The determining of 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:

[0014] determining the first animation corresponding to the first offset range containing the target sliding distance as the target animation;

[0015] determining the target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation.

[0016] In a possible implementation of the first aspect, the method further comprises:

[0017] obtaining a play start point parameter and a play duration parameter of the first animation;

[0018] determining a play end point parameter of the first animation according to the play start point parameter and the play duration parameter;

[0019] obtaining a maximum sliding distance of the application page;

[0020] determine a mapping ratio according to the maximum sliding distance and a maximum value in the end parameters of playing of each first animation;

[0021] determine a first offset range corresponding to each first animation according to a start parameter of playing of each first animation, the end parameter of playing of each first animation, and the mapping ratio.

[0022] In a possible implementation of the first aspect, the 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:

[0023] determine a progress indication parameter of the target animation according to the first offset range corresponding to the target animation and the target sliding distance;

[0024] determine the target image from the images corresponding to the target animation according to the progress indication parameter of the target animation.

[0025] In a possible implementation of the first aspect, before the target image in the target animation is displayed on the application page, the method further comprises:

[0026] determine a display parameter value of the display attribute of the target animation according to a mapping relationship between the progress indication parameter and the display attribute of the target animation;

[0027] Correspondingly, the displaying the target image in the target animation on the application page comprises:

[0028] display the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.

[0029] In a possible implementation of the first aspect, the mapping relationship of the display attribute is a Bezier rate function.

[0030] In a possible implementation of the first aspect, the 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:

[0031] determine an actual offset distance of the target animation according to a minimum offset value in the target sliding distance and the first offset range corresponding to the target animation;

[0032] determine a total offset distance of the target animation according to the first offset range of the target animation;

[0033] determine 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.

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

[0035] an acquisition unit configured to acquire a target sliding distance of the application page in response to a sliding operation on the application page;

[0036] a determination unit configured to determine a target animation in the first animations and a target image in the target animation according to the sliding distance and first preset parameters of the at least one first animation, the first preset parameters being used to indicate a corresponding relationship between a sliding distance of the application page and an image in the first animation;

[0037] a display unit configured to display the target image in the target animation on the application page.

[0038] 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 capable of running on the processor, and the processor implements the method of any one of the above first aspect when executing the computer program.

[0039] In a fourth aspect, an embodiment of the present application provides a computer readable storage medium, the computer readable storage medium stores a computer program, and the computer program is executed by a processor to implement the method of any one of the above first aspect.

[0040] In a fifth aspect, an embodiment of the present application provides a computer program product, when the computer program product is run on an electronic device, the electronic device executes the method of any one of the above first aspect.

[0041] It can be understood that the beneficial effects of the above second aspect to fifth aspect can refer to the related description in the above first aspect, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0042] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0043] Figure 1 is a flowchart of an animation display method provided by an embodiment of the present application;

[0044] Figure 2 is a schematic diagram of a first control being a scroll bar in an application page provided by an embodiment of the present application;

[0045] Figure 3 is a schematic diagram of an application page in which a first control is a direction control, provided by an embodiment of the present application;

[0046] Figure 4 is a structural schematic diagram of an animation display device, provided by an embodiment of the present application;

[0047] Figure 5 is a structural schematic diagram of an electronic device, provided by an embodiment of the present application. DETAILED DESCRIPTION

[0048] In the following description, specific details are set forth, such as particular system configurations, techniques, etc., in order to provide a thorough understanding of the present application. However, persons having ordinary skill in the art will appreciate that the present application can be practiced without these specific details. In other instances, well-known structures, devices, circuits, and methods have not been described in detail in order to avoid obscuring the present application.

[0049] In the current web page design scheme, many designers like to insert animations in the browser web page to display corresponding content in the browser web page in an animation playing manner. In the process of animation display, the electronic device needs to render and display the images in the animation in time. However, there can be multiple different animations in the browser web page triggered at different time points, and different animations have different time axes, so that the electronic device needs to acquire corresponding image resources for rendering according to the triggering time points of different animations and the corresponding time axes, and the scheduling process is relatively complex, which increases the rendering time and causes the phenomenon of web page lag, and even leads to the crash of the browser.

[0050] In order to avoid the phenomenon that the browser increases the rendering time due to the complex scheduling process of rendering data, causes the web page lag, and even crashes in the process of viewing the web page in the browser, an animation display method, an electronic device, and a readable storage medium are provided in the embodiments of the present application. The method can display target images in a target animation corresponding to a sliding operation of a user in an application page according to the sliding operation of the user in the application page. That is, the browser can acquire a target sliding distance, and directly determine a target animation corresponding to the target sliding distance and a target image in the target animation according to a corresponding relationship between the sliding distance of the application page and the images in the first animation, compared with the way of querying the time axes 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 of rendering data is shortened, the rendering performance of the browser is improved, and the problem that the rendering time is relatively long due to the relatively complex scheduling process, the web page lag, and even the crash of the browser can be avoided to a certain extent.

[0051] The animation display method provided by the embodiments of the present application can be applied to an electronic device. The electronic device can 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 (PDA), a vehicle-mounted device, a smart screen, a cloud server, and the like. The embodiments of the present application do not limit the specific type of the electronic device.

[0052] The technical solutions of the present application will be described in detail below with reference to the accompanying drawings. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to explain the present application, and cannot be understood as a limitation of the present application.

[0053] As Figure 1 Fig. 1 shows a flowchart of an animation display method provided by the embodiments of the present application. As shown in Fig. 1, the method comprises the following steps S101-S103. Figure 1

[0054] S101, in response to a sliding operation on an application page, obtaining a target sliding distance of the application page.

[0055] It should be understood that the application page can be a page displayed by an electronic device (for example, a smart phone or a notebook computer) after a user triggers an application icon of an arbitrary application program (APP) on a desktop of the electronic device to select and start the corresponding APP. The application page can also be an arbitrary page opened by the user after a series of operations such as searching for a website address of a website, searching for a corresponding device name, and the like in the started APP.

[0056] In some possible implementation manners, the screen of the electronic device is a touch screen, and the sliding operation on the application page can be an operation of sliding the application page upwards or downwards (or left or right) after the user touches an arbitrary position of the application page.

[0057] In another possible implementation manner, the sliding operation on the application page can be an operation of sliding the application page upwards or downwards (or left or right) after the user selects an arbitrary position of the application page by using a mouse, a touchpad, or the like input device.

[0058] In another possible implementation manner, the sliding operation on the application page can be an operation of sliding the application page upwards or downwards (or left or right) by using a specific key on a keyboard, a handle, or the like input device to control the application page.

[0059] ​In other possible embodiments, the sliding operation on the application page can also be a sliding operation on a first control in the application page, where the first control can be a scroll bar as shown in Figure 2 , or a direction control that moves a preset distance upwards (or downwards) as shown in Figure 3 . The application does not make a specific limitation on the first control.

[0060] In the example where the first control is a scroll bar, the sliding operation on the application page is an up-down dragging operation on the scroll bar. In the case where the first control is a direction control that moves a preset distance upwards (or downwards), the sliding operation on the application page is a clicking operation on the direction control that moves a preset distance upwards (or downwards). The application does not make a specific limitation on the sliding operation.

[0061] In the embodiments of the application, the target sliding distance of the application page can refer to the actual offset value of the application page after the user slides the application page or the first control in the application page, i.e., the offset value of the current position of the application page from the initial position of the application page. That is, the target sliding distance of the application page can be the same as the actual offset value of the application page or the first control in the application page.

[0062] By way of example but not limitation, after the user touches an application icon of an arbitrary APP to select and start the corresponding APP, a home page corresponding to the APP can be displayed on the desktop of the electronic device, and the user can touch an arbitrary position in the home page and slide upwards to make the content displayed by the home page turn upwards. In this case, the target sliding distance can be the distance by which the home page turns upwards, and in some possible embodiments, the target sliding distance can also correspond to the distance by which the user slides upwards.

[0063] It can be understood that, taking the example where the first control in Figure 2 is a scroll bar, the target sliding distance of the application page can also be the actual offset distance of the scroll bar in the process in which the user drags the scroll bar upwards (or downwards). For another example, taking the example where the first control in Figure 3 is a direction control that moves a preset distance upwards (or downwards), the target sliding distance of the application page can also be determined according to the number of times of clicking the direction control that moves a preset distance upwards (or downwards) by the user.

[0064] It should be noted that, in actual applications, the target sliding distance of the application page can also be different from the actual position of the application page or the first control in the application page. By way of example, the application page displays a first control, and in response to the sliding operation on the application page, the target sliding distance of the application page is obtained, which can specifically include: in response to the sliding operation on the first control, the actual position of the first control is obtained; and the target sliding distance is determined according to the actual position and a preset initial distance.

[0065] It should be understood that the preset initial distance can be preconfigured, the actual position of the first control can be acquired based on the sliding operation of the user on the first control, and the target sliding distance of the first control can be obtained by subtracting the preset initial distance from the distance value corresponding to the actual position of the first control.

[0066] Similarly, the preset initial distance of the application page can also be preconfigured, the actual position of the application page can be acquired based on the sliding operation of the user on the application page, and the target sliding distance of the application page can be obtained by subtracting the preset initial distance of the application page from the distance value corresponding to the actual position of the application page. The method for acquiring the target sliding distance of the application page is not limited in the embodiments of the application.

[0067] For example, it is assumed that the preset initial distance of the application page (or the first control) is preconfigured as 500 pixels (px) in the application page design process, the actual position of the application page (or the first control) acquired based on the sliding operation of the user on the application page (or the first control) is 700 px, and then the target sliding distance of the application page (or the first control) can be determined as 200 px according to the preset initial distance and the actual position.

[0068] In S102, a target animation in the first animation and a target image in the target animation are determined according to the target sliding distance and first preset parameters of the at least one first animation, and the first preset parameters are used to indicate the corresponding relationship between the sliding distance of the application page and the images in the first animation.

[0069] It should be understood that the application page includes one or more first animations, and each first animation includes one or more images. In the embodiments of the application, at least one target animation and a target image in the at least one target animation can be determined from the 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 as to display the icon image corresponding to the sliding operation of the application page in the application page.

[0070] It should be noted that the number of target animations determined from the at least one first animation can be one or more in the embodiments of the application, that is, the target image displayed in the application page according to the sliding operation of the user on the application page or the first control in the application page can include the images of at least one target animation. Such a setting conforms to the actual application scenario and can effectively avoid the case that the application scenario is limited because one sliding operation can only bind one image of one animation.

[0071] In some embodiments, the first preset parameters can include a first offset range corresponding to the first animation, and the first preset parameters can further include a play start point parameter of each first animation, a play time length parameter of each first animation, and a maximum sliding distance of the application page.

[0072] Specifically, the method for determining the first offset range of each first animation can include: obtaining a play start parameter and a play duration parameter of the first animation; determining a play end parameter of the first animation according to the play start parameter and the play duration parameter; obtaining a maximum sliding distance of the application page; determining a mapping ratio according to the maximum sliding distance and a maximum value in the play end parameter of each first animation; and determining the first offset range corresponding to each first animation respectively according to the play start parameter of each first animation, the play end parameter of each first animation, and the mapping ratio.

[0073] It should be understood that the play start parameter of the first animation refers to a parameter corresponding to the start time of playing the first animation; the play duration parameter refers to a parameter corresponding to the duration of playing the first animation; and the play end parameter refers to a parameter corresponding to the end time of playing the first animation. It can be understood that after obtaining the play start parameter and the play duration parameter of the first animation, the sum of the play start parameter and the play duration parameter can be obtained to obtain the play end parameter of the first animation.

[0074] In the embodiments of the present application, for the case of directly sliding the application page, the maximum sliding distance of the application page refers to the maximum distance that the user can slide the application page up and down (or left and right); for the case that the first control is a scroll bar, the maximum sliding distance of the application page can 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 that moves a preset distance up (or down), the maximum sliding distance of the application page can be the product of the number of times the user clicks the control that moves a preset distance up (or down) after the application page is displayed and the preset distance moved by the control each time.

[0075] In the example that the first control is a scroll bar, the method for obtaining the maximum sliding distance of the application page can specifically include: in response to a maximum sliding operation on the first control, controlling the first control to move to the bottom of the application page and obtaining an actual position of the first control after moving; and determining a target sliding distance according to the actual position and a preset initial distance. In some other possible implementation manners, the maximum sliding distance can also be a preset value. The method for determining the maximum sliding distance of the application page is not limited in the present application.

[0076] For example, still taking the preset initial distance of the preset configuration application page as 500px, in response to the maximum sliding operation on the first control, the actual position of the first control after moving is obtained as 1500px, then the maximum sliding distance of the application page can be determined according to the preset initial distance and the actual position of the first control as 1000px.

[0077] After the playing end parameter of each first animation is determined according to the playing start parameter and the playing time length parameter of each first animation, the maximum sliding distance of the application page can be obtained, and then a mapping ratio is determined according to the maximum sliding distance of the application page and the maximum value in the playing end parameter of each first animation. According to the playing start parameter of each first animation, the playing end parameter of each first animation, and the mapping ratio, the first offset range corresponding to each first animation can be determined respectively.

[0078] It should be understood that the first offset range corresponding to each first animation refers to the sliding range of the application page corresponding to the animation playing duration of each first animation. The animation playing duration referred to in the present application does not refer to the actual playing time, but refers to the sliding range of the application page. The scheme of the present application replaces the traditional time axis with the first offset range, controls the playing of the first animation through the sliding distance, and reduces the scheduling difficulty of each first animation.

[0079] By way of example and not limitation, it is assumed that two first animations, animation A and animation B, are included in an application page, wherein the playing start parameter of animation A is 0, and the playing time length parameter of animation A is 1; the playing start parameter of animation B is 1, and the playing time length parameter of animation B is also 1; then it can be determined that the playing end parameter of animation A is 1, and the playing end parameter of animation B is 2. According to the playing end parameter of animation A and animation B, it can be determined that the playing end parameter of animation B is the maximum in the two first animations. Then, it is assumed that the maximum sliding distance of the application page obtained is 1000px, and then the mapping ratio between the sliding distance of the application page and the animation playing time can be determined according to the maximum sliding distance and the playing end parameter of animation B, which is 500:1. That is, the sliding distance of the application page corresponding to 1 unit time of animation B is 500px.

[0080] After the mapping ratio is determined, according to the playing start parameter of animation A being 0, the playing time length parameter of animation A being 1, and the mapping ratio 500:1, it can be determined that the sliding range of the application page of 0px-500px corresponds to the start to the end of animation A (i.e. 0-1). Similarly, according to the playing start parameter of animation B being 1, the playing time length parameter of animation B being 1, and the mapping ratio 500:1, it can be determined that the sliding range of the application page of 500px-1000px corresponds to the start to the end of animation B (i.e. 1-2).

[0081] It should be noted that in the above example, the first offset range corresponding to animation A in the two first animations is 0px-500px, and the first offset range corresponding to animation B is 500px-1000px.

[0082] In another example, assume that two first animations are also included in a certain application page, which are animation A and animation B respectively, wherein the play start point parameter of animation A is 0, and the play duration parameter of animation A is 1; the play start point parameter of animation B is 1, and the play duration parameter of animation B is also 2; the maximum sliding distance of the application page is 1000px; then it can be determined that the play end parameter of animation A is 1, the play end parameter of animation B is 3, and the play end parameter of animation B is the largest among the two first animations, so the mapping ratio between the sliding distance of the application page and the animation play time is 1000:3, i.e. 333.333333:1 (the result of the mapping ratio can be set to a corresponding decimal point number according to actual application).

[0083] Based on the above mapping ratio, it can be obtained that the sliding range of the application page of 0px~333.333333px corresponds to the start to the end of animation A, and the sliding range of the application page of 333.333333px~1000px corresponds to the start to the end of animation B.

[0084] For example, assume that two first animations are also included in a certain application page, which are animation A and animation B respectively, wherein the play start point parameter of animation A is 2, and the play duration parameter of animation A is 1; the play start point parameter of animation B is 2, and the play duration parameter of animation B is also 2; the maximum sliding distance of the application page is 1000px; then it can be determined that the play end parameter of animation A is 3, the play end parameter of animation B is 4, and the play end parameter of animation B is the largest among the two first animations, so the mapping ratio between the sliding distance of the application page and the animation play time can be determined according to the play end parameter of animation B and the maximum sliding distance of the application page, which is 1000:4, i.e. 250:1.

[0085] Based on the above mapping ratio, it can be obtained that the sliding range of the application page of 500px~750px corresponds to the start to the end of animation A (i.e. 2~3), and the sliding range of the application page of 500px~1000px corresponds to the start to the end of animation B (i.e. 2~4). It is worth noting that when the sliding range of the application page is 500px~750px, the play of animation A is from the start to the end, at the same time, animation B is also playing, and animation B has played half.

[0086] It should be noted that the playing end parameter and the playing time parameter of each first animation can also be pre-configured, so as to determine a second animation that ends playing last from the at least one first animation according to the playing end parameter, then obtain the maximum sliding distance of the application page, determine a mapping ratio according to the maximum sliding distance and the playing end parameter of the second animation, and finally determine a first offset range corresponding to each first animation according to the playing start parameter of each first animation, the playing end parameter of each first animation, and the mapping ratio. The determination manner of the first offset range of each first animation is not limited in the embodiments of the present application.

[0087] After the first offset range of each first animation is determined, a target animation in the at least one first animation and a target image in the target animation are determined according to the target sliding distance and the first preset parameter of the at least one first animation, which can specifically include: determining the first animation corresponding to the first offset range containing the target sliding distance as the target animation; and determining the target image in the target animation according to the target sliding distance and the first offset range corresponding to the target animation.

[0088] For example, assuming that the target sliding distance of the application page is 200px, the application page includes two first animations, namely animation A and animation B, wherein the first offset range corresponding to the animation A is 0px-500px, and the first offset range corresponding to the animation B is 500px-1000px. Since the target sliding distance 200px is within the first offset range of the animation A, the animation A can be determined as the target animation. Then, the target image in the animation A can be further determined according to the target sliding distance and the first offset range of the animation A.

[0089] In a possible implementation of the present application, the target image in the target animation is determined according to the target sliding distance and the first offset range corresponding to the target animation, which can specifically include: determining a progress indication parameter of the target animation according to the 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 parameter of the target animation.

[0090] It should be understood that the progress indication parameter of the target animation can be represented as a percentage of the playing time parameter of the target animation that has been played.

[0091] In some embodiments, the determination of the progress indication parameter of the target animation according to the first offset range corresponding to the target animation and the target sliding distance includes: determining an 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 a 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.

[0092] It should be noted that since there is a corresponding mapping ratio between the maximum sliding distance of the aforementioned application page and the maximum value in the playing end parameter of each first animation, the progress indication parameter of the target animation can also be represented as the ratio between the actual offset distance of the target animation and the total offset distance of the target animation.

[0093] Suppose, still taking the target sliding distance of the application page as 200px, the application page includes two first animations, namely animation A and animation B, wherein the first offset range corresponding to animation A is 0px-500px; the first offset range corresponding to animation B is 500px-1000px, and animation A is taken as an example, according to the first offset range of animation A, it can be determined that the minimum offset value in the first offset range is 0px, the total offset distance of animation A is 500px, based on the target sliding distance 200px, it can be determined that the actual offset distance of animation A is 200px, according to the actual offset distance and the total offset distance of animation A, it can be further determined that the progress indication parameter of animation A is 200 / 500=40%.

[0094] After determining the progress indication parameter of the target animation based on the first offset range of the target animation and the target sliding distance, the target image can be determined from the image corresponding to the target animation according to the progress indication parameter of the target animation.

[0095] In some embodiments, it can also include: determining the display parameter value of the display attribute of the target animation according to the mapping relationship between the progress indication parameter and the display attribute of the target animation; accordingly, displaying the target image in the target animation on the application page includes: displaying the target image in the target animation on the application page according to the display parameter value corresponding to the target animation.

[0096] It should be understood that the display attribute of the target animation includes but is not limited to the transparency of the font or the target object in the target animation, the rotation angle of the target object in the target animation, etc.

[0097] In a possible implementation of the present application, the mapping relationship of the display attribute described above can be a mapping ratio relationship between the progress indication parameter of the target animation and the display attribute of the target animation. For example, suppose that the target sliding distance of the application page is 250px, the progress indication parameter of animation A is 50%, and animation A represents the change of the transparency of a certain line of font from 0 to 1, wherein the display attribute of animation A is the transparency of the font. When the progress indication parameter of animation A is 50%, the transparency of the font in animation A also performs a corresponding 50%, i.e. 0.5. That is, when the target sliding distance of the application page is 250px, the specific value of the displayed font transparency is 0.5.

[0098] In some possible implementation manners, the mapping relationship of the display attribute can also be a Bezier rate function. Specifically, the Bezier rate function can be expressed as the following formula (1):

[0099]

[0100] In the formula (1), Γ(z) is a Γ function; m is in a range of 0 to ∞; α = 0, 1, 2; J α (x) represents a display parameter value of the display attribute. It should be noted that, when the mapping relationship of the display attribute is the Bezier rate function, in actual application, the corresponding target animation can be displayed according to the rate of the user's sliding operation on the application page or the first control in the application page, so as to improve the user experience.

[0101] For example, it is assumed that the target sliding distance of the application page is still 250px, the progress indication parameter of the animation A is 50%, and the animation A represents that the transparency of a certain line of font changes from 0 to 1, where the display attribute of the animation A is the transparency of the font. Due to the influence of the Bezier rate function, when the target sliding distance of the application page is 250px, the specific value of the transparency of the certain line of font is 0.7853552869588659, and if the display parameter value is retained to six decimal places, when the target sliding distance of the application page is 250px, the specific value of the transparency of the certain line of font is 0.785355.

[0102] Of course, in the actual design process, other mapping relationships of the display attribute can also be customized, and the embodiments of the present application do not make a specific limitation in this regard.

[0103] S103, displaying a target image in the target animation on the application page.

[0104] It should be understood that, in the embodiments of the present application, the target image corresponding to the mapping proportional relationship between the progress indication parameter of the target animation and the display attribute of the target animation can be directly displayed on the application page according to the mapping proportional relationship; or the target image in the target animation can be displayed on the application page according to the display parameter value corresponding to the target animation.

[0105] In actual program design process, in order to accelerate the display rate of target images in the target animation in the application page, in some embodiments, GPU animation can be started by using a specific style name (for example, the will-change style name). In some embodiments, in the process of rendering the target animation by the browser, if the GPU animation is used to start the processing of the target animation, in order to avoid the phenomenon that the increase of the number stored in the GPU caused by the participation of other non-target images in the GPU animation processing, resulting in the application page freezing or the browser crashing, the other non-target images (for example, static text or images in the application page) in the rendering process can be manually excluded or unreasonable code is run.

[0106] For example, in Google Chrome For example, the user can find the Layer tool in the control panel of the browser, and then delete the other non-target images in the rendering process or run unreasonable code in the page displayed by the Layer tool.

[0107] In some embodiments, in order to further improve the display speed of the target image, the required resources can also be preloaded by using lazy loading. For example, in response to the starting operation of the user on the application page, only the resources of the first part of the page (the size of the first part of the page corresponds to the size of the current visible window) in the application page can be loaded; or both the resources in the first part of the page and the resources in the second part of the page adjacent to the first part of the page can be preloaded. The present application does not make specific limitation on this.

[0108] It should be noted that according to the animation display method provided by the embodiments of the present application, through actual scene test, the refresh frequency of most (about 99%) of the application pages in the browser can reach 45 frames per second. That is to say, in the process of the user sliding the application page up and down (or left and right), the animation in the application page can be displayed in real time relatively smoothly, which greatly improves the user experience.

[0109] Based on the animation display method provided in the present application, the target image in the target animation corresponding to the sliding operation can be displayed in the application page according to 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 obtain the target sliding distance, and according to the corresponding relationship between the sliding distance of the application page and the images in the first animation, directly determine the target animation corresponding to the target sliding distance and the target image in the target animation. Compared with the way 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 of rendering data is shortened, the rendering performance of the browser is improved, and the problems of long rendering time, webpage jamming, and even browser crash caused by the complex scheduling process are effectively avoided.

[0110] In the embodiments provided in the present application, it should be understood that the disclosed devices / electronic devices and methods can be implemented in other manners. For example, the above-described device / electronic device embodiments are merely illustrative, and the division of the modules or units is merely a logical function division, and there can be another division manner in actual implementation. For example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. The specific contents of each unit can be referred to the specific description of the above-mentioned other embodiments, and will not be described here.

[0111] The above-described units described as separate components can or can not be physically separate, and the components displayed as units can or can not be physical units, i.e., can be located in one place, or can be distributed on a plurality of network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the present embodiment.

[0112] Based on the same inventive concept, the present application provides an animation display device 200, as shown in Figure 4 The animation display device 200 comprises:

[0113] The acquisition unit 201 is configured to acquire a target sliding distance of the application page in response to a sliding operation on the application page.

[0114] The determination unit 202 is 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 first preset parameters of the at least one first animation. The first preset parameters are used to indicate the corresponding relationship between the sliding distance of the application page and the images in the first animation.

[0115] The display unit 203 is configured to display the target image in the target animation on the application page.

[0116] In some embodiments, the application page displays the first control, and the obtaining unit 201 is further configured to:

[0117] In response to the sliding operation on the first control, the actual position of the first control is obtained;

[0118] According to the actual position and the preset initial distance, the target sliding distance is determined.

[0119] In some embodiments, the first preset parameter includes a first offset range corresponding to the first animation;

[0120] The determining unit 202 is further configured to:

[0121] The first animation corresponding to the first offset range containing the target sliding distance is determined as the target animation;

[0122] According to the target sliding distance and the first offset range corresponding to the target animation, a target image in the target animation is determined.

[0123] In some embodiments, the animation display apparatus 200 further includes:

[0124] The first obtaining sub-unit is configured to obtain a play start parameter and a play duration parameter of the first animation;

[0125] The first determining unit is configured to determine a play end parameter of the first animation according to the play start parameter and the play duration parameter;

[0126] The second obtaining sub-unit is configured to obtain a maximum sliding distance of the application page;

[0127] The second determining unit is configured to determine a mapping ratio according to the maximum sliding distance and a maximum value in the play end parameters of each first animation;

[0128] The third determining unit is configured to determine a first offset range corresponding to each first animation according to the play start parameter of each first animation, the play end parameter of each first animation, and the mapping ratio.

[0129] In some embodiments, according to the target sliding distance and the first offset range corresponding to the target animation, a target image in the target animation is determined, including:

[0130] According to the first offset range corresponding to the target animation and the target sliding distance, a progress indication parameter of the target animation is determined;

[0131] According to the progress indication parameter of the target animation, a target image is determined from the images corresponding to the target animation.

[0132] In some embodiments, before the target image in the target animation is displayed on the application page, the animation display apparatus 200 further includes:

[0133] The fourth determining unit is configured to determine a display parameter value of the display attribute of the target animation according to a mapping relationship between the progress indication parameter and the display attribute of the target animation.

[0134] Correspondingly, the display unit 203 is further configured to display a target image in the target animation on the application page according to the display parameter value corresponding to the target animation.

[0135] In some embodiments, the mapping relationship of the display attribute is a Bezier rate function.

[0136] In some embodiments, the progress indication parameter of the target animation is determined according to the target sliding distance and the first offset range corresponding to the target animation, and the method comprises:

[0137] The actual offset distance of the target animation is determined according to the target sliding distance and the minimum offset value in the first offset range corresponding to the target animation.

[0138] The total offset distance of the target animation is determined according to the first offset range of the target animation.

[0139] The progress indication parameter of the target animation is determined according to the actual offset distance of the target animation and the total offset distance of the target animation.

[0140] Embodiments of the present application also provide an electronic device. As shown in Figure 5 The electronic device 300 comprises 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, wherein the processor 301 implements the database establishment method based on the light-heat reflection coefficient provided by the present application when executing the computer program 303.

[0141] For example, the computer program 303 can be divided into one or more modules / units, which are stored in the memory 302 and executed by the processor 301 to complete the present application. One or more modules / units can be a series of computer program instruction segments capable of completing a specific function, which are used to describe the execution process of the computer program in the electronic device 300.

[0142] Those skilled in the art can understand, Figure 5 The electronic device 300 is only an example and does not constitute a limitation on the electronic device, which can include more or fewer components than those shown, or combine certain components, or different components, for example, the electronic device 300 can also include an input / output device, a network access device, a bus, etc.

[0143] The processor 301 can be a central processing unit (CPU), and can also be other general-purpose processors, a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor.

[0144] The memory 302 can be an internal storage unit of the electronic device 300, for example, a hard disk or a memory of the electronic device 300. The memory 302 can also be an external storage device of the electronic device 300, for example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the electronic device 300. Further, the memory 302 can include both the internal storage unit and the external storage device 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 can also be used to temporarily store data that has been output or will be output.

[0145] The electronic device 300 provided by the embodiment can execute the method embodiments described above, and the implementation principles and technical effects are similar, which will not be described here.

[0146] The embodiment of the present application also provides a computer readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in each of the method embodiments described above can be implemented.

[0147] The embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device can execute the steps in each of the method embodiments described above.

[0148] The integrated unit, if implemented in the form of a software function unit and sold or used as an independent product, can be stored in a computer readable storage medium. Based on such understanding, all or part of the processes in the above method embodiments can be completed by a computer program instructing related hardware, and the computer program can be stored in a computer readable storage medium. When the processor executes the computer program, the steps of each method embodiment described above can be implemented. The computer program includes computer program code, which can be in the form of source code, object code, executable files or some intermediate forms. The computer readable medium at least includes any entity or device capable of carrying the computer program code to the photographing device / electronic device, recording medium, computer memory, ROM (Read-Only Memory), RAM (Random Access Memory), CD-ROM (Compact Disc Read-Only Memory), magnetic tape, floppy disk and optical data storage device, etc. The computer readable storage medium mentioned in the present application can be a non-volatile storage medium, in other words, a non-transitory storage medium.

[0149] In the above embodiments, the description of each embodiment has its own focus, and the parts not described or recorded in detail in a certain embodiment can be referred to the related description of other embodiments.

[0150] Those skilled in the art can appreciate that the units and algorithm steps of the examples described in combination with the embodiments disclosed herein can be implemented in electronic hardware or a combination of computer software and electronic hardware. Whether the functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0151] In the embodiments provided by the present application, it should be understood that the disclosed devices / apparatuses and methods can be implemented in other ways. For example, the device / apparatus embodiments described above are merely schematic, for example, the division of modules or units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed each other can be indirect coupling or communication connection through some interfaces, devices or units, and can be electrical, mechanical or other forms.

[0152] It should be understood that the term "includes" when used in the specification and the appended claims herein, specifies the presence of stated features, integers, steps, operations, elements, and / or components but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0153] It should also be understood that the term "and / or" when used in the specification and the appended claims herein, means any one or more of the associated listed items and includes multiples of those items (for example, "a and / or b" means one or more of the items a and / or b). In addition, it is also possible in the context of the present application for some of the items to be optionally included in some embodiments and to be required in other embodiments. In addition, the terms "comprises", "comprising", "includes", "including" and the like are to be considered as specifying "consisting of" or "consisting essentially of" to the implied elements or methods of any such combination and are not to be interpreted in an open-ended fashion unless otherwise indicated by the language of the specification.

[0154] As used in the description of the application and the appended claims herein, the term "if" can be interpreted to mean "when" or "upon" or "in response to determining" or "in response to detecting" depending on the context. Similarly, the phrase "if it is determined" or "if [a described condition or event] is detected" can be interpreted to mean "upon determining" or "in response to determining" or "upon [the described condition or event] being detected" or "in response to [the described condition or event] being detected", depending on the context.

[0155] In addition, the terms "first", "second", "third", etc. as used in the description of embodiments herein and in the appended claims are used for differentiation only and do not denote or imply relative importance.

[0156] Reference throughout this specification to "one embodiment" or "an embodiment" or "some embodiments" means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the application. Thus, the appearances of the phrases "in one embodiment", "in some embodiments", "in other embodiments", "in additional embodiments", and so on, in various places throughout this specification are not necessarily all referring to the same embodiment, unless otherwise specifically specified. The terms "comprising", "including", "having" and their variants are meant to encompass 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.

[0157] Finally, it should be noted that the above-described embodiments are merely intended for describing and illustrating, not limiting, the technical solutions of the present application; even though the present application has been described in detail with reference to the above-described embodiments, those of ordinary skill in the art should understand that they can still make modifications to the technical solutions recorded in the above-described embodiments, or make equivalent replacements to some or all of the technical features; and such modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. An animation display method, characterized in that, The method is applied to an electronic device, and the method includes: In response to a swipe operation on the application page, the target swipe distance of the application page is obtained; Based on the target swipe distance and at least one first preset parameter of the first animation, the target animation in the first animation and the target image in the target animation are determined; the first preset parameter is used to indicate the correspondence between the swipe distance of the application page and the image in the first animation; The first preset parameter includes a first offset range corresponding to the first animation; determining the target animation in the first animation and the target image in the target animation based on the target sliding distance and the first preset parameter of at least one first animation includes: determining the first animation corresponding to the first offset range containing the target sliding distance as the target animation; and determining the target image in the target animation based on the target sliding distance and the first offset range corresponding to the target animation. The target image in the target animation is displayed on the application page; The step of determining the first offset range corresponding to the first animation includes: Obtain the playback start point parameter and playback duration parameter of the first animation; determine the playback end parameter of the first animation based on the playback start point parameter and the playback duration parameter; obtain the maximum swipe distance of the application page; determine the mapping ratio based on the maximum swipe distance and the maximum value in the playback end parameter of each first animation; determine the first offset range corresponding to each first animation based on the playback start point parameter of each first animation, the playback end parameter of each first animation, and the mapping ratio.

2. The method according to claim 1, characterized in that, The application page displays a first control, and the step of obtaining the target sliding distance of the application page in response to a sliding operation on the application page includes: In response to a sliding operation on the first control, the actual position of the first control is obtained; The target sliding distance is determined based on the actual position and the preset initial distance.

3. The method according to claim 1 or 2, characterized in that, Determining the target image in the target animation based on the target sliding distance and the first offset range corresponding to the target animation includes: Based on the first offset range corresponding to the target animation and the target sliding distance, the progress indication parameters of the target animation are determined; The target image is determined from the image corresponding to the target animation based on the progress indication parameters of the target animation.

4. The method according to claim 3, characterized in that, Before displaying the target image in the target animation on the application page, the method further includes: Based on the mapping relationship between the progress indication parameters and the display attributes of the target animation, determine the display parameter values ​​of the display attributes of the target animation; Accordingly, displaying the target image in the target animation on the application page includes: Based on the display parameter values ​​corresponding to the target animation, the target image in the target animation is displayed on the application page.

5. The method according to claim 4, characterized in that, The mapping relationship of the display attributes is the Bessel rate function.

6. The method according to claim 3, characterized in that, The step of determining the progress indication parameters of the target animation based on the first offset range corresponding to the target animation and the target sliding distance includes: The actual offset distance of the target animation is determined based on the minimum offset value in the first offset range corresponding to the target sliding distance and the target animation. The total offset distance of the target animation is determined based on the first offset range of the target animation; The progress indication parameters of the target animation are determined based on the actual offset distance and the total offset distance of the target animation.

7. An electronic device comprising a memory, at least one processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method as described in any one of claims 1 to 6.

8. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1 to 6.

Images