Animation track display method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses an animation track display method and device, equipment and a storage medium. The method comprises the following steps: acquiring the central position and touch duration of a touch point on a screen; if the touch duration is greater than a preset duration threshold, determining an animation image based on the touch duration; determining the movement track and the movement speed of the touch point based on the change of the central position; and determining real-time transparency of the animation image based on the movement speed, and determining an animation display strategy on the screen based on the real-time transparency and the animation image. According to the embodiment of the invention, the display strategy and the real-time effect of the animation image can be controlled by changing the parameters such as the touch duration, the movement track and the movement speed, the interestingness of interaction between a user and a screen is increased, and the participation degree and the viscosity of the user are improved.

Description

Technical Field

[0001] The present application relates to the field of animation interaction technology, and in particular to an animation trajectory display method, device, electronic device, and computer-readable storage medium. Background Art

[0002] With the development of technology, touch screen technology, as the core interaction method of large-screen devices, has been widely used in various fields, such as smart phones, tablet computers, large-screen TVs, smart car displays, and information query terminals in public places. The popularization of this technology has not only greatly improved the user experience, but also promoted the rapid development of related industries.

[0003] In the related art, in order to improve the interaction experience between the user and the screen, it is usually achieved through prompts such as sound and vibration. However, whether it is sound or vibration, the interaction method is relatively simple, and it is impossible to give an intuitive prompt to the user's touch point on the screen, and it is not very interesting. Therefore, how to improve the interactivity between the user and the screen and give an intuitive prompt to the user's touch point on the screen is a technical problem that needs to be solved urgently. Summary of the invention

[0004] To solve the above technical problems, embodiments of the present application provide an animation trajectory display method and device, an electronic device, a computer-readable storage medium, and a computer program product.

[0005] According to one aspect of an embodiment of the present application, there is provided a method for displaying an animation trajectory, including: obtaining the center position and touch duration of a touch point on a screen; if the touch duration is greater than a preset duration threshold, determining an animation image based on the touch duration; determining a movement trajectory of the touch point and a movement speed of the touch point based on changes in the center position; determining a real-time transparency of the animation image based on the movement speed, and determining an animation display strategy on the screen based on the real-time transparency and the animation image.

[0006] According to one aspect of the embodiments of the present application, the determining the movement trajectory of the touch point and the movement speed of the touch point based on the change of the center position includes: obtaining coordinate information corresponding to the center position and a time parameter corresponding to the coordinate information; determining the movement trajectory of the touch point based on the coordinate information; and determining the movement speed of the touch point based on the movement trajectory and the time parameter. According to one aspect of the embodiments of the present application, the determining the movement speed of the touch point based on the movement trajectory and the time parameter includes: determining the distance value between adjacent touch points in the movement trajectory; determining the time difference between the adjacent touch points based on the time parameter; and determining the movement speed of the touch point based on the time difference and the distance value.

[0007] According to one aspect of an embodiment of the present application, the method also includes: establishing an objective function between the motion speed and the transparency of the animated image, so as to achieve a smooth transition between the motion speed and the transparency through the objective function; constructing a mapping relationship between the motion speed and the transparency of the animated image based on the objective function; and finding a real-time transparency that matches the animated image from the mapping relationship based on the motion speed.

[0008] According to one aspect of an embodiment of the present application, the method also includes: obtaining the touch force of the touch point; determining the size parameters of the animation image and the coordinate offset of the animation image based on the touch force; and determining the animation display strategy on the screen based on the size parameters and the coordinate offset.

[0009] According to one aspect of an embodiment of the present application, the method also includes: determining a first view of the animated image based on the size parameter and the coordinate offset, the first view being used to manage at least one second view, the second view inheriting the animated image of the first view and the real-time transparency of the animated image; determining coordinate information of the second view based on the coordinate offset and the preset offset; determining an animation path of the animated image and the end point coordinates corresponding to the animation path based on the coordinate information and the motion trajectory.

[0010] According to one aspect of an embodiment of the present application, the method also includes: obtaining a time interval of a touch point on the screen; if the time interval is greater than a preset interval length, determining an attenuation strategy of the animated image on the screen based on the time interval and the real-time transparency.

[0011] According to one aspect of an embodiment of the present application, an animation trajectory display device is provided, the device comprising: an acquisition module, for acquiring the center position of a touch point on a screen and a touch duration; an image module, for determining an animation image based on the touch duration if the touch duration is greater than a preset duration threshold; a motion module, for determining a motion trajectory of the touch point and a motion speed of the touch point based on changes in the center position; a determination module, for determining a real-time transparency of the animation image based on the motion speed, and determining an animation display strategy on the screen based on the real-time transparency and the animation image.

[0012] According to one aspect of an embodiment of the present application, an electronic device is provided, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the electronic device implements the animation trajectory display method as described above.

[0013] According to one aspect of an embodiment of the present application, a computer-readable storage medium is provided, on which computer-readable instructions are stored. When the computer-readable instructions are executed by a processor of a computer, the computer executes the animation trajectory display method as described above.

