Animation effect display method and device

Abstract

The invention provides an animation effect display method and device, and is applied to the field of dynamic effect processing. The method comprises the steps that in response to weather information (thunderstorm days) of an application program, a first sequence frame is determined, the first sequence frame is used for generating a first animation effect, the first sequence frame is composed of two image frames, one image frame is a resource frame, and the other image frame is an image frame constructed based on the resource frame; a first animated effect, such as a lightning effect, is displayed based on the first sequence of frames. Compared with the mode that all the loaded image frames are resource frames, only one part of the resource frames are loaded, the other part of the image frames are generated through code construction (namely, all the resource frames do not need to be loaded), the occupied resource space is reduced, the loading duration is effectively shortened, the display effect is better, and the user experience is improved.

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 check weather information through the weather application in the smart terminal. In order to show users a more realistic weather scene, the weather application usually loads some resource images for playback to achieve the display of a certain animation effect. For example, if the weather type is thunderstorm weather, the weather application can load multiple resource images corresponding to the lightning animation, and then play the multiple resource images corresponding to the lightning animation in sequence on the interface of the smart terminal to present the lightning animation effect to the user. At present, in order to ensure the delicacy of the effect, it is usually necessary to load a large number of resource images to achieve an animation effect, and these resource images will occupy more ROM resources, making the time to load the animation resources too long, affecting the user experience. Summary of the invention

[0003] In view of this, the present application provides a method, device, computer-readable storage medium and computer program product for displaying animation effects, which can reduce the loaded resource images, thereby reducing the time for loading animation resources and improving the user experience.

[0004] In a first aspect, a method for displaying an animation effect is provided, comprising:

[0005] In response to weather information of an application, determining a first sequence of frames, the first sequence of frames being used to generate a first animation effect, the first sequence of frames comprising a first number of first image frames and a second number of second image frames, the first number of first image frames being a portion of image frames acquired from image frame resources corresponding to the first animation effect, the second image frame being generated based on any image frame of the first number of first image frames, wherein the second number is greater than the first number;

[0006] Based on the first sequence of frames, the first animation effect is displayed.

[0007] Alternatively, the application may be a weather application.

[0008] The above scheme can be executed by an electronic device or a chip in an electronic device. Based on the above scheme, after obtaining the weather information transmitted by the application, by loading a first number of first image frames (resource frames), and generating a second number of second image frames based on the first image frames, the first number of first image frames and the second number of second image frames are used as the first sequence frames, and a first animation effect is generated through the first sequence frames, and the first animation effect is presented to the user through the display screen. When loading resource pictures, the embodiment of the present application only needs to load the first number of first image frames, and the second number of second image frames can be realized through construction, without loading all resource frames (that is, multiple resource frames originally corresponding to the first sequence frames), which can greatly reduce the resource space occupied by resource pictures and effectively reduce the loading time.

[0009] In some possible implementations, the weather information includes thunderstorms; the first animation effect is a lightning animation effect. Therefore, when the weather information is thunderstorms, a complex lightning animation effect can be generated by determining the first sequence of frames, which reduces the loading time, improves the display effect, and improves the user experience.

[0010] The first sequence of frames includes two parts of image frames, namely, a first number of first image frames and a second number of second image frames. The first number of first image frames can be obtained by loading part of the image frames in the resource frames corresponding to the first animation effect. The second number of second image frames can be constructed based on the resource frames, or generated by code. In some possible implementations, determining the first sequence of frames includes:

[0011] Determine whether a third number is less than the sum of the first number and the second number, the third number being used to represent the number of image frames existing in the current first sequence of frames;

[0012] When it is determined that the third number is less than the sum of the first number and the second number, determining whether the third number is less than the first number;

[0013] When the third number is greater than or equal to the first number, the second image frame is generated.

[0014] In some possible implementations, determining the first sequence of frames further includes:

[0015] When the third number is smaller than the first number, the first image frame is loaded and drawn.

[0016] Therefore, the above judgment logic is used to determine whether to generate the second image frame or load the first image frame. When the second image frame needs to be constructed, the resource frame is constructed without loading all resource frames (i.e., multiple resource frames originally corresponding to the first sequence frames), which can greatly reduce the resource space occupied by the resource image and effectively reduce the loading time. When the first image frame needs to be loaded, loading and drawing the first image frame not only provides part of the resource frame contained in the first sequence frame, but also prepares for the subsequent generation of the second image frame.

[0017] In some possible implementations, the second image frame is generated by:

[0018] Creating a plan view, wherein the plan view is a plan view under an open graphics library;

[0019] Obtain a resource image, and bind the resource image as a texture to a shader, wherein the resource image is any one of the first number of first image frames;

[0020] The shader is bound to the plan view to generate the second image frame.

[0021] In order to achieve a better display effect, the embodiment of the present application adopts the OpenGL mechanism. The created plane view can be a view under OpenGL, GLSurfaceView.

[0022] Optionally, the resource picture is the last image frame of the first number of first image frames.

[0023] In some possible implementations, the method further includes:

[0024] One or more of the following processing is performed on the plan view: transparency processing, translation processing, and scaling processing.

[0025] Transparency processing refers to adjusting the transparency (alpha) parameter to achieve the transparency of the image frame so that the content of other layers can be seen when the layers are mixed. Optionally, as a possible implementation method, after obtaining the GLSurfaceView, the blending mode of the GLSurfaceView can be set to a semi-transparent mode.

[0026] The purpose of setting the semi-transparent mode is to allow other animation effects or background images to be visible when the first animation effect is played. For example, when playing the lightning animation effect, the clouds, raindrops, weather data and other information of the background image can also be seen, so as to enrich the user's sensory experience and enhance the immersive experience in the lightning scene.

[0027] In some possible implementations, creating a plan view includes:

[0028] Determine first spatial information, where the first spatial information is used to characterize the spatial distribution of the second image frame in a screen coordinate system of the open graphics library;

[0029] Converting the first spatial information into second spatial information, where the second spatial information is used to represent the spatial distribution of the second image frame in a world coordinate system of the open graphics library;

[0030] The plan view is created based on the second spatial information.

[0031] Therefore, when using OpenGL to create a plane, first converting the screen coordinates of the image frame into the world coordinates under OpenGL can achieve better display effects.

[0032] In some possible implementations, displaying the first animation effect based on the first sequence of frames includes:

[0033] Based on the numbering order of the image frames, the first number of first image frames and the second number of second image frames are played in sequence.

[0034] 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.

[0035] 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.

[0036] 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.

[0037] 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.

[0038] 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. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 It is an example diagram of an application scenario of an embodiment of the present application;

[0040] Figure 2 It is a schematic diagram that a sequence frame includes multiple image frames;

[0041] Figure 3 is a schematic diagram of multiple image frames included in a sequence frame of an embodiment of the present application;

[0042] Figure 4 is a hardware system diagram of an electronic device according to an embodiment of the present application;

[0043] Figure 5 is an example diagram of a software system of an electronic device according to an embodiment of the present application;

