Dynamic effect presentation method, device, and computer-readable storage medium

Abstract

The present application relates to the technical field of terminals, and discloses a dynamic effect presentation method, a device, and a computer-readable storage medium, which are capable of providing a dynamic effect presentation process having high performance, low power consumption, high flexibility, and high consistency between application and system settings. The present solution allows a device to generate and then present a final icon dynamic effect according to application dynamic effect information, such as rendering information and a dynamic effect attribute, corresponding to an icon pre-configured by an application, and system dynamic effect information, such as an icon supported by a system (layered information and universal dynamic effect information of each layer) in combination with a system setting of the device. This allows the presentation of icon dynamic effects to be adaptively adjusted according to system settings, ensuring consistency between application dynamic effects and system settings without modifying application dynamic effect information. Furthermore, system dynamic effect information is provided by a device, fulfilling requirements for lightweight configuration of application dynamic effects.

Description

Motion rendering methods, devices and computer-readable storage media

[0001] This application claims priority to Chinese Patent Application No. 202411752274.6, filed on November 29, 2024, entitled "Method, Apparatus and Computer-Readable Storage Medium for Motion Effect Presentation", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal technology, and in particular to a motion effect rendering method, device and computer-readable storage medium. Background Technology

[0003] With the development of hardware and software technologies in electronic devices, more and more electronic devices are using animation effects to create a more visual experience. These include, but are not limited to, one or more animation effects such as display effects, vibration effects, sound effects, or lighting effects, to enhance the user experience. Currently, the rendering of animation effects is implemented by the application itself. When system settings change, such as system language, system aspect ratio, system theme, system font, system font size, text weight, color mode, etc., the application cannot adapt the animation effects accordingly. This may result in inconsistencies between the application's animation effects and the system settings, negatively impacting the user experience. Summary of the Invention

[0004] This application provides a motion effect rendering method, device, and computer-readable storage medium, which can provide a high-performance, low-power, highly flexible motion effect rendering process with high consistency between application and system settings.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] Firstly, a method for rendering animation effects is provided. This method may be applied to a device. The method includes: receiving a user operation to trigger an animation effect of an icon; obtaining application animation effect information of the icon, system animation effect information of the device, and system settings of the device, wherein the application animation effect information indicates the animation effect configuration of the icon's application, and the system animation effect information indicates general animation effects of icons supported by the device system; and rendering the animation effect of the icon based on the application animation effect information, system animation effect information, and system settings, wherein the animation effect is consistent with the device's system settings.

[0007] As an example, application animation information includes rendering information and animation attributes of the icon configured in the application to which the icon belongs.

[0008] As an example, rendering information includes one or more of the following for the icon: position, size, font weight, and rendering parameters.

[0009] As an example, motion effects properties include one or more of the following: duration, curve, frame rate, and layer change properties of each element.

[0010] As an example, system settings include one or more of the following: system language, system scale, system theme, system font, system font size, text weight, and color mode.

[0011] The solution provided in the first aspect above allows the device to generate and display icon animations based on the application's pre-configured icon animation information and the device's system animation information, combined with the device's system settings. By introducing the influence of system settings on animations, the presentation of icon animations can be adaptively adjusted according to system settings, ensuring consistency between application animations and system settings without modifying application animation information. This approach offers high performance, low power consumption, and high flexibility.

[0012] As an example, the above icon includes Symbol.

[0013] As one possible implementation, the icon includes multiple elements, which may include one or more of the following: text, images, or symbols. The device supports hierarchical management of the icon's multiple elements, wherein at least two of the multiple elements belong to different layers, and / or at least two of the multiple elements belong to the same layer. This allows for richer and more flexible animation effects for the icon, meeting diverse user needs and improving the user's visual experience.

[0014] As one possible implementation, the above-mentioned presentation of icon animations based on application animation information, system animation information, and system settings includes: parsing information and calculating icon layout information based on application animation information and system settings; and determining the animation to be presented based on the parsing results, layout information calculation results, and system animation information. Thus, by introducing the influence of system settings on animations, such as layout information, the presentation of icon animations can be adaptively adjusted according to system settings, ensuring consistency between application animations and system settings.

[0015] As an example, the layout information of an icon may include, but is not limited to, one or more of the following: position, size, rounded corners, text ratio, interface ratio, theme, color, font, font size, or text weight.

[0016] As one possible implementation, the above-mentioned information parsing and icon layout calculation based on application animation information and system settings includes: modifying the application animation information according to system settings; and parsing and calculating the icon layout information based on the modified application animation information. Thus, by introducing the influence of system settings on animations, such as layout information, the presentation of icon animations can be adaptively adjusted according to system settings, ensuring consistency between application animations and system settings.

[0017] As one possible implementation, the above-mentioned method of determining the icon's animation effect based on information parsing results, layout information calculation results, and system animation information includes: obtaining the icon's layer information from the system animation information; obtaining the common animation effect information for each layer of the icon from the system animation information based on the layer information; and performing animation analysis and rendering parameter determination based on the layout information and the common animation effect information for each layer to determine the animation effect to be presented. The animation effect includes the animation effects of each layer of elements within the icon. Thus, by determining the animation effects of each layer of elements within the icon based on the common animation effect information of device layer management, animation effects can be presented at the layer-by-layer granularity, supporting richer and more flexible animation effects for icons, meeting diverse user needs, and improving the user's visual experience.

[0018] As one possible implementation, after determining the motion effect to be presented, the above method further includes: decomposing the motion effect into multiple motion effect frames; the above presentation of the motion effect includes: rendering and displaying multiple motion effect frames frame by frame.

[0019] As an example, a device can break down motion effects into multiple atomic motion frames. For instance, a device can use an atomic motion engine to break down motion effects into multiple atomic motion frames and render and display them frame by frame. By introducing atomic motion effects, icon motion effects can respond to the latest operation commands in real time, such as being interruptible or redirectable, and can inherit the speed of the previous motion effect, conforming to the turning effect of a real object, making the inter-frame transitions of the motion effects smooth and natural.

[0020] As one possible implementation, at least two layers of elements within an icon can have identical animations, and / or at least two layers of elements can have different animations. This allows for layer-by-layer animation rendering, supporting richer and more flexible icon animations, meeting diverse user needs, and improving the user's visual experience.

[0021] As one possible implementation, the device includes an icon system. The aforementioned acquisition of application animation information, system animation information, and system settings includes: the icon system acquiring application animation information, system animation information, and system settings through a single component. Thus, by implementing this based on a single-node architecture, unnecessary interface rendering and refreshes can be reduced, as can related data loading, transmission, and processing, maintaining high-performance and low-power animation presentation.

[0022] As an example, the icon system is a Symbol system, which includes Symbol components. The icon system obtains application animation information, system animation information, and system settings through Symbol components.

[0023] As one possible implementation, the above method also includes: when presenting motion effects, adaptively adjusting the device's screen refresh rate based on low-temperature polycrystalline oxide (LTPO) motion effect frame control technology. In this way, by adaptively adjusting the screen refresh rate to maintain a low refresh rate (e.g., 1Hz), unnecessary interface rendering and refreshing, related data transmission and processing are reduced, thus maintaining high-performance and low-power presentation of the motion effects.

[0024] As one possible implementation, the aforementioned animation effects include one or more of the following: bouncing, pulse, scaling, fade-in, fade-out, color change, or replacement. This allows for richer and more flexible animation effects for icons, meeting diverse user needs and improving the user's visual experience.

[0025] As one possible implementation, the aforementioned icon can be located on one or more of the following pages: control center, notification bar, settings page, home screen, negative one screen, and application page. Thus, the solution described in this application can be applied to a wide variety of interface icons.

[0026] In a second aspect, an apparatus is provided, comprising: a display screen for displaying an interface; a memory for storing computer program instructions; and a processor for executing the computer program instructions to support the apparatus in implementing the methods as described in any possible implementation of the first aspect.