[0014] According to one aspect of an embodiment of the present application, a computer program product is also provided, including a computer program, which implements the steps in the animation trajectory display method as described above when executed by a processor.

[0015] In the technical solution provided in the embodiments of the present application, a corresponding animated image is generated based on the center position of the user's touch point on the screen and the touch duration, and the animated image provides the user with intuitive visual feedback, so that the user can clearly see the effect of the operation, and interact with the screen by touching and moving the user's fingers. The user can control the display strategy and real-time effect of the animated image by changing parameters such as touch duration, motion trajectory and motion speed, which increases the fun of user interaction with the screen and improves user participation and stickiness.

[0016] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present application, and together with the specification, are used to explain the principles of the present application. Obviously, the drawings described below are only some embodiments of the present application, and for those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0018] Figure 1 It is a schematic diagram of an implementation environment for displaying animation trajectories during the interaction between a user and a screen, shown in an exemplary embodiment of the present application;

[0019] Figure 2 is a flow chart of an animation trajectory display method shown in an exemplary embodiment of the present application;

[0020] Figure 3 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0021] Figure 4 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0022] Figure 5 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0023] Figure 6 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0024] Figure 7 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0025] Figure 8 is a schematic diagram of an animation trajectory display shown in an exemplary embodiment;

[0026] Fig. 9 is a flow chart of an animation trajectory display method shown in another exemplary embodiment of the present application;

[0027] Fig.10 It is a brief flow chart of displaying animation trajectories in an exemplary application scenario;

[0028] Fig.11 is a block diagram of an animation trajectory display device shown in an exemplary embodiment of the present application;

[0029] Fig.12 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present application is shown. DETAILED DESCRIPTION

[0030] Here, exemplary embodiments will be described in detail, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are only examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims.

[0031] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0032] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps can be decomposed, and some operations / steps can be combined or partially combined, so the actual execution order may change according to actual conditions.

[0033] The term "multiple" as used in this application refers to two or more than two. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the related objects are in an "or" relationship.

[0034] A touch screen is an electronic device that allows users to operate by directly touching the icons, text or images on the screen. Its interactivity is mainly reflected in the fact that users can interact with the screen through their fingers or other touch objects to control the device and obtain information. Touch screens are intuitive, easy to use, efficient and interesting. Users do not need to learn complex key operations, but can complete various operations by simply touching the screen, which greatly reduces the threshold for use. At the same time, the touch screen has a fast response speed, and users can get feedback quickly, which improves work efficiency. In addition, the touch screen also supports a variety of interaction methods, such as sliding, clicking, zooming, etc., providing users with a richer experience.

[0035] The touch screen detects the user's touch actions through built-in sensors. For example, the capacitive touch screen realizes touch sensing by detecting the change in capacitance between the user's finger and the screen. The graphical user interface on the touch screen provides the user with an intuitive operation interface. The user can perform various operations by touching icons, buttons and other elements on the screen.

[0036] Touch screens are widely used. For example, touch screens are most widely used in terminal devices such as mobile phones and tablet computers. Users can make calls, send text messages, browse the web, play games, etc. by touching the screen. In public places such as shopping malls, banks, and airports, touch screen self-service terminals provide users with convenient query, ticket purchase, payment and other services. Touch screens are also widely used in the field of industrial control. Through the touch screen, operators can monitor the operating status of the equipment, adjust parameters, issue instructions, etc. in real time.

[0037] The interactivity of touch screens is one of their most prominent features. It provides users with an intuitive, easy-to-use, efficient and interesting interactive experience. With the continuous development of technology, the interactivity of touch screens will continue to be strengthened and improved, bringing more convenience and fun to people's lives and work.

[0038] Figure 1 is a schematic diagram of a real-time environment showing an animation trajectory during a human-computer interaction process shown in an exemplary embodiment of the present application, such as Figure 1As shown, the user performs interactive operations on the screen of the smart terminal 110, and the center position of the touch point on the screen of the smart terminal 110 and the touch duration. If the touch duration is greater than a preset threshold, it means that the user did not touch the screen by mistake. The animation image is determined according to the touch duration of the user on the screen, and the movement trajectory of the touch point and the movement speed of the touch point on the screen are determined according to the change of the center position of the touch point on the smart terminal 110. The real-time transparency of the animation image can be determined according to the movement speed, and the smart terminal 110 determines the animation display strategy on the screen according to the real-time transparency and the animation image, thereby realizing trajectory tracking animation display on the screen of the smart terminal 110.

[0039] in, Figure 1 The smart terminal 110 shown can be any terminal device that supports touch interaction operations, such as a smart phone, a car computer, a tablet computer, a laptop computer, or a wireless wearable device.

