A method and apparatus for displaying animation effects

Abstract

The present application provides a method and device for displaying animation effects, which are applied to the field of terminal technology. The method includes: displaying a first interface of an application, the first interface including a first text for indicating first temperature information; the display effect of the first text included in the first interface is determined according to real-time weather information. Among them, the weather animation effect includes: the distortion effect of the current weather on the first text, and the weather animation effect is generated by a programmable shader based on the view corresponding to the first text and the animation parameters corresponding to the first real-time weather information. The view (View) is subjected to advanced image drawing by a programmable shader to generate a weather animation effect, so that the user can immerse himself in the natural weather when checking the weather temperature, which is in line with the user's feelings about the weather and enriches the user's visual experience. In some embodiments, when the first real-time weather information indicates that it is currently raining, the first text is displayed using a raindrop animation effect.

Description

Technical Field

[0001] The present application relates to the field of electronic equipment, and more specifically, to a method and device for displaying animation effects. Background Art

[0002] Users can view weather information through the weather application in the smart terminal, such as current weather, temperature, weather type, air quality, weather forecast for the next few days and other meteorological data. When the user clicks on the weather application, the weather application can show the user the real-time temperature of the current city. Summary of the invention

[0003] The present application provides a method and device for displaying animation effects. According to the method for displaying animation effects, users can be immersed in experiencing natural weather, which is in line with the user's feelings about the weather and enriches the user's visual experience.

[0004] In a first aspect, a method for displaying an animation effect is provided, which is applied to an electronic device, comprising: in response to a first operation of opening an application, displaying a first interface of the application, the first interface comprising first text for representing first temperature information; when first real-time weather information meets a preset condition, displaying the first text using a weather animation effect, wherein the weather animation effect comprises: a distortion effect of the current weather on the first text, and the weather animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters corresponding to the first real-time weather information.

[0005] The above scheme can be executed by an electronic device or a chip in the electronic device. After obtaining the first view (for displaying temperature text) transmitted by an application (such as a weather application), a weather animation effect is generated by a programmable shader, and the weather animation effect is applied to the first view and presented to the user, that is, a weather animation effect for temperature text is provided, so that the user can immerse himself in the natural weather when checking the weather temperature, which is in line with the user's feelings about the weather and enriches the user's visual experience.

[0006] Among them, weather animation effects include: raindrop animation effect, snowflake animation effect, hail animation effect, dew animation effect, frost animation effect, etc.

[0007] In a possible embodiment, the preset conditions include: the current weather is rainy, and the first text is displayed using a weather animation effect, including: using a raindrop animation effect to display the first text, wherein the raindrop animation effect includes: a radial distortion effect of raindrops overlapping with the first text on the first text, and the raindrop animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of raindrops overlapping with the first text.

[0008] The above solution allows the user to immerse himself in the feeling of a rainy day when checking the weather temperature (after an object is drenched in rain, raindrops refract light to produce a radially distorted visual effect), which is consistent with the user's feelings about rainy days and enriches the user's visual experience.

[0009] It is understandable that the current weather is rainy, which means it is currently raining. Optionally, when the first interface displays the weather of the first geographical location, the current weather is rainy, which means it is raining in the current geographical location. In some embodiments, the preset conditions may also include: the current weather type is sunny, or the current weather type is snowy, or the current weather type is rainy. It is understandable that in the case of sunny and snowy weather types, it may also rain for a period of time.

[0010] In some embodiments, the preset condition may also be that the current time from the last rain is less than or equal to the first time period threshold (e.g., 5 minutes), or that it is still raining before the first time period threshold. It is understandable that generally, for a period of time after the rain stops, raindrops will remain on the objects that have just been rained. Using the raindrop animation effect to display the first text within the first time period threshold can make the user feel more intuitively that it has just rained, thereby enhancing the user's immersive experience.

[0011] In a possible embodiment, the preset conditions include: the current weather is snowing, and the first text is displayed using a weather animation effect, including: using a snowflake animation effect to display the first text, wherein the snowflake animation effect includes: a radial distortion effect of the snowflakes overlapping the first text on the first text, and the snowflake animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of the snowflakes overlapping the first text.

[0012] In a possible embodiment, the preset conditions include: the current weather is a hail day, and the first text is displayed using a weather animation effect, including: displaying the first text using a hail animation effect, wherein the hail animation effect includes: a radial distortion effect of the hail overlapping with the first text on the first text, and the hail animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of the hail overlapping with the first text.

[0013] In a possible embodiment, the preset conditions include: the presence of dewdrops in the current weather, and the use of a weather animation effect to display the first text, including: using a dewdrop animation effect to display the first text, wherein the dewdrop animation effect includes: a radial distortion effect of the dewdrops overlapping with the first text on the first text, and the dewdrop animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of the dewdrops overlapping with the first text.

[0014] In a possible embodiment, the preset conditions include: there is frost in the current weather, and the first text is displayed using a weather animation effect, including: displaying the first text using a frost animation effect, wherein the frost animation effect includes: a radial distortion effect of the frost overlapping with the first text on the first text, and the frost animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of the frost overlapping with the first text.

[0015] The following mainly takes the raindrop animation effect as an example to illustrate.

[0016] In a possible embodiment, the raindrop animation effect is displayed through a sequence frame, and the sequence frame includes a first image frame, and the first image frame is used to display the radial distortion effect of the first raindrop on the first text; wherein, the first local area in the first text overlaps with the first raindrop, and the first local area is distorted; in the first local area, the closer the distance to the center position of the first raindrop is, the higher the degree of distortion of the pixel.

[0017] In the above scheme, the closer the pixel is to the center position of the first raindrop, the higher the degree of distortion is, so that the radial distortion effect of the raindrop on the text is closer to nature, and the user's immersive experience is enhanced.

[0018] In a possible embodiment, when the center position of the first raindrop overlaps with the first text, the first local area after distortion is larger than the first local area before distortion; or, when the center position of the first raindrop does not overlap with the first text, the first local area after distortion is smaller than the first local area before distortion.

[0019] In the above scheme, when the center position of the first raindrop overlaps with the first character, the first raindrop amplifies the first character, and when the center position of the first raindrop does not overlap with the first character, the first raindrop amplifies the background of the first character and shrinks the first character accordingly. This is consistent with the refraction effect of raindrops on light in the natural environment, making the radial distortion effect of raindrops on characters closer to nature and enhancing the user's immersive experience.

[0020] In a possible embodiment, the first image frame is also used to display the radial distortion effect of the second raindrop on the first text; wherein the second raindrop overlaps with the first raindrop, and the first local area belongs to the area where the second raindrop overlaps with the first raindrop; the degree to which the first local area is distorted is determined based on a first distortion parameter and a second distortion parameter, wherein the first distortion parameter is used to determine the degree to which the first raindrop distorts the first local area, and the second distortion parameter is used to determine the degree to which the second raindrop distorts the first local area.

[0021] In the above scheme, the animation effect can also display the radial distortion effect of two overlapping raindrops on the text, so as to simulate the overlapping of raindrops that is likely to occur in the natural environment, thereby enhancing the user's immersive experience.

[0022] In a possible embodiment, the first raindrop and the second raindrop merge into a fifth raindrop.

[0023] In the above scheme, the animation effect can also show that two overlapping raindrops merge into a new raindrop, which is used to simulate the scene that is likely to appear in the natural environment and enhance the user's immersive experience.

[0024] In a possible embodiment, the raindrop animation effect specifically includes: a radial distortion effect on the first text when the raindrop overlapping the first text slides down along the sliding path.

[0025] The above scheme can simulate the scene of raindrops sliding down that is likely to occur in a natural environment by displaying the radial distortion effect on the first text when the raindrops slide down along the sliding path, thereby enhancing the user's immersive experience.

[0026] In a possible embodiment, a raindrop animation effect is displayed through a sequence of frames, and the sequence of frames includes multiple image frames, and the multiple image frames are used to display a third raindrop sliding down along a first sliding path; wherein the first sliding path is the outline of the first text, and the third raindrop overlaps with the first text in the process of the third raindrop sliding down along the outline of the first text; when the center position of the third raindrop overlaps with the first text, in each of the multiple image frames, the third local area after distortion is larger than the third local area before distortion; or, when the center position of the third raindrop does not overlap with the first text, in each of the multiple image frames, the third local area after distortion is smaller than the third local area before distortion; wherein the third local area is the area where the third raindrop overlaps with the first text.

[0027] The above scheme can simulate the scene of raindrops sliding along the outline of an object in a natural environment by displaying the effect of raindrops sliding along the outline of the first character and radially distorting the first character, thereby enhancing the user's immersive experience.

[0028] In a possible embodiment, a raindrop animation effect is displayed through a sequence of frames, which includes multiple image frames, and the multiple image frames are used to display a fourth raindrop sliding down a second sliding path; wherein the second sliding path intersects with the first text; wherein, when the center position of the fourth raindrop overlaps with the first text, in each of the multiple image frames, the fourth local area after distortion is smaller than the fourth local area before distortion; or, when the center position of the fourth raindrop does not overlap with the first text, in each of the multiple image frames, the fourth local area after distortion is larger than the fourth local area before distortion; wherein the fourth local area is the area where the fourth raindrop overlaps with the first text.

[0029] The above scheme, by showing the effect of the raindrop's sliding path intersecting with the first character and radially distorting the first character, can simulate the scene of raindrops hitting an object in a natural environment, flowing in a local area on the surface of the object and then sliding down from the object, thereby enhancing the user's immersive experience.

[0030] Optionally, in the raindrop animation effect, in the N image frames showing the raindrop just hitting the first character, the overlapping area of ​​the raindrop and the first character increases from small to large, the center position of the fourth raindrop in the first n1 image frames of the N image frames does not overlap with the first character, and the center position of the fourth raindrop in the last n2 image frames overlaps with the first character, so that the area where the first character and the raindrop overlap in the N image frames is first reduced and then enlarged compared to when the raindrop animation effect is not displayed, wherein N=n1+n2, N, n1 and n2 are all integers greater than 0. In the M image frames showing the raindrop sliding down (or leaving) the first character, the overlapping area of ​​the raindrop and the first character increases from large to small, and similarly, the area where the first character and the raindrop overlap in the M image frames is first enlarged and then reduced compared to when the raindrop animation effect is not displayed.

[0031] In a possible embodiment, the raindrop animation effect is displayed through a sequence of frames, which includes multiple image frames, the multiple image frames are used to display a third raindrop sliding along a third sliding path, and the multiple image frames are used to display a fourth raindrop sliding along a fourth sliding path; in the process of the third raindrop sliding along the third sliding path, and in the process of the fourth raindrop sliding along the fourth sliding path, the third raindrop overlaps with the fourth raindrop; the third raindrop and the fourth raindrop converge into a fifth raindrop, and then the fifth raindrop slides along the fifth sliding path; the fifth sliding path is determined based on the third sliding path and / or the fourth sliding path.

[0032] The above scheme simulates the scene that is likely to appear in the natural environment by displaying the animation of two raindrops overlapping and converging into a new raindrop sliding down, thereby enhancing the user's immersive experience.

[0033] In a possible embodiment, the closer the sliding path is to a vertical line of the first interface, or the smaller the angle between the sliding path and the vertical line of the first interface is, the faster the sliding speed of the raindrop overlapping the first text is.

[0034] The above solution simulates the scene that is likely to appear in the natural environment by showing that the more vertical the sliding path of the raindrop is, the faster the sliding speed is, thereby enhancing the user's immersive experience.

[0035] In a possible embodiment, a raindrop animation effect is displayed through a sequence of frames, and the first text is displayed using the raindrop animation effect, including: passing a view corresponding to the first text into a raindrop distortion class; the raindrop distortion class generates the first text with a raindrop animation effect through a programmable shader for each image frame in the sequence of frames based on the texture of the first text and animation parameters of raindrops overlapping with the first text, wherein the texture of the first text is included in the view corresponding to the first text.

[0036] In the above scheme, after the application passes the view corresponding to the first text to the raindrop distortion class, the raindrop distortion class can call the programming shader to generate a raindrop animation effect, so as to apply the generated raindrop animation effect to the view to obtain a rich visual experience.

[0037] In a possible embodiment, the animation parameters of the raindrops overlapping the first text are used to characterize the position and size of the raindrops. For example, the parameter used to characterize the position of the raindrops may be the center position of the raindrops; for example, the parameter used to characterize the size of the raindrops may be the diameter or radius of the raindrops; for example, the parameter used to characterize the position and size of the raindrops may be the positions of any three points in the perfect circle constituting the raindrops, etc.

[0038] In a possible embodiment, the animation parameters of the raindrops overlapping with the first text include: the center position and radius of the raindrops overlapping with the first text, and for each image frame in the sequence of frames, based on the texture of the first text and the animation parameters of the raindrops overlapping with the first text, generating the first text with a raindrop animation effect, including: for each image frame, based on the texture, center position, radius of the first text and the texture coordinates of the first pixel in the first text overlapping with the raindrops, obtaining the distorted color value of the first pixel; generating the first text with a raindrop animation effect according to the distorted color value of the first pixel and the color value of the second pixel in the first text that does not overlap with the raindrops.

[0039] The above scheme uses a programmable shader to determine the color values ​​for the first pixel overlapping with the raindrop and the second pixel not overlapping with the raindrop, thereby reflecting the raindrop animation effect, so that the generated raindrop animation effect is applied to the first view to obtain a rich visual experience.

[0040] Optionally, taking a raindrop as a perfect circle as an example, the center position of the raindrop is the position of the center of the raindrop in the view corresponding to the first character, or the position of the center of the raindrop in the texture coordinate system where the texture of the first character is located. The texture coordinates of the first pixel and the center position of the raindrop are in the same texture coordinate system. The position of the raindrop in the texture coordinate system or in the view corresponding to the first character is determined by the center position and radius of the raindrop, thereby determining whether each pixel in the first character overlaps with the raindrop.

