Realistic wave animation implementation method and device based on lightweight wearable device

Abstract

This application provides a method and apparatus for implementing realistic wave animation based on lightweight wearable devices. Applied to the fields of computer graphics and user interface interaction technology, it intelligently delineates a target area on the display interface based on user interaction triggers or animation content requirements. According to the wave animation type, it calls the corresponding predefined wave function mathematical model to directly calculate the geometric deformation data of the target area in each frame, replacing complex physical simulations or dense mesh deformations with lightweight mathematical calculations. Finally, based on the deformation data, it performs graphic deformation and rendering on the target area, generating and outputting continuous wave animation frames, significantly reducing computational overhead and ensuring smooth animation operation on resource-constrained devices. Simultaneously, it adapts dedicated mathematical models for different wave types and combines affine transformations and visual optimization processing to effectively reduce the jaggedness caused by mesh division, improve the visual expressiveness of the animation, and significantly enhance the interactive experience between the user and the device.

Description

Technical Field

[0001] This application relates to the fields of computer graphics and user interface interaction technology, specifically to a method and apparatus for implementing realistic wave animation based on a lightweight wearable device. Background Technology

[0002] Wearable devices such as smartwatches and smart bracelets, as auxiliary devices to mobile phones, not only provide convenience by receiving calls, text messages, and social media notifications, but also monitor users' health status and record exercise data. Their numerous advantages have made them popular with users. Therefore, implementing better user interface animations can not only allow users to more intuitively perceive the device's usage status, but also reduce cognitive load and improve the smoothness of user-device interaction. Ripple animation effects can make the user interface more natural and vivid; when applied to interactive states, the ripple diffusion effect generated by clicking can enhance the interface's sense of depth. It can also simulate the swaying effect of software.

[0003] Currently, in UI animation design, dynamic effects such as flowing hair and waving flags are mainly achieved through the following methods: One approach is to simulate the soft body swaying effect by dividing the mesh and deforming the vertices. However, this method relies on fine-grained mesh division. The finer the mesh, the smoother the animation, but the greater the computational cost. This approach is suitable for devices equipped with high-performance GPUs. Secondly, it can be achieved by calculating and simulating the motion state of objects through physics engines (such as Unity, Bullet, etc.), but this requires a large amount of computation and high device performance. Third, the pre-rendered sequence frame method used for low-power devices generates high frame rate animations through off-the-shelf rendering software and then plays them on the device. Although this method gets rid of GPU limitations, the animation content is fixed and cannot present differentiated fluctuation effects according to different display content.

[0004] Therefore, it is necessary to research and develop a new animation implementation method that can achieve smooth, vivid, and adaptive content-fluid animation effects on lightweight devices with limited performance, in order to improve the user's interactive experience with the device. Summary of the Invention

[0005] In view of this, embodiments of this specification provide a method and apparatus for implementing realistic wave animation based on lightweight wearable devices, which can realize vivid wave animation on lightweight, low-power devices, thereby improving the interactive experience between users and devices.

[0006] The embodiments in this specification provide the following technical solutions: This specification provides an embodiment of a method for implementing realistic wave animation based on a lightweight wearable device, including: In response to user interaction signals or according to the type of wave animation to be presented, a target area is determined in the device display interface; wherein, the target area is used to present the wave animation; According to the type of wave animation, the corresponding predefined wave function mathematical model is invoked, and based on the wave function mathematical model, the geometric deformation data of the target area in the animation time series is calculated; Based on the geometric deformation data, the target area is subjected to graphic deformation and rendering to generate and output continuous undulating animation frames.

[0007] This specification also provides an embodiment of a realistic wave animation implementation device based on a lightweight wearable device, the realistic wave animation implementation device comprising: A target area determination unit is used to determine a target area in the device display interface in response to user interaction signals or according to the type of wave animation to be presented; wherein the target area is used to present the wave animation. The image processing unit is used to call the corresponding predefined wave function mathematical model according to the wave animation type, and calculate the geometric deformation data of the target area in the animation time series based on the wave function mathematical model; The interface generation unit is used to perform graphic deformation and rendering on the target area based on the geometric deformation data, and generate and output continuous wave animation frames.