[0040] In the related art, in order to improve the interaction experience between the user and the screen, it is usually achieved through prompts such as sound and vibration. However, whether it is sound or vibration, the interaction method is relatively simple, and it is impossible to give an intuitive prompt to the user's touch point on the screen, and it is not very interesting. Therefore, how to improve the interactivity between the user and the screen and give an intuitive prompt to the user's touch point on the screen is a technical problem that needs to be solved urgently.

[0041] The above-mentioned problems are generally applicable in the general touch interaction process scenario. It can be seen that the existing interaction method is too single, lacks fun, and cannot intuitively prompt the touch point. In order to solve these problems, the embodiments of the present application respectively propose an animation trajectory display method, an animation trajectory display device, an electronic device, a computer-readable storage medium, and a computer program product. These embodiments will be described in detail below.

[0042] See also Figure 2 , Figure 2 is a flowchart of an exemplary embodiment of the present application showing an animation trajectory display method. The method can be applied to Figure 1 The implementation environment shown is specifically executed by the smart terminal 110 in the implementation environment. It should be understood that the method can also be applied to other exemplary implementation environments and be specifically executed by devices in other implementation environments. This embodiment does not limit the implementation environment to which the method is applicable.

[0043] like Figure 2 As shown, in an exemplary embodiment, the animation trajectory display method at least includes steps S210 to S240, which are described in detail as follows:

[0044] Step S210, obtaining the center position of the touch point on the screen and the touch duration.

[0045] For example, when a touch event is detected on the screen, the coordinate information of the center position corresponding to the touch point and the duration of stay at the center position are recorded, and the duration of stay is the touch duration of the touch point. In addition, for example, the center position of a circular area formed by finger pressing needs to be calculated based on the coordinates of the touch point and the possible size of the area. For single-point touch, the coordinates of the touch point can usually be considered as the center position.

[0046] Step S220: if the touch duration is greater than a preset duration threshold, determine an animation image based on the touch duration.

[0047] Exemplarily, when the user interacts with the screen, the system will continuously monitor and record the duration of the touch. A duration threshold is preset to determine whether the user's touch behavior reaches the standard for triggering a specific animation. The duration threshold is determined based on the specific needs of the application and the user experience design. When the touch duration exceeds the preset duration threshold, it is considered that the user has performed a long touch operation. Once it is confirmed that the user has performed a long touch, the system will select a suitable animation image based on the touch duration. This process may involve mapping the touch duration to a specific animation image, or selecting one of the preset animation sets based on the duration range.

[0048] To provide a richer user experience, you can design a variety of animated images to choose from, which can change according to the touch duration, such as from simple color changes to complex dynamic graphics. To more accurately control the selection of animations, you can divide the touch duration into multiple intervals and assign different animated images to each interval. In this way, even similar touch durations can produce different visual effects. During the animation display process, transition effects such as fading and zooming can be added to enhance the continuity and smoothness of user feedback.

[0049] Step S230: determining the movement trajectory and movement speed of the touch point based on the change of the center position.

[0050] For example, if the user performs a sliding operation on the screen, by comparing the center positions of two adjacent touch events, the displacement of the touch point during this period of time can be calculated. Among them, the displacement can be calculated using a simple geometric method, that is, calculating the straight-line distance between the two points or using a vector to represent and calculate, and connecting the recorded center positions of the touch points in chronological order to form the motion trajectory of the touch point. This is usually implemented through a drawing interface or a graphics library, and the motion trajectory can be displayed on the screen in the form of a line or curve. While recording the center position of the touch point, the system will also record the timestamp of each touch event. After that, by comparing the timestamps of two adjacent touch events, the time interval between them can be calculated. Using the displacement and time interval, the average movement speed of the touch point during this period of time can be calculated, where the speed calculation formula is: speed = displacement / time interval.

[0051] Step S240: determining the real-time transparency of the animation image based on the motion speed, and determining the animation display strategy on the screen based on the real-time transparency and the animation image.

[0052] Exemplarily, set a transparency range (for example, from completely transparent to completely opaque). Create a function or algorithm to map the movement speed of the touch point to this transparency range. This function can be linear or nonlinear, depending on the animation effect you want to achieve. When the movement speed of the touch point increases, the function output value (i.e., transparency) should change accordingly to achieve visual feedback of the speed. Each time a touch event occurs, calculate the current touch speed, and use the above function or algorithm to convert the current speed into the corresponding transparency value.

[0053] Optionally, in some achievable embodiments, appropriate animated images are selected based on the needs of the application and the user's interaction. These images can be static or part of a dynamic sequence, and the calculated real-time transparency is applied to the selected animated images. This usually involves rendering the image so that its transparency blends with the background or other image elements. In addition to speed, other trigger conditions can also be set to start or change the animation. For example, the direction of movement of the touch point, the duration of the touch, or the area of ​​the touch.

[0054] In some embodiments of the present application, by capturing the center position of the touch point and the touch duration, the user's touch intention can be more accurately identified. When the touch duration exceeds the preset threshold, the animation effect is triggered. This response mechanism meets the user's intuition and expectations, thereby improving the user experience; by converting user input information such as touch duration, motion trajectory and motion speed into an animation display strategy, the solution significantly enhances the interactivity of the touch screen. Users can control the presentation of animations through different touch methods, thereby interacting with the touch screen more naturally, smoothly and intuitively.