[0041] In a possible embodiment, based on the texture, center position, radius and texture coordinates of the first pixel in the first character that overlaps with the raindrop, the color value of the distorted first pixel is obtained, including: obtaining a distortion parameter of the first pixel based on the distance between the texture coordinates of the first pixel and the center position, and the radius; obtaining a distorted texture coordinate of the first pixel according to the texture coordinates of the first pixel and the distortion parameter; and using the color value corresponding to the distorted texture coordinates of the first pixel in the texture of the first character as the color value of the distorted first pixel.

[0042] In the above scheme, the texture coordinates of the first pixel are distorted to obtain distorted texture coordinates, and the color value corresponding to the distorted texture coordinates is used as the color value of the distorted first pixel, thereby achieving a radial distortion effect of raindrops.

[0043] In some embodiments, the greater the distance between the texture coordinates of the first pixel and the center position, the smaller the distortion parameter, so that the pixel closer to the center position of the raindrop has a higher distortion degree.

[0044] In a possible embodiment, a raindrop includes a first raindrop and a second raindrop, a center position includes a first center position of the first raindrop and a second center position of the second raindrop, a radius includes a first radius of the first raindrop and a second radius of the second raindrop, the first raindrop and the second raindrop overlap, a first pixel includes a third pixel and a fourth pixel, wherein the third pixel overlaps with the second raindrop, and the fourth pixel does not overlap with the second raindrop, and a distortion parameter of the first pixel is obtained based on a distance between a texture coordinate of the first pixel and the center position, and a radius, including: obtaining a first distortion parameter of the third pixel based on a distance between a texture coordinate of the third pixel and the first center position and a first radius, and obtaining a second distortion parameter of the third pixel based on a distance between a texture coordinate of the third pixel and the second center position and a second radius; obtaining a distortion parameter of the fourth pixel based on a distance between a texture coordinate of the fourth pixel and the first center position and a first radius; according to The texture coordinates and distortion parameters of the first pixel are used to obtain the distorted texture coordinates of the first pixel, including: obtaining the first distorted texture coordinates of the third pixel according to the texture coordinates of the third pixel and the first distortion parameter, and obtaining the second distorted texture coordinates of the third pixel according to the texture coordinates of the third pixel and the second distortion parameter; obtaining the distorted texture coordinates of the fourth pixel according to the texture coordinates of the first pixel and the distortion parameter of the fourth pixel; using the color value corresponding to the distorted texture coordinates of the first pixel in the texture of the first character as the color value of the first pixel after distortion, including: obtaining the third distorted texture coordinates of the third pixel according to the first distorted texture coordinates and the second distorted texture coordinates; using the color value corresponding to the third distorted texture coordinates in the texture of the first character as the color value of the third pixel after distortion; using the color value corresponding to the distorted texture coordinates of the fourth pixel in the texture of the first character as the color value of the fourth pixel after distortion.

[0045] In the above scheme, when the first character overlaps with two raindrops, for the third pixel overlapping with both the first raindrop and the second raindrop, the color value of the distorted third pixel is determined according to the two raindrops; for the fourth pixel overlapping only with the first raindrop, the color value of the distorted third pixel is determined according to the first raindrop. The radial distortion effect of raindrops can be displayed more accurately according to the overlap of the first character and the raindrops.

[0046] In a possible embodiment, when the first raindrop and the second raindrop meet the preset overlapping condition, the method further includes: determining the center position of the fifth raindrop according to the first center position and the second center position, the fifth raindrop being a raindrop formed by the first raindrop and the second raindrop; and determining the radius of the fifth raindrop according to the first radius and the second radius; wherein the sequence frame includes the first image frame and the second image frame, the second image frame is the subsequent frame of the first image frame, the raindrops overlapping with the first text in the first image frame include the first raindrop and the second raindrop meeting the preset overlapping condition, the raindrops overlapping with the first text in the second image frame include the fifth raindrop, and the first raindrop and the second raindrop meeting the preset overlapping condition include: the ratio of the overlapping area of ​​the second raindrop and the first raindrop to the area of ​​the first raindrop or the second raindrop is greater than or equal to the ratio threshold, or the center position of the second raindrop overlaps with the first raindrop, or the center position of the first raindrop overlaps with the second raindrop.

[0047] In the above scheme, when the overlapping preset condition is met, two raindrops converge into a new raindrop, and the positions of the raindrops included in the two image frames before and after the convergence are given respectively, so as to achieve the radial distortion effect of the raindrops on the first text before and after the convergence.

[0048] In a possible embodiment, the sequence of frames includes multiple image frames, and the method further includes: obtaining a sliding path corresponding to a raindrop overlapping with the first text; and for each image frame in the sequence of frames, determining animation parameters of the raindrop overlapping with the first text according to the sliding path.

[0049] The above scheme determines the position and size of the raindrops included in each image frame based on the sliding path corresponding to the raindrops (the sliding path of the raindrops to be presented through the raindrop animation effect), so as to reflect the sliding process of the raindrops in the raindrop animation effect and obtain a rich visual experience.

[0050] In a possible embodiment, obtaining a sliding path corresponding to a raindrop overlapping with a first character includes: obtaining an outline of the first character; determining the sliding path according to the outline of the first character; or using a preset sliding path as the sliding path.

[0051] In a possible embodiment, the sequence of frames includes a third image frame and a fourth image frame, the fourth image frame is the next frame of the third image frame, and for each image frame in the sequence of frames, the animation parameters overlapping with the first text are determined according to the sliding path, including: for the third image frame, obtaining the position and size of the raindrops overlapping with the first text; obtaining the position of the raindrops overlapping with the first text in the fourth image frame according to the position and sliding path of the raindrops overlapping with the first text in the third image frame, and determining the size of the raindrops overlapping with the first text in the fourth image frame according to the size of the raindrops overlapping with the first text in the third image frame.

[0052] In a possible embodiment, the sequence of frames includes a third image frame and a fourth image frame, the fourth image frame is the next frame of the third image frame, and the animation parameters of the raindrops overlapping with the first text include: the center position and radius of the raindrops overlapping with the first text, and for each image frame in the sequence of frames, the animation parameters of the raindrops overlapping with the first text are determined according to the sliding path, including: for the third image frame, obtaining the third center position and the third radius of the raindrops overlapping with the first text; for the fourth image frame, obtaining the fourth center position of the raindrops overlapping with the first text according to the third center position and the sliding path, and determining the fourth radius of the raindrops overlapping with the first text according to the third radius.

[0053] The above scheme updates the center position and radius of the raindrop in each frame image according to the falling path of the raindrop, so as to reflect the falling process of the raindrop in the raindrop animation effect and obtain a rich visual experience.

[0054] In a possible embodiment, the raindrop overlapping with the first character is the fifth raindrop, the fifth raindrop is formed by the third raindrop and the fourth raindrop that meet the preset overlapping condition, the sliding path corresponding to the third raindrop is the third sliding path, and the sliding path corresponding to the fourth raindrop is the fourth sliding path, and obtaining the sliding path corresponding to the raindrop overlapping with the first character includes: determining the fifth sliding path corresponding to the fifth raindrop according to the third sliding path and / or the fourth sliding path.

[0055] In the above scheme, when two raindrops overlap and converge into a new raindrop during the sliding process, the sliding path of the new raindrop can be determined according to the sliding path of at least one of the two raindrops, so as to enrich the raindrop animation effect and enhance the user's visual experience.

[0056] In a possible embodiment, after applying the raindrop animation effect to the view corresponding to the first text for display, the method further includes: in response to the first real-time weather information not satisfying a preset condition, stopping displaying the raindrop animation effect.

[0057] In the above scheme, when the raindrop animation effect is not needed for the view, the weather application can decide when to stop playing the raindrop animation effect, so as to trigger the raindrop distortion class encapsulated in the binary archive file (Android archive, AAR) layer to stop the raindrop animation effect, which helps to save power consumption.

[0058] In a possible embodiment, after applying the raindrop animation effect to the view corresponding to the first text for display, the method further includes: in response to the application being placed in the background, stopping displaying the raindrop animation effect; or, in response to an operation of exiting the application, stopping displaying the raindrop animation effect.

[0059] Therefore, the weather application can consider the program running status and flexibly decide when to stop the raindrop animation effect.

[0060] In a possible embodiment, the first interface is used to display weather information corresponding to a first geographic location, and the method further includes: in response to a second operation on the first interface, displaying a second interface of the application, the second interface being used to display weather information corresponding to a second geographic location, the second interface including second text for indicating second temperature information, and the display effect of the second text being determined based on the second real-time weather information; if the second real-time weather information does not meet a preset condition, displaying the second text, the preset condition including: it is currently raining at the current geographic location.

[0061] Therefore, the weather application can take weather factors into consideration and flexibly decide when to stop the raindrop animation effect.

[0062] In a second aspect, an electronic device is provided, comprising a unit for executing any one of the methods in the first aspect. The electronic device may be a terminal device or a chip in the terminal device. The electronic device comprises an input unit, a display unit and a processing unit.

[0063] When the electronic device is a terminal device, the processing unit may be a processor, the input unit may be a communication interface, and the display unit may be a graphics processing module and a screen; the terminal device may also include a memory for storing computer program code, and when the processor executes the computer program code stored in the memory, the terminal device executes any one of the methods in the first aspect.

[0064] When the electronic device is a chip in a terminal device, the processing unit may be a logic processing unit inside the chip, the input unit may be an input interface, a pin or a circuit, etc., and the display unit may be a graphics processing unit inside the chip; the chip may also include a memory, which may be a memory inside the chip (for example, a register, a cache, etc.) or a memory located outside the chip (for example, a read-only memory, a random access memory, etc.); the memory is used to store computer program code, and when the processor executes the computer program code stored in the memory, the chip executes any one of the methods of the first aspect.

[0065] According to a third aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program code. When the computer program code is executed by an electronic device, the electronic device executes any one of the methods according to the first aspect.

[0066] According to a fourth aspect, a computer program product is provided, the computer program product comprising: a computer program code, when the computer program code is executed by an electronic device, the electronic device executes any one of the methods according to the first aspect.

[0067] The technical effects obtained by the above-mentioned second aspect, third aspect and fourth aspect are similar to the technical effects obtained by the corresponding technical means in the above-mentioned first aspect, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] Figures 1A to 1E An example diagram of a weather program application provided in an embodiment of the present application using a raindrop refraction effect to display temperature text;

[0069] FIG. 2A to FIG. 2C They are respectively enlarged views of the real-time temperature control 1041, the real-time temperature control 1042, and the real-time temperature control 1043 provided in the embodiments of the present application;

[0070] Figure 3 A schematic diagram of a hardware system of an electronic device provided in an embodiment of the present application;

[0071] Figure 4 A schematic diagram of the software structure of an electronic device provided in an embodiment of the present application;

[0072] Figure 5 An example diagram of an interaction for creating an animation effect for an application provided in an embodiment of the present application;

[0073] Figure 6 A flowchart of a method for displaying animation effects provided in an embodiment of the present application;

[0074] Fig. 7A and Figure 7B They are schematic diagrams of examples of radial distortion effects of raindrops on temperature text provided in embodiments of the present application;

[0075] Fig. 8A and Figure 8B They are respectively exemplary schematic diagrams of two overlapping raindrops overlapping with temperature text provided in the embodiments of the present application;

[0076] 9A to 9C They are schematic diagrams of multiple image frames for displaying an animation effect of a raindrop sliding down a first sliding path, respectively, provided in embodiments of the present application;

[0077] Fig. 10A and Fig. 10B They are schematic diagrams of multiple image frames for displaying an animation effect of a raindrop sliding down along a second sliding path, respectively, provided in embodiments of the present application;

[0078] Fig.11A flowchart of a raindrop distortion algorithm provided in an embodiment of the present application;

[0079] FIG. 12A to FIG. 12D They are schematic diagrams of texture distortion provided in embodiments of the present application. DETAILED DESCRIPTION

[0080] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0081] It should be understood that the "multiple" mentioned in this application refers to two or more. In the description of this application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in order to facilitate the clear description of the technical solution of this application, the words "first", "second" or "third" are used to distinguish the same or similar items with basically the same functions and effects. Those skilled in the art can understand that the words "first", "second" or "third" do not limit the quantity and execution order, and the words "first" and "second" do not limit them to be different.

[0082] To facilitate understanding, before introducing the embodiments of the present application, some terms or concepts involved in the embodiments of the present application are briefly introduced.

[0083] Animation effects (also referred to as motion effects) are dynamic images formed by playing multiple image frames frame by frame (for example, the image elements or content contained in multiple image frames change) to allow users to intuitively experience a certain real scene. Generally speaking, an animation effect can be achieved through a set of sequence frames.

[0084] Programmable shader (RuntimeShader) is a programmable object introduced in Android 13. The behavior of RuntimeShader is defined in Android graphics shading language (AGSL) for editing or generating animation effects.

[0085] The embodiment of the present application does not specifically limit the format of the image frames constituting the sequence frames. For example, the image frames may be in portable network graphic (PNG) format.

[0086] The embodiment of the present application is applied to a weather application. When the real-time weather information meets the preset conditions, the temperature text is displayed using the weather animation effect. In some embodiments, in a rainy scene, the raindrop animation effect can be triggered to act on the temperature text, providing the user with an intuitive visual experience of a rainy day. For example, when rain hits the temperature text, the temperature text presents a radial distortion effect or a refraction effect of raindrops. For example, a rainy scene refers to a scene where it is currently raining at the current geographical location. For example, the weather type is showers, and the current geographical location is currently raining. For example, the weather type is light rain turning cloudy, and the current geographical location is currently raining. For example, the weather type is cloudy, and the current geographical location is currently raining. It can be understood that the weather type of the current city or region is cloudy, indicating that the weather in the current city or region is cloudy most of the time today, and the current city or region may be raining in a small part of the time (e.g., 23:00 to 24:00) today.

[0087] The raindrop animation effect acts on the temperature text, which can be understood as the raindrop animation effect acting on the view (View) corresponding to the temperature text. The raindrop animation effect (referred to as the raindrop animation effect) means that the area where the temperature text and the raindrops overlap produces radial distortion to simulate the refraction effect of raindrops on light. The raindrop animation effect can provide users with an intuitive visual experience of a rainy day, allowing users to feel the refraction effect of raindrops on light from the temperature text. It can be understood that the raindrop animation effect can also be called a raindrop refraction animation effect, or a rain refraction animation effect, or a refraction animation effect, or other names, which are not limited in this application.