[0027] Thirdly, a readable storage medium is provided that stores program instructions that, when executed by a device, can implement the methods in any possible implementation of the first aspect.

[0028] Fourthly, a program product containing instructions is provided, which, when run on a device, enables the device to perform methods as described in any possible implementation of the first aspect.

[0029] Fifthly, a chip system is provided, comprising processing circuitry and a storage medium storing program instructions; when executed by the processing circuitry, the program instructions can implement the methods described in any possible implementation of the first aspect. The chip system may be composed of chips or may include chips and other discrete devices. Attached Figure Description

[0030] Figure 1A is a schematic diagram of an application icon display process;

[0031] Figure 1B is a schematic diagram of the development process of display animation provided by an icon system;

[0032] Figure 2 is a schematic diagram of the hardware structure of a device provided in an embodiment of this application;

[0033] Figure 3 is a schematic diagram of a system architecture for realizing motion effect presentation provided in an embodiment of this application;

[0034] Figure 4 is a schematic diagram of three motion effect presentation scenarios provided in the embodiments of this application;

[0035] Figure 5 is a flowchart of a motion effect rendering method provided in an embodiment of this application;

[0036] Figure 6 is a schematic diagram of a motion effect presentation process provided in an embodiment of this application;

[0037] Figure 7 is a schematic diagram of the effect of an icon animation adaptation system setting provided in an embodiment of this application;

[0038] Figure 8 is a schematic diagram of another motion effect presentation process provided in an embodiment of this application;

[0039] Figure 9 is a flowchart of a motion effect presentation process provided in an embodiment of this application. Detailed Implementation

[0040] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; "and / or" in this text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Furthermore, in the description of the embodiments of this application, "multiple" refers to two or more than two.

[0041] In the following text, the terms "first," "second," etc., are used only to distinguish different descriptive objects and do not limit the position, order, priority, quantity, or content of the described objects. For example, if the described object is a "field," then the ordinal numbers before "field" in "first field" and "second field" do not limit the position or order of the "fields." "First" and "second" do not limit whether the "fields" they modify are in the same message, nor do they restrict the order of "first field" and "second field." Similarly, if the described object is a "level," then the ordinal numbers before "level" in "first level" and "second level" do not limit the priority of the "levels." Furthermore, the quantity of described objects is not limited by ordinal numbers and can be one or more; for example, in "first device," the number of "devices" can be one or more. In addition, objects modified by different prefixes can be the same or different. For example, if the described object is "device," then "first device" and "second device" can be devices of the same type or different types. Similarly, if the described object is "information," then "first information" and "second information" can be information with the same content or information with different content. In summary, the use of ordinal numbers and other prefixes used to distinguish the described objects in the embodiments of this application does not constitute a limitation on the described objects. The description of the described objects is given in the claims or the context of the embodiments, and the use of such prefixes should not constitute an unnecessary limitation.

[0042] Furthermore, in the embodiments of this application, "connection" can be a direct connection or an indirect connection; in addition, it can refer to an electrical connection or a communication connection; for example, the connection of two electrical components A and B can refer to A and B being directly connected, or it can refer to A and B being indirectly connected through other electrical components or connection media, or it can refer to A and B being indirectly connected through other communication devices or communication media, as long as it enables communication between A and B.

[0043] To enhance the visual appeal and / or prominence of the icon and improve user experience, devices may display icons with animations, including but not limited to display animations, vibration animations, sound animations, or lighting animations. Icons may contain one or more of the following elements: text, images, or symbols.

[0044] In some embodiments, applications may customize their own animations to provide personalized and / or more diverse effects. For example, applications such as health, games, camera, gallery, smart home, automotive, sports, weather, navigation, and control center may customize one or more icon animations, such as display animations, based on their respective icon functions, usage scenarios, or user preferences.

[0045] As an example, please refer to Figure 1A, which illustrates an application icon display process. As shown in Figure 1A, the application can display the icon through the Image component and trigger an icon display animation when the icon is displayed. For example, the application can instruct the Image component to trigger the icon display, and the Image component can render an image of the icon according to the application's instruction, such as in SVG format. Upon receiving a user operation to trigger the animation, the application can respond to the user's operation by loading the Canvas component. After the Canvas component is successfully loaded, it loads the underlying component of an animation library (such as, but not limited to, the Lottie library). The underlying component of the animation library loads the rendering file (such as the rendering context) and the application's animation file from the Canvas component. The underlying component of the animation library performs frame decomposition based on the rendering file (such as the rendering context) and the animation file, and then renders the corresponding animation so that the device can display the animation.

[0046] As an example, the Image component can be used to display icons, etc.; the Canvas component can be used as a backdrop for drawing and rendering icons and their display animations.

[0047] SVG format is an open web standard based on Extensible Markup Language (XML). SVG format images can be used to describe two-dimensional vector graphics of icons. In some embodiments, the image format of the icon shown in Figure 1A may also include, but is not limited to, PNG, JPG, BMP, GIF, and other formats.

[0048] In the application icon display scheme shown in Figure 1A, the presentation of the animation requires the participation of multiple components (such as the media (Image) component, the canvas component, and the underlying components of the animation library). The application triggering the switching process of multiple components will cause multiple renderings and refreshes of the interface, resulting in poor animation performance. In addition, in this scheme, the rendering file and / or animation file are defined by the application. If the system settings change, such as changes in one or more of the system language, system aspect ratio, system theme, system font, system font size, text weight, color mode, etc., the application cannot adapt and adjust the display animation according to the changes in system settings. This may lead to inconsistencies between the application animation and the system settings, affecting the user experience.

[0049] To address the aforementioned issues in animation rendering, in some embodiments, the device system can provide general animation effects applicable to icons, such as display animations, through an icon system. Each icon includes multiple elements, including one or more of the following: text, images, or symbols. These elements may be decoupled from each other; for example, different elements may be managed and their animations managed hierarchically by the icon system. The device supports hierarchical management of multiple elements within an icon, with different elements belonging to different layers, and elements in different layers able to independently render animations.

[0050] In some embodiments, the decoupling of different elements includes: elements of different types may be decoupled from each other, such as text and images, text and symbols, and images and symbols being decoupled from each other; in some embodiments, the decoupling of different elements includes: different elements of the same type may be decoupled from each other, such as different texts being decoupled from each other, different images being decoupled from each other, and different symbols being decoupled from each other.

[0051] Of course, in some embodiments, different types of elements may belong to the same layer, or different elements of the same type may belong to the same layer. Elements belonging to the same layer can be presented as a whole for animation.

[0052] For example, an icon (such as a Symbol) may have at least two elements belonging to different layers, and / or an icon (such as a Symbol) may have at least two elements belonging to the same layer.

[0053] As an example, please refer to Figure 1B, which shows a schematic diagram of the development process of display animation provided by an icon system. As shown in Figure 1B, in stage A1, the icon system could support animation effects for over 1500 icons (such as Symbols), supporting monochrome rendering, 9 font weight variations, and 3 aspect ratio variations, as well as localization and customization of display animation effects. Subsequently, with the development of hardware and software technology, the number of icons (such as Symbols) that the icon system could support for animation effects increased sequentially: over 2400 in stage A2, over 3100 in stage A3, over 4000 in stage A4, over 5000 in stage A5, and over 6000 in stage A6. In stage A2, the icon system supported not only monochrome rendering but also multi-color rendering. In stage A3, it supported not only monochrome and multi-color rendering but also layered rendering and color palette rendering. In stage A4, automatic rendering and variable color support were added. In stage A5, seven general animation effects were added, along with support for generating new icon components (symbols). The A6 icon system supports 10 general animation effects and adds support for special animation effects, such as animation replacement (e.g., magic replace).

[0054] Although the display animations provided by the icon system have been continuously improved, the animations that the icon system can provide are still relatively limited, and therefore often cannot meet the needs of various applications for icon animation presentation.