[0055] Based on the above examples, please refer to Figure 3 In one of the exemplary embodiments provided in the present application, the specific implementation process of determining the movement trajectory of the touch point and the movement speed of the touch point based on the change of the center position may also include steps S310 to S330, which are described in detail as follows:

[0056] Step S310, obtaining coordinate information corresponding to the center position and a time parameter corresponding to the coordinate information;

[0057] Step S320, determining the motion trajectory of the touch point based on the coordinate information;

[0058] Step S330: determining the movement speed of the touch point based on the movement trajectory and the time parameter.

[0059] Exemplarily, when a touch event occurs, the coordinate information of the touch point is obtained, wherein the coordinate information generally includes the x and y coordinates of the touch point, which represent the position of the touch point on the screen. Then the specific time point corresponding to each coordinate point is recorded, and for two adjacent coordinate points, the straight-line distance or vector distance between them is calculated to represent the displacement of the touch point during this period of time. The timestamps corresponding to the two adjacent coordinate points are obtained, and the time interval between them is calculated, and the time interval represents the time required for the touch point to move from the previous position to the current position. Then, the movement speed of the touch point can be determined based on the time interval and the time error.

[0060] Optionally, in some feasible embodiments, if the motion trajectory is based on multiple touch points, the movement speed of the touch point in the motion trajectory can be calculated by using the coordinate information and timestamp of the touch point corresponding to the starting point in the motion trajectory and the coordinate information and timestamp of the touch point corresponding to the end point in the motion trajectory.

[0061] In some embodiments of the present application, in the process of generating an animated image by the user interacting with the screen, the coordinate information corresponding to the center position of the touch point and the time parameters corresponding to the coordinate information are obtained, and the movement trajectory and movement speed of the touch point are determined based on this information. This has significant beneficial effects on improving the accuracy and smoothness of animation generation, enhancing the interactivity and user participation of the animation, optimizing the algorithm and performance of animation generation, and improving user experience and satisfaction.

[0062] Based on the above examples, please refer to Figure 4 In one of the exemplary embodiments provided in the present application, the specific implementation process of determining the movement speed of the touch point based on the movement trajectory and the time parameter may also include steps S410 to S430, which are described in detail as follows:

[0063] Step S410, determining the distance value between adjacent touch points in the motion trajectory;

[0064] Step S420, determining the time difference between adjacent touch points based on the time parameter;

[0065] Step S430: determining the movement speed of the touch point based on the time difference and the distance value.

[0066] Exemplarily, adjacent touch points are extracted from the recorded touch point trajectories. These touch points are usually arranged in chronological order. For each pair of adjacent touch points, the distance between them is calculated. This can be achieved by using the Euclidean distance formula (for points on a two-dimensional plane) or other appropriate distance measurement methods. The timestamps corresponding to the adjacent touch points are extracted from the touch event records. The difference between the timestamps of two adjacent touch points is calculated to obtain the time difference. This is usually achieved by a simple subtraction operation. Using the calculated distance value and time difference, the average movement speed of the touch point during this period can be calculated. Among them, the speed calculation formula is: speed = distance / time difference. Since the time difference is in milliseconds, the calculated speed is usually in pixels per second (px / s).

[0067] In addition, in order to obtain a smoother and more accurate motion speed curve, the calculated speed can be smoothed. There are many smoothing methods, such as moving average, exponential smoothing, etc. These methods can be selected and applied according to actual conditions and needs.

[0068] In some embodiments of the present application, in the process of generating animated images by user interaction with the screen, the movement speed of the touch points is determined by calculating the distance value and time difference between adjacent touch points, which has significant beneficial effects in improving the accuracy and realism of animation generation, enhancing the interactivity and user experience of animation, optimizing the algorithm and performance of animation generation, and supporting the realization of complex animation effects.

[0069] Based on the above examples, please refer to Figure 5 In one of the exemplary embodiments provided in the present application, the specific implementation process of the above animation trajectory display method may also include steps S510 to S530, which are described in detail as follows:

[0070] Step S510, establishing an objective function between the motion speed and the transparency of the animation image, so as to achieve a smooth transition between the motion speed and the transparency through the objective function;

[0071] Step S520, constructing a mapping relationship between the motion speed and the transparency of the animation image based on the objective function;

[0072] Step S530: Find the real-time transparency that matches the animated image from the mapping relationship based on the motion speed.