[0044] Figure 6 This is an example diagram of a signaling interaction for an application to create an animation effect provided by an embodiment of the present application;

[0045] Figure 7 is a flow chart of a method for displaying animation effects provided in an embodiment of the present application;

[0046] Figure 8 is an example flow chart of a method for determining a first sequence of frames according to an embodiment of the present application;

[0047] Fig. 9 This is an example diagram of a loop logic for constructing a first sequence of frames in an embodiment of the present application;

[0048] Fig.10 is an example diagram of a process of constructing a second image frame in an embodiment of the present application;

[0049] Fig.11 It is a schematic block diagram of a display device for animation effects according to an embodiment of the present application. DETAILED DESCRIPTION

[0050] The technical solutions in the embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0051] In the embodiments of the present application, unless otherwise specified, “plurality” may mean two or more than two.

[0052] 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.

[0053] Sequence frames refer to a sequence of frames consisting of at least two image frames in order. For example, each image frame in a sequence frame may have a corresponding number. Playing the image frames in sequence according to the image frame numbers may form an animation effect, or frame animation. It is understood that sequence frames may also have other names, such as sequence frame resources, sequence frame sets, etc.

[0054] 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.

[0055] 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.

[0056] The embodiment of the present application is applied to the scenario of creating animation effects (which can be referred to as dynamic effects) for an application. Taking a weather application as an example, in order to show a realistic lightning animation effect to the user, a sequence frame playback can be used.

[0057] refer to Figure 1 , Figure 1 An example diagram showing an application scenario of an embodiment of the present application is shown. Figure 1 (1) shows the interface of a mobile phone. The interface may include icons of multiple applications. For example, Figure 1 The interface shown in (1) includes an icon 101 of a weather application, an icon of a settings application, an icon of a calendar application, and an icon of a camera application. It can be understood that Figure 1 The application program shown in (1) is only an exemplary description, and the embodiments of the present application are not limited thereto. In fact, Figure 1 The interface shown in (1) 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 this embodiment of the present application.

[0058] exist Figure 1 In the interface shown in (1), if the user clicks the weather icon 101, the interface displays as follows: Figure 1 The interface shown in (2) Figure 1The interface shown in (2) is used to display the real-time weather information of the current location city. Assume that the weather type of the current city is thunderstorm day, such as Figure 1 The interface shown in (2) may include a lightning effect 1021, a city control 103, a real-time temperature control 104, and a weather type control 105.

[0059] The lightning effect is an animation effect that shows users the scene of lightning during a thunderstorm. Figure 1 The lightning effect 1021 in the interface shown in (2) Figure 1 The lightning effect 1022 in the interface shown in (3) and Figure 1 The lightning effect 1023 in the interface shown in (4) shows the dynamic change process of some lightning animation effects at different times. It can be understood that the lightning effect can be achieved by loading and playing sequence frame resources. For example, the lightning effect (the lightning effect corresponding to the lightning effect 1021, the lightning effect 1022 and the lightning effect 1023) can be achieved by Figure 2 This is achieved by using the sequence frames shown in FIG. Figure 2 The sequence of frames shown in FIG. 1 includes N image frames, and the N image frames are numbered in sequence. When playing the sequence of frames, the N image frames can be played in sequence according to their numbers, presenting a Figure 1 Middle (2) to Figure 1 The lightning effect shown in (4). Of course, Figure 1 Middle (2) to Figure 1 The lightning effect shown in (4) is only a part of the image frames in the sequence of frames, and the embodiments of the present application are not limited to this.

[0060] The city control 103 is used to display the current city or region. For example, Figure 1 The current location city shown in (2) is Yanta District. The real-time temperature control 104 is used to display the real-time temperature of the current city. For example, Figure 1 The current weather temperature of the current location city shown in (2) is 19°C.

[0061] 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. Specifically, a sunny day can be clear or cloudy. A rainy day can be light rain, moderate rain, or thunderstorm. A snowy day can be light snow or heavy snow. For example, Figure 1 The current weather type of the current location city shown in (2) is thunderstorm.

[0062] Optionally, the weather type control 105 is used to display the air quality of the current city. For example, Figure 1 The air quality of the current location city shown in (2) is good.

[0063] Optionally, Figure 1The interface shown in (2) may also include information on the highest and lowest temperatures of the day (e.g., the highest temperature is 20°C, the lowest temperature is 15°C), the source of the weather information, the time of the last update (e.g., the last update was at 7:59), the weather forecast for the next few hours or weather information for different time periods (e.g., the weather forecast for 9:00, 10:00, 11:00 and 12:00), the weather forecast for the past, present and next few days, etc. (e.g., the weather forecast for yesterday, today and tomorrow).

[0064] Understandably, Figure 1 The weather interface shown in (2) is only an example description, and the embodiments of the present application are not limited thereto. For example, Figure 1 The interface shown in (2) may also include meteorological data such as air quality pollution index, abnormal weather reminder, wind direction information, ultraviolet rays, etc.

[0065] It is understandable. Figure 1 In addition to the lightning effect, the interface shown in (2) may also have other static images and / or animation effects, such as dynamic effects such as clouds and raindrops.

[0066] It should be understood that the present application embodiment does not limit how the user opens the weather application. Figure 1 The "clicking the weather icon 101" shown in (1) is only an example. In fact, the user can also open the weather application in other ways to enter the Figure 1 The interface shown in (2) in the figure. For example, the user opens a weather application through voice commands.

[0067] It should also be understood that Figure 1 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 1 In the interface shown in (2), the weather forecast of other cities that have been followed can be viewed. For another 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 playing lightning animation effects, the display method of the animation effect of the embodiment of the present application is applicable.

[0068] 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 animation resources.

[0069] Currently, when playing the lightning animation effect, you need to load the sequence frame resources corresponding to the lightning animation effect, for example, Figure 2The sequence frame resource shown in (consisting of N image frames). In order to ensure the delicateness of the lightning animation effect, a set of sequence frame resources will contain a large number of image frames. Sequence frame resources containing a large number of image frames will inevitably take up a relatively large space. For example, a set of sequence frame resources takes up 5MB-10MB. In this way, when loading sequence frame resources, the large image frame resources will cause a long loading time, affecting the user experience.

[0070] In view of this, an embodiment of the present application provides a method for displaying animation effects. When creating an animation effect, by loading some resource frames of the animation effect (such as a first number), and using the resource frames to generate construction frames (such as a second number), a sequence frame including the first number of resource frames and the second number of construction frames is obtained. The second number is greater than the first number, that is, most of the image frames in the sequence frames are generated based on the resource frames, and only some resource images need to be loaded (for example, the loaded some resource images occupy 1MB), which can reduce the loading time of the resource images, improve the display effect, and significantly improve the user experience.