[0055] To address the aforementioned issues in current icon animation rendering scenarios, this application provides an animation rendering method. This method can obtain application animation information such as rendering information and animation attributes corresponding to pre-configured icons through a single node (e.g., a component), as well as system animation information such as layering information of icons supported by the system and common animation information for each layer. Combined with one or more system settings such as the device's system language, system scale, system theme, system font, system font size, text thickness, and color mode, the final icon animation is generated and displayed. Based on this, the application animation can be adaptively adjusted according to system settings, ensuring consistency between the application animation and system settings. Furthermore, the single-node implementation process reduces unnecessary interface rendering and refreshes, reduces related data loading, transmission, and processing, and maintains high-performance, low-power animation rendering.

[0056] For example, rendering information may include, but is not limited to, one or more of the following for the icon: position, size, weight, rendering parameters (including but not limited to color, rendering mode, etc.); weight refers to the thickness of the stroke relative to the height of the character; rendering mode may include, but is not limited to, one or more of the following: monochrome rendering mode, multicolor rendering mode, hierarchical rendering mode, palette rendering mode, or automatic rendering mode.

[0057] For example, motion effect attributes may include, but are not limited to, the duration of the motion effect, curve, frame rate, and one or more of the following for each layer element: transparency, rotation, position, anchor point, scaling, etc.; general motion effect information for each layer may include, but is not limited to, one or more of the following: general motion effect type, general motion effect direction, general motion effect count, etc.

[0058] In this embodiment, the icon is a layered icon where each layer supports custom animation effects. As an example, the icon is a scalable vector icon, which allows the icon to maintain clear and accurate display on devices of different sizes and resolutions, ensuring that the icon has a consistent appearance and texture across different interface elements.

[0059] As an example, applications can pre-configure application animation information by pre-configuring rendering information and animation attributes corresponding to the resource IDs of the icons. The system can manage system animation information such as the layered information of its supported icons and the common animation information of each layer at the granularity of resource IDs.

[0060] As an example, the icons described in the following embodiments of this application include Symbols.

[0061] The device described in this application includes one or more displays. For example, the device may include, but is not limited to, smartphones, netbooks, tablets, smartwatches, smart bracelets, smart drawing tablets, handwriting tablets, PDAs, in-vehicle computers, vehicle infotainment systems, personal computers (PCs) (such as laptops), personal digital assistants (PDAs), portable multimedia players (PMPs), augmented reality (AR) / virtual reality (VR) devices, smart TVs, projection devices, or motion-sensing game consoles in human-computer interaction scenarios, etc., all devices with display functions. Alternatively, the device may be of other types or structures, which are not limited in this application.

[0062] As an example, please refer to Figure 2, which shows a schematic diagram of the hardware structure of a device provided in an embodiment of this application.

[0063] As shown in Figure 2, the device includes a processor 210, a memory (including an external memory interface 220 and an internal memory 221), a universal serial bus (USB) interface 230, a charging management module 240, a power management module 241, a battery 242, antenna 1, antenna 2, a mobile communication module 250, a wireless communication module 260, an audio module 270, a speaker 270A, a receiver 270B, a microphone 270C, a headphone jack 270D, a sensor module 280, buttons 290, a motor 291, indicator lights 292, a camera 293, a display screen 294, etc.

[0064] The sensor module 280 includes a touch sensor 280A and a pressure sensor 280B. In some embodiments, the sensor module 280 may also include, but is not limited to, one or more of the following: a temperature sensor, a gyroscope sensor, a barometric pressure sensor, a magnetic sensor, an accelerometer, a distance sensor, a proximity sensor, a fingerprint sensor, an ambient light sensor, a bone conduction sensor, etc.

[0065] Processor 210 includes one or more processing units (such as a central processing unit (CPU)). For example, processor 210 includes an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a flight controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). These different processing units may be independent devices or integrated into one or more processors.

[0066] The processor 210 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 210 is a cache memory. This memory can store instructions or data that the processor 210 has just used or that are used repeatedly. If the processor 210 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 210, and thus improves the efficiency of the system.

[0067] In some embodiments of this application, the processor 210 can obtain, through a single node, the application animation information (such as rendering information, animation attributes, etc.), system animation information (such as the layering information of the icon and the general animation information of each layer, etc.), and one or more system settings such as system language, system ratio, system theme, system font, system font size, text thickness, and color mode of the icon based on the user operation used to trigger the icon animation effect, and render the icon animation effect based on the obtained information.

[0068] In some embodiments of this application, the processor 210 is also configured to save application motion effect information (such as rendering information, motion effect attributes, etc.) according to the application's configuration regarding motion effects.

[0069] In some embodiments of this application, the processor 210 is also configured to manage the icon system's configuration regarding animation effects according to the capabilities of the icon system, save system animation effect information, and manage system settings according to the settings of each system setting item.

[0070] The device's wireless communication function can be achieved through antenna 1, antenna 2, mobile communication module 250, wireless communication module 260, modem processor, and baseband processor.

[0071] In some embodiments of this application, the device can communicate with other devices through antenna 1, antenna 2, mobile communication module 250, wireless communication module 260, modem processor, and baseband processor.

[0072] Display screen 294 includes a display panel. As an example, the display panel may be a low-temperature polycrystalline silicon (LTPS) display, a low-temperature polycrystalline oxide (LTPO) display, a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED) display, a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc.

[0073] In embodiments of this application, the device may include one or more displays 294.

[0074] The device implements display functions through a GPU, a display screen 294, and an application processing unit (AP). The GPU is a microprocessor for image processing, connected to the display screen 294 and the AP. The GPU is used to perform mathematical and geometric calculations for drawing, rendering, or compositing graphics. The processor 210 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0075] In some embodiments of this application, the device can perform related processing of the interface including icon images and / or icon animations through one or more such as AP, CPU, GPU, etc., and display the interface including icon images and / or icon animations through the display screen 294.

[0076] In this embodiment, the sensor module 280 may include, but is not limited to, one or more of the following: touch sensor 280A, pressure sensor 280B.

[0077] Touch sensor 280A, also known as a "touch panel," is used to detect touch operations applied to or near it. The touch sensor can transmit raw information, such as touch location, touch pressure, touch area, and touch duration, to the processor for subsequent operation information acquisition, input event generation, and processing. In some embodiments, the processor can provide visual output related to the touch operation through display screen 294. Touch operations include click, long press, swipe, and drag, and are not limited to these; click operations may include, but are not limited to, single-click and double-click operations; swipe operations may include, but are not limited to, single-finger swipe and multi-finger swipe operations.

[0078] Pressure sensor 280B is used to sense pressure signals and convert them into electrical signals. There are many types of pressure sensors, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may consist of at least two parallel plates made of conductive material. When force is applied to the pressure sensor, the capacitance between the electrodes changes. The device determines the pressure intensity based on the change in capacitance. When a touch operation is applied to the display screen 294, the device can detect the touch force, etc., using the pressure sensor. The device can also calculate the touch position and touch method based on the detection signal from pressure sensor 280B.

[0079] In some embodiments of this application, the sensor module 280, such as touch sensor 280A and / or pressure sensor 280B, can be used to detect user operations, including but not limited to one or more of the following operations: click operation, long press operation, swipe operation, drag operation, etc.

[0080] The external memory interface 220 can be used to connect an external memory card, such as a Micro SD card, to expand the device's storage capacity. The external memory card communicates with the processor 210 through the external memory interface 220 to perform data storage functions.

[0081] Internal memory 221 can be used to store computer executable program code. Exemplarily, the computer program may include an operating system program and application programs. The executable program code includes instructions. Processor 210 executes various functional applications and data processing of the device by running the instructions stored in internal memory 221. Internal memory 221 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function, etc. The data storage area may store data created during device use, etc. Furthermore, internal memory 221 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 210 executes various functional applications and data processing of the device by running instructions stored in internal memory 221 and / or instructions stored in memory disposed within the processor.

[0082] In some embodiments of this application, the external memory interface 220 can store application pre-configured animation information and the like in an external memory card connected to it, such as a Micro SD card; and / or, the external memory interface 220 can store system animation information supported by the icon system and the like in an external memory card connected to it, such as a Micro SD card; and / or, the external memory interface 220 can store system settings in an external memory card connected to it.