[0088] For ease of understanding, the following combination Figures 1A to 1E The scenario shown in FIG.

[0089] Figures 1A to 1E An example diagram showing a weather program application according to an embodiment of the present application using a raindrop animation effect to display temperature text. Figure 1A The interface of a mobile phone is shown. The interface may include icons of multiple applications. For example, Figure 1A The interface shown includes an icon 101 of a weather application, an icon of a settings application, an icon of a calendar application, an icon of a camera application, and the like.

[0090] Understandably, Figure 1A The application shown is only an exemplary description, and the embodiments of the present application are not limited thereto. Figure 1A The interface shown may include icons of more other applications. Other applications may be third-party applications installed by the user or system applications, which are not limited in the present embodiment.

[0091] exist Figure 1AIn the interface shown, if the user clicks the weather icon 101, the interface displays as follows Figure 1B The interface shown, Figure 1B The interface shown is used to display the real-time weather information of the current location city.

[0092] like Figure 1B The interface shown may include a real-time weather widget 106. In one possible implementation, the real-time weather widget 106 is used to display a static image and / or animation effects of the current weather in the current city or region, such as dynamic effects such as clouds, lightning, and varying degrees of rain. For example, Figure 1B The static picture of rain shown indicates that it is currently raining in Pukou District. Alternatively, assuming that the real-time weather in Pukou District at 12:00 on September 8 is cloudy, the real-time weather control 106 can display a dynamic effect of cloudy at 12:00 on September 8. It can be understood that the different degrees of rain here may include rain with different precipitation amounts (such as light rain, moderate rain or heavy rain, etc.), or rain with different precipitation types (such as sleet, etc.). In another possible implementation, the real-time weather control 106 is used to display a static picture and / or animation effect and / or text of the current weather in the current city or region. For example, the real-time weather control 106 displays that it is currently raining.

[0093] like Figure 1B The interface shown may include a real-time temperature control 1041. The real-time temperature control 1041 is used to display the real-time temperature of the current city. For example, Figure 1B The real-time temperature control 1041 in shows that the current weather temperature of the current location city is 20°C (degrees Celsius).

[0094] This method of presenting the current weather and temperature separately is rather monotonous and cannot provide users with a rich visual experience.

[0095] In order to provide users with a more vivid dynamic visual experience, a raindrop animation effect is designed for the temperature text (corresponding View) in the rainy scene, so that users can immerse themselves in the feeling of rain when checking the weather temperature. Figure 1B When the temperature text "20℃" is displayed, it can be shown Figure 1C The distortion effect shown and Figure 1D The distortion effect shown. Figure 1C The temperature text "20℃" shown in the real-time temperature control 1042 is partially radially distorted or deformed, showing the effect of raindrop refraction. The user can regard the deformed area of ​​the temperature text "20℃" as an area where raindrops overlap, or as an area hit by rain. As time goes by, Figure 1DThe real-time temperature control 1043 shown in the figure displays the temperature text "20°C" in the same font as Figure 1C The effects shown have different areas and degrees of distortion or deformation. It is understandable that as time goes by, during the display of the raindrop animation effect, the area and degree of distortion or deformation of the temperature text "20℃" will change to simulate the sliding of raindrops and the scene of new raindrops hitting the temperature text "20℃".

[0096] It should be understood that Figure 1C The temperature text "20°C" and Figure 1D The temperature text "20°C" displayed in the real-time temperature control 1043 only shows a partial change of the raindrop animation effect. When displaying the raindrop animation effect, the temperature text "20°C" may also have other degrees of distortion or change in other different areas.

[0097] It should also be understood that Figure 1C The temperature text "20℃" or Figure 1D The temperature text "20°C" shown is only an example, and the temperature text can be updated accordingly as the weather data of the weather application is updated. In a rainy scene, when the temperature text changes (for example, 22°C), the raindrop animation effect can be triggered for the temperature text 22°C.

[0098] Optionally, the interface of the weather application may also include other controls. For example, the interface may include a temperature range control 102, a city control 103, a weather type control 105, a future weather control 107, and a recent weather control 108.

[0099] The temperature range control 102 is used to display the information of the highest and lowest temperatures of the day. For example, Figure 1B The highest temperature on that day was 22℃ and the lowest temperature was 15℃.

[0100] The city control 103 is used to display the current city or region. For example, Figure 1B The current location shown is Pukou District.

[0101] The weather type control 105 is used to display the current weather type of the current city. The current weather type can be sunny, rainy, or snowy, etc. Specifically, a sunny day can be clear or cloudy, etc. A rainy day can include: light rain, moderate rain, heavy rain, rainstorm, heavy rainstorm, extremely heavy rainstorm, light to moderate rain, moderate to heavy rain, heavy to rainstorm, and heavy rainstorm to extremely heavy rainstorm, etc. according to the precipitation amount; a rainy day can include: rain, showers or thunderstorms, and drizzle, etc. according to the precipitation nature; a rainy day can include: sleet or showery sleet, etc. according to the precipitation type. A snowy day can be light snow, moderate snow, or heavy snow, etc. For example, Figure 1BThe current weather type of the current location city is shown as moderate rain. Generally speaking, on rainy days, rain falls on objects and leaves raindrops on the objects. The raindrops refract light, causing the objects that the user sees through the raindrops to be partially deformed or distorted. At this time, the raindrops are like a convex mirror.

[0102] Optionally, the weather type control 105 is also used to display the air quality of the current city. For example, Figure 1B The air quality of the currently located city is shown to be excellent.

[0103] Optionally, the real-time weather widget 106 is Figures 1B to 1E The location and size of are for illustration only. Figure 1B In the example, the real-time weather control 106 can cover the entire interface or the upper half of the interface, and is located below the temperature range control 102, the city control 103, the weather type control 105 and the real-time temperature control 1041, serving as the background of these controls.

[0104] The current day future weather widget 107 is used to display the weather forecast for the next few hours or weather information for different time periods (eg, weather forecasts for 9:00 am, 10:00 am, 11:00 am, and 12:00 am).

[0105] The recent weather widget 108 is used to display the weather forecasts for the past, present and next few days, etc. (for example, the weather forecasts for yesterday, today and tomorrow).

[0106] Optionally, at the upper edges of the future weather widget 107 and the recent weather widget 108 , an animation effect of raindrops hitting the two widgets and splashing water (called a water splash animation effect) may also be displayed. Figure 1C and Figure 1D Two image frames in a sequence of frames for displaying a water splash animation effect are shown respectively. Figure 1C As shown, there are three water splash-like elements on the upper edge of the future weather control 107 for the day, and there are two water splash-like elements on the upper edge of the recent weather control 108, which are used to simulate the scene of rain hitting an object and picking up water splashes in the natural environment.

[0107] Optionally, Figure 1B The interface of the weather application shown also includes: the source of the weather information, and the time of the last update (for example, the last update was at 7:59).

[0108] Understandably, Figures 1B to 1D The weather interface shown is only an example description, and the embodiments of the present application are not limited thereto. For example, Figures 1B to 1D The interface shown may also include meteorological data such as air quality pollution index, abnormal weather reminders, wind direction information, ultraviolet rays, etc.

[0109] It should be understood that the present application embodiment does not limit how the user opens the weather application. Figure 1A The "clicking the weather icon 101" shown is only an example. In fact, the user can also open the weather application in other ways to enter the following Figure 1B For example, the user opens the weather application through voice commands. For another example, the user can enter the interface of the weather application by clicking the weather card on the desktop layout.

[0110] It should also be understood that Figures 1A to 1D The figure shows that the user clicks on the weather application to view the weather forecast of the current location city, but the embodiment of the present application is not limited to this. Figure 1B The interface shown or Figure 1C The interface shown or Figure 1D The interface shown in the figure can be used to view the weather forecast of other cities that have been followed or resident cities. For example, the user can view the weather forecast of a certain city by adding a city or searching for a target city. In summary, for scenes involving displaying raindrop animation effects, the display method of the animation effect of the embodiment of the present application is applicable.

[0111] For example, Figure 1D When the user slides the screen to the left, the phone receives the user's operation and displays the following interface: Figure 1E shown. Figure 1E The interface shown shows the weather information of another city. For example, the temperature of Beijing is 23°C in the control 1044, and the current weather of Beijing is cloudy in the real-time weather control 106. Since it is not raining in Beijing, Figure 1E The temperature text "23°C" displayed in the control 1044 shown does not present the raindrop animation effect.

[0112] It is understandable that when the user switches the screen to view the weather information of another city or region, the corresponding weather information or geographic location will also be updated when the city or region changes. Figure 1E Other weather information of Beijing is also shown. The city control 103 shows that the area is Beijing, and the weather type control 105 shows that the weather type of Beijing is sunny and the air is good; the temperature range control 102 shows that the highest temperature in Beijing is 25℃ and the lowest temperature is 15℃, yesterday's weather information, and the weather forecast for the next few days, etc., which will not be repeated here.

[0113] It is understandable. Figure 1E The interface shown is when the weather type is sunny. If the weather type is rainy, it can also be displayed as follows Figure 1C or Figure 1D The raindrop animation effect shown.

[0114] It should also be understood that the method for displaying animation effects in the embodiments of the present application is not only applicable to weather applications, but can also be applied to other scenarios that require loading raindrop animation effects.

[0115] It is understandable that the weather application can be a system application or a third-party application (ie, a third-party application can also access the above-mentioned raindrop animation effect).

[0116] In order to more clearly see the real-time temperature controls without and with the raindrop animation effect, enlarged views of the real-time temperature control 1041 , the real-time temperature control 1042 , and the real-time temperature control 1043 are compared and distinguished below.

[0117] Figure 2A , Figure 2B and Figure 2C The enlarged views of the real-time temperature control 1041, the real-time temperature control 1042 and the real-time temperature control 1043 provided in the embodiments of the present application are shown respectively. Figure 2A As shown, the temperature text "20°C" displayed in the real-time temperature control 1041 is the font set by the system, and the edges are very regular. Figure 2B As shown, the local area pointed by the arrow in the temperature text "20℃" displayed in the real-time temperature control 1042 is deformed or distorted. For example, the deformation or distortion effect of the top of "℃" is very obvious, and the user can think of it as the main part of a raindrop hitting the top of "℃". The raindrop refracts the light, and the raindrop is like a convex mirror, magnifying the top of "℃". Figure 2C As shown, the local area pointed by the arrow in the temperature text "20℃" displayed by the real-time temperature control 1043 is deformed or distorted. For example, the deformation or distortion effect of the lower edge of "2" is very obvious. The user can see that most of a raindrop hits the background of "20℃", and a small part hits the lower edge of "2". The raindrop refracts the light. At this time, the raindrop is like a convex mirror, which magnifies the background of "20℃" and shrinks the lower edge of "2".

[0118] An embodiment of the present application provides a method for displaying an animation effect. In response to an operation of opening an application, a first interface of the application is displayed. The display effect of the first text included in the first interface for representing the first temperature information is determined according to the real-time weather information. Among them, the weather animation effect includes: the distortion effect of the current weather on the first text. The weather animation effect is generated by a programmable shader based on the view corresponding to the first text and the animation parameters corresponding to the first real-time weather information. Specifically, when the first real-time weather information is that it is currently raining, the first text is displayed using a raindrop animation effect. The raindrop animation effect includes: the radial distortion effect of the raindrops overlapping with the first text on the first text, which realizes an immersive and natural raindrop refraction effect, which is more vivid and in line with the user's feelings, and has a more scene immersive atmosphere, significantly improving the user experience.

[0119] The following combination Figure 3 and Figure 4 Describe the hardware system and software architecture of the embodiment of the present application.

[0120] refer to Figure 3 , Figure 3 A hardware system schematic diagram of an electronic device provided in an embodiment of the present application is shown.

[0121] The device 100 may be a mobile phone, a smart screen, a tablet computer, a wearable electronic device, an in-vehicle electronic device, an augmented reality (AR) device, a virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a projector, etc. The embodiment of the present application does not impose any limitation on the specific type of the device 100.

[0122] The device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0123] It should be noted that Figure 3 The structure shown does not constitute a specific limitation on the device 100. In other embodiments of the present application, the device 100 may include Figure 3 More or fewer components than those shown, or the apparatus 100 may include Figure 3 Combinations of some of the components shown, or the apparatus 100 may include Figure 3 Subassemblies of some of the components shown. Figure 3 The components shown may be implemented in hardware, software, or a combination of software and hardware.

[0124] The processor 110 may include one or more processing units. For example, the processor 110 may include at least one of the following processing units: an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and a neural-network processing unit (NPU). Different processing units may be independent devices or integrated devices.

[0125] In some possible embodiments, the processor 110 is used to display a first interface of the application in response to a first operation of opening the application, wherein the first interface includes first text for representing first temperature information; when the first real-time weather information meets a preset condition, the processor 110 is also used to display the first text using a weather animation effect, wherein the weather animation effect includes: a distortion effect of the current weather on the first text, and the weather animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters corresponding to the first real-time weather information.

[0126] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0127] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 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 110, and thus improves the efficiency of the system.

[0128] In some embodiments, processor 110 may include one or more interfaces.

[0129] Figure 3 The connection relationship between the modules shown is only a schematic illustration and does not constitute a limitation on the connection relationship between the modules of the device 100. Optionally, the modules of the device 100 may also adopt a combination of multiple connection modes in the above embodiments.

[0130] The device 100 can implement display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0131] Display screen 194 may be used to display images or videos. Display screen 194 includes a display panel. In some embodiments, device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1. In some embodiments, display screen 194 may be used to display animation effects of a weather application, such as a lightning animation effect.

[0132] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. The touch sensor 180K is also called a touch control device. The touch sensor 180K can be set on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, which is also called a touch control screen. In other embodiments, the touch sensor 180K can also be set on the surface of the device 100 and set at a different position from the display screen 194.