[0071] Figure 3 FIG. 2 shows an example diagram of components of a sequence frame according to an embodiment of the present application. Figure 3 As shown, the sequence frame includes a first number of resource frames and a second number of construction frames, and the construction frames are generated based on the resource frames. Figure 3 The number of image frames included in the sequence of frames is the sum of the first number and the second number (also expressed as N). Figure 2 The sequence frames shown in (including N image frames, i.e., N resource frames) are Figure 3 When the sequence frames shown in the figure create an animation effect, only the first number of resource frames need to be loaded, and the remaining image frames can be generated by composition without loading all the resource frames.

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

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

[0074] 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.

[0075] 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.

[0076] It should be noted that Figure 4 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 4 More or fewer components than those shown, or the apparatus 100 may include Figure 4 Combinations of some of the components shown, or the apparatus 100 may include Figure 4 Subassemblies of some of the components shown. Figure 4 The components shown may be implemented in hardware, software, or a combination of software and hardware.

[0077] 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.

[0078] In some possible embodiments, the processor 110 is used to determine a first sequence of frames in response to weather information of an application, wherein the first sequence of frames is used to generate a first animation effect, the first sequence of frames including a first number of first image frames and a second number of second image frames, the first number of first image frames being partial image frames obtained from image frame resources corresponding to the first animation effect, and the second image frame being generated based on any image frame of the first number of first image frames, wherein the second number is greater than the first number; based on the first sequence of frames, the display screen 194 is called to display the first animation effect.

[0079] 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.

[0080] 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.

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

[0082] 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.

[0083] 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.

[0084] The display screen 194 can be used to display images or videos. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a mini light-emitting diode (Mini LED), a micro light-emitting diode (Micro LED), a micro OLED (Micro OLED) or a quantum dot light emitting diode (QLED). In some embodiments, the device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0085] In some embodiments, display screen 194 may be used to display animation effects for a weather application, such as a lightning animation effect.

[0086] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, for example, they can be resistive pressure sensors, inductive pressure sensors or capacitive pressure sensors. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When the force acts on the pressure sensor 180A, the capacitance between the electrodes changes, and the device 100 determines the intensity of the pressure according to the change in capacitance. When the touch operation acts on the display screen 194, the device 100 detects the touch operation according to the pressure sensor 180A. The device 100 can also calculate the position of the touch according to the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold acts on a short message application icon, an instruction to view the short message is executed; when a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on a short message application icon, an instruction to create a new short message is executed.

[0087] 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. The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor 180K can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. 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.

[0088] The button 190 includes a power button and a volume button. The button 190 can be a mechanical button or a touch button. The device 100 can receive a signal input by the button 190 and implement a function related to the signal input by the button 190.

[0089] Motor 191 can generate vibration. Motor 191 can be used for incoming call reminders and can also be used for touch feedback. Motor 191 can generate different vibration feedback effects for touch operations acting on different applications. Motor 191 can also generate different vibration feedback effects for touch operations acting on different areas of the display screen 194. Different application scenarios (for example, time reminders, receiving messages, alarm clocks, and games) can correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0090] The hardware system of the device 100 is described in detail above, and the software system of the device 100 is introduced below. The software system can adopt a layered architecture, an event-driven architecture, a micro-kernel 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.

[0091] like Figure 5 As shown, the software system using the 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, the application layer, the binary archive file (android archive, AAR) layer, the application framework layer and the java system service layer, the system runtime layer and the kernel layer (linux kernel).

[0092] The application layer can include multiple applications. Figure 5 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 5 not shown).

[0093] 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.

[0094] 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 5As shown, the AAR package related to the weather application includes 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 animation 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 animation refers to the animation effect 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).

[0095] 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.

[0096] 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.

[0097] It should be noted that Figure 5 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.

[0098] It should also be noted that Figure 5The 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.

[0099] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer may include some predefined functions.

[0100] The application framework layer may include a programming framework. For example, Figure 5 As shown, the programming framework includes an open graphics library framework for embedded systems (OpenGL ES framework). OpenGL ES is an application programming interface (API) for embedded systems. In the Android system architecture, developers can use OpenGL ES to create and operate two-dimensional graphics and three-dimensional graphics. The open graphics library framework for embedded systems can include multiple basic classes for creating and operating graphics. For example, the open graphics library framework for embedded systems can include a surface view (SurfaceView) module, an open graphics library surface view GLSurfaceView module and an open graphics library surface view renderer GLSurfaceView.Renderer module, etc. The SurfaceView module is used to draw graphics.

[0101] The GLSurfaceView module is used to draw graphics under the open graphics library mechanism. The GLSurfaceView module is a class that can use the OpenGL ES API call to draw and manipulate objects (i.e. graphics). The GLSurfaceView module is a class created based on the SurfaceView module, so the functions of the GLSurfaceView module and the SurfaceView module are similar. Both the GLSurfaceView module and the SurfaceView module can be used for OpenGL ES rendering, and the rendering efficiency of the GLSurfaceView module is higher than that of the SurfaceView module. For example, users can use the GLSurfaceView module by creating an instance of GLSurfaceView and adding the instance of GLSurfaceView to the renderer (Render).

[0102] The GLSurfaceView.Renderer module is a general renderer interface. The GLSurfaceView module can implement graphics rendering by calling the GLSurfaceView.Renderer module. The GLSurfaceView.Renderer module defines the methods required to draw graphics in the GLSurfaceView module. The GLSurfaceView.Renderer module is provided as a separate class for the GLSurfaceView module to use. The GLSurfaceView module can attach the GLSurfaceView.Renderer module to the instance GLSurfaceView.Renderer.

[0103] Optionally, the application framework layer and the Java system service layer may also include (not shown in the figure) an activity manager, a window management service (window manager service, WMS), a window animation (Window Animation) module, a resource module, a package manager service (package manager service, PMS), and an input manager.

[0104] 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.

[0105] 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.

[0106] 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.

[0107] The resource module is used to load animation resources, for example, to load image frames corresponding to the animation resources. In some embodiments, the resource frame can be loaded through the resource module, and the construction frame can be generated using the resource frame.

[0108] 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.

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

[0110] 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.

[0111] 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.

[0112] The phone manager is used to provide communication functions of the device 100, such as management of call status (connected or disconnected).

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

[0114] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used for download completion notifications and message reminders. The notification manager can also manage notifications that appear in the system's top status bar in the form of icons or scrolling text, such as notifications from applications running in the background. The notification manager can also manage notifications that appear on the screen in the form of dialog windows, such as prompting text messages in the status bar, emitting reminder sounds, vibrating electronic devices, and flashing indicator lights.

[0115] 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.

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

[0117] 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.

[0118] 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.

[0119] 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 5 not shown).

[0120] Optionally, Figure 5The 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.

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

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

[0123] 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.

[0124] The media library supports playback and recording of multiple audio formats, playback and recording of multiple video formats, and static image files. The media library can support multiple audio and video coding formats, such as: MPEG4, H.264, moving picture experts group audio layer III (MP3), advanced audio coding (AAC), adaptive multi-rate (AMR), joint photographic experts group (JPG) and portable network graphics (PNG). The browser kernel is used to call the system browser.

[0125] 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 driver modules such as GPU driver, camera driver, display driver, Binder driver, audio driver and sensor driver.