[0083] In some embodiments of this application, the internal memory 221 can be used to store one or more of the following: application animation information pre-configured by the application, system animation information supported by the icon system, and system settings.

[0084] In some embodiments of this application, the external memory interface 220 and / or the internal memory 221 can support updates to one or more of the following: application animation information, system animation information supported by the icon system, and system settings. For example, when the icon system is upgraded, the external memory interface 220 and / or the internal memory 221 can support updates to the system animation information; or, as an application can modify its pre-configured application animation information as needed; or, when a user changes the settings of system settings, the external memory interface 220 and / or the internal memory 221 can support modifications to the system settings.

[0085] The device can perform audio functions, such as music playback and recording, through the audio module 270, speaker 270A, receiver 270B, microphone 270C, and access point (AP).

[0086] In some embodiments of this application, one or more of the following components, such as audio module 270, speaker 270A, and AP, can support the device in presenting sound effects, etc.

[0087] The device can achieve vibration function through motor 291.

[0088] In some embodiments of this application, the motor 291 is capable of supporting the device to exhibit vibration effects, etc.

[0089] The device can display indicator lights via indicator light 292.

[0090] In some embodiments of this application, the indicator light 292 can support the device to display lighting effects, etc.

[0091] For an introduction to the charging management module 240, power management module 241, battery 242, etc. shown in Figure 2, please refer to conventional technology; they will not be elaborated here.

[0092] The structure illustrated in Figure 2 of this application does not constitute a specific limitation on the device. In other embodiments of this application, the device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0093] As an example, please refer to Figure 3, which shows a schematic diagram of a system architecture for implementing motion effects according to an embodiment of this application. As shown in Figure 3, the system architecture includes a user interface (UI) framework component 310 and a rendering module 320.

[0094] The UI framework component 310 can acquire information through a single node (such as a Symbol component), such as pre-set application animation information, icon information, system animation information supported by the system, and system settings. Based on this acquired information, it can calculate and parse the layout information of icons (such as Symbols). For example, the UI framework component 310 can perform animation analysis and rendering parameter parsing based on application animation information and system settings, as well as calculate layout information. Based on the animation analysis results, rendering parameter parsing results, and layout information calculation results, it can construct paragraphs and transmit the constructed paragraphs to the rendering module 320.

[0095] For example, the layout information of an icon (such as a Symbol) may include, but is not limited to, one or more of the following: position, size, rounded corners, text ratio, interface ratio, theme, color, font, font size, or text weight.

[0096] The rendering module 320 can be used to determine the animation effects of icons (such as Symbols) to be presented, determine the rendering parameters of the animation effects, and render the icon (such as Symbol) animation effects according to the rendering parameters. For example, the rendering module 320 can perform animation analysis and determine rendering parameters based on the system animation information obtained from the paragraph and Symbol component of the UI framework component 310, determine the icon (such as Symbol) animation effects to be presented and the rendering parameters of the animation effects, and call the atomic animation engine to decompose the icon (such as Symbol) animation effects into frames and render them.

[0097] For example, the atomic motion engine can provide various types of atomic motion effects, including but not limited to atomic motion effects related to deformation, position, transparency, color, path, transformation, or masking. For instance, atomic motion effects may include, but are not limited to, one or more of the following: path deformation, fill color, position, opacity, stroke color, trimpath, alpha matte, alpha inverted matte, masks, scale, mask path, rotation, linear interpolation, interpolation, or expressions.

[0098] For example, path deformation is used to change the shape of the motion effect path; fill color is used to set the color inside the motion effect; position is used to control the position of each element of the icon (such as Symbol); opacity is used to adjust the opacity of each element of the icon (such as Symbol); stroke color is used to set the color of the motion effect edge; trimpath is used to control the visibility of a specific area in the motion effect by trimming the path; alpha matte is used to achieve the transparency effect of the motion effect, for example, by controlling its opacity by assigning an alpha value to the element; alpha inverted matte is the inverted effect of alpha matte, used to achieve a specific visual presentation, usually used in combination with opacity and masking; masks are used to control the visibility of a specific area in the motion effect to achieve a masking effect; scale is used to scale each element of the icon (such as Symbol); mask path is used to control the path of the mask; rotation is used to rotate each element of the icon (such as Symbol); linear... Interpolation (linear interpolation), Interpolation, and Expressions are used to control the complex behavior of motion effects and / or control the complex behavior of motion effects.

[0099] As an example, application animation information may include, but is not limited to, resource IDs corresponding to one or more icons (such as Symbols), and one or more of the following information about the icons (such as Symbols): rendering information, animation attributes, etc. Application animation information is set by the application based on one or more pre-defined parameters such as icon function, usage scenario, or user preferences. By supporting applications in defining and pre-configuring icon (such as Symbol) animations, the animation-related configuration process is simplified, offering high flexibility and performance; furthermore, the pre-configured information is uniformly managed by the device system, thus conforming to system specifications and ensuring system consistency.

[0100] For example, rendering information may include, but is not limited to, one or more of the following: size, weight, rendering parameters (including but not limited to color, rendering mode, etc.); weight refers to the thickness of the stroke relative to the height of the character; rendering mode may include, but is not limited to, one or more of the following: monochrome rendering mode, multicolor rendering mode, hierarchical rendering mode, palette rendering mode, or automatic rendering mode.

[0101] Among them, monochrome rendering mode refers to using the same color to represent the animation effects of each layer of elements in an icon (such as a Symbol). Multicolor rendering mode refers to using multiple colors to represent the animation effects of each layer of elements in an icon (such as a Symbol). Layered rendering mode refers to dividing the elements of an icon (such as a Symbol) into layers and coloring each layer based on these layers; for example, dividing them into character layers, prop layers, and background layers according to the scene content, or into foreground layers, midground layers, and background layers according to the shot type, or into color layers, highlight layers, shadow layers, reflection layers, refraction layers, and glow layers according to visual attributes. Palette rendering mode refers to coloring each layer of elements in an icon (such as a Symbol) and supports free coloring of each layer of elements. Automatic rendering mode refers to using the default rendering mode to color each layer of elements in an icon (such as a Symbol) when no specific rendering mode is configured.

[0102] For example, animation properties may include, but are not limited to, the duration, curve, and frame rate of the animation, as well as layer change properties of each element. For example, layer change properties may include, but are not limited to, one or more of the following: transparency, rotation, position, anchor point, scaling, etc.

[0103] Duration is a fundamental element in creating motion effects, and its duration may be related to one or more factors such as the icon (e.g., a Symbol), the scene, etc. For example, the duration of motion effects is generally expressed in milliseconds (ms). Curves and duration work together to create the rhythm of the motion effect; curves may include, but are not limited to, Bézier curves. For example, Bézier curves, based on their shape, may include one or more of the following types: standard curves, deceleration curves, and acceleration curves. Frame rate is the number of times an icon (e.g., a Symbol) is displayed on the screen per unit of time, such as frames per second (FPS).

[0104] As an example, system animation information may include, but is not limited to, the layering information and common animation information for each layer of one or more icons (such as Symbols) supported by the icon system. The layering information of an icon (such as Symbols) represents the layer to which each element (text, image, symbol, etc.) within the icon (such as Symbols) belongs, as well as the common animation information for each layer of elements within the icon (such as Symbols). By providing information related to common animations such as high-frequency animations, the icon system can meet the application's need for lightweight animation configuration.

[0105] For example, general motion effect information may include, but is not limited to, one or more of the following: general motion effect type, general motion effect direction, and general motion effect count.

