Page display method in application and electronic equipment

Abstract

The invention discloses an in-application page display method and electronic equipment, and relates to the field of terminals, and the method comprises the following steps: displaying a first image frame of a first interface in a first application; wherein the first image frame includes a top column region, a bottom column region, and a first portion of the first page. And receiving a first sliding operation acting on the first interface. And in the process of the first sliding operation, displaying a target image frame. Wherein the target image frame comprises the top column area, the bottom column area and a first blurred image obtained after blurring the second part of the first page. And after the first sliding operation is finished, displaying a second image frame of the first interface. Wherein the second image frame comprises the top column area, the bottom column area and a third part of the first page, and the second part is located between the first part and the third part in the first interface.

Description

Technical Field

[0001] The present application relates to the field of terminals, and in particular to an in-application page display method and an electronic device. Background Art

[0002] With the development of the field of terminal technology, people use electronic devices to handle daily affairs more and more frequently. For example, users can browse pages in applications on electronic devices to obtain information. Due to the power consumption limit of electronic devices, the screen refresh rate of some applications is generally limited to 60Hz or 90Hz to save power consumption of electronic devices. However, the above-mentioned strategy of limiting the screen refresh rate of some applications will greatly affect the performance of electronic devices, especially when the content of the page changes greatly in the page sliding state, which can easily lead to problems such as screen tearing and insufficient animation in the page, posing a great challenge to the user experience. Summary of the invention

[0003] The present application provides an in-application page display method and electronic device, which can add a blur effect to the display of an image, and make the connection between the previous and next frame images more continuous, so that the dynamic effect of the picture is smoother when the user slides the page. In this way, the electronic device does not need to increase the screen refresh rate, and can greatly reduce problems such as screen tearing, screen freeze and jitter, which not only saves the power consumption of the electronic device, but also improves the user's visual experience.

[0004] In a first aspect, the present application provides an in-application page display method, which displays a first image frame of a first interface in a first application. The first image frame includes a top bar area, a bottom bar area, and a first part of the first page. A first sliding operation acting on the first interface is received. During the first sliding operation, a target image frame of the first interface is displayed. The target image frame includes the top bar area, the bottom bar area, and a first blurred image after blurring the second part of the first page. After the first sliding operation ends, a second image frame of the first interface is displayed. The second image frame includes the top bar area, the bottom bar area, and a third part of the first page, and the second part is located between the first part and the third part in the first interface.

[0005] In a possible implementation, during the first sliding operation, displaying the target image frame specifically includes: during the first sliding operation, determining pixel information of the second part of the first page. Determining a sliding speed of the first page. Generating a target image frame based on the sliding speed of the first page and the pixel information of the second part of the first page. During the first sliding operation, displaying the target image frame.

[0006] In a possible implementation, the determining of the sliding speed of the first page specifically includes: determining the y-axis coordinate of the first pixel point in the third image frame of the first page, the y-axis coordinate of the first pixel point in the fourth image frame of the first page, and the image frame interval. The third image frame is the previous frame of the fourth image frame. The first sliding speed is determined based on the y-axis coordinate of the first pixel point in the third image frame of the first page, the y-axis coordinate of the first pixel point in the fourth image frame of the first page, and the image frame interval. The sliding speed of the first page is determined based on the first sliding speed and a sliding curve model.

[0007] In a possible implementation, the sliding speed of the first page is determined based on the first sliding speed and the sliding curve model, specifically including: determining the sliding speed of the first page based on the first sliding speed, the average sliding speed and the sliding curve model.

[0008] In one possible implementation, the pixel information of the second part of the first page includes RGBA values ​​of multiple pixels of the second part of the first page, and the multiple pixels include a second pixel. The target image frame is generated based on the sliding speed of the first page and the pixel information of the second part of the first page, specifically including: determining the RGBA values ​​of multiple pixels within a specified range centered on the second pixel, and the weights corresponding to the multiple pixels. The RGBA value of the second pixel is the first RGBA value. Based on the RGBA values ​​of multiple pixels within the specified range and the weights corresponding to the multiple pixels, a second RGBA value is determined by a weighted average algorithm. The first RGBA value is replaced by the second RGBA value.

[0009] In one possible implementation, the weights corresponding to the multiple pixels include RGB weights corresponding to the multiple pixels and transparency weights corresponding to the multiple pixels. Based on the RGBA values ​​of the multiple pixels within the specified range and the weights corresponding to the multiple pixels, a second RGBA value is determined by a weighted average algorithm, specifically including: based on the RGB values ​​in the RGBA values ​​of the multiple pixels within the specified range and the RGB weights corresponding to the multiple pixels, an RGB value in the second RGBA value is determined. Based on the transparency values ​​in the RGBA values ​​of the multiple pixels within the specified range and the transparency weights corresponding to the multiple pixels, a transparency value in the second RGBA value is determined.

[0010] In a possible implementation, the fourth image frame includes the top bar area, the bottom bar area and the second portion of the first page. The size of the specified range is determined by the sliding speed of the first page.

[0011] In a possible implementation, during the first sliding operation, displaying the target image frame specifically includes: during the first sliding operation, determining multiple pixel point information included in the first page in multiple image frames adjacent to the target image frame. Based on the multiple pixel point information included in the first page in the multiple image frames, generating the target image frame. During the first sliding operation, displaying the target image frame.

[0012] In a possible implementation, the multiple pixel point information includes RGBA values ​​of multiple pixel points, and the multiple image frames include a first image frame and a second image frame. Based on the multiple pixel point information included in the first page in the multiple image frames, the target image frame is generated: based on the multiple pixel point information of the first page in the first image frame, the RGB weight corresponding to the first image frame, the transparency weight corresponding to the first image frame, the multiple pixel point information of the first page in the second image frame, the RGB weight corresponding to the second image frame, and the transparency weight corresponding to the second image frame, the target image frame is generated.

[0013] In one possible implementation, the first image frame is before the second image frame, the second image frame is before the target image frame, and the transparency weight corresponding to the first image frame is less than the transparency weight corresponding to the second image frame.

[0014] In a second aspect, the present application provides an electronic device, comprising: one or more processors and one or more memories. The one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program codes, and the computer program codes include computer instructions, and when the one or more processors execute the computer instructions, the electronic device executes a method as any possible implementation method of the first aspect described above.

[0015] In a third aspect, the present application provides a chip system, comprising a processing circuit and an interface circuit, wherein the interface circuit is used to receive code instructions and transmit them to the processing circuit, and the processing circuit is used to run the code instructions so that the chip system executes a method as any possible implementation method of the first aspect described above.

[0016] In a fourth aspect, the present application provides a computer-readable storage medium, comprising computer instructions, which, when executed on an electronic device, enable the electronic device to execute a method as any possible implementation method of the first aspect described above. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 A schematic diagram of a user interface provided in an embodiment of the present application;

[0018] Figure 2AA flowchart of a method for displaying pages within an application provided in an embodiment of the present application;

[0019] Figure 2B A flowchart of another method for displaying pages within an application provided in an embodiment of the present application;

[0020] Figure 3A A schematic diagram of a user interface provided in an embodiment of the present application;

[0021] Figure 3B Another user interface diagram provided in an embodiment of the present application;

[0022] Figure 4 A schematic diagram of a software architecture of an electronic device provided in an embodiment of the present application;

[0023] Figure 5A A schematic diagram of a module interaction process provided in an embodiment of the present application;