[0073] Exemplarily, let v be the movement speed of the touch point (it can be the average speed or the instantaneous speed, determined according to actual needs). Let α be the transparency of the animated image, and its value range is usually [0,1], where 0 means completely transparent and 1 means completely opaque. According to the design requirements, select a suitable function form to associate v and α. This function can be linear, exponential, logarithmic or any other form. The key is to ensure that the transparency can transition smoothly when the speed changes. According to the specific needs of the application, adjust the parameters of the function to ensure that the transparency can change as expected within the speed change range. For example, if you want the transparency to change slightly at a lower speed, but change significantly at a higher speed, you can choose a function with this characteristic. Finally, construct an objective function f(v) = α, where f is the function form selected previously, v is the input movement speed, and α is the output transparency.

[0074] Based on the above objective function, a mapping table or function can be constructed to map the movement speed to the corresponding transparency. If you choose to use a mapping table, you can pre-calculate and store the transparency values ​​corresponding to a series of speed values. During the touch event processing, the movement speed of the current touch point is obtained in real time. Use the previously constructed mapping table or function to find or calculate the corresponding transparency value based on the current movement speed. Apply the calculated transparency value to the animated image to update its visual effect.

[0075] In some embodiments of the present application, during the process of user interaction with the screen, by establishing an objective function between the motion speed and the transparency of the animated image and constructing a mapping relationship, the transparency of the animated image is adjusted in real time, which has significant beneficial effects in improving the naturalness and smoothness of the user interaction experience, enhancing the dynamic effects and visual appeal of the animation, optimizing the convenience and accuracy of user operations, improving the flexibility and customizability of the interactive interface, and supporting the implementation of complex interaction modes.

[0076] Based on the above examples, please refer to Figure 6 In one of the exemplary embodiments provided in the present application, the specific implementation process of the above animation trajectory display method may also include steps S610 to S630, which are described in detail as follows:

[0077] Step S610, obtaining the touch force of the touch point;

[0078] Step S620, determining the size parameters of the animation image and the coordinate offset of the animation image based on the touch force;

[0079] Step S630, determining the animation display strategy on the screen based on the size parameter and the coordinate offset.

[0080] Exemplarily, during the touch event processing, the touch force value provided by the touch screen device is read. This value is usually a number between 0 and a maximum value, indicating the magnitude of the touch force. A base size (such as the default size of an animated image) is set as a starting point. According to the touch force value, the size of the animated image is adjusted. This can be achieved by mapping the force value to a size adjustment factor, which can affect the width and height of the image linearly or nonlinearly. An offset reference point is determined, which can be the initial position of the animated image or a fixed point on the screen. According to the touch force value, a coordinate offset is calculated. This offset can be the moving distance along the X-axis or Y-axis of the screen, or a combination of the two. The size and direction of the offset can be adjusted linearly or nonlinearly based on the force value.

[0081] Optionally, in some feasible embodiments, each time a touch event occurs, the size and position of the animated image are dynamically updated according to the current touch force value, which usually involves re-rendering the animated image to reflect its new size and position. In order to avoid visual discomfort caused by sudden changes in size and position, a smooth transition effect can be added.

[0082] In some embodiments of the present application, during the process of user interaction with the screen, by obtaining the touch force of the touch point, and determining the size parameters and coordinate offset of the animation image based on the force, and then determining the animation display strategy on the screen, it has significant beneficial effects in improving the depth and realism of the user interaction experience, enhancing the dynamic effects and interactivity of the animation, optimizing the convenience and accuracy of user operations, improving the flexibility and adaptability of the interaction interface, and supporting the implementation of complex interaction modes.

[0083] Based on the above examples, please refer to Figure 7 In one of the exemplary embodiments provided in the present application, the specific implementation process of the above animation trajectory display method may also include steps S710 to S730, which are described in detail as follows:

[0084] Step S710, determining a first view of the animated image based on the size parameter and the coordinate offset, the first view being used to manage at least one second view, the second view inheriting the animated image of the first view and the real-time transparency of the animated image;

[0085] Step S720, determining coordinate information of the second view based on the coordinate offset and the preset offset;

[0086] Step S730: determining the animation path of the animation image and the end point coordinates corresponding to the animation path based on the coordinate information and the motion trajectory.

[0087] Exemplarily, in some achievable embodiments of the present application, the first view may be a parent view, and the second view may be a subview that integrates the image attributes of the first view. For example, the first view (parent view) may be created or adjusted using previously determined size parameters (such as width, height), and this size parameter may be dynamically adjusted based on the touch force, and an animated image may be loaded or embedded in the first view, in order to ensure that the animated image is correctly displayed in the first view and is ready for subsequent animation processing. Among them, the second view (subview) inherits the animated image in the first view, which means that the second view will display the same animated image as the first view, but may have different display attributes (such as transparency). The coordinate information of the second view is determined using the previously determined coordinate offset (based on the touch force) and the preset offset (which may be a fixed offset or a dynamic offset based on other conditions). This will determine the position of the second view relative to the first view or the touch point, and use the coordinate information of the second view (determined based on the coordinate offset and the preset offset) as one of the starting points or key points of the animation path, and the overall shape of the animation path can also be determined based on the motion trajectory and the starting point coordinates (and other possible intermediate points or key points).