[0106] Taking display animations as an example, common animation types may include, but are not limited to, one or more of the following: bouncing, pulse, scaling, fade-in, fade-out, color change, or replacement. Bouncing and scaling are used to add vivid dynamic effects to icons (such as Symbols); pulses are used to make icons (such as Symbols) bounce regularly to attract user attention; fade-in and fade-out are used to achieve smooth appearance and disappearance of elements; color changes are used to convey information or increase visual interest through color changes; and replacement is used to achieve smooth switching between icons (such as Symbols). Common animation direction may include, but is not limited to, left to right, right to left, top to bottom, bottom to top, etc., aiming to conform to user intuition and interface logic. Common animation frequency may include, but is not limited to, one animation, two animations, ..., looping animations, etc.

[0107] As an example, system settings may include, but are not limited to, one or more of the following supported by the system: system language, system scale, system theme, system font, system font size, text weight, color mode, etc. For example, system language includes, but is not limited to, Chinese, English, Japanese, Korean, etc.; system scale includes, but is not limited to, one or more of the following: text scale, interface scale, etc.; system theme refers to the interface style of the device system, and interface style includes, but is not limited to, one or more of the following: system theme color, window color, control layout, icon style, etc.; system theme color includes, but is not limited to, one or more of the following: red theme, blue theme, etc.; system font includes, but is not limited to, one or more of the following: KaiTi, SongTi, etc.; system font size includes, but is not limited to, one or more of the following: extra-large font size, large font size, standard font size, small font size, or extra-small font size, etc.; text weight includes, but is not limited to, one or more of the following: boldest, thickest, standard thickness, thinnest, or thinnest, etc.; color mode includes, but is not limited to, one or more of the following: dark mode, light mode, etc.

[0108] Figure 3 is merely an example of a system architecture for implementing motion effects, and the structure illustrated in Figure 3 does not constitute a specific limitation on the system architecture. In other embodiments of this application, the system architecture for implementing motion effects includes more or fewer modules or components than illustrated, or combines certain modules or components, splits certain modules or components, or arranges different modules or components. The illustrated modules or components may be implemented in hardware, software, or a combination of software and hardware.

[0109] The carrier for presenting animation effects described in this application embodiment may include, but is not limited to, icons (such as Symbols). An icon (such as a Symbol) is a layered icon where each layer supports customized animation effects. Icons (such as Symbols) may be located on any page such as the device desktop, the negative one screen, the control center, the notification bar, function pages, application pages, and mini-program pages, and this application embodiment does not limit this.

[0110] Taking an icon (such as a Symbol) located in the control center of a smartphone as an example, please refer to Figure 4(a). The animation presentation method provided in this application embodiment can be applied to one or more of the following operations performed by the user on the control center interface of the mobile phone: music playback, wireless, Bluetooth, sound mode, volume icon (such as Symbol), phone mode, super terminal, flashlight, auto-rotate icon, mobile data, sharing, location information, airplane mode, personal hotspot, screenshot, brightness adjustment, etc. This operation can trigger the icon (such as Symbol) animation effect, including but not limited to one or more of the following animation effects: display animation effect, vibration animation effect, sound animation effect, or light animation effect.

[0111] Taking the icon (such as Symbol) located on the negative one screen of a smartphone as an example, please refer to Figure 4(b). The animation presentation method provided in this application embodiment can be applied to one or more of the following operations by the user on the negative one screen of the mobile phone: user, search box, scan, payment code, mobile phone recharge, video, video playback, screen rotation, etc. The operation can trigger the icon (such as Symbol) animation effect, including but not limited to one or more of the following animation effects: display animation effect, vibration animation effect, sound animation effect or light animation effect.

[0112] Taking the icon (such as Symbol) located in the vehicle's control center as an example, please refer to Figure 4(c). The animation presentation method provided in this application embodiment can be applied to one or more of the following operations performed by the user on the vehicle's control center interface: driving mode, trunk, one-click window closing, brightness, screen recording, automatic parking, door child lock, window ventilation, nap mode, screenshot, car wash mode, charging port, fuel filler, vehicle power off, assisted parking, ambient lighting, dark mode, rearview mirror folding, home, volume, air conditioning, temperature setting, ventilation, window defrosting, etc. This operation can trigger the icon (such as Symbol) animation effect, including but not limited to one or more of the following animation effects: display animation effect, vibration animation effect, sound animation effect, or light animation effect.

[0113] The three types of pages shown in Figure 4 are only examples. The embodiments of this application do not limit the specific icons (such as Symbols) to which the animation rendering method is applied or the specific pages where the icons (such as Symbols) are located. For example, the animation rendering method can also be applied to icons (such as Symbols) on application pages such as health, games, camera, gallery, smart home, automobile, sports, weather, and navigation, without specific limitations.

[0114] As an example, please refer to Figure 5, which shows a flowchart of a motion effect rendering method provided by an embodiment of this application. As shown in Figure 5, the motion effect rendering method provided by this embodiment includes S501-S504:

[0115] S501: The device receives user operations, which are used to trigger the animation of the icon.

[0116] An icon (such as a Symbol) may contain multiple elements, which may include one or more of the following: text, images, or symbols.

[0117] As an example, different elements in an icon (such as a Symbol) can be managed and animated by the icon system in different layers. Different elements may belong to different layers. By layering, different elements can be decoupled, so that elements in different layers can be animated independently.

[0118] As an example, an icon (such as a Symbol) may contain at least two elements that can be managed and animated by the icon system at the same layer. In this way, multiple elements can be presented as a whole with animated effects.

[0119] In this application embodiment, the animation effect of the icon triggered by the user operation includes, but is not limited to, the presentation of one or more of the following animation effects: display animation effect, vibration animation effect, sound animation effect, or light animation effect.

[0120] As an example, icons (such as Symbols) may be located on function pages (such as control center, notification bar, settings page, etc.), desktops (such as main desktop, negative one screen, etc.), application pages (such as health, games, camera, gallery, smart home, car, sports, weather, navigation, etc. application pages), etc., without limitation.

[0121] As an example, user actions may include, but are not limited to, clicking, long-pressing, swiping, and dragging; clicking may include, but are not limited to, single-clicking and double-clicking; swiping may include, but are not limited to, single-finger swiping and multi-finger swiping. In some embodiments, user actions may be voice commands, gestures, or other forms of operation. Alternatively, the presentation of icon (e.g., Symbol) animation effects may be triggered by time or conditions. For example, the icon (e.g., Symbol) animation effect may be triggered at a preset time or at each preset duration, or the icon (e.g., Symbol) animation effect may be triggered when preset conditions are met, such as when the icon (e.g., Symbol) is displayed. This application embodiment does not limit the triggering method of the animation effect.

[0122] In some embodiments, the user's operational intent may include, but is not limited to, one or more of the following: opening the page where the icon is located, opening the function / application corresponding to the icon (such as Symbol), closing the function / application corresponding to the icon (such as Symbol), switching the state of the icon (such as Symbol), or opening the link / page associated with the icon (such as Symbol), etc. This application embodiment does not specifically limit the user's operational intent; for the relevant scenarios, processes, and specific response actions of the device in response to the user's operational intent, conventional technology can be referred to.

[0123] S502: The device obtains the application animation information, system animation information and system settings of the icon through the icon component.

[0124] In some embodiments, an icon (such as a Symbol) is a layered icon set, with each layer supporting custom animation effects. An icon (such as a Symbol) can correspond to a resource ID.

[0125] As an example, application animation information may include, but is not limited to, the resource ID corresponding to one or more icons (such as Symbols), and one or more of the following information about the icons (such as Symbols): rendering information, animation attributes, etc. Application animation information is set by the application based on one or more pre-defined parameters such as icon function, usage scenario, or user preferences.

[0126] For example, rendering information may include, but is not limited to, one or more of the following for icons (such as Symbols): position, size, font weight, rendering parameters (including but not limited to color, rendering mode, etc.); animation properties may include, but are not limited to, animation duration, curve, frame rate, and layer change properties of each element. For example, layer change properties may include, but are not limited to, one or more of the following: transparency, rotation, position, anchor point, scaling, etc.