[0024] Figure 5B Another schematic diagram of a module interaction process provided in an embodiment of the present application;

[0025] Figure 6 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0026] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and the appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear contrary indication in the context. It should also be understood that the term "and / or" used in the present application refers to any or all possible combinations including one or more of the listed striking ones. In the embodiments of the present application, the terms "first" and "second" are only used for descriptive purposes, and cannot be understood as implying relative importance or implicitly indicating the number of indicated technical features. Thus, the features defined as "first" and "second" can expressly or implicitly include one or more of the features. In the description of the embodiments of the present application, unless otherwise specified, the meaning of "multiple" is two or more.

[0027] In some applications of electronic devices, the electronic device can display the interface of the application, which may include a top bar area, a bottom bar area, and part or all of the content of the page within the application. Part or all of the content of the page within the application can be arranged to display one or more list controls. Each list control may include images and / or text information. When the electronic device receives and responds to a sliding operation on the page (for example, a throw operation, a follow-up sliding operation, etc.), the list control and its content (such as the above-mentioned images and / or text information) may also be refreshed accordingly. Among them, the throw operation may refer to a sliding operation in which the user's finger touches the screen to slide the page and then quickly lifts the finger off the screen; the follow-up sliding operation may refer to a sliding operation in which the user's finger remains in contact with the display screen during the page sliding process.

[0028] For example, Figure 1 As shown, taking a shopping application as an example, the electronic device may display an interface 110 within the shopping application. The interface 110 may include a top bar area 110A, a portion of the content of a page 110B, and a bottom bar area 110C. A plurality of list controls may be arranged and displayed inside a portion of the page 110B, such as a list control 111, a list control 112, a list control 113, a list control 114, a list control 115, and a list control 116. Each list control may include images and text information, and different list controls may have different images and text information.

[0029] However, when an electronic device receives and responds to a sliding operation on an application (e.g., the aforementioned shopping application) page, triggering the list control and its content to be updated with the sliding operation, if the screen refresh rate of the application (generally limited to 60Hz or 90Hz) cannot adapt to the refresh rate of the list control and its content, it will cause problems such as screen tearing, screen freezes and jitters, and insufficient motion effects on the page, posing a greater challenge to the user experience. In some embodiments, the electronic device can increase the screen refresh rate of the application, for example, from 60Hz to 120Hz, or from 90Hz to 120Hz, in order to adapt to the refresh rate of the list control and its content. However, this implementation method will greatly increase the power consumption of the electronic device and reduce the battery life of the electronic device.

[0030] The screen refresh rate refers to the number of times the electron beam repeatedly scans the image displayed on the display screen per second, that is, the number of times the image on the display screen is refreshed per second.

[0031] Therefore, the present application provides an in-application page display method, which may include: an electronic device displays a first image frame of a first interface in a first application. The first image frame includes a top bar area, a bottom bar area, and a first part of the first page. The electronic device receives a first sliding operation on the first interface. During the first sliding operation, the electronic device displays a target image frame. The target image frame includes a top bar area, a bottom bar area, and a first blurred image after blurring the second part of the first page. After the first sliding operation ends, the electronic device displays a second image frame of the first interface. The second image frame includes a top bar area, a bottom bar area, and a third part of the first page, and the second part is located between the first part and the third part in the first interface.

[0032] From the above process, it can be seen that the implementation of the in-application page display method provided by this application can add a blur effect to the display of the image frame, and the connection between the previous and next image frames is more continuous, so that the dynamic effect of the picture is smoother when the user slides the page. In this way, the electronic device does not need to increase the screen refresh rate, and can greatly reduce problems such as screen tearing, screen freeze and jitter, which not only saves the power consumption of the electronic device, but also improves the user's visual experience.

[0033] Figure 2A The specific process of an in-application page display method provided in an embodiment of the present application is exemplified.

[0034] like Figure 2A As shown, the specific process of the in-application page display method may include:

[0035] S201A: The electronic device receives input 1 for application 1.

[0036] Among them, application 1 can be a social application, a music application, the aforementioned shopping application, and other types of applications, and this application does not limit application 1. Input 1 can be a touch operation on the icon of application 1, or a gesture operation for quickly launching application 1 (for example, double-clicking the screen, triple-clicking the screen, etc.), and this application does not limit the specific type of input 1.

[0037] For example, Figure 3A As shown, taking application 1 as a shopping application as an example, the electronic device may display a desktop 300. The desktop 300 may display one or more application icons. The one or more application icons may include a weather application icon, a gallery application icon, a calculator application icon, a settings application icon, a mail application icon, a theme application icon, a shopping application icon 301, and a video application icon.

[0038] Optionally, a status bar, a page indicator and a tray icon area may also be displayed in the desktop 300. Among them, the status bar may include one or more signal strength indicators of mobile communication signals (also known as cellular signals), signal strength indicators of wireless fidelity (Wi-Fi) signals, battery status indicators, time indicators, etc. The page indicator can be used to indicate the positional relationship between the currently displayed page and other pages. The tray icon area may include multiple tray icons (such as dialing application icons, information application icons, contact application icons, camera application icons, etc.), and the tray icon remains displayed when the page is switched. The above-mentioned page may include multiple application icons and page indicators. The page indicator may not be part of the page but exist independently. The above-mentioned tray icon may also be optional, and the embodiments of the present application are not limited to this.

[0039] like Figure 3A As shown, the electronic device may receive a touch operation (ie, input 1, such as a click) performed by the user on the shopping application icon 301.

[0040] S202A: After receiving the input 1 , the electronic device may display an image frame 1 of the interface 1 in the application 1 , wherein the image frame 1 includes a top bar area, a bottom bar area, and a portion 1 of the page 1 .

[0041] Part 1 of the page 1 may be composed of one or more list controls, each of which may include images and / or text information.

[0042] For example, the above Figure 3A As an example, when the electronic device receives a touch operation (i.e., input 1, such as a click) on the shopping application icon 301, in response to the touch operation, as described above Figure 1 As shown, the electronic device can display an image frame 1 of the interface 1 in the application 1. For the description of the image frame 1 in the interface 1, please refer to the aforementioned Figure 1 The description of the illustrated embodiment is not repeated here.

[0043] In the embodiment of the present application, the electronic device may display the image frame 1 of the interface 1 in the application 1 in response to the received input 1. It may also display the image frame 1 of the interface 1 in the application 1 in response to other operations different from the input 1 after receiving the input 1. That is to say, the timing of the electronic device displaying the image frame 1 of the interface 1 in the application 1 is after receiving the input 1. As for what operation the electronic device responds to display the image frame 1 of the interface 1 in the application 1, the present application does not limit it.

[0044] S203A: The electronic device determines whether the whitelist includes the identifier of application 1 and the identifier of page 1.

[0045] The white list may be pre-set in the electronic device.

[0046] Exemplarily, the whitelist may be as shown in the following Table 1:

[0047] Table 1

[0048] Application Identification Page Identification cn.gouwu.bwh Activity1 cn.gouwu.bwh Activity2 cn.gouwu.bwh Activity3 …… ……

[0049] As shown in Table 1, the identifier of application 1 may be "cn.gouwu.bwh", the identifier of page 1 in application 1 may be "Activity1", the identifier of page 2 in application 1 may be "Activity2", the identifier of page 3 in application 1 may be "Activity3", etc. In the embodiments of the present application, Table 1 is only used to exemplify the present application and does not constitute any limitation to the present application.