[0088] Optionally, in some achievable embodiments, an animation class of a tool for animating an object along a specified path is customized to create an animation on the interface that moves along a specific path and has rotation and scaling effects. It inherits from AbstractPathAnimator, which is an abstract class for controlling the animation effect of an object along a specific path, which includes the creation of an animation path and the management of configuration information. In AbstractPathAnimator, an internal static class Config is used to store the configuration parameters of the animation, and the animation path is generated by creating a file. The start method is rewritten in the animation class of the tool for animating an object along a specified path, and the method receives the x and y coordinates of the child view, the parent view, and the start position of the animation. The method of creating a file is described below, and a random number x1 in the range of [0, random offset of the X coordinate) is generated for the x coordinate of the first Bezier curve control point, and then a random number x2 in the range of [0, random offset of the X coordinate) is generated for the x coordinate of the Bezier curve control point. Calculate the y1 value of the subview (parent view height - initial y coordinate of the subview animation) as the starting y coordinate of the Bezier curve, calculate a y coordinate y2 based on the counter value, animation length and random number, and adjust the variable value according to the calculated y2 value and the factor of the Bezier curve. Add a fixed offset to the random x coordinate (x = offset of the x coordinate of the Bezier curve control point + x), and the same for x2. y3 = y-y2, as the y coordinate of the end point of the second Bezier curve, y2 = y-y2 / 2, as the y coordinate of the common control point of the two Bezier curves. Create a new Path object and move the starting point to (initial x coordinate of the subview animation, y). path.cubicTo(initial x coordinate of subview animation, y1-variable value x1, y2+variable value, x1, y2); add the first Bezier curve, move to the end point (x1, y2) of the first Bezier curve as the starting point of the second Bezier curve, path.cubicTo(x1, y2-variable value, x2, y3+variable value, x2, y3); add the second Bezier curve, and return the created Path object. In summary, Bezier curves are used in this embodiment, and the setting and calculation of the control points and end point coordinates of the Bezier curves are customized according to the required animation path.

[0089] Optional, such as Figure 8As shown, in some achievable embodiments, at the moment when the user long presses the screen, the pattern begins to appear at the pressing point, these patterns are displayed one by one in different colors, and slowly move upwards, while gradually becoming transparent, and finally fade out of the field of vision and disappear without a trace. As the user's finger moves on the screen, these patterns always appear precisely at the new position where the finger is pressed, forming a continuous and smooth visual flow. In addition, when the user long presses the screen without moving, multiple second views are displayed from the touch point, and the second views can be displayed in the form of different transparency, different colors, different sizes, and different positions.

[0090] In some embodiments of the present application, during the process of user interaction with the screen, by determining the first view of the animated image based on size parameters and coordinate offsets, and further managing the second view, and combining coordinate information and motion trajectory to determine the animation path and its corresponding end point coordinates, it has significant beneficial effects in improving the hierarchy and depth of the user interaction experience, enhancing the dynamic effects and interactivity of the animation, optimizing the convenience and accuracy of user operations, improving the flexibility and adaptability of the interactive interface, and supporting the implementation of complex interaction modes.

[0091] Based on the above examples, see Fig. 9 In one of the exemplary embodiments provided in the present application, the specific implementation process of the above animation trajectory display method may also include step S910 and step S920, which are described in detail as follows:

[0092] Step S910, obtaining the time interval of the touch point on the screen;

[0093] Step S920: If the time interval is greater than the preset time interval, then determine the attenuation strategy of the animation image on the screen based on the time interval and the real-time transparency.

[0094] Exemplarily, when a user performs a touch operation on the screen, the system records the timestamp of each touch point.

[0095] By calculating the difference between the timestamps of two adjacent touch points, the time interval between the touch points can be obtained. An interval duration is preset, and this duration can be set according to the requirements of the animation effect. If the calculated time interval is greater than the preset interval duration, it means that the user's touch operation is not frequent enough, or the user has paused the touch operation. Real-time transparency refers to the transparency value of the animated image on the screen. According to the length of the time interval, an attenuation function can be designed. This function determines how the transparency of the animated image should decrease over time. The attenuation strategy may include: linear attenuation, that is, the transparency decreases linearly with the increase of the time interval, or exponential attenuation, that is, the transparency decreases faster with the increase of the time interval, to achieve a faster fade-out effect.

[0096] In some embodiments provided in the present application, during the process of user interaction with the screen, by obtaining the time interval of the touch points and determining the attenuation strategy of the animated image on the screen based on the time interval and the real-time transparency, it has significant beneficial effects on improving the continuity and naturalness of the user interaction experience, enhancing the dynamic effects and visual appeal of the animation, optimizing the convenience and accuracy of user operations, improving the flexibility and adaptability of the interactive interface, and enhancing the emotional connection between the user and the screen.