[0127] As an example, system animation information may include, but is not limited to, the layering information and common animation information for each layer of one or more icons (such as Symbols) supported by the icon system. The layering information of an icon (such as Symbols) represents the layer to which each element (text, image, symbol, etc.) within the icon (such as Symbols) belongs, as well as the common animation information for each layer of elements within the icon (such as Symbols). By providing information related to common animations such as high-frequency animations, the icon system can meet the application's need for lightweight animation configuration.

[0128] For example, general animation information may include, but is not limited to, one or more of the following: general animation type, general animation direction, and general animation frequency. Taking display animation as an example, the general animation type may include, but is not limited to, one or more of the following: bounce, pulse, zoom, fade-in, fade-out, color change, or replacement; bounce and zoom are used to add vivid dynamic effects to icons (such as Symbol), pulse is used to make icons (such as Symbol) bounce regularly to attract user attention, fade-in and fade-out are used to achieve smooth appearance and disappearance of elements, color change is used to convey information or increase visual interest through color changes, and replacement is used to achieve smooth switching between icons (such as Symbol). The general animation direction may include, but is not limited to, from left to right, from right to left, from top to bottom, from bottom to top, etc., aiming to conform to user intuition and interface logic. The general animation frequency may include, but is not limited to, one animation, two animations, ..., looping animations, etc.

[0129] As an example, system settings may include, but are not limited to, one or more of the following supported by the system: system language, system scale, system theme, system font, system font size, text weight, color mode, etc. For example, system language includes, but is not limited to, Chinese, English, Japanese, Korean, etc.; system scale includes, but is not limited to, one or more of the following: text scale, interface scale, etc.; system theme refers to the interface style of the device system, and interface style includes, but is not limited to, one or more of the following: system theme color, window color, control layout, icon style, etc.; system theme color includes, but is not limited to, one or more of the following: red theme, color theme, etc.; system font includes, but is not limited to, one or more of the following: KaiTi, SongTi, etc.; system font size includes, but is not limited to, one or more of the following: extra-large font size, large font size, standard font size, small font size, or extra-small font size, etc.; text weight includes, but is not limited to, one or more of the following: boldest, thickest, standard weight, thinnest, or thinnest, etc.; color mode includes, but is not limited to, one or more of the following: dark mode, light mode, etc.

[0130] S503: The device determines the icon animation to be displayed based on the application animation information, system animation information, and system settings.

[0131] As an example, the device performs motion effect analysis and rendering parameter parsing based on the acquired application motion effect information and system settings, and calculates the layout information of icons (such as Symbols). Based on the motion effect analysis results, rendering parameter parsing results, and layout information calculation results, it determines the icon (such as Symbol) motion effect to be presented.

[0132] As one possible implementation, when calculating layout information, the device can modify the rendering information in the application animation information according to system settings, and calculate the layout information of icons (such as Symbols) based on the modified rendering information. For example, the layout information of icons (such as Symbols) may include, but is not limited to, one or more of the following: position, size, rounded corners, text ratio, interface ratio, theme, color, font, font size, or text weight.

[0133] As one possible implementation, after calculating the motion effect analysis results, rendering parameter parsing results, and icon (such as Symbol) layout information, the device can construct segments based on these results for subsequent motion effect analysis and rendering. As an example, the device can obtain the layering information of icons (such as Symbols) from the system motion effect information based on the resource ID, obtain the general motion effect information for each layer of the icon (such as Symbol) based on the layering information, perform motion effect analysis and render parameter determination based on the layout information and the general motion effect information for each layer, determine the icon (such as Symbol) motion effect to be presented and its rendering parameters, and define the motion effects of each layer of the icon (such as Symbol). For example, the device can perform motion effect analysis and determine rendering parameters based on the constructed paragraph and system motion effect information. For instance, it can perform motion effect analysis and determine rendering parameters based on the general motion effect information of each layer in the constructed paragraph and system motion effect information, and determine the motion effect information and rendering parameters of each layer of elements of an icon (such as a Symbol).

[0134] In some embodiments, at least two layers of elements in an icon (such as a Symbol) have the same animation effects, and / or at least two layers of elements in an icon (such as a Symbol) have different animation effects.

[0135] S504: The device displays icon animations.

[0136] As an example, the device can render motion effects based on defined motion analysis and rendering parameters, thereby enabling the presentation of icon (such as Symbol) motion effects.

[0137] As an example, the motion effects presented by the device include, but are not limited to, one or more of the following: display motion effects, vibration motion effects, sound motion effects, or lighting motion effects. Taking display motion effects as an example, the types of display motion effects may include, but are not limited to, one or more of the following: bouncing, pulse, scaling, fade-in, fade-out, color change, or replacement, etc.

[0138] In some embodiments, the device presents a motion effect based on layout information and system motion effect information, such as presenting a motion effect across multiple consecutive frames.

[0139] In some embodiments, the device presents multiple motion effects based on layout information and system motion effect information. For example, some frames of a series of frames present one motion effect, while other frames present one or more other motion effects. For example, fade-in / fade-out mimics the way a target enters / slides out in reality. In some embodiments, the fade-in / fade-out motion effect may also be accompanied by acceleration or deceleration, and / or other types of motion effects, such as bouncing.

[0140] Of course, the above-mentioned types of display animation effects are only examples. The embodiments of this application do not limit the types of display animation effects. For example, the types of display animation effects may also include one or more of the following: alignment, overlay masking, transparency, rotation or blurring edges, etc.

[0141] In some embodiments, the device can decompose the icon (such as Symbol) animation effect and call the atomic animation engine to decompose the icon (such as Symbol) animation effect into multiple animation frames. Then, it can render the animation effect frame by frame according to the decomposed animation frames and the corresponding rendering parameters, thereby realizing the presentation of the icon (such as Symbol) animation effect.

[0142] Among them, the Atomic Motion Engine is a technical framework or system specifically designed for creating and managing animation effects. The Atomic Motion Engine provides a series of tools and application programming interfaces (APIs) that enable developers to easily create, edit, and optimize animation effects.

[0143] For example, the atomic motion engine can provide various types of atomic motion effects, including but not limited to atomic motion effects related to deformation, position, transparency, color, path, transformation, or masking. For instance, atomic motion effects may include, but are not limited to, one or more of the following: path deformation, fill color, position, opacity, stroke color, trimpath, alpha matte, alpha inverted matte, masks, scale, mask path, rotation, linear interpolation, interpolation, or expressions. A more detailed explanation of atomic motion effects can be found in the parameters above; it will not be repeated here.

[0144] By introducing atomic animations, icon (such as Symbol) animations can respond to the latest operation commands at any time, such as being interrupted or redirected, and can inherit the speed of the previous animation, which matches the turning effect of real objects, making the inter-frame transition of the animation smooth and natural.

[0145] As an example, please refer to Figure 6, which shows a schematic diagram of a motion effect rendering process provided in an embodiment of this application. The motion effect rendering process mainly includes the following three stages:

[0146] Phase 1: Configuration Phase

[0147] The configuration phase is used to configure animation effects. For example, applications can set one or more pre-defined animation effects based on icon functions, usage scenarios, or user preferences. Similarly, the icon system can save system animation effect information based on the layer information of the icons it supports (such as Symbols) and the common animation effect information of each layer.

[0148] Phase 2: Animation Triggering Phase

[0149] The animation trigger phase is used to receive user actions that trigger the animation of the icon.

[0150] Phase 3: Animation Presentation Phase

[0151] The animation rendering stage is used to present corresponding animations based on user actions that trigger the icon's animation.

[0152] As shown in Figure 6, during the configuration phase, the device can accept the application's configuration regarding animation effects; and the device can accept the icon system's saving of system animation effect information.

[0153] As an example, the icon system can provide a unified interface for various applications to configure animation effects, so as to meet the application's need for lightweight animation effect configuration. It supports adaptive adjustment of application animation effects according to system settings when the animation effects are presented, thereby improving the flexibility of animation effect presentation.

[0154] As an example, an application may configure application animation information in one or more ways, including but not limited to: passing in JavaScript object notation (JSON), passing in an object, etc.