[0050] In some embodiments, the electronic device may also only determine whether the whitelist includes the identifier of application 1, and this application does not impose any restrictions on this.

[0051] S204A: When the electronic device receives input 2 for page 1, the electronic device determines whether the input 2 is a sliding operation 1.

[0052] Preferably, the sliding operation 1 may be the aforementioned throw-and-slide operation. In other embodiments, the sliding operation 1 may also be a sliding operation different from the throw-and-slide operation, and the embodiments of the present application do not limit this. Taking the sliding operation 1 as an example, how the embodiments of the present application determine that the input 2 is a throw-and-slide operation will be specifically described in subsequent embodiments, and will not be repeated here.

[0053] In some embodiments, the electronic device may first determine whether input 2 is sliding operation 1, and then determine whether the whitelist includes the identifier of application 1 and the identifier of page 1. In other words, the order of executing the two steps of "determining whether input 2 is sliding operation 1" and "determining whether the whitelist includes the identifier of application 1 and the identifier of page 1" is not strictly limited by this application.

[0054] In the embodiment of the present application, input 2 for page 1 is also input 2 for interface 1 .

[0055] S205A: When the electronic device determines that the whitelist includes the identifier of application 1 and the identifier of page 1, and determines that input 2 is sliding operation 1, the electronic device determines multiple pixel point information of part 2 in page 1 and the sliding speed of page 1 during sliding operation 1. The multiple pixel point information of part 2 in page 1 may include pixel point information of one or more list controls included in part 2 of page 1.

[0056] The pixel information may include the RGBA value of the pixel, where R is the red R component of the pixel, G is the green G component of the pixel, B is the blue B component of the pixel, and A is the transparency of the pixel. The sliding speed of page 1 can be the sliding speed when page 1 is swiped up / down, or the sliding speed when page 1 is swiped left / right.

[0057] The electronic device can determine the identifier of each list control included in part 2 of page 1 (also called ItemView), and then determine the information of each list control based on the identifier of each list control, such as the text content / image content included in each list control, the pixel information of each list control, etc.

[0058] In the embodiment of the present application, the information of multiple pixels in part 2 of page 1 may be rendered by an electronic device (eg, by a graphics processing unit (GPU)) in the electronic device.

[0059] S206A: The electronic device generates and displays a target image frame of interface 1 based on pixel information of one or more list controls included in part 2 of page 1 and a sliding speed of page 1 .

[0060] The displayed target image frame includes the top bar area, the bottom bar area and the blurred image 1 after blurring the portion 2 of the page 1. That is, the display effect of the list control area in the target image frame is blurrier than that of the non-list control area.

[0061] The specific implementation method of how the electronic device generates and displays the target image frame based on the pixel point information of one or more list controls included in part 2 of page 1 and the sliding speed of page 1 will be elaborated in subsequent embodiments and will not be repeated here.

[0062] For example, Figure 3B As shown, the electronic device can display the target image frame of the interface 110, including the top bar area 110A, the blurred image 210 after blurring the part 2 of the page 1, and the bottom bar area 110C.

[0063] In some embodiments, after the sliding operation 1 ends, the electronic device may display an image frame 2 of the interface 1, which includes a top bar area, a bottom bar area, and a portion 3 of the page 1, and the portion 3 may include one or more list controls. The portion 2 of the page 1 is located between the portion 1 and the portion 3 in the interface 1. During the sliding operation 1, the portion 3 and the portion 1 displayed by the electronic device present clear images, the top bar area and the bottom bar area are also clear images, and the portion 2 presents a blurred image. The list controls included in the portions 1, 2, and 3 may have the same list controls, or may not have the same list controls.

[0064] Further, for Figure 2A The specific implementation of each step in the illustrated embodiment is described below.

[0065] (I) Step S204A

[0066] In the embodiment of the present application, taking the sliding operation 1 as an example, the specific implementation method of determining whether the input 2 is a throwing operation can be as follows:

[0067] When the electronic device receives a touch operation 1 exerted by the user on the display screen, the electronic device can determine whether the electronic device detects that the user's finger leaves the display screen within a specified time period 1 (for example, within 0.5 seconds, within 0.7 seconds, etc.) after receiving the touch operation 1. If so, the electronic device can determine that the input 2 starting with the touch operation 1 is a throw-and-slide operation; if not, the electronic device can determine that the input 2 starting with the touch operation 1 is a non-throw-and-slide operation.

[0068] For example, the system on the electronic device is Take the system as an example. When receiving an operation of a user's finger touching the display screen (for example, the aforementioned touch operation 1), the electronic device can detect an ACTION_DOWN event, which can be used to indicate the start of a screen touch event; when receiving an operation of a user's finger moving on the display screen (also referred to as the screen), the electronic device can detect an ACTION_MOVE event. Generally, a slight movement of the user's finger can trigger a series of ACTION_MOVE events; when receiving an operation of a user's finger leaving the display screen, the electronic device can detect an ACTION_UP event, which can be used to indicate the end of a screen touch event.