[0008] Compared with the prior art, the beneficial effects that at least one technical solution adopted in the embodiments of this specification can achieve include at least: By calling a predefined wave function mathematical model corresponding to the wave animation type to directly calculate the geometric deformation data of the target area, and then generating continuous wave animation frames, the computational overhead is significantly reduced, enabling it to run smoothly on resource-constrained lightweight devices such as smartwatches and smart bracelets. This achieves vivid and realistic wave effects that can adapt to the interface content, effectively improving the interactive experience between users and devices. Attached Figure Description

[0009] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0010] Figure 1 This is a flowchart of the method for implementing realistic wave animation based on lightweight wearable devices in this application; Figure 2This is an example of mesh division in this application for situations where different shaped regions need to be used to achieve one-dimensional wave animation; Figure 3 This is a flowchart illustrating the implementation of one-dimensional wave animation in this application; Figure 4 This is a schematic diagram illustrating how the two-dimensional wave animation in this application achieves wave animation by enlarging and shrinking the pattern in the central area; Figure 5 This is a schematic diagram of the wave propagation effect of the constraint function added in this application. Figure 1 ; Figure 6 This is a schematic diagram of the wave propagation effect of the constraint function added in this application. Figure 2 ; Figure 7 This is a schematic diagram of the dynamic clock interface generation device for the animation scheme in this application. Detailed Implementation

[0011] The embodiments of this application will now be described in detail with reference to the accompanying drawings.

[0012] The following specific examples illustrate the implementation of this application. Those skilled in the art can easily understand other advantages and effects of this application from the content disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. This application can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of this application. It should be noted that, in the absence of conflict, the following embodiments and features in the embodiments can be combined with each other. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0013] It should be noted that various aspects of embodiments within the scope of the appended claims are described below. It will be apparent that the aspects described herein can be embodied in a wide variety of forms, and any particular structure and / or function described herein is merely illustrative. Based on this application, those skilled in the art will understand that one aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number and aspects set forth herein can be used to implement the device and / or practice the method. Additionally, this device and / or method can be implemented using structures and / or functionalities other than one or more of the aspects set forth herein.

[0014] It should also be noted that the illustrations provided in the following embodiments are only schematic representations of the basic concept of this application. The drawings only show the components related to this application and are not drawn according to the actual number, shape and size of the components in the actual implementation. In the actual implementation, the shape, quantity and proportion of each component can be arbitrarily changed, and the layout of the components may also be more complex.

[0015] Additionally, specific details are provided in the following description to facilitate a thorough understanding of the examples. However, those skilled in the art will understand that practice can be carried out without these specific details.

[0016] In daily use of lightweight wearable devices such as smartwatches and smart bracelets, users expect to have a vivid and smooth interactive animation experience on these devices. For example, the water ripple effect when tapping the screen, the dynamic effect of flags waving or hair swaying on the watch face. These undulating animations can significantly enhance the sense of layering of the interface and the naturalness of the interaction. However, due to the low power consumption and limited processing power of the devices, traditional animation implementation methods are difficult to ensure both visual effects and performance requirements.

[0017] Currently, the following methods are commonly used to achieve dynamic effects such as flowing hair and waving flags: The first method is based on mesh generation and vertex deformation. The software is divided into a mesh, and then the mesh is deformed and offset according to a predetermined motion law to simulate the floating effect. The performance is affected by the fineness of the mesh generation. The finer the mesh generation, the smoother the overall animation. However, it inevitably increases the computational overhead. It is suitable for devices equipped with high-performance GPUs. The OpenGL rendering pipeline involved in the GPU (Graphics Processing Unit) can effectively improve the calculation of vertex offset and the rendering of corresponding colors.

[0018] The second type is a simulation method based on physics engines, such as Unity or Bullet. Although it can achieve highly realistic physical simulations, its complex force analysis and iterative calculations place excessive demands on the processor, making it difficult to run smoothly on smartwatches.

[0019] The third method is to pre-render a sequence of frames, which uses existing rendering software to simulate the motion of the software and render high-frame-rate animations for playback on the device. Although the computational overhead is low, the animation content is completely fixed and cannot dynamically adjust the fluctuation effect according to different interactive scenarios or interface elements, lacking flexibility and adaptability.