[0126] Figure 5In 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.

[0127] It should be understood that Figure 5 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 5 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 5 The component structures shown may be more or less structures, and the embodiments of the present application are not limited thereto.

[0128] To facilitate understanding of the implementation process of creating animation effects, the following Figure 6 The timing diagram shown in FIG.

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

[0130] It should be understood that Figure 6 The signaling interaction process provided in can be applied to Figure 5 In. Figure 5 As an example, assume that a weather application is installed in the device 100. Figure 5 In the software architecture layer of the device 100 shown, Figure 6 The weather application in Figure 5 The application layer in the software system Figure 6 The weather manager and weather scene classes in Figure 5 The AAR package of the software system shown (such as hnthreedweather.aar or hngfxengine.aar). Figure 6 The GLSurfaceView module in can be Figure 5 The GLSurfaceView module in the application framework layer is located in the open graphics library framework. Figure 6 The GLSurfaceView.Renderer module can be Figure 5 The GLSurfaceView.Renderer module in the GLSurfaceView.Renderer is located in the Open Graphics Library framework of the Application Framework layer. Figure 5The onSurfaceChanged() method is located in the Open Graphics Library framework of the application framework layer ( Figure 5 The requestRender() method is located in the Open Graphics Library framework of the application framework layer ( Figure 5 not shown).

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

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

[0133] by Figure 1 Taking the interface shown in (1) as an example, the user can click the weather application icon 101 to open the weather application.

[0134] 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.

[0135] In some embodiments, the user opens the weather application when a thunderstorm occurs in the user's location.

[0136] In some embodiments, the user opens a weather application to view the current weather type for a city of interest.

[0137] Step 2: The weather application passes weather information such as the current weather type to the weather management class.

[0138] It can be understood that the current weather type includes sunny days, rainy days (such as heavy rain, light rain or thunderstorm) or snowy days (such as heavy snow or light snow) and the like.

[0139] In some embodiments, after the weather application is started, the current weather type of the user's location is thunderstorm. Alternatively, after the weather application is started, the user switches from the location to the target city or searches for the target city, and the current weather type of the target city is thunderstorm. At this time, the weather application transmits weather information that the current weather type is thunderstorm to the weather management class.

[0140] Optionally, the weather application can also pass a weather background image to the weather management class. The weather background image is a static base image corresponding to the current weather type, and different weather types correspond to different static base images.

[0141] Optionally, the weather application may also pass information such as day / night to the weather management class. Exemplarily, when the information passed by the weather application to the weather management class is daytime, the static base map passed by the weather application to the weather management class may be a static base map corresponding to daytime. Alternatively, when the information passed by the weather application to the weather management class is nighttime, the static base map passed by the weather application to the weather management class may be a static base map corresponding to night. For example, when the current weather type is rainy, the weather background picture may include a first static base map and a second static base map. The first static base map is a static base map corresponding to daytime, and the second static base map is a static base map corresponding to night, and the background colors of the first static base map and the second static base map are different, and the transparency of the first static base map and the second static base map is also different.

[0142] It should be understood that here, the user in step 1 starts the weather application as an example to trigger step 12, and the embodiment of the present application is not limited to this. For example, the user may trigger step 2 by switching cities or searching for weather information of a certain city when the weather application is already opened.

[0143] Step 3: The weather management class initializes the GLSurfaceView module in the open graphics library.

[0144] By initializing the GLSurfaceView module, you can assign values ​​to the static variables in the GLSurfaceView module and prepare for the subsequent creation of dynamic effects.

[0145] Step 4: The weather management class can initialize the weather scene class.

[0146] By initializing the weather scene class, you can assign values ​​to the static variables in the weather scene class.

[0147] It should be understood that there is no temporal or sequential order in which step 3 and step 4 are executed. Step 3 and step 4 may be executed simultaneously or sequentially.

[0148] Step 5, the weather management class creates a renderer (Render), and uses the renderer to render the GLSurfaceView module through the GLSurfaceView.Renderer module.

[0149] In addition, the weather management class can also pass the rendered GLSurfaceView.Renderer module to the weather application.

[0150] Step 6: The GLSurfaceView.Renderer module passes the renderer to the GLSurfaceView module and binds the renderer to the GLSurfaceView module.

[0151] Step 7, the GLSurfaceView.Renderer module creates a drawing surface (Surface), initializes the custom weather scene when calling the onSurfaceChanged() method, and loads the resource image corresponding to the custom weather scene.

[0152] The resource image includes a sequence frame resource, and the sequence frame resource may include a sequence frame corresponding to a static animation effect and / or a sequence frame corresponding to a dynamic animation effect. Surface is used to render the resource image on the screen of the display.

[0153] In some embodiments, the resource images include resource images corresponding to thunderstorm days, including but not limited to resource images of rain effects, resource images of clouds, resource images corresponding to lightning effects, and the like.

[0154] Step 8: The GLSurfaceView.Renderer module calls the requestRender() function to refresh the Surface to start the weather animation.

[0155] It can be understood that the GLSurfaceView.Renderer module calls the requestRender() function to refresh the Surface, which may be the first time the Surface is refreshed, or it may not be the first time the Surface is refreshed. It should be noted that when the GLSurfaceView.Renderer module refreshes the Surface for the first time, step 9 is executed.

[0156] Step 9: The weather scene class will match and create corresponding animation effects based on the weather information such as the current weather type transmitted by the weather application.

[0157] In some embodiments, the lightning animation effect is a thunderstorm weather scene. When refreshing for the first time, a lightning animation effect of a thunderstorm can be created. In the embodiment of the present application, for the animation effect of lightning, when creating the lightning animation effect, a small amount (such as a first amount) of resource frames (first image frames) is loaded, and a number (such as a second amount) of construction frames (second image frames) are generated using the resource frames, so that a frame animation created based on a small amount of resource frames and a number of construction frames is obtained, thereby saving resource space.

[0158] Optionally, the GLSurfaceView.Renderer module can call the requestRender() method through an asynchronous callback mechanism (handler).

[0159] Step 10: The weather scene class binds the corresponding animation effect to the weather scene class and stores it in the content manager of the weather scene class.

[0160] In some embodiments, the lightning animation effect created in step 9 may be bound to the weather scene class and then stored in the content manager of the weather scene class.

[0161] The content manager of the weather scene class is used to uniformly manage multiple animation effects. Optionally, each weather scene class has a corresponding content manager. For a certain weather scene class, the animation effects of the weather scene class are uniformly managed by its corresponding content manager.

[0162] Step 11: The weather scene class plays the corresponding animation effect in a loop.

[0163] In some embodiments, when the weather information transmitted by the weather application is a thunderstorm, a lightning animation effect may be played in a loop in the interface of the weather application.

[0164] It should be understood that Figure 6 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 6 The scene shown in .

[0165] Combination of the above Figure 6 This section introduces the process of creating and playing corresponding animations based on the weather information transmitted by the weather application after opening the weather application. Figure 7 , describes in detail the method for displaying the animation effect of the embodiment of the present application. For example, Figure 7 The method provided in Figure 6 Follow steps 9 and 10 in the .

[0166] See also Figure 7 , Figure 7 FIG. 1 is a flow chart showing a method for displaying an animation effect provided by an embodiment of the present application. Figure 7 As shown, the method includes:

[0167] Step 701, in response to weather information of an application, determine a first sequence of frames, wherein the first sequence of frames is used to generate a first animation effect, the first sequence of frames comprising a first number of first image frames and a second number of second image frames, the first number of first image frames being partial image frames obtained from image frame resources corresponding to the first animation effect, the second image frame being generated based on any image frame of the first number of first image frames, wherein the second number is greater than the first number.

[0168] The first number of first image frames can be understood as part of the resource frames, or part of the original image frames. The original image frame resources corresponding to the first animation effect include multiple image frames. The original image frame resources corresponding to the first animation effect can be understood as the image frames that need to be loaded to generate the first animation effect. The first number is an integer greater than or equal to 1. For example, the original image frame resources corresponding to the first animation effect are Figure 2 The N image frames shown in , the first number of first image frames is Figure 3 The resource frames in the sequence frames shown in . Figure 3 The N image frames included in the sequence of frames are composed of a first number of resource frames and a second number of construction frames, where N is the sum of the first number and the second number. In summary, Figure 3 The first number of resource frames shown in Figure 2 The number of N image frames shown in .

[0169] The second image frame can be understood as a constructed frame, or an image frame generated by the code. The second number is an integer greater than or equal to 1. For example, the second number of second image frames is Figure 3 The second image frame is an image frame constructed or generated based on any resource frame (or the first image frame).

[0170] The specific value of the first quantity or the second quantity may be a preset value. The embodiment of the present application does not limit the specific value of the first quantity or the second quantity, which may depend on the implementation requirements. The first quantity or the second quantity may be a reasonable value or a preset value based on actual requirements.

[0171] The first sequence of frames can be understood as a frame sequence for constructing a first animation effect. The first sequence of frames consists of N image frames. In an embodiment of the present application, the first sequence of frames consists of a first number of first image frames and a second number of second image frames, and the number of image frames included in the first sequence of frames is the sum of the first number and the second number, that is, N is the sum of the first number and the second number. Compared to the situation where all the image frames included in the first sequence of frames are first image frames (that is, N frames of resource frames), when loading resource pictures, the embodiment of the present application only needs to load the first number of first image frames, and the second number of image frames can be realized through construction without loading N frames of resource frames, which can greatly reduce the resource space occupied by resource pictures and effectively reduce the loading time.

[0172] It should be noted that, in order to minimize the occupation of resource space by the loaded resource frames, the first number may be set to a smaller value as much as possible. For example, the first number is much smaller than the second number.

[0173] For example, assuming that the first sequence of frames (or the first animation effect) originally corresponds to 60 frames of resource frames, that is, 60 frames of resource images need to be loaded when generating and playing the first animation effect. After adopting the method of the embodiment of the present application, 8 frames of resource frames (corresponding to the first number of first image frames) can be loaded when constructing the first sequence of frames, and the remaining 52 frames of images (corresponding to the second number of second image frames) can be obtained by code generation, which effectively reduces the resource space occupied by the resource frames. Each of the remaining 52 frames of images can be generated based on any of the 8 resource frames.

[0174] The above application refers to an application that can display weather information to the user. The specific type of the application is not limited in the present embodiment of the application. The application can be a system application or a third-party application.

[0175] Optionally, in some embodiments, the application may be a weather application, and the weather information obtained from the weather application is a thunderstorm.

[0176] It can be understood that in addition to weather applications, other applications that need to present the first animation effect can also be used. When other applications need to present the first animation effect, they can also construct the first sequence frame (specifically including constructing the second number of second image frames) in the manner of the embodiment of the present application. For example, a game application needs to show the first animation effect to the user due to the needs of the game scene. By constructing the first sequence frame in the manner of the embodiment of the present application, the loading time can be effectively reduced. For game applications, reducing the time it takes to load resource frames is also of great significance.

[0177] The first animation effect is an animation effect that matches or corresponds to weather information. For example, on a thunderstorm day, the animation effect that matches the thunderstorm day may include a lightning animation effect, that is, the first animation effect refers to the lightning animation effect.

[0178] Optionally, in some embodiments, a first sequence of frames is created according to thunderstorm information transmitted by an application program to construct a lightning animation effect.

[0179] Step 702: display the first animation effect based on the first sequence of frames.

[0180] Displaying the first animation effect means: gradually (or frame by frame) displaying or playing the picture content of each frame in the first sequence of frames on the display screen of the electronic device.

[0181] Optionally, in some embodiments, the image frames in the first sequence (ie, the first number of first image frames and the second number of second image frames) may be numbered sequentially.

[0182] Optionally, step 702 includes: based on the numbering order of the image frames, playing the first number of first image frames and the second number of second image frames in sequence.

[0183] It can be understood that the specific implementation of displaying the first animation effect can refer to the relevant technology. For example, displaying the first animation effect includes: calling the display HAL and the display driver to play the first animation effect. As a possible example, part of the content of the first animation effect can be Figure 1 Middle (2) to Figure 1 In (4), the lightning effects 1021 to 1023 are respectively presented. That is, the display synthesis system gradually (specifically, frame by frame) displays the lightning animation effect on the terminal screen through the display HAL and the display driver module.

[0184] It can also be understood that after obtaining the first sequence of frames, the layer of each frame can be mixed with other layers, for example, the image frame with lightning elements can be mixed with the image frame with cloud layers.

[0185] It can also be understood that the embodiment of the present application does not specifically limit the duration of the first animation effect.

[0186] In an embodiment of the present application, after obtaining the weather information transmitted by the application, a first number of first image frames (resource frames) are loaded, and a second number of second image frames are generated based on the first image frames, the first number of first image frames and the second number of second image frames are used as a first sequence frame, a first animation effect is generated through the first sequence frame, and the first animation effect is presented to the user through a display screen. When loading resource pictures, the embodiment of the present application only needs to load the first number of first image frames, and the second number of second image frames can be realized through construction, without the need to load all resource frames (i.e., multiple resource frames originally corresponding to the first sequence frames), which can greatly reduce the resource space occupied by resource pictures and effectively reduce the loading time.

[0187] The first sequence of frames includes two parts of image frames, namely, a first number of first image frames and a second number of second image frames. The first number of first image frames can be obtained by loading part of the image frames in the resource frames corresponding to the first animation effect. The second number of second image frames can be constructed based on the resource frames, or generated by code. Figure 8 and Fig. 9 The code logic for generating a first sequence of frames is described in an embodiment of the present application.

[0188] Figure 8 A flowchart of an example method for determining a first sequence of frames according to an embodiment of the present application is shown.

[0189] Optionally, in some embodiments, Figure 8 As shown, determining a first sequence of frames includes:

[0190] Step 800, obtaining a third number, wherein the third number is used to represent the number of image frames existing in the current first sequence of frames. Step 800 may be an optional step.

[0191] When constructing the first sequence of frames, the image frames included in the first sequence of frames are dynamically generated by designing a loop process. In this process, it can be determined in real time whether the number of image frames already existing in the first sequence of frames meets the preset number of frames of the first sequence of frames. In different stages, the image frames already existing in the first sequence of frames have different situations. For example, the image frames already existing in the first sequence of frames include several first image frames. For another example, the image frames already existing in the first sequence of frames include several first image frames and several second image frames.

[0192] Step 801, determining whether a third quantity is less than the sum of the first quantity and the second quantity.

[0193] For example, as mentioned above, the preset number of frames of the first sequence of frames is N frames, where N is the sum of the first number and the second number. Step 801 may be to determine whether the third number reaches N. If the third number is less than N, step 802 is executed; if the third number is greater than or equal to N, it means that the image frames already existing in the first sequence of frames have reached the preset number of frames, and the loop logic ends, indicating that the number of generated image frames is sufficient to create the first sequence of frames, or the first sequence of frames has been constructed, or there is no need to continue the process of constructing the second image frame or loading the first image frame.

[0194] Step 802: When it is determined that the third quantity is less than the sum of the first quantity and the second quantity, determine whether the third quantity is less than the first quantity.

[0195] For example, when the third number is less than N, it may be further determined whether the third number is less than the first number to determine whether to load the first image frame or construct the second image frame.

[0196] Step 803: When the third number is greater than or equal to the first number, generate and draw the second image frame.

[0197] That is to say, in the process of creating the first sequence of frames, it can be determined whether the number of image frames already existing in the current first sequence of frames (which can be represented by the third number) is less than the sum of the first number and the second number. The image frames already existing in the first sequence of frames can be understood as image frames that have been drawn, or image frames that have been stored in the array linked list. If the third number is less than the sum of the first number and the second number, it means that the image frames in the first sequence of frames have not been generated yet, so it is necessary to continue to determine whether to generate the second image frame or load the first image frame. When the third number is less than the sum of the first number and the second number, it is determined whether to construct the second image frame or load the first image frame by determining whether the third number is less than the first number. When the third number is not less than the first number, it means that the first number of first image frames has been obtained, and the second image frame needs to be further constructed to complete the creation of the first sequence of frames.

[0198] Optionally, in some embodiments, determining the first sequence of frames further includes:

[0199] Step 804 , when the third number is smaller than the sum of the first number and the second number, and the third number is smaller than the first number, load and draw the first image frame.

[0200] It should be noted that the process of creating the first sequence of frames can include two parts, one part is loading and drawing the first image frame, and the other part is constructing the second image frame. The judgment condition for constructing the second image frame has been introduced above, and the judgment condition for loading and drawing the first image frame is introduced here. For example, the judgment condition for loading and drawing the first image frame is: the third number is less than the sum of the first number and the second number, and the third number is less than the first number.

[0201] Optionally, the image frames included in the first sequence of frames may be generated by creating an array linked list, specifically a first number of first image frames and a second number of second image frames.

[0202] To facilitate understanding of the specific implementation process of generating the image frames included in the first sequence of frames by creating an array linked list, the flowchart in the following will be used for explanation.

[0203] refer to Fig. 9 , Fig. 9 The loop logic for constructing the first sequence of frames is shown. It should be understood that Fig. 9 For the description of some terms or concepts in Figure 8 For the sake of brevity, the meanings of the same terms or concepts will not be repeated. Fig. 9 As shown, including:

[0204] Step 901, create an array linked list and initialize variables. For example, define int frame = 0. Frame can be the third number mentioned above.

[0205] The array linked list is used to store image frames in the first sequence of frames, including loaded resource frames and construction frames.

[0206] Step 902, determine whether frame is less than the sum of the number of resource frames (corresponding to the first number in the previous text) and the number of construction frames (corresponding to the second number in the previous text). "<" represents less than.

[0207] If the judgment in step 902 is yes, step 903 is executed; if the judgment in step 902 is no, the loop ends, that is, the construction loop of the first sequence of frames ends.

[0208] Step 903, determine whether frame is less than the number of resource frames.

[0209] If the determination result of step 903 is yes, then step 904 is executed; if the determination result of step 903 is no, then step 905 is executed.

[0210] Step 904, drawing a resource frame (corresponding to the first image frame mentioned above).

[0211] Step 905: Generate and draw a construction frame (corresponding to the second image frame mentioned above).

[0212] Step 904 and step 905 are different branches. In addition, no matter step 904 or step 905, the process from step 906 to step 907 can be performed.

[0213] Step 906: Store the drawn image frame (resource frame or construction frame) in an array linked list.

[0214] Step 907, add one to the frame, and return to step 902, and repeat steps 902 to 907.

[0215] It should be understood that Fig. 9 The loop logic shown in is only for the convenience of understanding of those skilled in the art, and the embodiments of the present application are not limited thereto.

[0216] The second number of second image frames in the embodiment of the present application is constructed based on the resource frame, and is not the resource frame loaded in the first animation effect. The generation process of the second image frame in the embodiment of the present application will be described below.

[0217] Optionally, in some embodiments, the second image frame is generated by:

[0218] Creating a plan view, wherein the plan view is a plan view under an open graphics library;

[0219] Obtain a resource image, and bind the resource image as a texture to a shader, wherein the resource image is any one of the first number of first image frames;

[0220] The shader is bound to the plan view to generate the second image frame.

[0221] The embodiment of the present application does not specifically limit which first image frame is used as the resource image. Optionally, in some embodiments, when constructing the second image frame, the last image frame of the first number of first image frames can be used as the resource image. Of course, selecting the last image frame as the resource image is only an exemplary description, and the embodiment of the present application is not limited to this.

[0222] Optionally, in some embodiments, when constructing the second image frame, it may be determined at which image frame to pause. Pausing may be understood as constructing a certain number of image frames after this image frame, so that the user can more intuitively feel the slow change process of the animation effect.

[0223] For example, for the lightning animation effect, when presenting an interface containing lightning elements, a proper pause can be performed so that the user can feel the lightning effect more intuitively and naturally, avoiding the problem of the user's senses being too abrupt due to the lightning effect changing too quickly. "Proper pause" can be understood as playing a certain number of image frames to present the user with the process of the lightning element slowly changing. For example, compared to constructing a 3-frame effect of the lightning appearing and then disappearing, the 10-frame effect of the lightning appearing and disappearing can show the user the process of the lightning appearing and disappearing visible to the naked eye.

[0224] Exemplarily, creating a plane view may also be described as creating a Surface View, where the Surface View is in world coordinates.

[0225] In order to achieve a better display effect, the embodiment of the present application adopts the OpenGL mechanism. The created plane view can be a view under OpenGL, that is, GLSurfaceView.

[0226] Exemplarily, a GLSurfaceView is created using OpenGL, and a texture is created. The selected resource image is bound as a texture to a shader (eg, GLSurfaceView.Renderer), and then the shader is bound to the GLSurfaceView to generate a second image frame.

[0227] When creating a plane using OpenGL, you need to first convert the screen coordinates of the image frame into world coordinates. This will be described below.

[0228] Optionally, in some embodiments, creating a plan view includes:

[0229] Determine first spatial information, where the first spatial information is used to characterize the spatial distribution of the second image frame in a screen coordinate system of the open graphics library;

[0230] Converting the first spatial information into second spatial information, where the second spatial information is used to represent the spatial distribution of the second image frame in a world coordinate system of the open graphics library;

[0231] The plan view is created based on the second spatial information.

[0232] Optionally, the first spatial information includes the size (or dimension, which may specifically include width and height) and coordinate position of the image frame in the screen coordinate system.

[0233] Optionally, the second spatial information includes the size (or size, which may specifically include width and height) and coordinate position of the image frame in the world coordinate system of OpenGL.

[0234] Exemplarily, in the process of constructing the second image frame, the coordinates and size of the image frame on the screen (corresponding to the first spatial information) are first set. The coordinates of the image frame on the screen can be expressed as winPos, and the size of the image frame on the screen can be expressed as winSize. The screen coordinates are then converted to world coordinates to obtain the spatial distribution of the image frame in the world coordinate system of OpenGL (corresponding to the second spatial information). The coordinates of the image frame in the world coordinates of OpenGL can be expressed as (worX, worY); the size of the image frame in the world coordinates of OpenGL can be expressed as worSize. Then, a GLSurfaceView is created based on worSize and (worX, worY). That is, the position of GLSurfaceView is (worX, worY) and the size is worSize.

[0235] Optionally, in some embodiments, converting the first spatial information into the second spatial information includes: normalizing the first spatial information to obtain a normalized array; using a transformation matrix, transforming the normalized array to obtain the second spatial information; wherein the transformation matrix is ​​determined based on a projection matrix and a view matrix.

[0236] Optionally, in some embodiments, after obtaining the plan view, the method further includes:

[0237] One or more of the following processing is performed on the plan view: transparency processing, translation processing, and scaling processing.

[0238] Transparency processing refers to adjusting the transparency (alpha) parameter to achieve the transparency of the image frame so that the content of other layers can be seen when the layers are mixed. Optionally, as a possible implementation method, after obtaining GLSurfaceView, the blending mode of GLSurfaceView can be set to semi-transparent mode (or semi-transparent blended layer mode). For the specific implementation of the semi-transparent mode, those skilled in the art can refer to the relevant technology.

[0239] The purpose of setting the semi-transparent mode is to allow other animation effects or background images to show through when playing the first animation effect. For example, when playing the lightning animation effect, the clouds, raindrops, weather data and other information of the background image can also show through, so that the mixed layers are displayed more naturally, enriching the user's sensory experience and enhancing the immersive experience in the lightning scene.

[0240] Optionally, as a possible implementation, after obtaining GLSurfaceView, the translation parameters of GLSurfaceView may be set, for example, GLSurfaceView may be set to translate to the left or to the right to display part of the content of the image frame.

[0241] Optionally, as a possible implementation, after obtaining GLSurfaceView, the scale parameter of GLSurfaceView may be set, for example, GLSurfaceView may be set to reduce or enlarge in order to provide a better display effect.

[0242] It can be understood that, when constructing the second image frame, a corresponding transparency parameter, translation parameter or scaling parameter may be set for any second image frame (or a designated second image frame) to achieve a corresponding effect.

[0243] For a certain weather scene, multiple animation effects can be displayed at the same time. For example, in a thunderstorm, in addition to the lightning animation effect, you can also display the animation effect of raindrops falling, the effect of cloud changes, etc. The multiple animation effects displayed at the same time can be mixed and displayed to present to the user.

[0244] Optionally, after obtaining the first sequence of frames and before displaying the first animation effect, the method further includes: layer mixing the image frames in the first animation effect and other image frames (such as the background layer, the image frames in the second animation effect).

[0245] Exemplarily, after receiving the motion effect parameters of a certain image frame (e.g., transparency parameters, translation parameters, scaling parameters, etc.), the display synthesis system processes the layer accordingly (e.g., transparency, translation, scaling) and performs mixed display. Mixed display means mixing the processed layer with other layers, and then calling the display HAL for display. Layer mixing means mixing the layer of each frame of the first sequence of frames (which can be the first image frame or the second image frame) with other layers to obtain a complete interface image finally presented to the user.

[0246] For example, the layer of a certain frame can be mixed with the weather background layer (such as cloud layer, sky layer) and the Activity layer. After the layer mixing is performed, the display synthesis system calls the display HAL to send it to the display.

[0247] To facilitate understanding of the process of generating the second image frame in the embodiment of the present application, the following is combined with Fig.10 Give a description.

[0248] like Fig.10 As shown, generating a second image frame includes the following steps:

[0249] Step 1001, setting first spatial information (including coordinates and size) of a second image frame on screen coordinates.

[0250] Step 1002: convert the first spatial information into second spatial information under OpenGL, and create a GLSurfaceView using the second spatial information.

[0251] Step 1003 , bind the resource image to the newly created shader (for example, the newly created shader refers to the render created when constructing the second image frame this time), and bind the shader to the GLSurfaceView in step 1002 .

[0252] Step 1004, determine whether it is necessary to perform transparency processing on GLSurfaceView. If it is necessary to perform transparency processing on GLSurfaceView, execute step 1005; if it is not necessary to perform transparency processing on GLSurfaceView, the process ends.

[0253] Step 1005, setting the transparency parameter value for GLSurfaceView.

[0254] It is understandable that step 1004 and step 1005 are described only by taking transparency processing as an example. In fact, other processing may also be performed, such as the aforementioned translation processing, scaling processing, etc.

[0255] After the above processing, the construction process of the second image frame is completed.

[0256] Step 1006, construction of the second image frame ends.

[0257] In summary, through Fig.10 The method flow can realize the construction of the second image frame. For example, Figure 8 or Fig. 9 The process of generating the second image frame can be carried out by Fig.10 The method flow in .

[0258] It should be noted that Figures 8 to 10 The logic flow chart shown in the figure is only for ease of understanding, and is not intended to limit the embodiments of the present application to the examples shown in the figure. Figures 8 to 10 The examples in can be equivalently transformed to obtain more implementation methods.

[0259] As can be seen from the above, the display method of the animation effect provided by the present application adopts the OpenGL mechanism, constructs the second number of second image frames through code, and only needs to load the first number of first image frames, which can save resource space, reduce resource loading time, and improve user experience. In addition, it can also support processing (including but not limited to: transparency processing, translation processing, scaling processing, etc.) of the constructed second image frame (which can be part or all), so that the animation effect is more natural and the user's sensory experience is improved.

[0260] Combination of the above Figures 1 to 10 , describes in detail the display method of the animation effect provided by the embodiment of the present application. Fig.11 It should be understood that the display device of the animation effect of the embodiment of the present application can execute the display method of various animation effects of the embodiment of the present application, that is, the specific working process of the following various products can refer to the corresponding process in the aforementioned method embodiment.

[0261] Fig.11 FIG. 1 is a schematic block diagram of a display device 1100 for displaying animation effects according to an embodiment of the present application. It should be understood that the device 1100 may perform Figures 6 to 10 The display method of the animation effect shown.

[0262] like Fig.11 As shown, the device 1100 includes: a processing unit 1110 and a display unit 1120 .

[0263] In some embodiments, the processing unit 1110 is used to determine a first sequence of frames in response to weather information of an application, the first sequence of frames being used to generate a first animation effect, the first sequence of frames including a first number of first image frames and a second number of second image frames, the first number of first image frames being part of image frames obtained from image frame resources corresponding to the first animation effect, the second image frame being generated based on any image frame of the first number of first image frames, wherein the second number is greater than the first number;

[0264] The processing unit 1110 is further configured to call the display unit 1120 to display the first animation effect based on the first sequence of frames.

[0265] Optionally, as an embodiment, the weather information includes a thunderstorm; and the first animation effect is a lightning animation effect.

[0266] Optionally, as an embodiment, the processing unit 1110 is configured to determine the first sequence of frames, including:

[0267] Determine whether a third number is less than the sum of the first number and the second number, the third number being used to represent the number of image frames existing in the current first sequence of frames;

[0268] When it is determined that the third number is less than the sum of the first number and the second number, determining whether the third number is less than the first number;

[0269] When the third number is greater than or equal to the first number, the second image frame is generated.

[0270] Optionally, as an embodiment, the processing unit 1110 is configured to determine the first sequence of frames further comprising:

[0271] When the third number is smaller than the first number, the first image frame is loaded and drawn.

[0272] Optionally, as an embodiment, the second image frame is generated by:

[0273] Creating a plan view, wherein the plan view is a plan view under an open graphics library;

[0274] Obtain a resource image, and bind the resource image as a texture to a shader, wherein the resource image is any one of the first number of first image frames;

[0275] The shader is bound to the plan view to generate the second image frame.

[0276] Optionally, as an embodiment, the processing unit 1110 is further configured to:

[0277] One or more of the following processing is performed on the plan view: transparency processing, translation processing, and scaling processing.

[0278] Optionally, as an embodiment, the processing unit 1110 is used to create a plan view, including:

[0279] Determine first spatial information, where the first spatial information is used to characterize the spatial distribution of the second image frame in a screen coordinate system of the open graphics library;

[0280] Converting the first spatial information into second spatial information, where the second spatial information is used to represent the spatial distribution of the second image frame in a world coordinate system of the open graphics library;

[0281] The plan view is created based on the second spatial information.

[0282] Optionally, as an embodiment, the processing unit 1110 is configured to call the display unit 1120 to display the first animation effect based on the first sequence of frames, including:

[0283] Based on the numbering order of the image frames, the display unit 1120 is called to play the first number of first image frames and the second number of second image frames in sequence.

[0284] In a possible example, the processing unit 1110 may be implemented by a processor or a processing unit. The display unit 1120 may be implemented by a display screen. It should be understood that the above-mentioned device 1100 is embodied in the form of a functional unit. The term "unit" here may be implemented in the form of software and / or hardware, and the embodiments of the present application do not specifically limit this.

[0285] For example, a "unit" may be a software program, a hardware circuit, or a combination of the two that implements the above functions. The hardware circuit may include an application specific integrated circuit (ASIC), an electronic circuit, a processor (such as a shared processor, a dedicated processor, or a group processor, etc.) and a memory that executes one or more software or firmware programs, an integrated logic circuit, and / or other suitable devices that can provide the above functions.

[0286] 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.

[0287] 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.

[0288] 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.

[0289] 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.

[0290] 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.

[0291] 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 SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), and direct RAM bus RAM (DR RAM).