[0069] When the electronic device detects an ACTION_UP event (that is, detects that the user's finger has left the display screen) within a specified time period 1 after detecting an ACTION_DOWN event (that is, receiving a touch operation 1), the electronic device can determine that the input 2 starting with the touch operation 1 is a sliding operation. During this process, the event timing detected by the electronic device can be an ACTION_DOWN event, an ACTION_MOVE event, and an ACTION_UP event (this is only an example and does not constitute any limitation to this application).

[0070] When the electronic device does not detect an ACTION_UP event (i.e., detects that the user's finger leaves the display screen) within a specified time period 1 after detecting an ACTION_DOWN event (i.e., receiving a touch operation 1), the electronic device can determine that the input 2 starting with the touch operation 1 is a non-slide operation, for example, the aforementioned hand-following slide operation. In this process, the event sequence detected by the electronic device can be an ACTION_DOWN event, an ACTION_MOVE event, an ACTION_MOVE event, an ACTION_MOVE event, etc. (only an example, not a limitation to the present application).

[0071] (ii) Step S205A

[0072] Specifically, the electronic device may determine the sliding speed of page 1 as follows:

[0073] 1. The electronic device determines an initial sliding speed (which may be referred to as sliding speed 1).

[0074] Specifically, the calculation formula of the initial sliding speed can be as follows:

[0075] Initial sliding speed V1 = (y-axis coordinate of designated pixel point 1 in the current image frame - y-axis coordinate of designated pixel point 1 in the previous image frame) / frame interval.

[0076] The value of the frame interval is related to the screen refresh rate. When the screen refresh rate is 60 Hz, the frame interval is 16.6 milliseconds; when the screen refresh rate is 90 Hz, the frame interval is 11 milliseconds; when the screen refresh rate is 120 Hz, the frame interval is 8 milliseconds. In the embodiments of the present application, the specific values ​​of the above frame intervals are only used to illustrate the present application and do not constitute any limitation to the present application.

[0077] 2. The electronic device corrects the initial sliding speed based on the sliding curve model to determine the sliding speed of page 1.

[0078] The sliding curve model may be a model preset in the electronic device, similar to a Gaussian curve or a Bezier curve.

[0079] Specifically, the electronic device may calculate the average sliding speed of page 1. The calculation formula of the average sliding speed of page 1 may be as follows:

[0080] Average sliding speed V2 = (y-axis coordinate of designated pixel point 1 in the current image frame - y-axis coordinate of designated pixel point 1 in the first image frame) ÷ (total number of frames of the current image * frame interval).

[0081] Among them, the explanation about the frame interval can refer to the above description and will not be repeated here.

[0082] Then, the electronic device may use the initial sliding speed V1 and the average sliding speed as inputs, and map out a corrected sliding speed of the page 1 according to the sliding curve model.

[0083] In some embodiments, the electronic device can determine the sliding speed 2 by superimposing the deviation value between the threshold value [-x, x] on the initial sliding speed V1 based on the configuration of the electronic device itself, and then use the sliding speed 2 and the average sliding speed as inputs of the subsequent sliding curve model to determine the corrected sliding speed of page 1. The configuration of the electronic device itself may include: screen refresh rate, threshold value of display capacitance, touch reporting rate, etc. The value of x is not limited in the embodiments of the present application.

[0084] (III) Step S206A

[0085] The electronic device generates and displays a target image frame based on pixel point information of one or more list controls included in part 2 of page 1 and a sliding speed of page 1:

[0086] a. The electronic device may determine the pixel information of each list control included in part 2 of page 1 based on the identifier of each list control included in part 2 of page 1. Each pixel information of the list control may include the RGBA value of each pixel.

[0087] For example, the RGBA value of each pixel may be as shown in the following Table 2:

[0088] Table 2

[0089] Pixels R (red component) G (green component) B (blue component) A(Transparency) Pixel X1 114 107 81 255 Pixels X2 120 114 88 255 Pixel X3 128 121 95 255 …… …… …… …… ……

[0090] In the embodiments of the present application, the RGBA values ​​of each pixel in Table 2 are only used to exemplify the present application and do not constitute any limitation to the present application.

[0091] b. The electronic device takes a certain pixel in a certain list control as the center (the central pixel can be called the central pixel), uses the Gaussian convolution kernel to perform weighted average calculation on the RGB values ​​of the central pixel and its surrounding pixels, and then replaces the RGB value of the central pixel with the value after the weighted average calculation. The RGB value of each pixel in each list control is replaced in a similar manner.

[0092] The Gaussian convolution kernel includes the weights corresponding to the RGB values ​​of each pixel within the specified range L1 centered on the central pixel. The weights in the Gaussian convolution kernel conform to the Gaussian distribution, that is, the closer the pixel is to the central pixel, the higher the weight corresponding to its RGB value; the closer the pixel is to the central pixel, the lower the weight corresponding to its RGB value.

[0093] For example, taking pixel X1 as an example, how to use the Gaussian convolution kernel to replace the R value of pixel X1 is illustrated. For example, pixel X1 is the center pixel, and the specified range L1 is 3×3 (i.e., 3 pixels high and 3 pixels wide), then the R values ​​of the center pixel X1 and its surrounding pixels can be as shown in the following Table 3:

[0094] Table 3

[0095]

[0096] In the examples of the present application, Table 3 is only used to exemplify the present application and does not constitute any limitation to the present application.

[0097] Then the weight corresponding to each pixel point in Table 3 included in the Gaussian convolution kernel can be shown in Table 4:

[0098] Table 4

[0099]

[0100]

[0101] In the examples of the present application, Table 4 is only used to exemplify the present application and does not constitute any limitation to the present application.

[0102] Based on the weights shown in Table 4, the R values ​​of the pixels in Table 3 are weighted averaged as follows: 120×0.05+128×0.11+132×0.05+111×0.11+114×0.22+120×0.11+30×0.05+30×0.11+30×0.05=83.47.

[0103] Therefore, the electronic device replaces the R value of pixel point X1 with 83 (rounded from 83.47). The replacement calculation methods for the B value and G value of pixel point X1 can refer to the replacement calculation method for the R value of pixel point X1.

[0104] For each pixel point in each list control, the replacement calculation method for the RGB values can refer to the replacement calculation method for the RGB values of pixel point X1 in the example.

[0105] In the embodiment of this application, the ratio of the height to the width of the specified range L1 can be called the blur radius. The size of this blur radius is also the size of the Gaussian convolution kernel. Therefore, the blur radius can also be called the blur radius of the Gaussian convolution kernel. The blur radius can affect the blur degree of the image in the X-axis direction and the Y-axis direction. For example, when the height of the specified range L1 is larger, the blur effect of the image in the Y-axis direction is stronger; when the width of the specified range L1 is larger, the blur effect of the image in the X-axis direction is stronger.

[0106] In the embodiment of this application, the blur radius of the Gaussian convolution kernel can change with the sliding speed of page 1. The electronic device can determine the blur radius of the Gaussian convolution kernel (i.e., the size of the specified range L1) based on the sliding speed of page 1. When the sliding speed of page 1 is in an increasing state, the blur radius of the Gaussian convolution kernel can increase accordingly; when the sliding speed of page 1 is in a decaying state, the blur radius of the Gaussian convolution kernel can decrease accordingly.

[0107] For example, when generating the target image frame, the electronic device can calculate the sliding speed of page 1 based on the method described in the foregoing step S205A, and then determine the size of the specified range L1 used to generate the target image frame according to the sliding speed of this page 1. Therefore, in this process, the current image frame is the image frame B1, and this image frame B1 includes the top bar area, the bottom bar area, and part 2 of page 1. The difference between the image frame B1 and the target image frame is that part 2 of page 1 in the image frame B1 is clear, and part 2 of page 1 in the target image frame is blurred. Also, during the calculation process, the pixel points in the list control of the first frame image frame, the pixel points in the list control of the image frame B1, and the pixel points in the list control of the previous frame image frame of the image frame B1 have not been processed by the Gaussian convolution kernel.

[0108] Exemplarily, for example, when the sliding speed corresponding to the image frame A1 is V11 and the sliding speed corresponding to the image frame A2 is V12, if V11 < V12, the blur radius used by the electronic device to generate the image frame A1 is smaller than the blur radius used by the electronic device to generate the image frame A2; if V11 > V12, the blur radius used by the electronic device to generate the image frame A1 is larger than the blur radius used by the electronic device to generate the image frame A2.

[0109] In this way, when the page starts or ends sliding, the changing blur radius can satisfy the smooth experience of motion effects at low frame rates, so that the image display effect has a smooth transition effect from clear to blurred or from blurred to clear at the start / end of page sliding, and the image display can be more delicate.

[0110] c. The electronic device takes a certain pixel point in a certain list control as the center (the central pixel point can be called the central pixel point), uses a transparent gradient matrix (also called an alpha matrix) to perform a weighted average calculation on the A value (i.e., transparency value) of the central pixel point and its surrounding pixels, and then replaces the A value of the central pixel point with the value after the weighted average calculation. The A value of each pixel point in each list control is replaced in a similar manner.

[0111] Among them, the alpha matrix includes the weights corresponding to the A values ​​of each pixel point within the specified range L1 centered on the central pixel point. The values ​​of the weights in the alpha matrix can be the same as or different from the values ​​of the weights in the Gaussian convolution kernel. The values ​​of the weights in the alpha matrix can be larger or smaller than the values ​​of the weights in the Gaussian convolution kernel. The weights in the alpha matrix also conform to the Gaussian distribution, that is, the closer the pixel point is to the central pixel point, the higher the weight corresponding to its A value; the closer the pixel point is to the central pixel point, the lower the weight corresponding to its A value.

[0112] Specifically, the electronic device may replace the calculation method of the A value of each pixel in the display area of ​​each list control based on the alpha matrix, and may refer to the replacement calculation method of the RGB value of the pixel X1 in the aforementioned example.

[0113] In this way, the electronic device can optimize the transparent gradient effect at the edge of the list control display area, so that the image presents a smoother visual motion effect when sliding.

[0114] In some embodiments, when the electronic device detects that the list control of the page slides to the bottom / top, the page sliding speed drops to 0, and the electronic device can also reduce the blur radius to 0. In the embodiments of the present application, the list control slides to the bottom / top, which does not mean sliding to the bottom / top of the display screen, but means that after the electronic device slides to the currently displayed list control, the display screen will no longer display a new list control when sliding continues.

[0115] Specifically, the electronic device can calculate the distance between the currently displayed list control and the last list control that can be displayed on the display screen. If the distance is greater than 0, the electronic device determines that the list control of the page has not slid to the bottom / top; if the distance is equal to 0, the electronic device determines that the list control of the page has slid to the bottom / top.

[0116] For example, when the system of the electronic device is When the system is activated, the electronic device can identify whether the list control of the page slides to the top or bottom through the absListView plug-in. If so, the electronic device can trigger the blur radius to be reduced to 0. In this way, when the page slides, the dynamic display effect of the image can be more smooth.

[0117] In some embodiments, the electronic device generates and displays the target image frame based on the pixel information of one or more list controls included in part 2 of page 1 and the sliding speed of page 1 in an implementation manner that may be different from the implementation manner described in the aforementioned step S206A. For example, the electronic device may also generate and display the target image frame of interface 1 based on the pixel information of one or more list controls included in part 2 of page 1 and / or the sliding speed of page 1 through a box blur algorithm, a Kawase blur algorithm, a double blur algorithm, a bokeh blur algorithm, an axis-shift blur algorithm, an aperture blur algorithm, a granular blur algorithm, a radial blur algorithm, and a directional blur algorithm.

[0118] Figure 2B The specific process of another in-application page display method provided in an embodiment of the present application is exemplified.

[0119] like Figure 2B As shown, the specific process of the in-application page display method may include:

[0120] S201B: The electronic device receives input 1 for application 1.

[0121] The description of this step can refer to the above Figure 2A The description of S201A is not repeated here.

[0122] S202B: After receiving the input 1 , the electronic device may display an image frame 1 of the interface 1 in the application 1 , wherein the image frame 1 includes a top bar area, a bottom bar area, and a portion 1 of the page 1 .

[0123] The description of this step can refer to the above Figure 2A The description of S202A is not repeated here.

[0124] S203B: The electronic device determines whether the whitelist includes the identifier of application 1 and the identifier of page 1.

[0125] The description of this step can refer to the above Figure 2A The description of S203A is not repeated here.

[0126] S204B: When the electronic device receives input 2 for page 1, the electronic device determines whether the input 2 is a sliding operation 1.

[0127] The description of this step can refer to the above Figure 2A The description of S204A is not repeated here.

[0128] S205B: When the electronic device determines that the whitelist includes the identifier of application 1 and the identifier of page 1, and determines that input 2 is sliding operation 1, the electronic device determines information of multiple image frames adjacent to the target image frame during sliding operation 1. The information of the multiple image frames may include pixel point information of page 1 in the multiple image frames.

[0129] The information of the above-mentioned multiple image frames may include: the content of the multiple image frames, the pixel point information of page 1 in the multiple image frames, and the pixel point information of page 1 in the multiple image frames includes the pixel point information of one or more list controls included in page 1 in each image frame. The pixel point information may include the RGBA value of the pixel point.

[0130] S206B: The electronic device generates and displays a target image frame of interface 1 based on pixel information of page 1 in a plurality of image frames adjacent to the target image frame.

[0131] The displayed target image frame includes the top bar area, the bottom bar area, and the blurred image 1 after blurring part 2 of page 1. The display effect of the list control area in the target image frame is blurrier than the display effect of the non-list control area. How the electronic device generates and displays the target image frame of the interface 1 based on the pixel point information of page 1 in multiple image frames adjacent to the target image frame will be described in detail in subsequent embodiments and will not be repeated here.

[0132] For example, Figure 3B As shown, the electronic device can display the target image frame of the interface 110, including the top bar area 110A, the blurred image 210 after blurring the part 2 of the page 1, and the bottom bar area 110C.

[0133] In some embodiments, after the sliding operation 1 ends, the electronic device may display an image frame 2 of the interface 1, which includes a top bar area, a bottom bar area, and a portion 3 of the page 1, and the portion 3 may include one or more list controls. The portion 2 of the page 1 is located between the portion 1 and the portion 3 in the interface 1. During the sliding operation 1, the portion 3 and the portion 1 displayed by the electronic device present clear images, the top bar area and the bottom bar area are also clear images, and the portion 2 presents a blurred image. The list controls included in the portions 1, 2, and 3 may have the same list controls or may be different from each other.

[0134] Further, for Figure 2B The specific implementation of each step in the illustrated embodiment is described below.

[0135] (I) Step S206B

[0136] The specific implementation method of the electronic device generating and displaying the target image frame of the interface 1 based on the pixel point information of the page 1 in the multiple image frames adjacent to the target image frame can be as follows:

[0137] A). The electronic device can store information of multiple frames of images adjacent to the target image frame.

[0138] The information of the above-mentioned multiple image frames may include: the content of the multiple image frames, the pixel point information of page 1 in the multiple image frames, and the pixel point information of page 1 in the multiple image frames includes the pixel point information of one or more list controls included in page 1 in each image frame. The pixel point information may include the RGBA value of the pixel point.

[0139] B) The electronic device sets the corresponding RGB weight and alpha weight (i.e., transparency weight) for each of the above-mentioned multiple image frames. The RGB weight is used to process the RGB value of the pixel point of the list control in each image frame, and the alpha weight is used to process the A value of the pixel point of the list control in each image frame. The RGB weight and the alpha weight can be the same or different.