[0133] The motor 191 can generate vibrations. The motor 191 can be used for incoming call reminders and can also be used for touch feedback.

[0134] The hardware system of the device 100 is described in detail above, and the software system of the device 100 is introduced below. Figure 4 A schematic diagram of the software structure of an electronic device provided in an embodiment of the present application. The software system may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture or a cloud architecture. The embodiment of the present application takes the layered architecture as an example to exemplarily describe the software system of the device 100.

[0135] like Figure 4 As shown, the software system using layered architecture is divided 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 software system can be divided into five layers, from top to bottom, namely, application layer, AAR layer, application framework layer, java system service layer, system runtime layer and kernel layer (linux kernel).

[0136] The application layer can include multiple applications. Figure 4 As shown in FIG. 1 , the application layer may include applications such as weather, settings, camera, calendar, music, etc. It is understood that the applications included in the application layer may be third-party applications or system applications. For example, the application layer may also include gallery, call, map, navigation, WLAN, Bluetooth, video, short message ( Figure 4 not shown).

[0137] For example, a user can query the weather conditions through a weather application. The weather information (e.g., meteorological data and corresponding animation effects) presented by the weather application can be displayed on the display screen 194 to be presented to the user.

[0138] The interface of the weather application can include a view. View is the basic element of the interface. View can contain rich controls that can respond to user operation events. For example, when the system interacts with the user, the system will pass the event to the View module, and then the View module will respond accordingly. In other words, View is the basic building block of the user interface component, responsible for graphical interface rendering and event processing. Optionally, View occupies a rectangular area on the screen. For example, View is Figure 1B The real-time temperature control 1041, the real-time temperature control 1042, or the real-time temperature control 1043 is shown. The user can operate the interface through the View module.

[0139] The AAR layer is used to provide resources (or AAR packages) for various animation effects corresponding to the application. Different applications implement different functions, and different applications correspond to different AAR packages. Different AAR packages also contain different content and resources. Taking the weather application as an example, the AAR package corresponding to the weather application includes multiple animation effects corresponding to different weather types. Multiple animation effects are integrated in the AAR package as a weather engine and provided to the weather application in the application layer. For example, Figure 4 As shown, the AARs related to the weather application include hnthreedweather.aar and hngfxengine.aar. hnthreedweather.aar is used to provide multiple animation effects to the weather application. hngfxengine.aar is used to encapsulate some three-dimensional motion effects of the engine (such as floating clouds) and pass them to hnthreedweather.aar to provide multiple animation effects to the weather application, so that the weather application can display animation effects corresponding to the current weather type. Three-dimensional motion effects refer to animation effects in three-dimensional space (for example, the space composed of the X-axis, Y-axis and Z-axis, compared with the two-dimensional space, the changes on the Z-axis are added to the X-axis and Y-axis).

[0140] For example, the three-dimensional animation effect can be the basic animation effect of the cloud layer. The animation effect of the overall floating of the cloud layer can be encapsulated in hnthreedweather.aar, and the parameters of the basic animation effect of the cloud layer (such as the displacement parameter, transparency parameter, and scaling parameter of the cloud layer) can be called in hngfxengine.aar.

[0141] It is understood that hngfxengine.aar and hnthreedweather.aar can be set separately. That is, hnthreedweather.aar is set as one AAR package in the AAR layer, and hngfxengine.aar is set as another AAR package in the AAR layer to jointly realize the animation effect of the weather application. Optionally, hngfxengine.aar and hnthreedweather.aar can also be merged into one AAR package, set in the AAR layer, and jointly realize the animation effect of the weather application.

[0142] In the embodiment of the present application, hnthreedweather.aar includes the RaindropDistort class. The RaindropDistort class is used to provide a raindrop animation effect to the weather application.

[0143] It should be noted that Figure 4 In the example, the AAR layer is independent of the application framework layer and is set between the application layer and the application framework layer, but the embodiment of the present application is not limited thereto. For example, the AAR layer can also be set in the application framework layer to provide an AAR package for the application.

[0144] It should also be noted that Figure 4 The hnthreedweather.aar and hngfxengine.aar in the AAR layer are both extended AARs created by the embodiments of the present application (for example, specifically the terminal manufacturer), and are used to implement the display method of the animation effects proposed in the embodiments of the present application. The two are not native AARs in the Android system architecture. In other words, in order to implement the display method of the animation effects in the embodiments of the present application, the weather application can call hnthreedweather.aar and hngfxengine.aar to achieve the corresponding animation effects. If the weather application calls the native AAR, the animation effect corresponding to the current weather type cannot be achieved.

[0145] The application framework layer and the Java system service layer provide application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer may include some predefined functions.

[0146] For example, Figure 4As shown in FIG. 1 , the application framework layer includes the view system, the Android graphics shading language (AGSL) library, and the shader. The shader is a shader in the drawing process. The shader includes a programmable shader (RuntimeShader).

[0147] It can be understood that Shader may also include other subclasses, and here only the two subclasses of RuntimeShader involved in the embodiments of the present application are used as examples for illustration.

[0148] The view system is the user interface system of Android applications. The view system is responsible for displaying the user interface of the application. Developers can use the view system to create a variety of user interfaces, such as buttons, text boxes, drop-down boxes, etc.

[0149] The Android system provides two ways to implement advanced graphics images. One is to use the open graphics library for embedded systems (OpenGL ES) framework to display graphics, and the other is to use the AGSL shader introduced in Android 13 for drawing.

[0150] AGSL shares most of its syntax with OpenGL shading language (GLSL) fragment shaders, but can be used to work in the Android graphics rendering system to customize the drawing of the canvas and filter View content. Android uses these shaders to implement ripples, blurs, scrolls, and stretching effects.

[0151] Optionally, the application framework layer and the Java system service layer may also include (not shown in the figure) an open graphics library for embedded systems framework (OpenGL ES framework), an activity manager, a window management service (WMS), a window animation (Window Animation) module, a resource module, a package manager service (PMS), and an input manager.

[0152] OpenGL ES is an application programming interface (API) for embedded systems. In the Android system architecture, developers can use OpenGL ES to create and manipulate 2D and 3D graphics. The Open Graphics Library framework for embedded systems can include multiple base classes for creating and manipulating graphics.

[0153] The activity manager can provide activity management services (AMS), which can be used to start, switch, and schedule system components (such as activities, services, content providers, and broadcast receivers) as well as manage and schedule application processes.

[0154] WMS can be used for window management, window animation management, surface management, and as a transfer station for the input system. WMS can create and manage windows. WMS is a service provided by the window manager. The window manager can also obtain the display size, determine whether there is a status bar, lock the screen, and capture the screen.

[0155] The window animation module is used to add corresponding animations for the display, disappearance, hiding, etc. of the window after the window is created, and display the entire animation process on the screen.

[0156] The resource module is used to load animation resources, for example, load image frames corresponding to animation resources.

[0157] The input manager can provide input management services (IMS). IMS can be used to manage system input, such as touch screen input, key input, sensor input, etc. IMS takes events from input device nodes and distributes them to appropriate windows through interaction with WMS.

[0158] Optionally, the application framework layer also includes a content provider, a view system, a phone manager, a resource manager, a notification manager, etc.

[0159] Content providers are used to store and retrieve data and make it accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, and phone books.

[0160] The view system includes visual controls, such as controls for displaying text and controls for displaying images. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0161] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, and video files.

[0162] The application layer and the application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0163] The system runtime layer may include graphics hardware, which is used to abstract the hardware. Figure 4 As shown, the graphics hardware may include an external function library (external library) and a hardware abstraction layer library (HAL library).

[0164] The external function library may include a 3D graphics processing library (e.g., an open graphics library for embedded systems (OpenGL ES)) and a business programming language. The 3D graphics processing library may be used to implement 3D graphics drawing, image rendering, synthesis, and layer processing. The business programming language is an interface between the open graphics library for embedded systems and the native platform window system.

[0165] The hardware abstraction layer library may include a hardware synthesizer (HWComposer) and a gralloc library. The hardware synthesizer is used to synthesize and display multiple layers of multiple image frames. The gralloc library is used to apply for a graphics buffer and map the graphics buffer to the address space of the application in the application layer, so that the graphics to be drawn can be written into the graphics buffer.

[0166] The hardware abstraction layer is a package of hardware drivers, providing a unified universal interface for the upper layer. The hardware abstraction layer can include camera HAL, display HAL, audio HAL, sensor HAL, etc. ( Figure 4 not shown).

[0167] Optionally, Figure 4 The external function libraries shown in may also include a 2D graphics engine (for example, skia graphics library (SGL)), a display synthesis system (surface flinger) module, a media library (MediaLibraries), a browser kernel (Webkit), an Android runtime (Android Runtime) and a core library.

[0168] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system.

[0169] The core library consists of two parts: one is the function that needs to be called by the Java language, and the other is the Android core library.

[0170] The 2D graphics engine is a drawing engine for 2D drawing. The surface flinger can also be called a layer blending module. The surface flinger module is used to blend layers and send the blended layers to the display so that the content in the window is displayed on the display. Each animation effect corresponds to a layer instance in the surface flinger module.

[0171] The kernel layer (or driver layer) is the bottom layer of the software stack. The driver layer is used to manage and control hardware devices. The driver layer can include graphics processor drivers (GPU drivers), camera drivers, display drivers, Binder drivers ( Figure 4 ), audio driver, sensor driver and other driver modules.

[0172] Figure 4 In the software architecture shown in , the application layer and the system service layer can communicate across processes. The communication method can use an inter-process communication mechanism (Binder) or rely on a Binder driver to achieve communication.

[0173] It should be understood that Figure 4 The hierarchical structure shown does not constitute a specific limitation on the software system of the device 100. In other embodiments of the present application, the software system of the device 100 may include: Figure 4 The layered architecture shown may be more or less than the architecture shown, or each layer of the software system of the device 100 may include more than Figure 4 The component structures shown may be more or less structures, and the embodiments of the present application are not limited thereto.

[0174] exist Figure 4 In the example, the weather application calls the application framework layer to access basic system services through the encapsulated AAR layer (i.e., the RaindropDistort class). The application framework layer interacts with the hardware by accessing the AGSL graphics library, and then renders the image frame (i.e., the image frame corresponding to the raindrop animation effect) to the display screen for display.

[0175] To facilitate understanding of the implementation process of creating animation effects in the embodiment of the present application, the following Figure 5 The timing diagram shown in FIG.

[0176] refer to Figure 5 , Figure 5 An example diagram of an interaction for an application to create an animation effect provided by an embodiment of the present application is shown.

[0177] It should be understood that Figure 5 The interactive process provided in can be applied to Figure 3 In. Figure 3 As an example, assume that a weather application is installed in the device 100. Figure 4 In the software architecture layer of the device 100 shown, Figure 5 The weather application in Figure 4 The application layer in the software system Figure 5 The RaindropDistort class (or RaindropRefraction class, or RaindropDeformation class) in Figure 4 The AAR layer of the software system shown (for example, located in hnthreedweather.aar).

[0178] It should be noted that Figure 4 The software system shown is described by taking the RaindropDistort class located in the AAR layer as an example, and the embodiments of the present application are not limited thereto. For example, the RaindropDistort class can also be located in or migrated to the application layer (application); the RaindropDistort class can be initialized when the weather application is started.

[0179] like Figure 5 As shown, the specific steps for the weather application to create an animation effect in the embodiment of the present application are as follows:

[0180] Step 1, the user launches the weather application.

[0181] by Figure 1A Taking the interface shown as an example, the user can click on the weather application icon 101 to open the weather application.

[0182] It should be understood that the above example is only described by taking the user clicking on the weather application as an example, and the embodiments of the present application are not limited thereto, and the weather application can also be opened in other ways. For example, the user controls the electronic device to open the weather application by voice.

[0183] In some embodiments, the user opens the weather application when the weather type at the location is rainy.

[0184] In some embodiments, the user opens a weather application and views the current weather temperature of a city of interest or a city where the user resides.

[0185] Step 2, initialize the weather application class.

[0186] Exemplarily, when the weather application is started, the encapsulated RaindropDistort class can be initialized. As mentioned above, the RaindropDistort class can be encapsulated in the AAR layer or in the weather application. Regardless of whether the RaindropDistort class is encapsulated in the AAR layer or in the weather application, the weather application can initialize it.

[0187] For example, you can call the new() function to initialize. The purpose of initialization is to obtain the RaindropDistort class. new() is a static method used to create a class instance. In other words, by initializing the RaindropDistort class and constructing the function, you can prepare for the subsequent generation of raindrop animation effects.

[0188] Step 3, initialize RuntimeShader, recorded as mShader, and pass the raindrop distortion algorithm as the Shader of RuntimeShader.

[0189] The RaindropDistort class can call RuntimeShader. Initializing RuntimeShader can be understood as creating a RuntimeShader instance.

[0190] The specific process of the raindrop distortion algorithm will be described later. For example, you can refer to Fig.11 Description.

[0191] Step 4: When the weather application detects that the real-time weather information meets the preset conditions, the weather application passes the View that needs to present the raindrop animation effect to the RaindropDistort class. This View is used to display the weather temperature text.

[0192] Step 4 is used to trigger the raindrop animation effect.

[0193] In some embodiments, the weather application may input a View that needs to present a raindrop animation effect when it detects that the real-time weather is currently raining.

[0194] In some embodiments, when the weather application detects that it is raining at the current geographic location, it may pass in a View that needs to present a raindrop animation effect, and the View is used to display the weather temperature text at the current geographic location.

[0195] In some embodiments, the weather application may input a View that needs to present a raindrop animation effect when it monitors that the time from the last rain at the current geographic location is less than or equal to a first time period threshold (e.g., 5 minutes), or when it is still raining at the current geographic location before the first time period threshold.

[0196] The triggering conditions for enabling the raindrop animation effect in the above-mentioned weather application are merely example descriptions, and the embodiments of the present application are not limited thereto.

[0197] It should be noted that if the RaindropDistort class is integrated into a weather application, the View that needs to present the raindrop animation effect must also be passed to the RaindropDistort class.

[0198] Step 5, the RaindropDistort class sets the animation parameters and starts executing the raindrop animation effect.