[0292] 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.

[0293] 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.

[0294] 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.

[0295] In addition, the terms "system" and "network" are often used interchangeably in this article. The term "and / or" in this article is only a description of the association relationship of the 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, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0296] The terms (or numbers) "first", "second", ..., etc. that appear in the embodiments of the present application are only used for descriptive purposes, that is, only to distinguish different objects, such as different "image frames", etc., and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, the features defined as "first", "second", ..., etc. may explicitly or implicitly include one or more features. In the description of the embodiments of the present application, "at least one (item)" refers to one or more. "Multiple" means two or more. "At least one of the following (item)" or similar expressions thereof refers to any combination of these items, including any combination of a single (item) or a plurality of (items).

[0297] 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 weather information of an application, determining a first sequence of frames, the first sequence of frames being used to generate a first animation effect, the first sequence of frames comprising a first number of first image frames and a second number of second image frames, the first number of first image frames being a portion of image frames acquired from image frame resources corresponding to the first animation effect, the second image frame being generated based on any image frame of the first number of first image frames, wherein the second number is greater than the first number; Based on the first sequence of frames, the first animation effect is displayed.

2. The method according to claim 1, characterized in that The weather information includes a thunderstorm; and the first animation effect is a lightning animation effect.

3. The method according to claim 1 or 2, characterized in that: The determining of the first sequence of frames comprises: Determine whether a third number is less than the sum of the first number and the second number, the third number being used to represent the number of image frames existing in the current first sequence of frames; When it is determined that the third number is less than the sum of the first number and the second number, determining whether the third number is less than the first number; When the third number is greater than or equal to the first number, the second image frame is generated.