[0140] Among them, the alpha weight corresponding to each image frame increases from far to near the target image frame in the time sequence of each image frame, that is, the closer the image frame is to the target image frame, the greater the corresponding alpha weight. For example, if the frame number of the target image frame is the 5th frame, the multiple image frames adjacent to the target image frame can be the 1st to 4th frames. The alpha weight of the 1st frame < the alpha weight of the 2nd frame < the alpha weight of the 3rd frame < the alpha weight of the 4th frame.

[0141] C) The electronic device performs pixel superposition based on the pixel point information of the list control in each image frame, the RGB weight corresponding to each image frame, and the alpha weight corresponding to each image frame to generate a target image frame.

[0142] Specifically, the electronic device can process the pixel information of the list control in each image frame based on the RGB weight corresponding to each image frame and the alpha weight corresponding to each image frame (for example, multiplying the RGB value of each pixel of the list control by the RGB weight and multiplying the A value of each pixel of the list control by the alpha weight), and mix the pixels at the same position in each image frame to generate a target image frame.

[0143] Exemplarily, take the example where an electronic device generates Image Frame 3 based on Image Frame 1 and Image Frame 2. Image Frame 1 corresponds to RGB Weight 1 and Alpha Weight 1, and Image Frame 2 corresponds to RGB Weight 2 and Alpha Weight 2. Image Frame 1 is temporally far from Image Frame 3, and Image Frame 2 is temporally close to Image Frame 3. Therefore, Alpha Weight 1 < Alpha Weight 2.