[0199] Optionally, animation parameters include but are not limited to: initial position of raindrops, path of raindrops falling, radius of raindrops, etc. For example, the initial position of raindrops is the position of a raindrop in the image frame where it first appears in the animation, for example, it can be expressed as the coordinates of the raindrop in the texture coordinate system where the weather temperature text is located, or expressed as the coordinates of the raindrop in the View. For example, the path of raindrops falling is the movement trajectory of a raindrop in multiple consecutive image frames in the animation, or it can be understood as the position of the raindrop in each of the multiple consecutive image frames; for example, it can be expressed as the coordinates of the raindrop in the texture coordinate system where the weather temperature text is located for each image frame, or it can be expressed as the coordinates of the raindrop in the View for each image frame. In one possible implementation, the path of raindrops falling can be the outline of the weather temperature text. In this implementation, the animation parameters also include the outline of the weather temperature text. For example, taking the raindrop in the animation as a perfect circle, the radius of the raindrop is used to determine the area of ​​a raindrop in the animation (or the number of pixels included). In a possible implementation, the greater the precipitation corresponding to the weather type, the larger the raindrop radius. For example, the raindrop radius corresponding to a rainstorm is greater than the raindrop radius corresponding to a light rain.

[0200] Optionally, the animation parameters also include the falling speed of raindrops. For example, the falling speed of raindrops is the moving speed of a raindrop in multiple consecutive image frames in the animation, or it can be understood as the speed of change of the position of the raindrop in each of the multiple consecutive image frames; for example, it can be expressed as the distance between the coordinates of the raindrop in the texture coordinate system where the weather temperature text is located for every two consecutive image frames in multiple consecutive image frames, or it can be expressed as the distance between the coordinates of the raindrop in the View for every two consecutive image frames in multiple consecutive image frames. In one possible implementation, the raindrop falling speeds corresponding to different raindrops are the same value. In another possible implementation, different raindrops correspond to different raindrop falling speeds. For example, the larger the radius of the raindrop, the faster the raindrop falls. In other implementations, for example, the greater the precipitation corresponding to the weather type, the faster the raindrops fall, such as the raindrop falling speed corresponding to heavy rain is greater than the raindrop falling speed corresponding to light rain; for another example, the greater the current wind speed, the faster the raindrops fall, such as the raindrop falling speed corresponding to a wind speed of level 13 is greater than the raindrop falling speed corresponding to a wind speed of level 6.

[0201] Optionally, the animation parameters also include animation duration, where the animation duration refers to the duration of the animation effect playback.

[0202] It should be understood that the animation parameters set above are all adjustable parameters, and the above examples are only for illustration. Those skilled in the art can set reasonable parameter values ​​based on actual needs.

[0203] Step 6: After the raindrop animation effect is turned on, it can be updated in real time according to the real-time weather information and real-time temperature information, and the dynamic raindrop animation effect can be applied to the passed in View.

[0204] Real-time weather information is information about weather that changes in real time. The advantage of updating the raindrop animation effect in real time based on the real-time weather information is that it can be dynamically updated according to the real-time weather, and the user's sense of immersion is stronger.

[0205] Exemplarily, the real-time weather information includes information about precipitation (for example, the precipitation of heavy rain is greater than that of light rain). Assume that in step 5, the real-time weather information is that it is drizzling. At this time, the real-time weather information meets the preset conditions and the raindrop animation effect is turned on. After a period of time, the real-time weather information is that it is raining heavily. According to the real-time weather information, the raindrop radius or the raindrop sliding speed can be adjusted accordingly. As a result, when the weather type is heavy rain and light rain, the user's visual experience is also significantly different, and the user's immersion is stronger.

[0206] Exemplarily, the real-time weather information includes wind speed information (for example, a wind speed of level 13 is greater than a wind speed of level 6). Assume that in step 5, the real-time weather information is that it is raining and the wind speed is level 13. At this time, the real-time weather information meets the preset conditions and the raindrop animation effect is turned on. After a period of time, the real-time weather information is that it is raining and the wind speed is level 6. The raindrop falling speed can be adjusted accordingly according to the real-time weather information. As a result, when the wind speed is level 13 and level 6 respectively, there is a clear area for the raindrop falling speed, and the user's visual experience is also significantly different, and the user's immersion is stronger.

[0207] Step 7, the weather application triggers the stop of the raindrop animation effect.

[0208] Understandably, the end of the raindrop animation effect is determined by the weather application.

[0209] In some embodiments, when the weather application monitors that the real-time weather does not meet the preset conditions, the raindrop animation effect is stopped. For example, the real-time weather is that it has stopped raining, or it is raining at the current geographical location, or it has stopped raining at the current geographical location for more than the first time period threshold.

[0210] In some embodiments, when the weather application is placed in the background or the user exits the interface of the weather application, the raindrop animation effect stops.

[0211] In some embodiments, when the user switches to the interface corresponding to the geographical location where it is not raining, the raindrop animation effect is stopped. For example, the interface before the user switches is the first interface, the first interface is used to display the weather information corresponding to the first geographical location, the first interface includes a first text for indicating the first temperature information, and the display effect of the first text is determined according to the first real-time weather information. The first geographical location is currently raining, that is, the first real-time weather meets the preset conditions, so the first interface displays the first text with the raindrop animation effect. When the user switches to the second interface, the second interface is used to display the weather information corresponding to the second geographical location, the second interface includes a second text for indicating the second temperature information, and the display effect of the second text is determined according to the second real-time weather information. The second geographical location is not currently raining, that is, the second real-time weather information does not meet the preset conditions, and the second interface displays the second text without the raindrop animation effect. Thus, when switching to the second interface, the raindrop animation effect is stopped.

[0212] It can be understood that the above conditions for triggering the stopping of the raindrop animation effect are merely exemplary descriptions, and the embodiments of the present application are not limited thereto.

[0213] Optionally, the weather application calls an interface to stop the raindrop animation effect.

[0214] Step 8. Stop the raindrop animation effect.

[0215] The RaindropDistort class stops generating the raindrop animation effect when it receives the information from the weather application to stop the raindrop animation effect.

[0216] It should be understood that Figure 5 The sequential interaction process shown in the figure is only introduced for the sake of ease of understanding and is an exemplary description. It is not intended to limit the display method of the animation effect of the embodiment of the present application to Figure 5 The scene shown in .

[0217] Combination of the above Figure 5 The following describes the sequential interaction process between the weather application and the RaindropDistort class. Figure 6 , describes in detail the display method of the animation effect of the embodiment of the present application.

[0218] See also Figure 6 , Figure 6 A flowchart of a method 200 for displaying animation effects provided in an embodiment of the present application is shown.

[0219] like Figure 6 As shown, the method includes:

[0220] S201, in response to a first operation of opening an application, displaying a first interface of the application.

[0221] For example, the application may be a weather program application, and the first operation may be an operation of clicking an icon of the weather application.

[0222] The first interface includes a first text for indicating the first temperature information, for example, Figure 1D The interface shown includes first text representing first temperature information: 20°C.

[0223] Optionally, the first interface also includes a static picture and / or animation effect and / or text for representing the first real-time weather information.

[0224] Specifically, the RaindropDistort class obtains a view from the weather application, which is used to display the current weather temperature. This view represents the View passed in by the weather application that needs to present the raindrop animation effect. For example, as mentioned above Figure 5 As shown, the weather application passes the View that needs to present the raindrop animation effect to the RaindropDistort class.

[0225] Exemplarily, the first view is Figure 1B The real-time temperature control 1041 shown has a temperature text displayed as: 20°C.

[0226] When the weather application determines that a raindrop distortion effect needs to be added to the first view, it passes the first view to the RaindropDistort class.

[0227] The embodiment of the present application does not specifically limit the judgment conditions of the weather application program.

[0228] Optionally, in some embodiments, step 501 includes: when the current weather is raining or it is still raining before the first time period threshold, obtaining the above view from the weather application through the RaindropDistort class. In this way, when the current weather is raining or it is still raining before the first time period threshold, the weather application will trigger the start of the raindrop animation effect, that is, pass the required view to the raindrop distortion class, so as to achieve the corresponding raindrop animation effect and improve the user experience.

[0229] S202, when the first real-time weather information meets a preset condition, the first text is displayed using a weather animation effect (or a raindrop animation effect is applied to a view corresponding to the first text for display).

[0230] Specifically, taking the raindrop animation effect as an example, the raindrop animation effect is generated by a programmable shader based on the view corresponding to the first text and the center position and radius of the raindrop overlapping the first text. Specifically, how to generate the raindrop animation effect by a programmable shader will be described below.

[0231] The raindrop animation effect includes: radial distortion effect or radial deformation effect of the raindrops overlapping the first character on the first character. It can be understood that in the raindrop animation effect involved in the embodiment of the present application, the raindrops are transparent, and the raindrops are indirectly seen through the distortion of the raindrops on the first character.

[0232] Among them, the first real-time weather information may include the current weather, the current air quality, the current temperature, etc. The preset conditions include: it is currently raining. When the current weather is raining, the first real-time weather meets the preset conditions. Alternatively, the preset conditions include: the current time from the last rain is less than or equal to the first time period threshold (for example, 5 minutes), or it is still raining before the first time period threshold. It is understandable that generally for a period of time after the rain stops, objects that have just been rained on will still have raindrops remaining. Using the raindrop animation effect to display the first text within the first time period threshold can make the user feel more intuitively that it has just rained, thereby enhancing the user's immersive experience.

[0233] It can be understood that the display effect of the first text is determined according to the first real-time weather information. Figure 1D As shown in the real-time weather control 106, it can be seen that it is currently raining in Pukou District, so the first real-time weather information meets the preset condition, therefore, Figure 1D The real-time temperature control 1043 shown displays “20° C” with a raindrop animation effect.

[0234] It can be understood that displaying the raindrop animation effect means: gradually (or frame by frame) displaying or playing the content of each frame on the display screen of the electronic device, and each frame includes the content of radial distortion or deformation of the temperature text.

[0235] In an embodiment of the present application, after obtaining the view (used to display the temperature text) transmitted by the weather application, a raindrop animation effect is generated through a programmable shader, and the raindrop animation effect is applied to the view and presented to the user, that is, a raindrop animation effect for the temperature text is provided, so that the user can immerse himself in the feeling of a rainy day when checking the weather temperature (after an object is drenched in rain, raindrops refract light), which can achieve an immersive experience of natural weather, conform to the user's feelings about rainy days, and enrich the user's visual experience. If the method of constructing an animation effect through OpenGL cannot be implemented for a certain View, it is equivalent to covering a layer on the View, and the implementation process is relatively complicated, the workload is large, there is a visual illusion, and the obtained effect may not be realistic enough. Compared with the method through OpenGL, the method of constructing a raindrop animation effect through a programmable shader in the embodiment of the present application is a raindrop animation effect constructed for a specific View, so that the animation effect obtained is more realistic and natural, and the user's visual effect is better.

[0236] The following describes in detail how to display the raindrop animation effect in combination with the schematic diagram and Examples 1 to 5.

[0237] Example 1: The raindrop animation effect is displayed through a sequence of frames, which includes a first image frame, and the first image frame is used to display the radial distortion effect of the first raindrop on the first text. The first local area in the first text overlaps with the first raindrop, and the first local area is distorted; in the first local area, the closer the distance to the center position of the first raindrop is, the higher the degree of distortion.

[0238] In the above scheme, the closer the pixel is to the center position of the first raindrop, the higher the degree of distortion is, so that the radial distortion effect of the raindrop on the text is closer to nature, and the user's immersive experience is enhanced.

[0239] Fig. 7A and Figure 7B Schematic diagrams showing examples of radial distortion effects of raindrops on temperature text. Fig. 7A Taking the real-time temperature control 1042 described above as an example, Figure 7BTake the real-time temperature control 1043 described above as an example. The real-time temperature control 1042 and the real-time temperature control 1043 are two exemplary image frames in the sequence frames for displaying the raindrop animation effect. In order to more intuitively see the radial distortion effect, Fig. 7A and Figure 7B The dotted lines are used to draw the outline of the temperature text before distortion.

[0240] like Fig. 7A As shown, taking raindrop #2 as an example, of the two arc-shaped dotted lines in raindrop #2, the upper arc-shaped dotted line is closer to the center of raindrop #2, and the lower arc-shaped dotted line is farther from the center of raindrop #2. Therefore, the distortion degree of the upper arc-shaped dotted line is higher than that of the lower arc-shaped dotted line.

[0241] Example 2: When the center position of the first raindrop overlaps with the first text, the first local area after distortion is larger than the first local area before distortion. In other words, the number of pixels included in the first local area after distortion is larger than the number of pixels included in the first local area before distortion. When the center position of the first raindrop does not overlap with the first text, the first local area after distortion is smaller than the first local area before distortion. In other words, the number of pixels included in the first local area after distortion is smaller than the number of pixels included in the first local area before distortion.

[0242] For example, Fig. 7A As shown, taking the two distorted local areas in the image frame in the real-time temperature control 1042 as an example, the user's visual experience is generally that the two local areas are distorted by raindrops. At this time, the raindrops are like a magnifying glass, magnifying the two local areas. In one implementation, Fig. 7A The raindrop #1 and raindrop #2 shown in the figure magnify the two local areas, the center position of raindrop #1 overlaps with "2", and the center position of raindrop #2 overlaps with "C". The local area before distortion (the area surrounded by two dotted lines and a solid circle) is smaller than the local area after distortion (the white area within the solid circle).

[0243] For example, Figure 7B As shown, taking the two distorted local areas in the image frame in the real-time temperature control 1043 as an example, the user's visual experience is generally that the two local areas are distorted by raindrops. At this time, the raindrops are like a magnifying glass, magnifying the background of the temperature text, thereby shrinking the two local areas. In one implementation, Figure 7BThe raindrop #3 and raindrop #4 shown in the figure reduce the two local areas, and the center positions of raindrop #3 and raindrop #4 do not overlap with "2". The local area before distortion (the area surrounded by the dotted and solid circles and not overlapping with the center position of raindrop #3 or raindrop #4) is smaller than the local area after distortion (the white area in the solid circle).