[0020] In view of this, the inventors discovered through research and improvement that existing wave animation implementation methods have significant limitations when applied to low-power lightweight devices such as smartwatches and smart bracelets: on the one hand, real-time computing-based methods (such as mesh deformation and physical simulation) have high requirements for device performance and are difficult to run smoothly on resource-constrained devices; on the other hand, although the pre-rendered sequence frame method has low computational overhead, it lacks flexibility and adaptability and cannot meet diverse interaction needs.

[0021] Based on this, the embodiments of this specification propose a method for implementing realistic wave animation based on lightweight wearable devices. The overall idea is as follows: based on the user interaction trigger or the animation content requirements to be presented, the target area that needs to produce a wave effect is intelligently delineated in the device display interface. Then, according to the type of wave animation to be implemented (such as one-dimensional animation or two-dimensional animation), the corresponding predefined wave function mathematical model is called, and the geometric deformation data of the target area in each frame is directly calculated based on the mathematical function. Thus, lightweight mathematical calculation replaces complex physical simulation or dense mesh deformation. Finally, based on the calculated deformation data, graphic deformation and rendering are performed on the target area to generate and output continuous wave animation frames. This achieves realistic wave animation on lightweight, low-power devices. On the one hand, the mathematical function-driven calculation method significantly reduces overhead and ensures that the animation remains smooth on resource-constrained devices. On the other hand, by adapting dedicated mathematical models for different wave types and combining them with subsequent affine transformations and visual optimization processing, the jaggedness that may be caused by mesh division is effectively reduced, the visual expressiveness of the animation is improved, and the interactive experience between the user and the device is significantly enhanced.

[0022] The technical solutions provided by the various embodiments of this application are described below with reference to the accompanying drawings.

[0023] like Figure 1 As shown in the embodiments of this specification, a method for implementing realistic wave animation based on a lightweight wearable device is provided, including: Step S100: In response to user interaction signals or according to the type of wave animation to be presented, determine a target area in the device display interface; wherein the target area is used to present the wave animation.

[0024] In practice, the background image information of the display interface stored in the device's register is read first. The size of the image is determined by the width and height of the main display interface. Assuming the device screen height is H pixels and the width is W pixels, the image size is H×W×32 bits. Here, 32 bits means that each pixel consists of three color channels (RGB) and one channel (A) representing transparency. Each channel occupies 8 bits of data. This step provides the original image material for subsequent processing.

[0025] When a user interacts with the device through actions such as clicking, the system responds to the user's interaction signal by selecting a square area of ​​a preset size centered on the touch screen coordinates as the target area, such as creating a water ripple effect when the screen is clicked.

[0026] When an animation driven by interface content needs to be presented, the image content of the displayed interface is analyzed according to the animation content to be presented in the interface, such as a floating animation, and the target area is automatically identified and determined, such as the flag on the dial automatically floating. This provides a precise animation canvas for the subsequent wave animation to present a vivid and realistic wave visual effect.

[0027] Step S200: According to the type of wave animation, call the corresponding predefined wave function mathematical model, and calculate the geometric deformation data of the target area in the animation time series based on the wave function mathematical model.

[0028] In implementation, depending on the type of wave animation (one-dimensional or two-dimensional), the system calls the corresponding wave function mathematical model from the pre-set mathematical function library. Then, based on the selected mathematical model, the system calculates the geometric deformation data of the target area in the animation time series frame by frame. Through the design of "selecting models by type and mathematical driving", the computational overhead is significantly reduced.

[0029] Step S300: Based on the geometric deformation data, perform graphic deformation and rendering on the target area to generate and output continuous undulating animation frames.

[0030] In practice, the geometric deformation data calculated in step S200 is transformed into a continuous undulating animation visible to the user. For example, based on the vertex displacement or scaling factor described by the geometric deformation data, an affine transformation is performed on the image grid blocks divided in the target area. By adjusting the coordinate position of each grid block vertex, it is transformed from the original regular shape (such as a rectangle or square) into a continuous graphic unit that can fit the undulating contour. At the same time, by adjusting the vertex coordinates at the connection of adjacent grid blocks, the natural transition and visual smoothness of the overall image after deformation are ensured, effectively reducing the jaggedness that may be caused by grid division. Then, all the deformed image blocks are stitched together and integrated, and the image area is visually optimized, such as cropping the parts that exceed the boundary. Then, each frame of the processed image is continuously output to the display interface to form a complete wave animation. This achieves a smooth, vivid and visually smooth wave animation on a lightweight, low-power device, significantly improving the user interaction experience.