[0097] Fig.10 is a brief flow chart of displaying animation trajectories in an exemplary application scenario. Fig.10 In the application scenario shown, the center position and touch duration of the touch point on the screen are obtained; if the touch duration is greater than the preset duration threshold, the animation image is determined based on the touch duration; the touch strength of the touch point is obtained; the size parameters of the animation image and the coordinate offset of the animation image are determined based on the touch strength; the first view of the animation image is determined based on the size parameters and the coordinate offset, the first view is used to manage at least one second view, and the second view inherits the animation image of the first view and the real-time transparency of the animation image; on the other hand, the movement trajectory of the touch point and the movement speed of the touch point are determined based on the change of the center position; the real-time transparency of the animation image is determined based on the movement speed, and the coordinate information of the second view is determined based on the coordinate offset and the preset offset; the animation path of the animation image and the end point coordinates corresponding to the animation path are determined based on the coordinate information and the movement trajectory, and the time interval of the touch point on the screen is obtained; if the time interval is greater than the preset interval, the attenuation strategy of the animation image on the screen is determined based on the time interval and the real-time transparency. For the detailed implementation process, please refer to the records in the above-mentioned embodiments, which will not be repeated here.

[0098] Fig.11 is a block diagram of an animation trajectory display device shown in an exemplary embodiment of the present application. The device can be applied to Figure 2 The implementation environment shown in the figure is specifically configured in the intelligent terminal 210. The device can also be applied to other exemplary implementation environments and specifically configured in other devices. This embodiment does not limit the implementation environment to which the device is applied.

[0099] like Fig.11As shown, the exemplary animation trajectory display device 1100 includes: an acquisition module 1110, which acquires the center position of the touch point on the screen and the touch duration; an image module 1120, which determines the animation image based on the touch duration if the touch duration is greater than a preset duration threshold; a motion module 1130, which determines the motion trajectory of the touch point and the motion speed of the touch point based on the change of the center position; a determination module 1140, which determines the real-time transparency of the animation image based on the motion speed, and determines the animation display strategy on the screen based on the real-time transparency and the animation image.

[0100] According to one aspect of an embodiment of the present application, the above-mentioned motion module 1130 also includes obtaining coordinate information corresponding to the center position and time parameters corresponding to the coordinate information; determining the motion trajectory of the touch point based on the coordinate information; and determining the motion speed of the touch point based on the motion trajectory and the time parameters.

[0101] According to one aspect of an embodiment of the present application, the above-mentioned motion module 1130 also includes determining the distance value between adjacent touch points in the motion trajectory; determining the time difference between adjacent touch points based on a time parameter; and determining the movement speed of the touch point based on the time difference and the distance value.

[0102] According to one aspect of an embodiment of the present application, the above-mentioned determination module 1140 also includes establishing an objective function between the motion speed and the transparency of the animated image, so as to achieve a smooth transition between the motion speed and the transparency through the objective function; constructing a mapping relationship between the motion speed and the transparency of the animated image based on the objective function; and finding a real-time transparency that matches the animated image from the mapping relationship based on the motion speed.

[0103] According to one aspect of an embodiment of the present application, the above-mentioned determination module 1140 also includes obtaining the touch force of the touch point; determining the size parameters of the animation image and the coordinate offset of the animation image based on the touch force; and determining the animation display strategy on the screen based on the size parameters and the coordinate offset.

[0104] According to one aspect of an embodiment of the present application, the above-mentioned determination module 1140 also includes determining a first view of the animated image based on size parameters and coordinate offsets, the first view being used to manage at least one second view, the second view inheriting the animated image of the first view and the real-time transparency of the animated image; determining coordinate information of the second view based on the coordinate offset and a preset offset; and determining an animation path of the animated image and the end point coordinates corresponding to the animation path based on the coordinate information and the motion trajectory.

[0105] According to one aspect of an embodiment of the present application, the above-mentioned animation trajectory display device 1100 also includes an attenuation module, which obtains the time interval of the touch point on the screen; if the time interval is greater than the preset interval length, the attenuation strategy of the animation image on the screen is determined based on the time interval and real-time transparency.

[0106] The animation trajectory display device provided in the above embodiment and the animation trajectory display method provided in the above embodiment belong to the same concept, wherein the specific manner in which each module and unit performs the operation has been described in detail in the method embodiment, and will not be repeated here. In practical applications, the animation trajectory display device provided in the above embodiment can distribute the above functions to different functional modules as needed, that is, divide the internal structure of the device into different functional modules to complete all or part of the functions described above, and this is not limited here.

[0107] An embodiment of the present application also provides an electronic device, comprising: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the electronic device implements the animation trajectory display method provided in the above-mentioned embodiments.

[0108] Fig.12 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present application is shown. Fig.12 The computer system 1200 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0109] like Fig.12 As shown, the computer system 1200 includes a central processing unit (CPU) 1201, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 1202 or the program loaded from the storage part 1208 to the random access memory (RAM) 1203, such as executing the method described in the above embodiment. In the RAM 1203, various programs and data required for system operation are also stored. The CPU 1201, the ROM 1202 and the RAM 1203 are connected to each other through the bus 1204. The input / output (I / O) interface 1205 is also connected to the bus 1204.