[0155] Taking the configuration of icon application animation information by passing in JSON as an example, the JSON file may be such as his.animationData file.

[0156] As an example, applications can also customize the parameters used to trigger the rendering of animations; for instance, the parameters used to trigger the rendering of animations might be such as this.triggerNum.

[0157] For example, the JSON file might look like this.animationData file, and the parameter used to trigger the animation rendering might look like this.triggerNum:

[0158] SymbolGlyph(this.symbol) / / Icon ID

[0159] .symbolEffect(new CustomizationSymbolEffect(this.animationData)

[0160] (this.triggerNum)

[0161] .fontSize(this.state.isDragging?this.style.dragCircleWidth:this.style.circlewidth)

[0162] .fontSize(this.state.value?this.style.iconOnColor:this.style.iconoffColor).

[0163] Based on the application-defined parameter `this.triggerNum` used to trigger the animation rendering, as shown below, when `this.triggerNum` is at its default value, the device does not render any animation; when `this.triggerNum+1`, the device triggers the rendering of the icon (such as Symbol) animation; after the device completes the rendering of the icon (such as Symbol) animation, the device restores `this.triggerNum` to its default value.

[0164] triggerAnimation(){

[0165] this.triggerNum=this.triggerNum+1;

[0166] }

[0167] Of course, the above commands are just examples. In actual applications, it is also possible to pre-configure application animation information by defining objects; and / or, it is also possible to trigger the presentation of icon (such as Symbol) animations when other parameter conditions are met. For example, when this.triggerNum is the default value, the device does not display any animation; when this.triggerNum+2 (or another number), the device triggers the display of the icon (such as Symbol) animation; after the device completes the display of the icon (such as Symbol) animation, the device restores this.triggerNum to its default value; as another example, when this.triggerNum is false, the device does not display any animation; when this.triggerNum is true, the device triggers the display of the icon (such as Symbol) animation; after the device completes the display of the icon (such as Symbol) animation, the device restores this.triggerNum to false; as yet another example, when this.triggerNum is false, the device does not display any animation; when this.triggerNum is true, the device triggers the display of the icon (such as Symbol) animation until the condition for stopping the animation is met, at which point this.triggerNum is restored to false.

[0168] As shown in Figure 6, during the animation triggering phase, after receiving a user operation to trigger an icon's animation, the device triggers the presentation of the icon's (e.g., Symbol) animation based on the user operation. This includes, but is not limited to, the presentation of one or more of the following animations: display animation, vibration animation, sound animation, or light animation. For example, the user operation includes, but is not limited to, clicking, long-pressing, swiping, and dragging operations on the icon (e.g., Symbol).

[0169] As shown in Figure 6, in response to user operation, during the animation rendering stage, the device can determine the final icon (such as Symbol) animation effect to be presented after analyzing the obtained application animation effect information, system animation effect information and system settings, and then render the icon (such as Symbol) animation effect and present it.

[0170] Based on the animation rendering process shown in Figure 5 or Figure 6, the device can obtain application animation information such as rendering information (including but not limited to one or more of the icon's position, size, weight, rendering parameters, etc.) and animation attributes (such as animation duration, curve, frame rate, and one or more of the transparency, rotation, position, anchor point, scaling, etc. of each layer of the icon (such as the Symbol) through a single node (such as a component). It can also obtain system animation information such as the layer information of icons (such as the Symbol) supported by the system and the general animation information of each layer. Combined with one or more system settings such as the device's system language, system scale, system theme, system font, system font size, text thickness, color mode, etc., the final icon (such as the Symbol) animation is generated and displayed.

[0171] Based on the scheme shown in Figure 5 or Figure 6, compared with conventional technology (such as the scheme of rendering animations according to application definition as shown in Figure 1B), by introducing the influence of system settings on animations, the rendering of icon (such as Symbol) animations can be adaptively adjusted according to system settings, and the consistency between application animations and system settings can be guaranteed without modifying the application animation information.

[0172] As an example, please refer to Figure 7, which shows a schematic diagram of the effect of icon animation adapting to system settings provided by an embodiment of this application. As shown in Figure 7, when the system theme changes from dark mode to light mode, the icon animation changes from dark to light as shown in Figure 7(a); when the system font size changes from extra large to small, the icon animation changes from large to small as shown in Figure 7(b); when the system text thickness changes from thickest to thinnest, the icon animation changes from thickest to thinnest as shown in Figure 7(c); and when the system theme color changes from red to blue, the icon animation changes from red to blue as shown in Figure 7(d). Based on the example shown in Figure 7, it can be seen that compared to the scheme shown in Figure 1B that renders animations according to application definitions, the scheme provided by this embodiment of the application can ensure that application animations adapt and adjust with changes in system settings, always maintaining consistency between application animations and system settings.

[0173] In addition, the animation rendering process shown in Figure 5 or Figure 6 can be implemented based on a single-node architecture, where the rendering of icon (such as Symbol) images and animations is handled by the same node (such as a component). Therefore, compared with conventional technologies (as shown in Figure 1B, which requires multiple components to participate in the animation rendering), unnecessary interface rendering and refresh can be reduced, as well as related data loading, transmission and processing, etc., maintaining high performance and low power consumption of the animation.

[0174] As an example, the rendering of icon (such as Symbol) images and / or animations may be handled by icon components (such as Symbol components).

[0175] As an example, please refer to Figure 8. Figure 8 illustrates a schematic diagram of an animation rendering process provided in an embodiment of this application, using an icon system including icon components (such as Symbol components) and the Symbol component responsible for rendering icon images and animation effects. As shown in Figure 8, the animation rendering process mainly includes: a configuration stage (stage 1), an animation triggering stage (stage 2), and an animation rendering stage (stage 3). For a detailed description of the configuration stage (stage 1) and the animation triggering stage (stage 2), please refer to the description of Figure 6 above, which will not be repeated here.

[0176] In response to user actions that trigger icon animations, during the animation rendering phase, the device's UI framework (such as the ArkUI framework) can perform parsing and calculations based on the acquired application animation information and system settings.

[0177] For example, as shown in Figure 8, the UI framework includes a Symbol component applied to carry icons (such as Symbol). The Symbol component can obtain application animation information and system settings preset by the application, perform information parsing and paragraph construction based on the application animation information and system settings, such as performing animation analysis and rendering parameter parsing based on the application animation information and system settings, calculating the layout information of the icon (such as Symbol), constructing paragraphs based on the animation analysis results, rendering parameter parsing results and layout information calculation results, and transmitting the constructed paragraphs to the text framework.

[0178] As shown in Figure 8, the text framework can acquire animation resources, such as system animation information, and perform animation parsing and analysis based on the system animation information and paragraphs constructed from the UI framework. For example, the text framework can determine the icon (such as Symbol) animation to be presented and its rendering parameters based on the system animation information and paragraphs, and call the animation engine to decompose the icon (such as Symbol) animation into multiple animation frames.

[0179] Taking animation rendering methods, including display animations, as an example, after the animation engine decomposes the animation process into multiple animation frames, the device's rendering module can complete the drawing and rendering of the animation frames frame by frame according to the rendering parameters. For example, as shown in Figure 8, after the animation engine, such as an atomic animation engine, decomposes the animation process into multiple animation frames (such as atomic animations), the rendering module can render the animation frames based on animation frame control technology. After processing the interface, including icons (such as Symbols) and / or display animations, through the CPU and / or GPU, the frames are then sent for display. For example, an atomic animation engine can provide various types of atomic animations, including but not limited to one or more of the following: path deformation, fill color, position, opacity, stroke color, trimpath, alpha matte, alpha inverted matte, masks, scale, mask path, rotation, linear interpolation, interpolation, or expressions.

[0180] This application's embodiments introduce atomic motion effects, enabling motion effects to respond to the latest operation commands at any time, such as being interruptible or redirectable, and allowing motion effects to inherit the speed of the previous motion effect, conforming to the turning effect of real objects, making the inter-frame transition effect of motion effects smooth and natural.

[0181] As an example, the rendering module can maintain a low refresh rate (such as 1Hz) by adaptively adjusting the screen refresh rate based on low temperature polycrystalline oxide (LTPO) motion effect frame control technology, thereby reducing unnecessary interface rendering and refreshing, related data transmission and related data processing, and maintaining high performance and low power consumption of the motion effects.

[0182] For the presentation process of other motion effects such as vibration, sound, and lighting effects, please refer to the process shown in Figure 8, which will not be elaborated further.

[0183] As an example, please refer to Figure 9, which is a flowchart of an animation rendering process provided in an embodiment of this application. As shown in Figure 9, after the application receives a user operation to trigger the animation of an icon, the application can obtain the application animation information, system animation information, and system settings of the icon (such as Symbol), such as obtaining the above content through the Symbol component.

[0184] The application animation information includes the resource ID, rendering information, and animation attributes corresponding to the icon (such as Symbol). The resource ID can be used as an identifier for the icon (such as Symbol) during icon (such as Symbol) parsing for layout information calculation, and as an identifier for the icon (such as Symbol) during animation parsing to match the corresponding layer information and general animation information of each layer from the system animation information. The rendering information can be used to obtain the layout information of the icon (such as Symbol) after making corresponding modifications based on the system settings during icon (such as Symbol) parsing.

[0185] After obtaining the application animation information, system animation information, and system settings of the icon (such as Symbol), the device can parse and decompose the application animation information and system settings. As shown in Figure 9, the device can modify the rendering information of the icon (such as Symbol) corresponding to the obtained resource ID according to the system settings, and calculate the layout information based on the modified rendering information.

[0186] As shown in Figure 9, the device can parse and decompose the animation of icons (such as Symbols) based on system animation information, layout information, and animation attributes. This decomposition can be broken down into one or more atomic animation frames, such as path deformation, fill color, position, opacity, stroke color, trimpath, Alpha Matte, Alpha Inverted Matte, Masks, Scale, MaskPath, Rotation, Linear Interpolation, Interpolation, or Expressions. For example, during animation parsing, the device can match the corresponding layer information based on the acquired resource ID to obtain the common animation information for each layer. Based on this common animation information, the constructed paragraphs, and animation attributes, the device performs animation analysis and determines the rendering parameters, thus determining the icon (such as Symbol) animation to be presented and its rendering parameters.

[0187] As shown in Figure 9, after decomposing the icon (such as Symbol) animation effect into multiple animation frames, the device can complete the drawing and rendering of the animation frame frame by frame according to the rendering parameters and then send it to the display, finally presenting one or more icon (such as Symbol) animation effects such as bouncing, pulse, scaling, fade-in, fade-out, color change or replacement.

[0188] It should be understood that the various solutions in the embodiments of this application can be used in a reasonable combination, and the explanations or descriptions of the various terms appearing in the embodiments can be referenced or explained to each other in the various embodiments, without limitation.

[0189] It should also be understood that, in the various embodiments of this application, the order of the above-mentioned processes does not imply 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 this application.

[0190] It is understood that, in order to achieve the functions of any of the above embodiments, the device includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0191] This application embodiment can divide the device into functional modules. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0192] It should also be understood that the various modules in the device can be implemented in software and / or hardware, without specific limitations. In other words, the device is presented in the form of functional modules. Here, "module" can refer to application-specific integrated circuits (ASICs), circuits, processors and memories that execute one or more software or firmware programs, integrated logic circuits, and / or other devices that can provide the above functions.