[0244] In the above scheme, when the center position of the first raindrop overlaps with the first character, the first raindrop amplifies the first character, and when the center position of the first raindrop does not overlap with the first character, the first raindrop amplifies the background of the first character and shrinks the first character accordingly. This is consistent with the refraction effect of raindrops on light in the natural environment, making the radial distortion effect of raindrops on characters closer to nature and enhancing the user's immersive experience.

[0245] Optionally, Example 2 can be combined with Example 1.

[0246] Example 3, based on Example 1 and / or Example 2, the first image frame is further used to display the radial distortion effect of the second raindrop on the first text. The second raindrop overlaps with the first raindrop, and the first local area belongs to the area where the second raindrop overlaps with the first raindrop. The degree to which the first local area is distorted is determined based on the degree to which the first raindrop distorts the first local area and the degree to which the second raindrop distorts the first local area.

[0247] Fig. 8A and Figure 8B 2 and 3 show exemplary schematic diagrams of two overlapping raindrops overlapping with temperature text. Fig. 8A and Figure 8B In the figure, the solid circle represents the water drop, the black dot is the center of the raindrop, the dotted line is the outline of the temperature text before distortion, and the area filled with diagonal lines is the area where the temperature text and two raindrops overlap. Fig. 8A As shown, the area filled with left oblique lines can be understood as an example of the first local area in Example 3; Figure 8B As shown, the area filled with right oblique lines can be understood as an example of the first local area in Example 3.

[0248] It should be noted that Fig. 8A and Figure 8B The positional relationship between the center positions of the two raindrops and the temperature text shown in FIG. 1 (for example, the center positions of the two raindrops may overlap with the outline of the temperature text) is only an example. Fig. 8A and Figure 8B The shape of the character outline shown in FIG. 1 (eg, an arc, a right angle, etc.) is only an example. Fig. 8A and Figure 8B Only two water drops (for example, it can also be 3 or 4 rain drops) are used for illustration, and it does not limit the protection scope of the present application.

[0249] Example 3-1, based on Example 3, when the degree of overlap between the second raindrop and the first raindrop meets the overlap preset condition, the second raindrop and the first raindrop converge into the fifth raindrop #1. For example, the degree of overlap between the second raindrop and the first raindrop meets the overlap preset condition including: the ratio of the area of ​​the overlap between the second raindrop and the first raindrop to the area of ​​the first raindrop or the second raindrop is greater than or equal to a ratio threshold (for example, 50%), or the center position of the second raindrop overlaps with the first raindrop, or the center position of the first raindrop overlaps with the second raindrop.

[0250] Example 4, the raindrop animation effect also includes: a radial distortion effect on the first text when the raindrops overlapping the first text slide along the sliding path. For example, the sliding path is the outline of the first text (referred to as the first sliding path). Alternatively, the sliding path is a straight line intersecting the first text (referred to as the second sliding path), which may be parallel to the vertical line of the View or have an acute angle with the vertical line. Alternatively, the sliding path may be a combination of the first sliding path and the second sliding path, for example, the raindrops first slide along the outline of the first text to the end of the first text (such as the bottom of "0"), and then fall vertically.

[0251] The above scheme can simulate the scene of raindrops sliding down that is likely to occur in a natural environment by displaying the radial distortion effect on the first text when the raindrops slide down along the sliding path, thereby enhancing the user's immersive experience.

[0252] Example 4-1, the sliding path is the first sliding path, that is, the outline of the first text. The raindrop animation effect is displayed through a sequence frame, and the sequence frame includes multiple image frames, and the multiple image frames are used to display the third raindrop sliding along the first sliding path. In the process of the third raindrop sliding along the outline of the first text, the third raindrop overlaps the first text.

[0253] For example, when the center position of the third raindrop overlaps with the first text, in each of the multiple image frames, the third local area after distortion is larger than the third local area before distortion, wherein the third local area is the area where the third raindrop overlaps with the first text.

[0254] Fig. 9A , Fig. 9B and Fig. 9C Schematic diagrams of multiple image frames for displaying the animation effect of raindrops sliding down along the first sliding path are shown respectively. It should be noted that: Fig. 9A , Fig. 9B and Fig. 9C The multiple image frames in the sequence are not limited to multiple continuous image frames in the sequence of frames. Fig. 9A , Fig. 9B and Fig. 9CThe direction of the dotted arrows in the image represents the playback order of multiple image frames in the sequence frame, and the solid arrow in each image frame points to the position of the current raindrop. Fig. 9B In the multiple image frames shown, the enlarged radial distortion effect of the raindrops on “0” moves downward along the outline of “0”, and the user can visually experience that the raindrops hit the “0” and slide down along the outline of “0”.

[0255] For another example, when the center position of the third raindrop does not overlap with the first text, in each of the multiple image frames, the third local area after distortion is smaller than the third local area before distortion; wherein the third local area is the area where the third raindrop overlaps with the first text.

[0256] For example, Fig. 9A In the multiple image frames shown, the radial distortion effect of the raindrops on the “0” moves downward along the outline of the “0”, and the user can visually experience that the raindrops slide down along the outer outline of the “0”.

[0257] For example, Fig. 9C In the multiple image frames shown, the raindrops first hit the upper left part of "2" and present an enlarged radial distortion effect, and then the radial distortion effect moves along the arc of "2", and the user can visually experience the raindrops sliding along the arc contour of "2"; when the raindrops slide to the end of "2" (the 4th image frame), the raindrops present a reduced radial distortion effect at the end of "2", and then the reduced radial distortion effect is significantly weakened (the 5th image frame), and the user can visually experience the raindrops sliding at the end of "2" and leaving "2".

[0258] The above scheme can simulate the scene of raindrops sliding along the outline of an object in a natural environment by displaying the effect of raindrops sliding along the outline of the first character and radially distorting the first character, thereby enhancing the user's immersive experience.

[0259] Example 4-2, the sliding path is the second sliding path, and the second sliding path intersects with the first text. The raindrop animation effect is displayed through a sequence frame, and the sequence frame includes a plurality of image frames, and the plurality of image frames are used to display the fourth raindrop sliding along the second sliding path.

[0260] For example, when the center position of the fourth raindrop overlaps with the first text, in each of the multiple image frames, the fourth local area after distortion is smaller than the fourth local area before distortion, and the fourth local area is the area where the fourth raindrop overlaps with the first text.

[0261] For another example, when the center position of the fourth raindrop does not overlap with the first text, in each of the multiple image frames, the fourth local area after distortion is larger than the fourth local area before distortion, and the fourth local area is the area where the fourth raindrop overlaps with the first text.

[0262] Fig. 10A and Fig. 10B Schematic diagrams of multiple image frames for displaying the animation effect of raindrops sliding down along the second sliding path are shown respectively. Fig. 10A As shown in the figure, the arrow points to the sliding path, which intersects with "2" at three local areas. Fig. 10B The multiple image frames in the sequence are not limited to multiple continuous image frames in the sequence of frames. Fig. 10B The direction of the dotted arrow in the image indicates the order in which the multiple image frames are played in the sequence of frames, and the solid arrow in each image frame points to the position of the current raindrop. In the multiple image frames, the 1st to 3rd image frames are used to display the first intersection of the sliding path of the raindrop with "2", the 4th to 6th image frames are used to display the second intersection of the sliding path of the raindrop with "2", and the 7th to 9th image frames are used to display the third intersection of the sliding path of the raindrop with "2". Taking the 7th to 9th image frames as an example, in the 7th image frame, the radial distortion effect of the raindrop is that the bottom edge of "2" is partially reduced and the upper edge is distorted, and the user can visually experience that the raindrop has just hit the bottom edge; in the 8th image frame, the radial distortion effect of the raindrop is that the bottom edge of "2" is partially enlarged and the upper and lower edges are distorted, and the user can visually experience that the center position of the raindrop is located on the bottom edge of "2"; in the 9th image frame, the radial distortion effect of the raindrop is that the bottom edge of 2 is partially reduced and the lower edge is distorted, and the user can visually experience that the raindrop is about to slide off the bottom edge of "2". It can be understood that between the 3rd image frame and the 4th image frame, or between the 6th image frame and the 7th image frame, multiple other image frames can also be included, in which the raindrops slide on the background of the temperature text.

[0263] The above scheme, by showing the effect of the raindrop's sliding path intersecting with the first character and radially distorting the first character, can simulate the scene of raindrops hitting an object in a natural environment, flowing in a local area on the surface of the object and then sliding down from the object, thereby enhancing the user's immersive experience.

[0264] In combination with Example 4, Example 4-1 or Example 4-2, in one possible implementation, the closer the sliding path is to the vertical line of the first interface, the faster the sliding speed of the raindrops overlapping the first text; in another possible implementation, the larger the radius of the raindrops, the faster the sliding speed of the raindrops; in another possible implementation, the sliding speed of the raindrops on the temperature text is less than the sliding speed of the raindrops on the background of the temperature text.

[0265] Optionally, Example 4, Example 4-1, or Example 4-2 may be combined with one or more of Examples 1 to 3.

[0266] Example 5: The raindrop animation effect is displayed through a sequence frame, the sequence frame includes a plurality of image frames, and the plurality of image frames are used to display that the third raindrop slides along the third sliding path, and the third raindrop overlaps with the fourth raindrop during the process of the third raindrop sliding along the third sliding path. The third raindrop and the fourth raindrop converge into the fifth raindrop #2, and then the fifth raindrop #2 slides along the fifth sliding path. Optionally, the fifth sliding path is randomly determined, or determined according to the third sliding path.

[0267] Example 5-1, based on Example 5, the plurality of image frames are further used to display that a fourth raindrop slides down along a fourth sliding path; in the process of the third raindrop sliding down along the third sliding path, and in the process of the fourth raindrop sliding down along the fourth sliding path, the third raindrop overlaps with the fourth raindrop. Optionally, the fifth sliding path is randomly determined, or the fifth sliding path is determined according to the third sliding path and / or the fourth sliding path.

[0268] The above scheme simulates the scene that is likely to appear in the natural environment by displaying the animation of two raindrops overlapping and converging into a new raindrop sliding down, thereby enhancing the user's immersive experience.

[0269] Optionally, the third raindrop and the fourth raindrop converge into a fifth raindrop #2 when the degree of overlap of the third raindrop and the fourth raindrop meets a preset overlap condition. For a description of the preset overlap condition, please refer to Example 3-1.

[0270] It can be understood that the third sliding path can be the first sliding path and / or the second sliding path, and the fourth sliding path can be the first sliding path and / or the second sliding path.

[0271] Optionally, in some embodiments of method 200 , a raindrop animation effect is generated by a programmable shader. For example, the raindrop animation effect is generated by a programmable shader based on a view corresponding to the first text, and a center position and radius of a raindrop overlapping the first text.

[0272] Example 6: Pass the view corresponding to the first text to the raindrop distortion class; the raindrop distortion class generates the first text with the raindrop animation effect based on the texture of the first text, the center position and radius of the raindrops overlapping the first text for each image frame in the sequence of frames for displaying the raindrop animation effect through a programmable shader, wherein the texture of the first text is included in the view corresponding to the first text. The following is a further solution for the raindrop distortion class to generate the first text with the raindrop animation effect for Example 6, Example 6-1 and Example 6-2.

[0273] It can be understood that the first text involved in "the texture of the first text", "the view corresponding to the first text" and "the center position and radius of the raindrop overlapping with the first text" is the first text before distortion, and the first text involved in "the first text with raindrop animation effect" is the first text after distortion.

[0274] In the above scheme, after the application passes the view corresponding to the first text to the raindrop distortion class, the raindrop distortion class can call the programming shader to generate a raindrop animation effect, so as to apply the generated raindrop animation effect to the view to obtain a rich visual experience.

[0275] Example 6-1, for each image frame, the raindrop distortion class obtains the color value of the distorted first pixel based on the texture, center position, radius of the first text and the texture coordinates of the first pixel in the first text that overlaps with the raindrop; based on the color value of the distorted first pixel and the color value of the second pixel in the first text that does not overlap with the raindrop, the first text with a raindrop animation effect is generated.

[0276] Example 6-2, for each image frame, the raindrop distortion class obtains the distortion parameter of the first pixel based on the distance between the texture coordinates of the first pixel and the center position, and the radius; obtains the distorted texture coordinates of the first pixel according to the texture coordinates of the first pixel and the distortion parameter; uses the color value corresponding to the distorted texture coordinates of the first pixel in the texture of the first text as the color value of the first pixel after distortion; generates the first text with a raindrop animation effect according to the color value of the first pixel after distortion and the color value of the second pixel in the first text that does not overlap with the raindrop.

[0277] In the above scheme, after the application passes the view corresponding to the first text to the raindrop distortion class, the raindrop distortion class can call the programming shader to generate a raindrop animation effect, so as to apply the generated raindrop animation effect to the view to obtain a rich visual experience.

[0278] Example 7, with Fig. 8A For example, two raindrops are the first raindrop (the raindrop on the left, corresponding to the first center position and the first radius) and the second raindrop (the raindrop on the right, corresponding to the second center position and the second radius). The first pixel is the pixel in the first text that overlaps with the first raindrop. The first pixel includes the third pixel and the fourth pixel. The third pixel overlaps with the second raindrop (that is, the pixel in the area filled with the left oblique line), and the fourth pixel does not overlap with the second raindrop.

[0279] Among them, the color value of the distorted fourth pixel is obtained by referring to the method of obtaining the color value of the distorted first pixel in Example 6-1 or Example 6-2. The color value of the distorted third pixel needs to be obtained in combination with the center position and radius of the two raindrops. For example, based on the distance between the texture coordinates of the third pixel and the first center position and the first radius, the first distortion parameter of the third pixel is obtained, and the first distortion texture coordinate of the third pixel is obtained according to the texture coordinates of the third pixel and the first distortion parameter; and based on the distance between the texture coordinates of the third pixel and the second center position and the second radius, the second distortion parameter of the third pixel is obtained, and the second distortion texture coordinate of the third pixel is obtained according to the texture coordinates of the third pixel and the second distortion parameter. The third distortion texture coordinate of the third pixel is obtained according to the first distortion texture coordinate and the second distortion texture coordinate. The color value corresponding to the third distortion texture coordinate in the texture of the first text is used as the color value of the distorted third pixel.