[0144] There is a pixel point X11 at Position 1 of Image Frame 1, and there is a pixel point X22 at Position 1 of Image Frame 2. The electronic device can process the pixel point X11 information based on RGB Weight 1 and Alpha Weight 1. For example, multiply the RGB value of pixel point X11 by RGB Weight 1 and multiply the A value of pixel point X11 by Alpha Weight 1. The electronic device can process the pixel point X22 information based on RGB Weight 2 and Alpha Weight 2. For example, multiply the RGB value of pixel point X22 by RGB Weight 2 and multiply the A value of pixel point X22 by Alpha Weight 2. Then, the electronic device can mix the processed pixel point X11 with pixel point X22. The pixel point information of other list controls in Image Frame 1 and the pixel point information of other list controls in Image Frame 2 are also processed and mixed in the same way as pixel point X11 and pixel point X22 to generate Image Frame 3.

[0145] In the embodiments of the present application, the pixel point information of multiple image frames used by the electronic device to generate the target image frame is all original RGB information that has not been processed by RGB weight and alpha weight. That is to say, multiple image frames used to generate the target image frame are all clear image frames. Among them, the clear multiple image frames are rendered by an electronic device (for example, by a graphics processing unit (GPU) in the electronic device).

[0146] D). The electronic device displays the target image frame of Interface 1.

[0147] In some embodiments, the electronic device can also generate and display the target image frame based on the pixel point information of Page 1 in multiple image frames adjacent to the target image frame, and the pixel point information of the list controls included in Part 2 of Page 1 in Image Frame C. The specific implementation method can refer to A) - D) described in Step S206B. That is to say, on the basis of multiple image frames adjacent to the target image frame, Image Frame C is also added for pixel superposition. Image Frame C can have its corresponding RGB weight and alpha weight, and the RGB weight and alpha weight corresponding to Image Frame C can be the largest. Image Frame C can also not be set with corresponding RGB weight and alpha weight.

[0148] The image frame C includes the top bar area, the bottom bar area and part 2 of page 1. The difference between the image frame C and the target image frame is that part 2 of page 1 in the image frame C is clear, while part 2 of page 1 in the target image frame is blurred.

[0149] In some embodiments, the electronic device may set a frame number threshold M of the target image frame for executing step S206B. That is, when the frame number of the target image frame is greater than or equal to M, the electronic device executes S206B to generate and display the target image frame based on information of multiple image frames adjacent to the target image frame. When the frame number of the target image frame is less than M, the electronic device does not need to generate the target image frame based on information of multiple image frames adjacent to the target image frame, but directly displays the rendered clear target image frame.

[0150] In some embodiments, when the electronic device detects that the sliding speed of page 1 drops to 0, the electronic device may not generate the target image frame based on the information of multiple image frames adjacent to the target image frame, but directly display the rendered clear target image frame. Regarding the determination of the sliding speed of page 1, reference may be made to the description in the aforementioned embodiments.

[0151] Figure 4 The software architecture of an electronic device provided by an embodiment of the present application is exemplified.

[0152] The software system of the electronic device can adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture or a cloud architecture. Taking the system as an example, the software structure of the electronic device is illustrated.

[0153] The layered architecture divides the software into several layers. Each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, The system is divided into five layers, from top to bottom: application layer, application framework layer, system library, kernel layer and hardware layer.

[0154] like Figure 4 As shown, the application layer may include a series of application packages, such as camera, calendar, memo, weather, application 1 and list control module 401, etc.

[0155] The list control module 401 may be used to determine whether the whitelist includes the identifier of application 1 and the identifier of page 1, determine whether input 2 is a sliding operation 1, send sliding speed calculation parameters to the sliding speed module 402, and send blur radius setting parameters and / or image processing instructions to the motion blur module 403. The sliding speed calculation parameters may include the y-axis coordinate of the specified pixel point 1 in the current image frame, the y-axis coordinate of the specified pixel point 1 in the previous image frame, the frame interval, the y-axis coordinate of the specified pixel point 1 in the first image frame, the total number of frames of the current image, and the like.

[0156] like Figure 4 As shown, the application framework layer provides an application programming interface (API) and a programming framework for the application of the application layer. The application framework layer includes some predefined functions. In the embodiment of the present application, the application framework layer may include a sliding speed module 402, etc.

[0157] The sliding speed module 402 can calculate the sliding speed of page 1 based on the sliding speed calculation parameters. The sliding speed module 402 can include OverScroller, sliding curve module, etc. OverScroller can be used to calculate the initial sliding speed V1 / sliding speed 2, and the sliding curve module can be used to map the sliding speed of page 1 based on the initial sliding speed V1 / sliding speed 2 and the average sliding speed. The sliding speed module 402 sends the determined sliding speed of page 1 to the list control module 401 so that the list control module 401 adjusts the blur radius.

[0158] The system library layer may include multiple functional modules, such as a surface manager, a media library, a 3D graphics processing library (such as OpenGL ES), a 2D graphics engine (such as SGL), a motion blur module 403, and the like.

[0159] The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of multiple common audio and video formats, as well as static image files. The media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing. The 2D graphics engine is a drawing engine for 2D drawing.

[0160] In an embodiment of the present application, the motion blur module 403 can be used to receive image processing instructions and blur radius setting parameters sent by the list control module 401, and in response to the image processing instructions, trigger the graphics processing unit (GPU) module 404 to generate a target image frame based on multiple pixel point information of part 2 in page 1 and blur radius setting parameters, or generate a target image frame based on information of multiple image frames adjacent to the target image frame.

[0161] The kernel layer is the layer between hardware and software. The kernel layer includes at least display driver, camera driver, audio driver, sensor driver, graphics processing unit (GPU) driver, etc.

[0162] The hardware layer may include various hardware configured on the electronic device, such as a camera, audio, GPU module 404, a graphic storage module (also referred to as graphic memory) 405, and a display module 406.

[0163] In an embodiment of the present application, the GPU module 404 can be used to generate a target image frame based on multiple pixel point information of part 2 in page 1 and blur radius setting parameters, or to generate a target image frame based on information of multiple image frames adjacent to the target image frame.

[0164] The graphic memory 405 may be used to store information of a plurality of pixels in a portion 2 of a page 1 and information of a plurality of image frames adjacent to a target image frame.

[0165] The display module 406 may be configured to display the target image frame.

[0166] In some embodiments, graphic memory 405 may also be located in the kernel layer.

[0167] In the embodiment of the present application, Figure 4 The software architecture of the electronic device shown is only used to exemplify the present application and does not constitute any limitation to the present application.

[0168] Figure 5A A module interaction process provided by an embodiment of the present application is exemplified.

[0169] like Figure 5A As shown, the module interaction process can be applied to Figure 4 The software architecture of the electronic device shown in FIG. The module interaction process may include:

[0170] S501A: After receiving input 1, the list control module 401 determines whether the whitelist includes the identifier of application 1 and the identifier of page 1.

[0171] For instructions on this step, refer to the Figure 2A S201A~S203A shown.

[0172] S502A: After receiving input 2, the list control module 401 determines whether input 2 is sliding operation 1.

[0173] For instructions on this step, refer to the Figure 2A S204A shown.

[0174] S503A: When it is determined that the whitelist includes the identifier of application 1 and the identifier of page 1, and it is determined that input 2 is sliding operation 1, the list control module 401 sends the sliding speed calculation parameter to the sliding speed module 402.

[0175] S504A: The sliding speed module 402 determines the sliding speed of page 1 based on the sliding speed calculation parameter and the sliding curve model.