[0110] The following components are connected to the I / O interface 1205: an input section 1206 including a keyboard, a mouse, etc.; an output section 1207 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1208 including a hard disk, etc.; and a communication section 1209 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to the I / O interface 1205 as needed. A removable medium 1211, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1210 as needed so that a computer program read therefrom is installed into the storage section 1208 as needed.

[0111] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 1209, and / or installed from a removable medium 1211. When the computer program is executed by a central processing unit (CPU) 1201, various functions defined in the system of the present application are executed.

[0112] The computer-readable medium shown in the embodiment of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable signal medium can include a data signal propagated in a baseband or as a part of a carrier wave, wherein a computer-readable computer program is carried. This propagated data signal can take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. A computer program contained on a computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0113] The flowchart and block diagram in the accompanying drawings illustrate the possible architecture, functions and operations of the system, method and computer program product according to various embodiments of the present application. Wherein, each box in the flowchart or block diagram can represent a module, a program segment, or a part of the code, and the above-mentioned module, program segment, or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0114] The units involved in the embodiments described in this application may be implemented by software or hardware, and the units described may also be set in a processor. The names of these units do not, in some cases, constitute limitations on the units themselves.

[0115] Another aspect of the present application also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, the animation trajectory display method as described above is implemented. The computer-readable storage medium can be included in the electronic device described in the above embodiment, or it can exist independently without being assembled into the electronic device.

[0116] Another aspect of the present application also provides a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. A processor of a computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the animation trajectory display method provided in each of the above embodiments.

[0117] The above content is only a preferred exemplary embodiment of the present application and is not intended to limit the implementation scheme of the present application. A person skilled in the art can easily make corresponding changes or modifications based on the main concept and spirit of the present application. Therefore, the scope of protection of the present application shall be based on the scope of protection required by the claims.

Claims

1. An animation trajectory display method, characterized in that: include: Get the center position of the touch point on the screen and the touch duration; If the touch duration is greater than a preset duration threshold, determining an animated image based on the touch duration; Determine the movement trajectory of the touch point and the movement speed of the touch point based on the change of the center position; A real-time transparency of the animation image is determined based on the motion speed, and an animation display strategy on the screen is determined based on the real-time transparency and the animation image.

2. The method according to claim 1, characterized in that The determining the movement trajectory of the touch point and the movement speed of the touch point based on the change of the center position includes: Acquire coordinate information corresponding to the center position and a time parameter corresponding to the coordinate information; determining a motion trajectory of the touch point based on the coordinate information; The movement speed of the touch point is determined based on the movement trajectory and the time parameter.

3. The method according to claim 2, characterized in that The determining the movement speed of the touch point based on the movement trajectory and the time parameter includes: Determining distance values ​​between adjacent touch points in the motion trajectory; determining a time difference between the adjacent touch points based on the time parameter; The movement speed of the touch point is determined based on the time difference and the distance value.

4. The method according to claim 1, characterized in that The method further comprises: Establishing an objective function between the movement speed and the transparency of the animation image, so as to achieve a smooth transition between the movement speed and the transparency through the objective function; constructing a mapping relationship between the motion speed and the transparency of the animation image based on the objective function; A real-time transparency matching the animation image is found from the mapping relationship based on the movement speed.

5. The method according to claim 1, characterized in that The method further comprises: Acquire the touch force of the touch point; Determining a size parameter of the animation image and a coordinate offset of the animation image based on the touch force; An animation display strategy on the screen is determined based on the size parameter and the coordinate offset.

6. The method according to claim 5, characterized in that The method further comprises: Determine a first view of the animated image based on the size parameter and the coordinate offset, the first view is used to manage at least one second view, the second view inherits the animated image of the first view and the real-time transparency of the animated image; Determining coordinate information of the second view based on the coordinate offset and a preset offset; An animation path of the animation image and the end point coordinates corresponding to the animation path are determined based on the coordinate information and the motion trajectory.

7. The method according to claim 1, characterized in that The method further comprises: Acquire the time interval of the touch points on the screen; If the time interval is greater than a preset interval duration, the attenuation strategy of the animation image on the screen is determined based on the time interval and the real-time transparency.

8. An animation trajectory display device, characterized in that: The device comprises: The acquisition module obtains the center position of the touch point on the screen and the touch duration; An image module, if the touch duration is greater than a preset duration threshold, determines an animated image based on the touch duration; A motion module, for determining a motion trajectory of the touch point and a motion speed of the touch point based on a change in the center position; A determination module determines the real-time transparency of the animation image based on the motion speed, and determines the animation display strategy on the screen based on the real-time transparency and the animation image.

9. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, enables the electronic device to implement the animation trajectory display method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: Computer-readable instructions are stored thereon, and when the computer-readable instructions are executed by a processor of a computer, the computer is enabled to execute the animation trajectory display method according to any one of claims 1 to 7.

Images