[0031] In summary, this application replaces the complex physical simulation or dense mesh deformation calculation in the prior art with lightweight function calculation, which significantly reduces the computational overhead while ensuring vivid and realistic fluctuation effects, thus enabling it to run smoothly on resource-constrained lightweight devices such as smartwatches and smart bracelets.

[0032] In some embodiments, the determination of the target region includes: If the wave animation type is a one-dimensional wave animation, then the image of the display interface is analyzed to identify the target object contour region that matches the one-dimensional wave animation, and the target object contour region is determined as the target region; If the wave animation type is a two-dimensional wave animation, then the interaction coordinates obtained from the user interaction signal are used to extract a preset range of regions centered on the interaction coordinates, and the region is determined as the target region.

[0033] In practice, the one-dimensional wave effect mainly simulates the visual effect of up-and-down oscillation, while the two-dimensional wave effect mainly simulates the visual effect of water spreading out.

[0034] For one-dimensional wave animation, the process of determining the target region is as follows: First, establish a coordinate system for the entire image, such as... Figure 2 As shown, the top left corner of the image can be used as the origin to establish a screen coordinate system, providing a reference for subsequent region positioning. Then, based on the wave effect to be presented, the image content is analyzed to identify the region where the wave effect needs to be achieved. Since different image content may cause differences in the shape of the target region.

[0035] For example, when the image content is a liquid surface undulating effect, the target area can be visualized using methods such as... Figure 3 The method shown is as follows: First, draw lines along the horizontal direction to obtain a rectangular block containing the liquid surface, and then divide the rectangular area vertically to adapt to the visual effect of liquid surface undulation.

[0036] For example, when the image content is objects such as hair or flags that need to simulate a fluttering effect, the target area is usually an irregular shape that is not rectangular. It is necessary to identify the outline of the target object through image analysis and then use mathematical functions to describe the boundary of that outline. This can be done according to... Figure 2 A non-rectangular region (i.e., the target region) is defined by the following method, where the ordinate of each pixel along the edge of the target region is... It is either a constant or can be determined by the x-axis coordinate. by In this way, and It is a computable constant, in which irregular regions are precisely described in a functional manner.

[0037] Through the above steps, regardless of whether the target area is a regular rectangle or a complex irregular outline, it can be accurately described and used for subsequent processing.

[0038] For two-dimensional wave animation, the process of determining the target area is as follows: First, obtain the touchscreen position coordinates during user interaction with the device, denoted as... This coordinate serves as the center point of the undulation effect, assuming the undulation region has a size of [missing information]. Given a square area, the coordinates of the top-left corner of the target area are obtained using this touchscreen position as the center. Then, based on the calculated coordinates of the top-left vertex and the preset region size... Extracting corresponding image patches from the original image, such as Figure 4 As shown in step 1, the square image block is the target area that will be affected by the touch screen operation and will present a two-dimensional undulating animation. Finally, the extracted target area image data is saved for subsequent rendering.

[0039] In some embodiments, the realistic wave animation implementation method further includes, before calculating the geometric deformation data of the target region over the animation time series: The target region is divided into grids to obtain multiple image grid blocks; The density of the grid division is configured according to the shape complexity of the target region and the required animation smoothness.

[0040] In practice, before calculating the geometric deformation data of the target region, the continuous target region is discretized into multiple image grid blocks, thereby providing independently driveable basic deformation units for the subsequent wave function mathematical model.

[0041] It should be noted that the mesh density is dynamically configured based on the shape complexity of the target area and the required animation smoothness. For irregularly shaped areas (such as hair, flag outlines, etc.), a finer mesh is needed to ensure that the mesh blocks can accurately fit their complex boundaries and avoid distortion caused by an overly coarse mesh. The fineness of the mesh directly affects the visual performance of the animation. For example, the finer the mesh, the more natural the transition after each mesh block deforms, the weaker the jagged edges of the animation, and the higher the visual smoothness.