[0176] For instructions on this step, refer to the Figure 2A S205A shown and its related description.

[0177] S505A: The list control module 401 receives the sliding speed of page 1 sent by the sliding speed module 402.

[0178] S506A: The list control module 401 sets the blur radius of the Gaussian convolution kernel based on the sliding speed of page 1.

[0179] S507A: The list control module 401 sends the blur radius setting parameters and image processing instructions to the motion blur module 403.

[0180] Among them, the blur radius setting parameter can be used to indicate the size of the blur radius of the Gaussian convolution kernel.

[0181] S508A: The motion blur module 403 sends a screenshot instruction to the GPU module 404 in response to the image processing instruction.

[0182] S509A: The GPU module 404 obtains information about a plurality of pixels in part 2 of page 1 in response to the screenshot instruction, and caches the information about a plurality of pixels in part 2 of page 1 to the graphic memory 405 .

[0183] S510A: The motion blur module 403 triggers the GPU module 404 to generate a target image frame based on the Gaussian convolution kernel, the alpha matrix and the information of multiple pixel points in part 2 of page 1.

[0184] For instructions on this step, refer to the Figure 2AS206A and its related description shown in the figure. The GPU module 404 can obtain the information of multiple pixels of the part 2 in the page 1 cached in the graphic memory 405.

[0185] Exemplarily, the motion blur module 403 may generate a shader based on the Gaussian convolution kernel and the alpha matrix, and then send a rendering instruction to the GPU module 404. The rendering instruction is used to trigger the GPU module 404 to generate a target image frame based on the shader.

[0186] S511A: The GPU module 404 sends the target image frame to the display module 406.

[0187] S512A: The display module 406 displays the target image frame.

[0188] Figure 5B A module interaction process provided by an embodiment of the present application is exemplified.

[0189] like Figure 5B As shown, the module interaction process can be applied to Figure 4 The software architecture of the electronic device shown in FIG. The module interaction process may include:

[0190] S501B: After receiving input 1, the list control module 401 determines whether the whitelist includes the identifier of application 1 and the identifier of page 1.

[0191] For instructions on this step, refer to the Figure 2B S201B~S203B shown.

[0192] S502B: After receiving input 2, the list control module 401 determines whether input 2 is sliding operation 1.

[0193] For instructions on this step, refer to the Figure 2B S204B shown.

[0194] S503B: When it is determined that the whitelist includes the identifier of application 1 and the identifier of page 1, and it is determined that input 2 is sliding operation 1, the list control module 401 sends the image processing instruction to the motion blur module 403.

[0195] S504B: The motion blur module 403 triggers the GPU module 404 to obtain information of multiple image frames adjacent to the target image frame in response to the image processing instruction.

[0196] The GPU module 404 may obtain information of multiple image frames adjacent to the target image frame from a hardware accelerated drawing interactive interface (HWUI) module.

[0197] S505B: The GPU module 404 stores information of multiple image frames adjacent to the target image frame into the graphic memory 405 .

[0198] S506B: The motion blur module 403 obtains information of multiple image frames adjacent to the target image frame from the graphic memory 405.

[0199] Exemplarily, the graphic memory 405 may send a memory pointer to the motion blur module 403 through the GPU module 404, and the motion blur module 403 may obtain information of multiple image frames based on the memory pointer. Each memory pointer indicates an address where the information of a corresponding image frame is stored.

[0200] S507B: The motion blur module 403 triggers the GPU module 404 to perform pixel superposition based on the pixel point information of the list control in each image frame, the RGB weight corresponding to each image frame, and the alpha weight corresponding to each image frame to generate a target image frame.

[0201] Specifically, the motion blur module 403 can generate a shader based on the pixel information of the list control in each image frame, the RGB weight corresponding to each image frame, and the alpha weight corresponding to each image frame. Then, the motion blur module 403 sends the shader to the GPU module 404, and the GPU module 404 performs pixel superposition based on the shader to generate a target image frame.

[0202] The specific implementation method of this step can refer to the above Figure 2B S206B shown and its related description.

[0203] S508B: The GPU module 404 sends the target image frame to the display module 406.

[0204] S509B: The display module 406 displays the target image frame.

[0205] In some embodiments, Figure 5B The information interaction between the sliding speed module 402 and the list control module 401 may also be included, and reference may be made to the aforementioned Figure 5A S503A to S505A described in the embodiment shown in the figure are used so that when the list control module 401 detects that the sliding speed of page 1 drops to 0, the triggering electronic device does not need to generate a target image frame based on the information of multiple image frames adjacent to the target image frame, but can directly display the rendered clear target image frame.

[0206] In the embodiment of the present application, the information exchanged between the motion blur module 403 and the GPU module 404 (for example, rendering instructions, screenshot instructions, etc. sent by the motion blur module 403 to the GPU module 404) is transmitted through the 2D graphics engine, openGL, and GPU driver.

[0207] Figure 6 The hardware structure of an electronic device provided by an embodiment of the present application is exemplified.

[0208] Figure 6 The electronic device 100 shown may be the electronic device mentioned above.

[0209] like Figure 6 As shown, the electronic device 100 may include a processor 601, a memory 602, a wireless communication module 603 (optional), a display screen 604, a camera 605 (optional), an audio module 606 (optional) and a microphone 607 (optional), and the above modules are connected by a bus.

[0210] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0211] The processor 601 may include one or more processor units, for example, the processor 601 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and / or a neural-network processing unit (neural-network processing unit, NPU), etc. Among them, different processing units can be independent devices or integrated in one or more processors. The controller can generate an operation control signal according to the instruction opcode and the timing signal to complete the control of fetching and executing instructions.

[0212] A memory may also be provided in the processor 601 for storing instructions and data. In some embodiments, the memory in the processor 601 is a cache memory. The memory may store instructions or data that the processor 601 has just used or circulated. If the processor 601 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 601, and thus improves the efficiency of the system.

[0213] In some embodiments, the processor 601 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a USB interface, etc.

[0214] The memory 602 is coupled to the processor 601 and is used to store various software programs and / or multiple groups of instructions. In a specific implementation, the memory 602 may include a volatile memory, such as a random access memory (RAM); it may also include a non-volatile memory, such as a ROM, a flash memory, a hard disk drive (HDD) or a solid state drive (SSD); the memory 602 may also include a combination of the above-mentioned types of memories. The memory 602 may also store some program codes so that the processor 601 calls the program codes stored in the memory 602 to implement the implementation method of the embodiment of the present application in the electronic device 100. The memory 602 may store an operating system, such as an embedded operating system such as uCOS, VxWorks, RTLinux, etc.