[0280] In the above scheme, when the first character overlaps with two raindrops, for the third pixel overlapping with both the first raindrop and the second raindrop, the color value of the distorted third pixel is determined according to the two raindrops; for the fourth pixel overlapping only with the first raindrop, the color value of the distorted third pixel is determined according to the first raindrop. The radial distortion effect of raindrops can be displayed more accurately according to the overlap of the first character and the raindrops.

[0281] Optionally, in addition to the texture of the first text, the center position and radius of the raindrops overlapping the first text, the first text with a raindrop animation effect may be generated according to the initial position of the raindrops, the speed at which the raindrops slide down, etc. The center position and radius of the raindrops overlapping the first text, the initial position of the raindrops, and the speed at which the raindrops slide down may be updated in real time according to the real-time weather information. For details, see Figure 5 Description of step 6 in the flowchart shown.

[0282] Optionally, the view corresponding to the first text may be updated in real time according to the real-time temperature information.

[0283] The following will be combined Fig.11 The flowchart shown in the figure introduces the specific implementation method of the raindrop distortion algorithm in the embodiment of the present application. Fig.11 A flow chart of a raindrop warping algorithm 300 is shown.

[0284] S301, input the texture coordinates (u, v) of the pixel, the texture of the temperature text, and the center position and radius of the raindrop to the programmable shader.

[0285] Among them, temperature text such as Figure 1B In the figure, the pixels are those included in the temperature text.

[0286] It can be understood that the programmable shader in this application uses a raindrop distortion algorithm to generate each image frame in the sequence of frames. Raindrop #1 to raindrop #n are raindrops corresponding to an image frame in the sequence of frames. In addition, it is necessary to update the information of raindrops for each image frame, including updating the number of raindrops, center position, and radius. Among them, taking raindrop #i as an example, (xi, yi) can be the coordinates in the view corresponding to the temperature text. Exemplarily, the position of raindrop #i can be determined by (xi, yi) and ri.

[0287] Exemplarily, raindrops in each image frame can be divided into two categories. Taking a sequence of frames including N image frames as an example, the i+1th image frame can include raindrops that appear for the first time, and / or raindrops that have appeared on the i-th image frame, 1≤i≤N and i and N are integers.

[0288] The raindrops that first appear in the i+1th image frame may be randomly generated, and accordingly, the number, center position (or initial position of the raindrops that first appear) and radius of the raindrops may be randomly generated. Preferably, the initial position of the raindrops is close to the upper edge of the view corresponding to the temperature text, so as to increase the probability of the raindrops overlapping the temperature text, thereby increasing the possibility of showing the radial distortion effect of the raindrops.

[0289] Alternatively, the center position of the raindrops is randomly generated, and the number and radius can be determined according to the current weather (e.g., precipitation or air humidity, etc.). For example, the greater the precipitation corresponding to the weather type, the greater the number of raindrops and / or the greater the radius of the raindrops. For example, the number and radius of raindrops corresponding to a heavy rain weather type are greater than the number and radius of raindrops corresponding to a light rain weather type. For another example, the greater the air humidity, the greater the number of raindrops and / or the greater the radius of the raindrops.

[0290] Alternatively, the raindrop that first appears in the (i+1)th image frame may also be a new raindrop formed by the overlapping raindrops on the (i)th image frame. Accordingly, the center position and radius of the raindrop may be determined based on the center position and radius of the overlapping raindrops (the specific implementation method will be introduced below).

[0291] The center position of the raindrop that has appeared on the i-th image frame on the i+1-th image frame needs to be determined based on the center position of the raindrop on the i-th image frame. Optionally, if N image frames show the sliding process of the raindrop, the center position of the raindrop that has appeared on the i-th image frame on the i+1-th image frame needs to be determined based on the center position of the raindrop on the i-th image frame and the sliding path of the raindrop (the specific implementation method will be described below).

[0292] S302, determining whether the pixel is within a raindrop.

[0293] The raindrops are raindrops corresponding to the current image frame.

[0294] Exemplarily, the pixel texture coordinates and the position pixel of the raindrop can be used to determine whether the pixel is within the raindrop. If the pixel texture coordinates are within the raindrop, the pixel is the first pixel in the first text described above that overlaps with the raindrop; otherwise, the pixel is the second pixel in the first text described above that does not overlap with the raindrop. For the first pixel, S303 is subsequently executed; for the second pixel, S304 is subsequently executed.

[0295] S303, texture distortion.

[0296] For example, the color value of the distorted first pixel may be obtained by referring to the method in Example 6-1 or Example 6-2.

[0297] Exemplarily, the color value of the first pixel is obtained by the following code:

[0298] color0 = texture(A,uv);