4. The method according to claim 3, characterized in that The determining the first sequence of frames further comprises: When the third number is smaller than the first number, the first image frame is loaded and drawn.

5. The method according to any one of claims 1 to 4, characterized in that The second image frame is generated by: Creating a plan view, wherein the plan view is a plan view under an open graphics library; Obtain a resource image, and bind the resource image as a texture to a shader, wherein the resource image is any one of the first number of first image frames; The shader is bound to the plan view to generate the second image frame.

6. The method according to claim 5, characterized in that The method further comprises: One or more of the following processing is performed on the plan view: transparency processing, translation processing, and scaling processing.

7. The method according to claim 5 or 6, characterized in that: The creating of the plan view comprises: Determine first spatial information, where the first spatial information is used to characterize the spatial distribution of the second image frame in a screen coordinate system of the open graphics library; Converting the first spatial information into second spatial information, where the second spatial information is used to represent the spatial distribution of the second image frame in a world coordinate system of the open graphics library; The plan view is created based on the second spatial information.

8. The method according to any one of claims 1 to 7, characterized in that The displaying the first animation effect based on the first sequence of frames includes: Based on the numbering order of the image frames, the first number of first image frames and the second number of second image frames are played in sequence.

9. An electronic device, characterized in that: The electronic device comprises a processor and a memory, wherein the processor and the memory are coupled, and the memory is used to store a computer program. When the computer program is executed by the processor, the electronic device executes the method according to any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the electronic device executes the method according to any one of claims 1 to 8.

11. 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 8.

Images