[0042] In practical applications, the mesh density can be flexibly configured according to the needs of specific application scenarios. This embodiment uses the method of "on-demand partitioning and adjustable density" to achieve the best wave animation performance on lightweight devices, which not only ensures the visual quality of the wave animation, but also takes into account the limited computing resources of low-power devices.

[0043] In some embodiments, when dividing the target area into grids, if the wave animation type is a one-dimensional wave animation, the target area is divided into multiple consecutive rectangular image blocks along the wave propagation direction. If the wave animation type is a two-dimensional wave animation, then the target area is divided into N×N two-dimensional grid blocks, where N is an odd number greater than 1.

[0044] Specifically, for one-dimensional animation effects, such as Figure 3 As shown, after the target area is determined, it needs to be divided into equally spaced sections along the horizontal axis (i.e., the direction of wave propagation). Let the division interval be . If the total length of the target region along the horizontal axis is W, then the number of rectangular image blocks obtained by dividing the region is N. For the nth rectangular image patch ( The coordinates of its top-left vertex can be combined with the previously used function representing the target region. Represented as ,in, The coordinates of the target region along the horizontal axis; the width of each rectangular image patch is equal to a fixed spacing. The length can be determined according to the representation function. The value at this location is determined, specifically the vertical distance between the upper and lower boundaries of the target area at this location. Through the above division, the originally continuous irregular target area is discretized into a series of continuous rectangular image blocks, which serve as the basic deformation units driven by the subsequent wave function.

[0045] For two-dimensional animation effects, such as Figure 4 As shown in the first step, the extracted target area image data is divided into grids. Taking a 3×3 division as an example, the target area is evenly divided into 9 image grid blocks. When the wave effect is triggered, it will affect the central image grid block in the divided grid, causing the image content of that grid to be enlarged or reduced, which in turn causes the surrounding image blocks to deform, thus producing a blurring visual effect.

[0046] It should be noted that the mesh size is not limited to 3×3; it can also be divided into more meshes at equal intervals using an N×N format (N is an odd number greater than 1) to achieve finer deformation control. For more hierarchical deformation control, a recursive subdivision method can be used, starting with the central mesh. Specifically, the original region is first divided into N×N subdivisions, with the central mesh serving as the primary deformation control region. Then, within this central mesh, another N×N subdivision is performed, with its central sub-mesh serving as the secondary deformation control region. The sizes of the initial and subsequent subdivisions can differ. This process is repeated to form a multi-layered nested mesh structure, with the oscillation amplitude decreasing hierarchically in each layer.

[0047] The number and spacing of the mesh determine the fineness of the image segmentation, which directly affects the visual effect of the animation. Generally speaking, the finer the mesh, the more natural the transition after each mesh block deforms, resulting in less jagged edges and higher visual smoothness. However, this also increases computational overhead and affects the animation's frame rate. In practical applications, a trade-off between visual effect and computational performance can be struck based on the specific needs of the scenario, selecting an appropriate mesh density to achieve optimal wave animation performance on lightweight devices.

[0048] In some embodiments, if the wave animation type is a one-dimensional wave animation, then the predefined wave function mathematical model is a periodic trigonometric function, which is used to calculate the periodic displacement of the target area to generate oscillating deformation along the direction perpendicular to the wave propagation direction. If the wave animation type is a two-dimensional wave animation, then the predefined wave function mathematical model is a damped oscillation function, which is used to calculate the attenuation scaling coefficient of a preset range area centered on the interactive coordinates, so as to produce a scaling deformation that attenuates from the inside out.

[0049] Specifically, for one-dimensional wave animation, periodic trigonometric functions are typically used to describe the oscillation pattern of image patches. These trigonometric functions are expressed as follows: ;in, ;in, Indicates the frequency of oscillation during wave movement; Indicates the speed at which the ripples propagate from left to right; Indicates the magnitude of the fluctuation; such as Figure 3 As shown, the vertical coordinate of the upper left corner vertex of each rectangular image block at each time point t can be determined, driving the image block to produce periodic oscillating deformation along the direction perpendicular to the wave propagation. The speed of the wave's vertical vibration and the speed of its forward and backward transmission can be determined according to the desired effect.

[0050] For the two-dimensional wave effect, a damped oscillation function is used to describe the scaling amplitude of the central image patch over time, which can be expressed as: Where A represents the amplitude of the fluctuation; This represents the damping coefficient, which affects the rate at which the oscillation decays. Indicates the initial phase that affects the oscillation; This is to make the final oscillation amplitude of the function tend to 1, that is, the central block image returns to its original size after the oscillation ends; the function starts from the initial value of 1, gradually increases to the maximum amplitude, and then gradually shrinks in a decaying oscillation mode, eventually returning to the original size, simulating the visual effect of ripples spreading outward from the center and gradually dissipating.

[0051] like Figure 4As shown, after zooming in or out on the central image block, the coordinates of the four vertices of the image block can also be determined according to the coordinate system. Then, the other image blocks surrounding this central image block will undergo affine transformation according to these four vertices, transforming into new quadrilaterals that are displayed on the screen. Through the mechanism of "center-driven, linkage deformation", the entire target area deforms together, forming a circular ripple diffusion effect that spreads outward from the inside.

[0052] In some embodiments, when simulating a floating effect with one end fixed, the amplitude parameter in the periodic trigonometric function is dynamically adjusted by a constraint function. The constraint function calculates an attenuation coefficient based on the distance from the deformation unit to the fixed end, so that the deformation amplitude attenuates as the distance decreases.

[0053] In practice, in one-dimensional wave animation, the deformed quadrilateral is shaped according to the wave function. The calculated coordinates and their corresponding rectangular drawing areas are drawn onto the display screen. The connection of multiple rectangular blocks will exhibit an up-and-down oscillation pattern according to trigonometric functions during the duration of the animation. Taking the simulation of water waves as an example, in this implementation, the animation exhibits a uniform oscillation amplitude from the left to the right of the screen.

[0054] When simulating animation effects with a "fixed at one end," such as hair swaying in the wind or a flag fluttering, it's necessary to ensure that the oscillation amplitude of image blocks near the fixed end (e.g., the hair roots or the flagpole connection) approaches zero or remains fixed, while image blocks farther from the fixed end can oscillate freely. To achieve this effect, the amplitude parameter of the oscillation function can be dynamically modulated by adding a constraint function. The constraint function is: ; Where x represents the distance from the image patch to the fixed end, x is greater than or equal to 0; A represents the amplification factor of the amplitude, and k represents the coefficient of attenuation rate. A and k are generally positive numbers. The larger k is, the shorter the distance the vertical fluctuation propagates.

[0055] When the divided rectangular block is closer to the position that needs to be fixed in the animation, its vertical oscillation amplitude should be closer to 0, that is, to maintain the original coordinates; when the divided rectangular block is farther away from the position that needs to be fixed in the animation, its vertical oscillation amplitude should be increased accordingly, so as to present a realistic floating effect of "fixed at the root and swinging at the far end".

[0056] The attenuation coefficient k in the constraint function has a significant impact on the wave propagation distance: When k takes a large value, for example ,like Figure 5 As shown, the amplitude decays extremely rapidly, and the effective distance of wave propagation is relatively short; When k takes a small value, for example ,like Figure 6 As shown, the amplitude decay is relatively gentle, and the effective distance of wave propagation is relatively long.

[0057] The k-value can be flexibly configured according to the needs of specific application scenarios to precisely control the propagation range of fluctuations in space, thereby achieving diverse visual effects.

[0058] In some embodiments, after obtaining multiple image grid blocks, an affine transformation is performed on the image grid blocks to reduce the jagged edges in the animation caused by grid division.

[0059] In practice, affine transformation is used to readjust and associate the vertex coordinates of each image grid block. Specifically, for adjacent image blocks, the vertex coordinates at their connection points are aligned or shared, so that the originally independent rectangular or square grid blocks can be smoothly spliced ​​together in the form of continuous quadrilaterals after deformation. This effectively eliminates the visual discontinuity caused by the discrete grid boundaries and makes the transition between adjacent image blocks more natural and smooth.

[0060] In some embodiments, the affine transformation includes: If the wave animation type is a one-dimensional wave animation, then adjust the vertex coordinates at the connection point of adjacent rectangular image blocks to make the boundaries of adjacent rectangular image blocks continuous; If the wave animation type is a two-dimensional wave animation, then based on the deformation data of the central grid block, the vertex coordinates of the grid blocks surrounding the central grid block are adjusted in a coordinated manner so that the deformation of all grid blocks fits together to form a circular wave contour.

[0061] In practice, in one-dimensional animation, such as Figure 3 As shown, the ordinate of the top right corner vertex of each rectangular image block is changed to the ordinate of the top left corner vertex of its adjacent rectangular image block. Through this adjustment, the left and right vertices of two adjacent rectangular image blocks are connected, so that the originally independent rectangular blocks can be smoothly spliced ​​into continuous quadrilaterals after deformation. After affine transformation, the jagged boundaries that may have been caused by mesh division are replaced by continuous quadrilateral splicing, and the overall wave contour is more rounded and smooth. Thus, while ensuring low computational overhead, the visual quality of the wave animation is significantly improved, making the animation performance on lightweight devices more realistic and natural.

[0062] For 2D animation, to achieve a circular, undulating effect spreading outwards from the center, a similar affine transformation mechanism is used: such as... Figure 4As shown, the original square grid block is transformed into a quadrilateral that can fit the outline of a circular ripple. Specifically, after the central grid block is scaled and deformed according to the damped oscillation function, the surrounding grid blocks undergo affine transformation based on the vertex coordinates of the deformed central block, gradually transforming from the original square into a quadrilateral that fits the outline of a circular ripple, thus forming a circular ripple diffusion effect that spreads outward from the inside, making the animation effect more realistic.

[0063] In some embodiments, the step of generating the wave animation frame further includes: If the wave animation type is a two-dimensional wave animation, then after the affine transformation, a circular mask is used to crop the deformed image region, wherein the circular mask is an inscribed circle inscribed in the target region.

[0064] In practice, affine transformation is achieved based on the vertex displacement of a square mesh. The deformed image region is an approximate circle composed of multiple deformed quadrilaterals. A circular mask can be added after the affine transformation to crop the deformed image region.

[0065] Specifically, first determine the shape and size of the circular mask. It can be an inscribed circle within an L×L square area. The image content within the inscribed circle will be drawn on the screen, while the image content within the square area outside the inscribed circle will be discarded. Furthermore, for content that exceeds the display area, it is also necessary to add constraints to discard that part of the displayed image.

[0066] This application achieves a wave animation of a specified area of ​​the displayed content by combining mesh division and mesh deformation with a wave function. This significantly improves the smoothness of the animation on low-power devices and reduces the jaggedness of the animation. It also reduces the computational overhead of the animation implementation and achieves good animation effects in both one-dimensional and two-dimensional dimensions, thus enhancing the user experience when interacting with the device.

[0067] Based on the same inventive concept, this application also provides a device for realizing realistic wave animation based on a lightweight wearable device, the device comprising: A target area determination unit is used to determine a target area in the device display interface in response to user interaction signals or according to the type of wave animation to be presented; wherein the target area is used to present the wave animation. The image processing unit is used to call the corresponding predefined wave function mathematical model according to the wave animation type, and calculate the geometric deformation data of the target area in the animation time series based on the wave function mathematical model; The interface generation unit is used to perform graphic deformation and rendering on the target area based on the geometric deformation data, and generate and output continuous wave animation frames.

[0068] The following example demonstrates how the aforementioned method for implementing realistic wave animation based on lightweight wearable devices can be applied to a dynamic clock interface, such as... Figure 7 As shown, the device for generating the dynamic clock interface includes: a touch screen signal acquisition unit, an image processing unit, and a final image drawing unit.

[0069] The touch screen signal acquisition unit is responsible for monitoring the user's touch screen interaction operations, obtaining the touch screen coordinates and operation type (such as click, swipe, etc.) in real time, and determining whether the animation is played and where it is played. The image processing unit is responsible for performing complete animation generation preprocessing on the target image region, including: meshing, mesh deformation, and stitching of the target image region; The final image rendering unit is responsible for rendering each frame of the animation onto the display interface frame by frame as the animation progresses, forming a dynamic clock interface with undulating animation. This enables a dynamic clock interface that combines interactive responsiveness and visual expressiveness, bringing users a more vivid and natural interactive experience.

[0070] In this specification, the same or similar parts between the various embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the descriptions of the embodiments described later are relatively simple, and relevant parts can be referred to the descriptions of the foregoing embodiments.

[0071] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for implementing realistic wave animation based on a lightweight wearable device, characterized in that, include: In response to user interaction signals or according to the type of wave animation to be presented, a target area is determined in the device display interface; wherein, the target area is used to present the wave animation; According to the type of wave animation, the corresponding predefined wave function mathematical model is invoked, and based on the wave function mathematical model, the geometric deformation data of the target area in the animation time series is calculated; Based on the geometric deformation data, the target area is subjected to graphic deformation and rendering to generate and output continuous undulating animation frames.

2. The method for achieving realistic wave animation according to claim 1, characterized in that, The determination of the target area includes: If the wave animation type is a one-dimensional wave animation, then the image of the display interface is analyzed to identify the target object contour region that matches the one-dimensional wave animation, and the target object contour region is determined as the target region; If the wave animation type is a two-dimensional wave animation, then the interaction coordinates obtained from the user interaction signal are used to extract a preset range of areas centered on the interaction coordinates, and the area is determined as the target area.

3. The method for achieving realistic wave animation according to claim 1, characterized in that, Before calculating the geometric deformation data of the target region over the animation time series, the realistic wave animation implementation method further includes: The target region is divided into grids to obtain multiple image grid blocks; The density of the grid division is configured according to the shape complexity of the target region and the required animation smoothness.

4. The method for achieving realistic wave animation according to claim 3, characterized in that, When dividing the target area into grids, if the wave animation type is a one-dimensional wave animation, the target area is divided into multiple continuous rectangular image blocks along the wave propagation direction. If the wave animation type is a two-dimensional wave animation, then the target area is divided into N×N two-dimensional grid blocks, where N is an odd number greater than 1.

5. The method for achieving realistic wave animation according to claim 2 or 4, characterized in that, If the wave animation type is a one-dimensional wave animation, then the predefined wave function mathematical model is a periodic trigonometric function, which is used to calculate the periodic displacement of the target area to generate oscillating deformation along the direction perpendicular to the wave propagation. If the wave animation type is a two-dimensional wave animation, then the predefined wave function mathematical model is a damped oscillation function, which is used to calculate the attenuation scaling coefficient of a preset range area centered on the interactive coordinates, so as to produce a scaling deformation that attenuates from the inside out.

6. The method for achieving realistic wave animation according to claim 5, characterized in that, When simulating a floating effect with one end fixed, the amplitude parameter in the periodic trigonometric function is dynamically adjusted by a constraint function. The constraint function calculates an attenuation coefficient based on the distance from the deformation unit to the fixed end, so that the deformation amplitude decreases as the distance decreases.

7. The method for achieving realistic wave animation according to claim 3 or 4, characterized in that, After obtaining multiple image grid blocks, an affine transformation is performed on the image grid blocks to reduce the jagged edges in the animation caused by grid division.

8. The method for achieving realistic wave animation according to claim 7, characterized in that, The affine transformation includes: If the wave animation type is a one-dimensional wave animation, then adjust the vertex coordinates at the connection point of adjacent rectangular image blocks to make the boundaries of adjacent rectangular image blocks continuous; If the wave animation type is a two-dimensional wave animation, then based on the deformation data of the central grid block, the vertex coordinates of the grid blocks surrounding the central grid block are adjusted in a coordinated manner so that the deformation of all grid blocks fits together to form a circular wave contour.

9. The method for achieving realistic wave animation according to claim 8, characterized in that, The step of generating the wave animation frame also includes: If the wave animation type is a two-dimensional wave animation, then after the affine transformation, a circular mask is used to crop the deformed image region, wherein the circular mask is an inscribed circle inscribed in the target region.

10. A device for realizing realistic wave animation based on a lightweight wearable device, characterized in that, The device for realizing realistic wave animation includes: A target area determination unit is used to determine a target area in the device display interface in response to user interaction signals or according to the type of wave animation to be presented; wherein, the target area is used to present the wave animation; The image processing unit is used to call the corresponding predefined wave function mathematical model according to the wave animation type, and calculate the geometric deformation data of the target area in the animation time series based on the wave function mathematical model; The interface generation unit is used to perform graphic deformation and rendering on the target area based on the geometric deformation data, and generate and output continuous wave animation frames.

Images