[0215] The wireless communication module 603 can provide wireless communication solutions applied to the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The wireless communication module 603 can be one or more devices integrating at least one communication processing module. The wireless communication module 603 receives electromagnetic waves via an antenna, modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 601. The wireless communication module 603 can also receive signals to be sent from the processor 601, modulate and amplify them, and convert them into electromagnetic waves for radiation through the antenna. In some embodiments, the electronic device 100 can also communicate with the processor 601 through the Bluetooth module ( Figure 6 Not shown), WLAN module ( Figure 6 The WLAN module may provide a solution including one or more Bluetooth communication in basic rate / enhanced data rate (BR / EDR) or Bluetooth low energy (BLE), and a solution including one or more WLAN communication in Wi-Fi direct, Wi-Fi LAN or Wi-Fi softAP.

[0216] The display screen 604 can be used to display images, videos, etc. The display screen 604 may include a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 604, where N is a positive integer greater than 1.

[0217] The camera 605 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 605, where N is a positive integer greater than 1.

[0218] The audio module 606 can be used to convert digital audio information into analog audio signal output, and can also be used to convert analog audio input into digital audio signal. The audio module 606 can also be used to encode and decode audio signals. In some embodiments, the audio module 606 can also be arranged in the processor 601, or some functional modules of the audio module 606 can be arranged in the processor 601.

[0219] Microphone 607, which can also be called "microphone" or "microphone", can be used to collect sound signals in the environment surrounding the electronic device, convert the sound signals into electrical signals, and then subject the electrical signals to a series of processes, such as analog-to-digital conversion, to obtain an audio signal in digital form that can be processed by the processor 601 of the electronic device. When making a call or sending a voice message, the user can speak by approaching the microphone 607 with his mouth to input the sound signal into the microphone 607. The electronic device 100 can be provided with at least one microphone 607. In other embodiments, the electronic device 100 can be provided with two microphones 607, which can not only collect sound signals but also realize noise reduction. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 607 to collect sound signals, reduce noise, identify the source of sound, realize directional recording functions, etc.

[0220] The electronic device 100 may further include a sensor module ( Figure 6 The sensor module may include a plurality of sensor devices, for example, a touch sensor ( Figure 6 The touch sensor may also be referred to as a "touch control device". The touch sensor may be provided on the display screen 604, and the touch sensor and the display screen 604 form a touch screen, also referred to as a "touch control screen". The touch sensor may be used to detect a touch operation on or near the touch sensor.

[0221] It should be noted that Figure 6 The electronic device 100 shown in the figure is only used to exemplify the hardware structure of the electronic device provided by the present application, and does not constitute a specific limitation to the present application.

[0222] As used in the above embodiments, the term "when..." may be interpreted to mean "if..." or "after..." or "in response to determining..." or "in response to detecting...", depending on the context. Similarly, the phrases "upon determining..." or "if (the stated condition or event) is detected" may be interpreted to mean "if determining..." or "in response to determining..." or "upon detecting (the stated condition or event)" or "in response to detecting (the stated condition or event)", depending on the context.

[0223] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that contains one or more available media integration. The available medium can be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk), etc.

[0224] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

Claims

1. A method for displaying a page within an application, characterized in that: include: Display a first image frame of a first interface in a first application; wherein the first image frame includes a top bar area, a bottom bar area, and a first portion of a first page; Receiving a first sliding operation on the first interface; During the first sliding operation, a target image frame of the first interface is displayed; wherein the target image frame includes the top bar area, the bottom bar area, and a first blurred image after blurring the second part of the first page; After the first sliding operation is completed, a second image frame of the first interface is displayed; wherein the second image frame includes the top bar area, the bottom bar area and the third part of the first page, and the second part is located between the first part and the third part in the first interface.

2. The method according to claim 1, characterized in that During the first sliding operation, displaying a target image frame specifically includes: During the first sliding operation, determining pixel point information of a second part of the first page; Determining a sliding speed of the first page; generating a target image frame based on a sliding speed of the first page and pixel information of a second portion of the first page; During the first sliding operation, the target image frame is displayed.

3. The method according to claim 2, characterized in that The determining the sliding speed of the first page specifically includes: Determine the y-axis coordinate of the first pixel in the third image frame of the first page, the y-axis coordinate of the first pixel in the fourth image frame of the first page, and the image frame interval; wherein the third image frame is the previous frame of the fourth image frame; determining the first sliding speed based on the y-axis coordinate of the first pixel in the third image frame of the first page, the y-axis coordinate of the first pixel in the fourth image frame of the first page, and an image frame interval; Based on the first sliding speed and the sliding curve model, a sliding speed of the first page is determined.

4. The method according to claim 3, characterized in that Determining the sliding speed of the first page based on the first sliding speed and the sliding curve model specifically includes: The sliding speed of the first page is determined based on the first sliding speed, the average sliding speed and the sliding curve model.

5. The method according to claim 4, characterized in that The pixel point information of the second part of the first page includes RGBA values ​​of a plurality of pixel points of the second part in the first page, and the plurality of pixel points includes a second pixel point; The generating a target image frame based on the sliding speed of the first page and the pixel point information of the second part of the first page specifically includes: Determine RGBA values ​​of a plurality of pixels within a specified range centered on the second pixel, and weights corresponding to the plurality of pixels; wherein the RGBA value of the second pixel is the first RGBA value; Determine a second RGBA value based on the RGBA values ​​of the plurality of pixels within the specified range and the weights corresponding to the plurality of pixels by using a weighted average algorithm; The first RGBA value is replaced by the second RGBA value.

6. The method according to claim 5, characterized in that The weights corresponding to the plurality of pixels include RGB weights corresponding to the plurality of pixels and transparency weights corresponding to the plurality of pixels; Based on the RGBA values ​​of the plurality of pixels within the specified range and the weights corresponding to the plurality of pixels, a second RGBA value is determined by a weighted average algorithm, specifically including: Determine the RGB values ​​in the second RGBA values ​​based on the RGB values ​​in the RGBA values ​​of the multiple pixels within the specified range and the RGB weights corresponding to the multiple pixels; Based on the transparency values ​​in the RGBA values ​​of the plurality of pixels within the specified range and the transparency weights corresponding to the plurality of pixels, the transparency value in the second RGBA value is determined.

7. The method according to claim 6, characterized in that The fourth image frame includes the top bar area, the bottom bar area, and a second portion of the first page; and a size of the designated range is determined by a sliding speed of the first page.

8. The method according to claim 1, characterized in that During the first sliding operation, displaying a target image frame specifically includes: During the first sliding operation, determining information of a plurality of pixels included in the first page in a plurality of image frames adjacent to the target image frame; Generate the target image frame based on a plurality of pixel point information included in the first page in the plurality of image frames; During the first sliding operation, the target image frame is displayed.

9. The method according to claim 8, characterized in that The plurality of pixel point information includes RGBA values ​​of the plurality of pixel points, and the plurality of image frames includes a first image frame and a second image frame; Generate the target image frame based on the plurality of pixel point information included in the first page in the plurality of image frames: The target image frame is generated based on multiple pixel point information of the first page in the first image frame, the RGB weight corresponding to the first image frame, the transparency weight corresponding to the first image frame, multiple pixel point information of the first page in the second image frame, the RGB weight corresponding to the second image frame, and the transparency weight corresponding to the second image frame.

10. The method according to claim 9, characterized in that The first image frame is before the second image frame, the second image frame is before the target image frame, and the transparency weight corresponding to the first image frame is less than the transparency weight corresponding to the second image frame.

11. An electronic device, characterized in that: include: One or more processors, one or more memories; the one or more memories are coupled to the one or more processors, the one or more memories are used to store computer program code, the computer program code includes computer instructions, when the one or more processors execute the computer instructions, the electronic device executes the method as described in any one of claims 1-10.

12. A chip system, characterized in that: It comprises a processing circuit and an interface circuit, wherein the interface circuit is used to receive code instructions and transmit them to the processing circuit, and the processing circuit is used to run the code instructions so that the chip system executes the method as described in any one of claims 1-10.

13. A computer-readable storage medium, characterized in that: The method comprises computer instructions, and when the computer instructions are executed on an electronic device, the electronic device executes the method as claimed in any one of claims 1 to 10.

Images