[0193] In an alternative approach, when data transmission is implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are implemented. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., digital video disk (DVD)), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0194] The steps of the methods or algorithms described in the embodiments of this application can be implemented in hardware or by a processor executing software instructions. The software instructions can consist of corresponding software modules, which can be stored in RAM, flash memory, ROM, EPROM, EEPROM, registers, hard disk, portable hard disk, CD-ROM, or any other form of storage medium known in the art. One exemplary embodiment couples a storage medium to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and storage medium can reside in an ASIC. Alternatively, the ASIC can reside in a device. Of course, the processor and storage medium can also exist as discrete components.

[0195] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

Claims

1. A method for presenting motion effects, characterized in that, The method includes: Receive user actions, which are used to trigger icon animations; The application animation information of the icon, the system animation information of the device, and the system settings of the device are obtained. The application animation information indicates the animation configuration of the application to which the icon belongs regarding the icon, and the system animation information indicates the general animations of the icon supported by the device system. The icon's animation is presented based on the application animation information, the system animation information, and the system settings, and the animation is consistent with the device's system settings.

2. The method according to claim 1, characterized in that, The icon includes multiple elements, which include one or more of the following: text, images, or symbols; The device supports hierarchical management of the multiple elements of the icon, wherein the multiple elements include at least two elements belonging to different layers, and / or, the multiple elements include at least two elements belonging to the same layer.

3. The method according to claim 1 or 2, characterized in that, The animation effect of presenting the icon based on the application animation information, the system animation information, and the system settings includes: Information parsing and icon layout information calculation are performed based on the application animation information and system settings; Based on the information parsing results, the layout information calculation results, and the system animation information, the animation effect to be presented is determined.

4. The method according to claim 3, characterized in that, The step of parsing information and calculating the layout information of the icons based on the application animation information and the system settings includes: Modify the application animation information according to the system settings; Information parsing and icon layout information calculation are performed based on the modified application animation information.

5. The method according to any one of claims 1-4, characterized in that, The application animation information includes rendering information and animation attributes of the icon configured in the application to which the icon belongs. The rendering information includes one or more of the following of the icon: position, size, font weight, and rendering parameters. The animation attributes include one or more of the following of the animation: duration, curve, frame rate, and layer change attributes of each element. The system settings include one or more of the following: system language, system aspect ratio, system theme, system font, system font size, text weight, and color mode.

6. The method according to claim 4 or 5, characterized in that, The step of determining the animation effect of the icon to be displayed based on the information parsing results, layout information calculation results, and system animation information includes: Obtain the layering information of the icon from the system animation information; Based on the layered information, obtain the general animation information of each layer of the icon from the system animation information; Based on the layout information and the general animation information of each layer, the animation analysis and rendering parameters are determined to determine the animation to be presented, which includes the animation of each layer element in the icon.

7. The method according to claim 6, characterized in that, After determining the animation effect to be presented, the method further includes: The motion effect is decomposed into multiple motion effect frames; Presenting the motion effects includes rendering and displaying the multiple motion effect frames frame by frame.

8. The method according to claim 6 or 7, characterized in that, The icon has at least two layers of elements with the same animation effect, and / or the icon has at least two layers of elements with different animation effects.

9. The method according to any one of claims 1-8, characterized in that, The device includes an icon system, and the process of acquiring the application animation information of the icon, the system animation information of the device, and the system settings of the device includes: The icon system obtains the application animation information, the system animation information, and the system settings through the same component.

10. The method according to any one of claims 1-9, characterized in that, The method further includes: When presenting the motion effects, the refresh rate of the device's screen is adaptively adjusted based on the low-temperature polycrystalline oxide (LTPO) motion effect frame control technology.

11. The method according to any one of claims 1-10, characterized in that, The motion effects include one or more of the following: bouncing, pulse, scaling, fade-in, fade-out, color change, or replacement.

12. The method according to any one of claims 1-11, characterized in that, The icon is located on one or more of the following pages: Control Center, Notification Bar, Settings Page, Home Desktop, Negative One Screen, and Application Page.

13. A device, characterized in that, The device includes: Memory is used to store computer program instructions; A processor for executing the computer program instructions to enable the device to implement the method as described in any one of claims 1-12.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer program instructions that, when executed by a processing circuit, implement the method as described in any one of claims 1-12.

15. A computer program product containing instructions, characterized in that, When the computer program product is run on a computer, it causes the computer to perform the method as described in any one of claims 1-12.

Images