[0299] Among them, color0 is the color value of a certain pixel (for example, pixel #i), A is the texture of the temperature text, uv is the texture coordinate of pixel #i, and the texture() function is used to obtain the color value of the texture coordinate of pixel #i in the text of the temperature text.

[0300] Then calculate the distortion parameters through the following code:

[0301] float ratio=clamp(length(uv-center) / r,0.0,1.0);

[0302] Among them, float ratio is the distortion parameter, uv is the texture coordinate of pixel #i, center is the texture coordinate of the center position of a raindrop, r is the radius of the raindrop, length() function is used to calculate the distance between uv and center, and length(uv-center) / r represents the ratio of the current distance from uv to center to r. The clamp() function is used to limit the ratio between 0.0 and 1.0. When length(uv-center) / r=0.0, float ratio=0.0, when length(uv-center) / r≥1.0, float ratio=1.0, that is, the pixels outside the water droplet are not distorted; when 0.0<length(uv-center) / r<1.0, float ratio=length(uv-center) / r. This ensures that the distortion parameters of the first pixel in the water droplet are all less than 1.

[0303] It can be understood that the greater the distance between the first pixel and the center position of the raindrop, the greater the value of length(uv-center) / r, the greater the value of the distortion parameter of the first pixel, and the lower the distortion degree of the first pixel; conversely, the smaller the distance between the first pixel and the center position of the raindrop, the smaller the value of the distortion parameter of the first pixel, and the higher the distortion degree of the first pixel. Therefore, as described above, the closer the distance to the center position of the raindrop is, the higher the distortion degree of the pixel is.

[0304] Then get the distorted coordinates of the first pixel by the following code:

[0305] vec2 new_uv=float ratio*(uv–center)+center;

[0306] Among them, float ratio is the distortion parameter, uv is the texture coordinate of pixel #i, center is the texture coordinate of the center position of a raindrop, new_uv is the distortion coordinate, and vec2 means that new_uv is a vector of 2 elements.

[0307] Finally, the color value of the distorted coordinates is obtained by the following code:

[0308] color = texture(A, new_uv);

[0309] Among them, new_uv is the distorted texture coordinate of pixel #i, A is the texture of the temperature text, and the texture() function is used to obtain the color value of the distorted texture coordinate of pixel #i in the temperature text.

[0310] Fig. 12A , Fig. 12B , Fig. 12C and Fig.12D Schematic diagrams of texture distortion are shown respectively. Fig. 12A , Fig. 12B , Fig. 12C and Fig.12D In the figure, the solid circle is a water drop, the black dot is the center of the water drop, r is the radius of the water drop, the thick solid line is the outline of the temperature text, uv is the texture coordinate of the pixel before texture distortion, new_uv is the texture coordinate of the pixel after texture distortion, and the dotted arrow from uv to new_uv indicates that new_uv is obtained from uv. The thick solid lines in the figure on the left are the outlines of the temperature text before distortion, and the thick solid lines in the figure on the right are the outlines of the temperature text after distortion.

[0311] in, Fig. 12A It can be understood as Figure 7B Schematic diagram of the texture distortion corresponding to the radial distortion effect caused by raindrop #4 on "2"; Fig. 12BIt can be understood as Fig. 7A Schematic diagram of the texture distortion corresponding to the radial distortion effect caused by raindrop #1 on "2"; Fig. 12C It can be understood as Figure 7B Schematic diagram of the texture distortion corresponding to the radial distortion effect caused by raindrop #3 on "2"; Fig.12D It can be understood as Fig. 7A Illustration of the texture distortion corresponding to the radial distortion effect caused by raindrop #2 on "C".

[0312] S304 , outputting the color of the distorted texture coordinates for the first pixel; and outputting the color of the texture coordinates for the second pixel.

[0313] Optionally, when at least two raindrops appear in the same image frame, it may be determined whether every two raindrops overlap.

[0314] For example, assuming that raindrop #1 and raindrop #2 are on the same image frame, the position of raindrop #1 on the view corresponding to the temperature text can be determined based on the center position and radius of raindrop #1. Similarly, the position of raindrop #2 on the view corresponding to the temperature text can be determined. If the positions of the two raindrops on the view overlap, it means that the two raindrops overlap; otherwise, they do not overlap.

[0315] In the case where at least two raindrops overlap, how to generate a raindrop animation effect can include two implementation methods. In one implementation method, the area where at least two raindrops overlap does not overlap with the temperature text, then the raindrop animation effect can be achieved according to the algorithms from S301 to S304 above; in another implementation method, the area where at least two raindrops overlap overlaps with the third pixel of the temperature text (see Example 7), then the pixels in the temperature text except the third pixel can be processed according to the algorithms from S301 to S304 above. For the processing of the third pixel, in addition to referring to the algorithms from S301 to S304 above, a further solution needs to be given to S303. The following is an example of two raindrops overlapping (for example Fig. 8A or Figure 8B As shown), a further solution is given based on S303.

[0316] For example, first follow the code involved in S303:

[0317] float ratio=clamp(length(uv-center) / r,0.0,1.0);

[0318] vec2 new_uv=float ratio*(uv–center)+center;

[0319] The first distorted texture coordinate new_uv#1 and the second distorted texture coordinate new_uv#2 of the third pixel involved in Example 7 are calculated and then the new_uv#1 and new_uv#2 are averaged to obtain the third distorted texture coordinate new_uv#3.

[0320] Then follow the code involved in S303:

[0321] color = texture(A, new_uv);

[0322] The color value color#3 of new_uv#3 is calculated, and then color#3 is used as the color value of the third pixel.

[0323] Optionally, when at least two raindrops overlap, it can be determined whether the at least two raindrops will converge. Taking the overlap of two raindrops as an example, for example, it is determined whether the two overlapping raindrops meet a preset overlap condition. If so, they converge into a new raindrop; otherwise, they do not converge.

[0324] For the case where the at least two raindrops converge into a new raindrop (such as Example 3-1, Example 5, and Example 5-1), the center position and radius of the new raindrop can be calculated. After the at least two raindrops converge into a new raindrop, the distortion effect of the new raindrop on the temperature text can be implemented by referring to the algorithms of S301 to S304.

[0325] For example, the center position of the new raindrop is obtained by averaging the center positions of at least two raindrops. For example, the sum of the areas of at least two raindrops is obtained by the radii of the two raindrops as the area of ​​the new raindrop, thereby obtaining the radius of the new raindrop.

[0326] In a possible implementation, when two overlapping raindrops satisfy the overlapping preset condition, a new raindrop is displayed in the next image frame of the corresponding image frame. For example, the sequence of frames includes a first image frame and a second image frame, the second image frame is the next frame of the first image frame, the raindrops overlapping with the first text in the first image frame include the first raindrops and the second raindrops that satisfy the overlapping preset condition, and the raindrops overlapping with the first text in the second image frame include the fifth raindrop #1 (a raindrop formed by the first raindrop and the second raindrop). As described in S301, it is necessary to update the raindrop information for each image frame, and this implementation can also be understood as an implementation of determining the raindrop information of each image frame.

[0327] In another possible implementation of updating the raindrop information for each image frame in S301, a sliding path corresponding to the raindrop overlapping the first character is obtained; and for each image frame in the sequence of frames, the center position and radius of the raindrop overlapping the first character are determined according to the sliding path. Several examples of obtaining the sliding path corresponding to the raindrop overlapping the first character are given below.

[0328] As an example, first obtain the outline of the first text, optionally through the Android native interface, and then determine the sliding path according to the outline of the first text, for example, select part or all of the outline of the temperature text as the sliding path, for example, obtain the first sliding path described in Example 4.

[0329] As another example, the sliding path is randomly generated, for example, the second sliding path described in Example 4 is obtained.

[0330] As yet another example, the sliding path is determined according to a preset sliding path, such as the sliding path described in programmable shader preconfiguration example 4.

[0331] As another example, the sliding path of a new raindrop is determined based on the sliding paths of the two raindrops before convergence. For example, the raindrop overlapping with the first character is the fifth raindrop, and the fifth raindrop is formed by the convergence of the third raindrop and the fourth raindrop that meet the overlapping preset condition. The sliding path corresponding to the third raindrop is the third sliding path, and the sliding path corresponding to the fourth raindrop is the fourth sliding path. The fifth sliding path corresponding to the fifth raindrop is determined according to the third sliding path and / or the fourth sliding path. For a description of the overlapping preset condition, please refer to Example 3-1. For example, if the ratio of the area where the second raindrop overlaps with the first raindrop to the area of ​​the first raindrop is ≥ the ratio threshold, or the center position of the first raindrop overlaps with the second raindrop, then the fifth sliding path is the third sliding path. For another example, if the ratio of the area where the second raindrop overlaps with the first raindrop to the area of ​​the second raindrop is ≥ the ratio threshold, or the center position of the second raindrop overlaps with the first raindrop, then the fifth sliding path is the fourth sliding path. For another example, if the third sliding path and the fourth sliding path are both straight lines, then the fifth sliding path is the angle bisector of the angle between the third sliding path and the fourth sliding path.

[0332] As described in S301 above, the center position of the raindrop that has appeared on the i-th image frame on the i+1 image frame needs to be determined based on the center position of the raindrop on the i-th image frame and the sliding path of the raindrop. For example, the sequence of frames includes the third image frame and the fourth image frame, and the fourth image frame is the next frame of the third image frame. For the third image frame (i.e., the i-th image frame), the third center position and the third radius of the raindrop overlapping with the first text are obtained; for the fourth image frame (i.e., the i+1-th image frame), the fourth center position and the fourth radius of the raindrop overlapping with the first text are obtained based on the third center position and the sliding path. Optionally, the fourth center position can be determined based on the third center position, the sliding path, and the sliding speed. Taking the playback time of each image frame as x seconds as an example, starting from the third center position, along the sliding path, in the direction away from the upper edge of the view, the position after moving a distance (sliding speed*x) is the fourth center position. For example, the sliding speed may be a preset value. Preferably, the sliding speed may be determined according to the current wind speed or precipitation corresponding to the weather type. For details, please refer to the corresponding description in step 5 above.

[0333] It should be noted that Figures 5 to 12D The flowcharts or schematic diagrams shown in the figure are only for ease of understanding and are not intended to limit the embodiments of the present application to the examples shown in the figure. Figures 5 to 12D The examples in can be equivalently transformed to obtain more implementation methods.

[0334] The display method of the animation effect provided by the present application can be applied to other display interfaces in addition to applications (such as weather applications). Optionally, when applied to other display interfaces, it can also act on views corresponding to other texts except temperature text.

[0335] For example, in a rainy scene, the electronic device can use a raindrop animation effect to display other text, such as text used to indicate the current time (for example, 09:00). At this time, the electronic device can be in always on display (AOD) mode or lock screen mode or desktop card mode, or other modes. The specific implementation method can refer to the display method of the animation effect introduced above, except that: the first text and the view corresponding to the first text are replaced by text used to indicate the current time, and the view corresponding to the text used to indicate the current time. Optionally, the electronic device can also display a static picture and / or animation effect of the current weather in the current city or region, for example, refer to the real-time weather control 106 above.

[0336] The raindrop animation effect and display method and implementation manner thereof provided in the present application are not limited to the radial distortion effect of raindrops in a rainy scene.

[0337] For example, when the real-time weather information meets preset condition #1, the first text is displayed using the dewdrop animation effect. Preset condition #1 includes the presence of dewdrops in the current weather. It is understandable that the situation that meets preset condition #1 may include: the current time is between 2 a.m. and before sunrise, and optionally, the current date is after Bailu (one of the 24 solar terms in my country), or the current air humidity is greater than a humidity threshold (for example, 60%). The dewdrop animation effect includes the radial distortion effect of the dewdrops overlapping with the first text on the first text. Specifically, the description of the dewdrop animation effect and its display method and implementation method can be found in the corresponding description of the raindrop animation effect above, the difference being that the raindrop animation effect is replaced with the dewdrop animation effect.

[0338] The embodiment of the present application provides a chip system, which includes one or more processors for calling and running instructions stored in the memory from the memory, so that the method of the embodiment of the present application is executed. The chip system can be composed of chips, or it can include chips and other discrete devices.

[0339] Among them, the chip system may include an input circuit or interface for sending information or data, and an output circuit or interface for receiving information or data.

[0340] The present application also provides a computer program product, which, when executed by a processor, implements the method described in any method embodiment of the present application.

[0341] The computer program product can be stored in a memory, and is finally converted into an executable target file that can be executed by a processor after preprocessing, compiling, assembling and linking.

[0342] The present application also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a computer, the method described in any method embodiment of the present application is implemented. The computer program can be a high-level language program or an executable target program.

[0343] The computer-readable storage medium may be a volatile memory or a nonvolatile memory, or may include both a volatile memory and a nonvolatile memory. The nonvolatile memory may be a read-only memory (ROM), a programmable ROM (PROM), an erasable PROM (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct memory bus random access memory (DR RAM).

[0344] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described devices and equipment and the technical effects produced can refer to the corresponding processes and technical effects in the aforementioned method embodiments, and will not be repeated here.

[0345] In several embodiments provided in the present application, the disclosed systems, devices and methods can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not performed. The device embodiments described above are merely schematic, and the division of units is only a logical function division. There may be other division methods in actual implementation, and multiple units or components may be combined or integrated into another system. In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the above coupling includes electrical, mechanical or other forms of connection.

[0346] It should be understood that in the various embodiments of the present application, the size of the serial number of each process does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0347] In short, the above is only a preferred embodiment of the technical solution of this application, and is not intended to limit the protection scope of this application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of this application should be included in the protection scope of this application.

Claims

1. A method for displaying animation effects, characterized in that: include: In response to a first operation of opening an application, displaying a first interface of the application, wherein the first interface includes first text for indicating first temperature information; When the first real-time weather information meets a preset condition, the first text is displayed using a weather animation effect, wherein the weather animation effect includes: a radial distortion effect on the first text caused by a weather element overlapping with the first text, and a radial distortion effect on the first text when the weather element overlapping with the first text slides along a sliding path, and the weather animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters corresponding to the first real-time weather information.

2. The method according to claim 1, characterized in that The preset conditions include: the current weather is rainy, the first text is displayed using a weather animation effect, and the weather element is raindrops, including: The first text is displayed using a raindrop animation effect, wherein the raindrop animation effect includes: a radial distortion effect of the first text on the raindrops overlapping with the first text, and the raindrop animation effect is generated by a programmable shader based on a view corresponding to the first text and animation parameters of the raindrops overlapping with the first text.

3. The method according to claim 2, characterized in that The raindrop animation effect is displayed through a sequence of frames, wherein the sequence of frames includes a first image frame, and the first image frame is used to display a radial distortion effect of a first raindrop on the first text; Wherein, a first local area in the first character overlaps with the first raindrop, and the first local area is distorted; In the first local area, pixels that are closer to the center position of the first raindrop have a higher degree of distortion.

4. The method according to claim 3, characterized in that In the case where the center position of the first raindrop overlaps with the first character, the first local area after distortion is larger than the first local area before distortion; or, When the center position of the first raindrop does not overlap with the first text, the first local area after distortion is smaller than the first local area before distortion.

5. The method according to claim 3 or 4, characterized in that The first image frame is also used to display the radial distortion effect of the second raindrop on the first text; The second raindrop overlaps with the first raindrop, and the first local area belongs to the area where the second raindrop overlaps with the first raindrop; The degree to which the first local area is distorted is determined based on a first distortion parameter and a second distortion parameter, wherein the first distortion parameter is used to determine the degree to which the first raindrop distorts the first local area, and the second distortion parameter is used to determine the degree to which the second raindrop distorts the first local area.

6. The method according to any one of claims 2 to 4, characterized in that The raindrop animation effect specifically includes: A radial distortion effect on the first character when a raindrop overlapping the first character slides down along a sliding path.

7. The method according to claim 6, characterized in that The raindrop animation effect is displayed through a sequence of frames, wherein the sequence of frames includes a plurality of image frames, and the plurality of image frames are used to display the third raindrop sliding down along the first sliding path; The first sliding path is the outline of the first character, and when the third raindrop slides along the outline of the first character, the third raindrop overlaps with the first character; In a case where the center position of the third raindrop overlaps with the first text, in each of the plurality of image frames, the third local area after distortion is larger than the third local area before distortion; or When the center position of the third raindrop does not overlap with the first text, in each of the plurality of image frames, the third local area after distortion is smaller than the third local area before distortion; The third local area is an area where the third raindrop overlaps with the first text.

8. The method according to claim 6 or 7, characterized in that The raindrop animation effect is displayed through a sequence of frames, wherein the sequence of frames includes a plurality of image frames, and the plurality of image frames are used to display the fourth raindrop sliding down along the second sliding path; Wherein, the second sliding path intersects with the first character; Wherein, when the center position of the fourth raindrop overlaps with the first text, in each of the plurality of image frames, the fourth local area after distortion is smaller than the fourth local area before distortion; or When the center position of the fourth raindrop does not overlap with the first text, in each of the plurality of image frames, the fourth local area after distortion is larger than the fourth local area before distortion; The fourth local area is an area where the fourth raindrop overlaps with the first text.

9. The method according to claim 2, characterized in that The raindrop animation effect is displayed through a sequence of frames, and the method of displaying the first text using the raindrop animation effect includes: Pass the view corresponding to the first character to the raindrop distortion class; The raindrop distortion class generates the first text with the raindrop animation effect for each image frame in the sequence of frames through a programmable shader based on the texture of the first text and the animation parameters of the raindrops overlapping with the first text, wherein the texture of the first text is included in the view corresponding to the first text, and the animation parameters of the raindrops overlapping with the first text are used to characterize the position and size of the raindrops overlapping with the first text.

10. The method according to claim 9, characterized in that The animation parameters of the raindrops overlapping the first text include: the center position and radius of the raindrops overlapping the first text, and the generating of the first text with the raindrop animation effect based on the texture of the first text and the animation parameters of the raindrops overlapping the first text for each image frame in the sequence of frames includes: For each of the image frames, based on the texture of the first text, the center position, the radius, and the texture coordinates of a first pixel in the first text that overlaps with the raindrop, obtaining a distorted color value of the first pixel; The first text having the raindrop animation effect is generated according to the color value of the distorted first pixel and the color value of the second pixel in the first text that does not overlap with the raindrop.

11. The method according to claim 10, characterized in that The step of obtaining the distorted color value of the first pixel based on the texture of the first character, the center position, the radius, and the texture coordinates of the first pixel in the first character that overlaps with the raindrop comprises: Obtaining a distortion parameter of the first pixel based on a distance between the texture coordinates of the first pixel and the center position, and the radius; Obtaining a distorted texture coordinate of the first pixel according to the texture coordinate of the first pixel and the distortion parameter; The color value corresponding to the distorted texture coordinate of the first pixel in the texture of the first character is used as the distorted color value of the first pixel.

12. The method according to claim 11, characterized in that The raindrop includes a first raindrop and a second raindrop, the center position includes a first center position of the first raindrop and a second center position of the second raindrop, the radius includes a first radius of the first raindrop and a second radius of the second raindrop, the first raindrop and the second raindrop overlap, the first pixel includes a third pixel and a fourth pixel, wherein the third pixel overlaps with the second raindrop, and the fourth pixel does not overlap with the second raindrop, and the distortion parameter of the first pixel is obtained based on the distance between the texture coordinates of the first pixel and the center position, and the radius, including: Obtaining a first distortion parameter of the third pixel based on a distance between the texture coordinates of the third pixel and the first center position and the first radius, and obtaining a second distortion parameter of the third pixel based on a distance between the texture coordinates of the third pixel and the second center position and the second radius; Obtaining a distortion parameter of the fourth pixel based on a distance between the texture coordinates of the fourth pixel and the first center position and the first radius; The step of obtaining the distorted texture coordinates of the first pixel according to the texture coordinates of the first pixel and the distortion parameter includes: Obtaining a first distorted texture coordinate of the third pixel according to the texture coordinate of the third pixel and the first distortion parameter, and obtaining a second distorted texture coordinate of the third pixel according to the texture coordinate of the third pixel and the second distortion parameter; Obtaining a distorted texture coordinate of the fourth pixel according to the texture coordinate of the first pixel and the distortion parameter of the fourth pixel; The step of using the color value corresponding to the distorted texture coordinate of the first pixel in the texture of the first character as the distorted color value of the first pixel includes: Obtaining a third distorted texture coordinate of the third pixel according to the first distorted texture coordinate and the second distorted texture coordinate; Using the color value corresponding to the third distorted texture coordinate in the texture of the first character as the color value of the distorted third pixel; The color value corresponding to the distorted texture coordinates of the fourth pixel in the texture of the first character is used as the distorted color value of the fourth pixel.

13. The method according to claim 9, characterized in that The sequence of frames includes a plurality of image frames, and the method further includes: Acquire a sliding path corresponding to the raindrop overlapping with the first character; For each image frame in the sequence of frames, animation parameters of the raindrops overlapping the first text are determined according to the sliding path.

14. The method according to claim 13, characterized in that The obtaining the sliding path corresponding to the raindrop overlapping with the first character includes: Obtaining the outline of the first character; Determining the sliding path according to the outline of the first character; or, A preset sliding path is used as the sliding path.

15. The method according to claim 13 or 14, characterized in that The sequence of frames includes a third image frame and a fourth image frame, the fourth image frame is a frame subsequent to the third image frame, the animation parameters of the raindrops overlapping the first text include: a center position and a radius of the raindrops overlapping the first text, and for each image frame in the sequence of frames, determining the animation parameters of the raindrops overlapping the first text according to the sliding path includes: For the third image frame, obtaining a third center position and a third radius of the raindrop overlapping the first text; For the fourth image frame, a fourth center position of the raindrop overlapping the first text is obtained according to the third center position and the sliding path, and a fourth radius of the raindrop overlapping the first text is determined according to the third radius.

16. The method according to any one of claims 1 to 15, characterized in that After applying the weather animation effect to the view corresponding to the first text for display, the method further includes: In response to the first real-time weather information not satisfying the preset condition, stopping displaying the weather animation effect.

17. The method according to any one of claims 1 to 16, characterized in that After applying the weather animation effect to the view corresponding to the first text for display, the method further includes: In response to the application being placed in the background, stopping displaying the weather animation effect; Alternatively, in response to an operation of exiting the application, the weather animation effect is stopped from being displayed.

18. The method according to any one of claims 1 to 17, characterized in that The first interface is used to display weather information corresponding to the first geographical location, and the method further includes: In response to a second operation on the first interface, displaying a second interface of the application, the second interface being used to display weather information corresponding to a second geographical location, the second interface comprising second text for indicating second temperature information, and a display effect of the second text being determined according to second real-time weather information; When the second real-time weather information does not satisfy the preset condition, the second text is displayed.

19. An electronic device comprising a memory and one or more processors, characterized in that: The memory is used to store a computer program; the processor is used to call the computer program so that the electronic device executes the method according to any one of claims 1 to 18.

20. A computer storage medium, characterized in that include: Computer instructions; when the computer instructions are executed on an electronic device, the electronic device executes the method according to any one of claims 1 to 18.

21. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to call computer instructions so that the electronic device executes the method as described in any one of claims 1 to 18.

Images