Interactive methods, devices, and electronic devices for adjusting curves

By adjusting the interaction method of the curves, the problems of inaccurate parameters and inconsistent effects in motion effect development were solved, realizing the uniformity and reusability of the curves and ensuring the consistency and accuracy of dynamic effects.

CN113298916BActive Publication Date: 2026-03-13ALIBABA GROUP HOLDING LTD
View PDF 2 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-07-14
Publication Date
2026-03-13

AI Technical Summary

Technical Problem

In the process of motion effect development, there are problems such as tedious development work, large differences in the effects achieved by different developers, designers' inability to provide accurate parameters, and developers' unfamiliarity with curve functions leading to strong randomness in dynamic effects.

Method used

An interactive method for adjusting curves is provided. By displaying a predetermined curve, responding to user operations to adjust the display pattern of the curve, and determining the descriptive parameters and their values ​​of the adjusted curve, the method achieves uniformity, intuitiveness, and reusability of the curve.

Benefits of technology

It achieves curve uniformity and reusability across design and development ends, as well as different design tools and development platforms, reducing development costs and ensuring the consistency and accuracy of dynamic effects.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN113298916B_ABST
    Figure CN113298916B_ABST
Patent Text Reader

Abstract

An interactive method, apparatus, and electronic device for adjusting curves are disclosed. The interactive method for adjusting curves includes: displaying the predetermined curve in response to an operation of selecting a predetermined curve for achieving a dynamic effect; adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation of the predetermined curve; and determining descriptive parameters of the adjusted curve and their parameter values. This achieves uniformity, intuitiveness, and reusability in curve adjustment.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of interactive technology, and more specifically, to an interactive method, apparatus, and electronic device for adjusting curves. Background Technology

[0002] In the daily development of various applications, there are numerous requirements for animation effects, such as the display and disappearance of ToastViews, the trajectory animation of page pushes, and pop-up windows. Curves are required to create these animation effects.

[0003] Although various development platforms offer a variety of motion effect development solutions, developers still need to perform a lot of parameter configuration and optimization when developing motion effects, making the motion effect development work very troublesome.

[0004] Furthermore, problems can arise during the development process after designers have generated their motion graphics design requirements. For example, different developers may achieve different results for the same animation; or the same animation may be implemented differently on different development platforms.

[0005] Furthermore, for certain curves, designers are currently unable to provide developers with accurate parameters, resulting in highly random effects. Additionally, some developers, unfamiliar with the curve functions, may downgrade the application of curves, affecting dynamic effects.

[0006] Therefore, it is desirable to provide an improved interactive scheme for adjusting curves. Summary of the Invention

[0007] To address the aforementioned technical problems, this application is proposed. Embodiments of this application provide an interactive method, apparatus, and electronic device for adjusting curves. This method adjusts curves by adjusting the display pattern of a predetermined curve used to achieve dynamic effects, and determines the descriptive parameters and their values ​​of the adjusted curves, thereby achieving uniformity, intuitiveness, and reusability in curve adjustment.

[0008] According to one aspect of this application, an interactive method for adjusting a curve is provided, comprising: displaying the predetermined curve in response to an operation of selecting a predetermined curve for achieving a dynamic effect; adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation of the predetermined curve; and determining a descriptive parameter of the adjusted curve and its parameter value.

[0009] In the above-described interactive method for adjusting a curve, displaying the predetermined curve includes: displaying the descriptive parameters of the predetermined curve and their parameter ranges.

[0010] In the above-described interactive method for adjusting a curve, displaying the description parameters and their ranges of the predetermined curve includes displaying the default values ​​of the description parameters of the predetermined curve.

[0011] In the above-described interactive method for adjusting a curve, adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve includes: adjusting one or more parameters within a parameter range of one or more parameters in the description parameters of the predetermined curve; and adjusting the display pattern of the predetermined curve based on the changes in the one or more parameters to obtain an adjusted curve.

[0012] In the above-described interactive method for adjusting a curve, adjusting the display pattern of the predetermined curve to obtain the adjusted curve in response to the adjustment operation of the predetermined curve includes: directly adjusting the curve shape of the predetermined curve on the display pattern of the predetermined curve to obtain the adjusted curve.

[0013] In the above-described interactive method for adjusting a curve, adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve includes: fixing a portion of the display pattern of the predetermined curve and adjusting other portions of the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve.

[0014] The interactive method for adjusting the curve described above further includes: displaying a list of curves containing the predetermined curve.

[0015] The interactive method for adjusting the curve described above further includes: displaying a dynamic preview of the predetermined curve and / or the adjusted curve.

[0016] In the above-described interactive method for adjusting curves, displaying a dynamic preview of the predetermined curve and / or the adjusted curve includes: adjusting the displacement, scaling, rotation, and transparency of the predetermined curve and / or the adjusted curve respectively in response to a request for adjustment of the displacement, scaling, rotation, and transparency of the dynamic preview of the predetermined curve and / or the adjusted curve.

[0017] In the above-described interactive method for adjusting curves, displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve includes: in response to a loop preview request for the dynamic preview effect, looping the dynamic preview effect.

[0018] The interactive method for adjusting the curve described above further includes: in response to the export request of the adjusted curve, outputting the parameter values ​​of the adjusted curve and its descriptive parameters.

[0019] In the above-described interactive method for adjusting a curve, outputting the parameter values ​​of the adjusted curve and its descriptive parameters in response to the export request of the adjusted curve includes: generating and displaying predetermined code representing the parameter values ​​of the adjusted curve and its descriptive parameters in response to the export request of the adjusted curve.

[0020] In the above-described interactive method for adjusting a curve, in response to an export request for the adjusted curve, generating and displaying predetermined code for representing the parameter values ​​of the adjusted curve and its descriptive parameters includes: determining an export request for the adjusted curve for a predetermined platform type, and generating and displaying predetermined code for representing the parameter values ​​of the adjusted curve and its descriptive parameters based on the platform type.

[0021] In the above-described interactive method for adjusting curves, the predetermined curves include: curves of a first category described by existing descriptive parameters and their ranges; curves of a second category described by existing descriptive parameters and their ranges and additional descriptive parameters and their ranges; curves of a third category described by existing descriptive parameters and their additionally defined ranges; and curves of a fourth category described by additionally defined descriptive parameters and their ranges.

[0022] In the above-described interactive method for adjusting curves, the first category of curves includes linear curves, acceleration curves, deceleration curves, and standard curves; the second category of curves includes desired curves and transition curves; the third category of curves includes elastic curves and bouncing curves; and the fourth category of curves includes cosine curves.

[0023] In the above-described interactive method for adjusting curves, after determining the descriptive parameters and their values ​​of the adjusted curve, the method further includes: calculating the presentation mode of the animation based on the adjusted curve having the determined descriptive parameters and their values.

[0024] In the above-described interactive method for adjusting curves, after determining the description parameters and their values ​​of the adjusted curve, the method further includes: designing the action of the object based on the adjusted curve having the determined description parameters and their values.

[0025] In the above-mentioned interactive method for adjusting curves, the motion design of the object includes at least one of the following: motion design of characters in a game, motion design of other moving objects in a game, motion design of virtual anchors in virtual live streaming, motion design of virtual customer service, and motion design of virtual shopping guides.

[0026] According to another aspect of this application, an interactive device for adjusting a curve is provided, comprising: a display unit for displaying the predetermined curve in response to an operation of selecting a predetermined curve for achieving a dynamic effect; an adjustment unit for adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation of the predetermined curve; and a determination unit for determining descriptive parameters of the adjusted curve and their parameter values.

[0027] According to another aspect of this application, an electronic device is provided, comprising: a processor; and a memory storing computer program instructions, which, when executed by the processor, cause the processor to perform the interactive method for adjusting a curve as described above.

[0028] According to another aspect of this application, a computer-readable medium is provided having computer program instructions stored thereon, which, when executed by a processor, cause the processor to perform the interactive method for adjusting a curve as described above.

[0029] The interactive method, apparatus, and electronic device for adjusting curves provided in this application adjust curves by adjusting the display pattern of a predetermined curve used to achieve dynamic effects, and determine the descriptive parameters and their values ​​of the adjusted curves, thereby achieving uniformity, intuitiveness, and reusability in curve adjustment. Attached Figure Description

[0030] The above and other objects, features, and advantages of this application will become more apparent from the more detailed description of the embodiments of this application in conjunction with the accompanying drawings. The drawings are provided to further illustrate the embodiments of this application and form part of the specification. They are used together with the embodiments of this application to explain this application and do not constitute a limitation thereof. In the drawings, the same reference numerals generally represent the same components or steps.

[0031] Figure 1 The illustration shows a schematic diagram of an application scenario for an interactive method for adjusting curves according to an embodiment of this application.

[0032] Figure 2 The illustration shows a flowchart of an interactive method for adjusting a curve according to an embodiment of this application.

[0033] Figure 3 Figures (A) to (I) illustrate nine curves with default parameter values ​​in an interactive method for adjusting curves according to an embodiment of this application.

[0034] Figures 4A to 4D The illustration shows a schematic diagram of the interaction process of the curve interaction method according to an embodiment of this application.

[0035] Figure 5 The figure shows a block diagram of an interactive device for adjusting a curve according to an embodiment of this application.

[0036] Figure 6 A block diagram of an electronic device according to an embodiment of this application is illustrated. Detailed Implementation

[0037] Hereinafter, exemplary embodiments according to this application will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of this application, and not all embodiments of this application. It should be understood that this application is not limited to the exemplary embodiments described herein.

[0038] Scene Overview

[0039] Figure 1 The illustration shows a schematic diagram of an application scenario for an interactive method for adjusting curves according to an embodiment of this application.

[0040] like Figure 1 As shown, the interactive method for adjusting curves according to embodiments of this application can be used to graphically adjust curves used to achieve dynamic effects at the design end. For example, user U can adjust the curve's graphic on a mobile device, such as a smartphone T, at the design end. Here, the smartphone T first displays a predetermined curve to user U, and then user U adjusts the displayed pattern of the predetermined curve through adjustment operations on the smartphone T's screen, such as swiping, thereby obtaining the adjusted curve. Those skilled in the art will understand that user U can operate in various ways; for example, the user can perform voice operations, gesture operations captured by a camera, or operations acquired by sensors, such as pressure sensors.

[0041] In this embodiment of the application, the interactive method for adjusting curves according to this embodiment can adjust a predetermined number of curves according to the process described above. Through this predetermined number of curves, the desired dynamic effects can be achieved, such as show / disappear effects, page fade-in / fade-out effects, and window pop-up effects. Therefore, this predetermined number of curves can also be referred to as basic curves. Various dynamic effects can be achieved through combinations of basic curves.

[0042] like Figure 1 As shown, the interactive method for adjusting curves according to embodiments of this application can not only adjust curves graphically, but also further determine the descriptive parameters and their ranges of the adjusted curves at the design end T after the adjustment is completed. In embodiments of this application, depending on the type of curve, some curves can be defined with existing descriptive parameters and their ranges, while some curves require new descriptive parameters and their ranges, which will be described in further detail below.

[0043] In this way, since the curve, its descriptive parameters, and the parameter range of the descriptive parameters are determined at the design end T, when the development end D needs to use a certain curve to develop an application with corresponding dynamic effects, the required curve and its determined descriptive parameters can be sent to the development end D, so that the development end D can accurately realize the dynamic effects required by the design end T.

[0044] Alternatively, if the development end D needs to use a certain curve to develop an application with corresponding dynamic effects, it can also actively retrieve various curves, their descriptive parameters, and the parameter ranges of the descriptive parameters determined by the design end T, thereby ensuring that the developed dynamic effects meet the requirements.

[0045] Without using the interactive method for adjusting curves according to the embodiments of this application, the resulting effects will vary significantly due to differences in the parameters and implementation code used to describe the curves on different development platforms, such as Android, iOS, and CSS, for the same dynamic effect. Furthermore, the parameters and implementation code for the same dynamic effect also differ depending on the design tools used, such as After Effects, Flinto, and Principle.

[0046] In other words, the interactive method for adjusting curves according to the embodiments of this application not only achieves curve unification across the design end T and the development end D, but also achieves curve unification between different design tools used on the design end T and different development platforms on the development end D.

[0047] Furthermore, for a specific curve used to achieve a certain dynamic effect, if its descriptive parameters and their range cannot be determined, there is a problem in describing the curve from the design end (T), especially for curves with complex shapes. In other words, because the design end (T) cannot provide accurate parameters to the development end (D), the dynamic effect implemented by the development end (D) has a high degree of randomness. For example, for the dynamic effect of a pop-up window, an overshoot curve is generally required. However, when creating the specifications, only the displacement parameters could be simply described, which is not very helpful to the developers. To accurately reproduce the dynamic effect required by the design end (S), designers and developers need to adjust the curve bit by bit to achieve the best effect.

[0048] Furthermore, for the development team (D), since not every developer is familiar with the curve functions, it may lead to the downgraded application of the curve, thus affecting the dynamic effect.

[0049] The interactive method for adjusting curves according to embodiments of this application can solve the problems of poor descriptiveness at the design end T and poor adjustability at the development end D by determining the descriptive parameters and their ranges of the curve at the design end T.

[0050] In this embodiment, the design terminal T and the development terminal D can be various types of terminal devices, such as desktop computers, laptop computers, smartphones, etc. Alternatively, the design terminal T and the development terminal D can also be server devices used for the design and development of dynamic effects.

[0051] The interactive method for adjusting curves according to embodiments of this application will now be described in further detail.

[0052] Exemplary methods

[0053] Figure 2 The illustration shows a flowchart of an interactive method for adjusting a curve according to an embodiment of this application.

[0054] like Figure 2 As shown, the interactive method for adjusting a curve according to an embodiment of this application includes the following steps.

[0055] Step S110: In response to the operation of selecting a predetermined curve for achieving the dynamic effect, the predetermined curve is displayed. That is, in this embodiment of the application, the predetermined curve for achieving the dynamic effect is displayed to make the curve adjustment more intuitive.

[0056] Step S120: In response to the adjustment operation of the predetermined curve, the display pattern of the predetermined curve is adjusted to obtain the adjusted curve. That is, in order to intuitively adjust the curve, in this embodiment of the application, the display pattern of the predetermined curve is directly adjusted. For example, the user can drag a part of the predetermined curve to change the shape of the curve, thereby obtaining the adjusted curve.

[0057] Step S130: Determine the description parameters and their values ​​of the adjusted curve. That is, in order to achieve uniformity in dynamic effects across design and development ends, and across different design tools and development platforms, in this embodiment of the application, it is desirable to unify the display effect of a specific curve used to achieve dynamic effects. Therefore, in order to accurately describe the curve, it is necessary to determine the curve's description parameters and their range. Here, some curves can be described using existing description parameters, while some curves require new description parameters. In other words, by determining the curve's description parameters and their range, the curve can be parameterized.

[0058] In this embodiment of the application, depending on the different dynamic effects to be achieved, the predetermined curve is divided into different types of curves, thereby realizing the componentization of the curve and avoiding the need to repeatedly adjust the curve in order to achieve the same dynamic effect in the same scene, which is prone to inconsistency.

[0059] Figure 3 Figures (A) to (I) illustrate nine curves with default parameter values ​​in an interactive method for adjusting curves according to an embodiment of this application.

[0060] Figure 3 Figure (A) illustrates a linear curve, which can be described with existing descriptive parameters and their ranges. Specifically, the descriptive parameters of the linear curve may include the coordinates (X1, Y1), such as (0,0), the coordinates (X2, Y2), such as (1,1), the duration, and the delay.

[0061] Figure 3 Figure (B) illustrates the acceleration curve, which can be described using existing descriptive parameters and their ranges. Specifically, the descriptive parameters of the acceleration curve may include the coordinates of control point 1 (X1, Y1), such as (0.4, 0), the coordinates of control point 2 (X2, Y2), such as (1, 1), as well as the duration and delay.

[0062] Figure 3 Figure (C) illustrates the deceleration curve, which can be described using existing descriptive parameters and their ranges. Specifically, the descriptive parameters of the deceleration curve may include the coordinates (X1, Y1) of control point 1, such as (0,0), the coordinates (X2, Y2) of control point 2, such as (0.1,1), as well as the duration and delay.

[0063] Figure 3 (D) illustrates the standard curve, which can be described by existing descriptive parameters and their ranges. Specifically, the descriptive parameters of the standard curve may include the coordinates (X1, Y1) of control point 1, such as (0.4, 0), the coordinates (X2, Y2) of control point 2, such as (0.1, 1), as well as the duration and delay.

[0064] Figure 3Figure (E) illustrates the anticipate curve. In addition to the existing descriptive parameters and their ranges, the anticipate curve requires newly defined additional descriptive parameters and their ranges. Specifically, the existing descriptive parameters of the anticipate curve may include the coordinates of control point 1 (X1, Y1), such as (0.33, 0), the coordinates of control point 2 (X2, Y2), such as (0.67, 1), and the duration and delay. Furthermore, for the anticipate curve, newly defined additional descriptive parameters are required, including the coordinates of control point 3 (X3, Y3), such as (0.33, 0), the coordinates of control point 4 (X4, Y4), such as (0.2, 1), and the damping value, such as 0.2.

[0065] Figure 3 Figure (F) illustrates the overshoot curve. In addition to the existing descriptive parameters and their ranges, the overshoot curve requires newly defined additional descriptive parameters and their ranges. Specifically, the existing descriptive parameters of the overshoot curve may include the coordinates of control point 1 (X1, Y1), such as (0.33, 0), the coordinates of control point 2 (X2, Y2), such as (0.3, 1), and the duration and delay. Furthermore, for the desired curve, newly defined additional descriptive parameters are required, including the coordinates of control point 3 (X3, Y3), such as (0.33, 0), the coordinates of control point 4 (X4, Y4), such as (0.5, 1), and the damping value, such as 1.2.

[0066] Figure 3 The diagram (G) illustrates the spring curve, which has previously defined descriptive parameters such as mass, stiffness, damping, initial velocity, duration, and delay. However, the parameter ranges for these parameters are not defined, thus preventing a precise curve description. In this embodiment, for example, the values ​​of the spring curve parameters can be defined as: mass = 0.7, stiffness = 380, damping = 10, initial velocity = -2, duration = 1000ms, and delay = 0ms.

[0067] Figure 3The diagram (H) illustrates a bounce curve, which has previously defined descriptive parameters such as damping, initial velocity, duration, and delay. However, the parameter ranges for these parameters are not defined, thus preventing a precise curve description. In this embodiment, for example, the values ​​of each parameter of the bounce curve can be defined as damping = 1, initial velocity = 1, duration = 1000ms, and delay = 0ms.

[0068] Figure 3 Figure (I) illustrates a cosine curve, for which no descriptive parameters or their ranges have been previously defined. Therefore, in this embodiment, new descriptive parameters and their ranges are defined. Specifically, the descriptive parameters and their ranges for the cosine curve can be defined as follows: damping = 1, period = 1, duration = 400ms, and delay = 0ms.

[0069] Therefore, in the interactive method for adjusting curves according to embodiments of this application, the predetermined number of curves includes: curves of a first category described by existing descriptive parameters and their parameter ranges; curves of a second category described by existing descriptive parameters and their parameter ranges and additional descriptive parameters and their parameter ranges; curves of a third category described by existing descriptive parameters and their additionally defined parameter ranges; and curves of a fourth category described by additionally defined descriptive parameters and their parameter ranges.

[0070] Furthermore, in the above-described interactive method for adjusting curves, the first category of curves includes linear curves, acceleration curves, deceleration curves, and standard curves; the second category of curves includes desired curves and transition curves; the third category of curves includes elastic curves and bouncing curves; and the fourth category of curves includes cosine curves.

[0071] Furthermore, as described above, in the interactive method for adjusting a curve according to embodiments of this application, the description parameters of the curve, in addition to having a parameter range, may have default values ​​within the parameter range, thereby presenting a curve with a typical form having default values, such as those described above. Figure 3 As shown in (A) to (I).

[0072] Therefore, in this embodiment of the application, when displaying the predetermined curve, the descriptive parameters of the predetermined curve and their parameter ranges can be displayed simultaneously. Additionally, if a predetermined curve with a default shape is displayed, the default values ​​of the descriptive parameters of the predetermined curve are also displayed.

[0073] That is, in the interactive method for adjusting a curve according to the embodiments of this application, displaying the predetermined curve includes: displaying the descriptive parameters of the predetermined curve and their parameter ranges.

[0074] Furthermore, in the above-described interactive method for adjusting the curve, displaying the description parameters and their range of the predetermined curve includes displaying the default values ​​of the description parameters of the predetermined curve.

[0075] In addition, in this embodiment of the application, besides directly operating on the pattern of the predetermined curve to adjust the predetermined curve, the curve itself can also be adjusted by adjusting the curve description parameters, which can reduce the interface cost between the design end and the development end.

[0076] That is, in the interactive method for adjusting a curve according to the embodiments of this application, adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to the adjustment operation of the predetermined curve includes: adjusting the one or more parameters within the parameter range of one or more parameters in the description parameters of the predetermined curve; and adjusting the display pattern of the predetermined curve based on the changes of the one or more parameters to obtain an adjusted curve.

[0077] For example, for an elastic curve or a spring-like curve, its damping parameter or initial velocity parameter can be adjusted to obtain the desired curve shape.

[0078] In this way, dynamic effects created using different design tools, such as After Effects, Flinto, and Principle, can be reproduced and tested by adjusting the curves. Furthermore, matching parameters and corresponding dynamic effects can be obtained by freely editing the curve's description parameters and their values.

[0079] Furthermore, for elastic dynamic effects that are difficult to define (such as elastic effects, bouncing effects, etc.), the interactive method for adjusting curves according to the embodiments of this application can provide a standard parameterization scheme, and through precise parameter editing, the original curve can be optimized, making the dynamic effects of elements more vibrant.

[0080] Furthermore, as described above, the predetermined curve can be adjusted by directly manipulating the displayed pattern of the predetermined curve. That is, in the above-described interactive method for adjusting a curve, adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve includes: directly adjusting the curve shape of the predetermined curve on the display pattern of the predetermined curve to obtain the adjusted curve.

[0081] In this embodiment of the application, regardless of the method used, the adjustment of the predetermined curve can be directly reflected on the displayed pattern of the predetermined curve, thereby achieving intuitiveness of the curve adjustment and making it convenient for users.

[0082] In addition, during the adjustment of the curve, since the curve may include multiple parts, and the user only wants to adjust a certain part, a part of the display pattern of the predetermined curve can be fixed while the other parts of the display pattern of the predetermined curve are adjusted.

[0083] That is, in the above-described interactive method for adjusting a curve, adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve includes: fixing a portion of the display pattern of the predetermined curve and adjusting other portions of the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve.

[0084] As described above, in this embodiment of the application, there may be a predetermined number of curves used to achieve dynamic effects. Therefore, before displaying the predetermined curves, a list of curves containing the predetermined curves can be displayed so that the user can select the curve they want to adjust.

[0085] That is, the interactive method for adjusting a curve according to the embodiments of this application further includes: displaying a list of curves containing the predetermined curve.

[0086] In addition, during the curve adjustment process, that is, before and after the curve adjustment, a dynamic preview effect of the curve can be further displayed. That is, in the embodiments of this application, the dynamic preview effect of the predetermined curve and / or the adjusted curve can be displayed.

[0087] Furthermore, in the interactive method for adjusting curves according to embodiments of this application, displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve may include: adjusting the displacement, scaling, rotation, and transparency of the predetermined curve and / or the adjusted curve respectively in response to a request for adjustment of the displacement, scaling, rotation, and transparency of the dynamic preview effect of the predetermined curve and / or the adjusted curve.

[0088] In addition, in the interactive method for adjusting a curve according to the embodiments of this application, displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve may further include: cyclically displaying the dynamic preview effect in response to a cyclic preview request for the dynamic preview effect.

[0089] As described above, after adjusting the curve to obtain the adjusted curve, the adjusted curve and its descriptive parameter values ​​can be output. For example, for a bouncing curve, damping = 1, initial velocity = 1, duration = 1000ms, and delay = 0ms. This allows for accurate reproduction of the curve on the development side. Figure 3 The elastic curve shown in (H) is a bouncing curve.

[0090] Therefore, by outputting the adjusted curve and the parameter values ​​of its descriptive parameters, the adjusted curve can be quickly and easily implemented on the development end of any development platform, thereby obtaining the dynamic effect corresponding to the adjusted curve and realizing the high reusability of the curve.

[0091] Furthermore, to further enhance the reusability of the curve on the development side, predefined code can be generated and output to represent the adjusted curve and its descriptive parameters. This predefined code can be based on different development platforms, such as iOS and Android.

[0092] In other words, after the design team determines the parameter values ​​of the curve and its descriptive parameters, they can export the iOS or Android code of the curve, thereby achieving seamless integration with the developers on the development side.

[0093] Therefore, the interactive method for adjusting a curve according to the embodiments of this application further includes: in response to the export request of the adjusted curve, outputting the parameter values ​​of the adjusted curve and its descriptive parameters.

[0094] Furthermore, in the above-described interactive method for adjusting curves, outputting the parameter values ​​of the adjusted curve and its descriptive parameters in response to the export request of the adjusted curve includes: generating and displaying predetermined code representing the parameter values ​​of the adjusted curve and its descriptive parameters in response to the export request of the adjusted curve.

[0095] Furthermore, in the above-described interactive method for adjusting curves, in response to an export request for the adjusted curve, generating and displaying predetermined code for representing parameter values ​​of the adjusted curve and its descriptive parameters includes: determining an export request for the adjusted curve for a predetermined platform type, and generating and displaying predetermined code for representing parameter values ​​of the adjusted curve and its descriptive parameters based on the platform type.

[0096] Furthermore, in the interactive method for adjusting curves according to embodiments of this application, the various determined curves, their descriptive parameters, and the parameter ranges of these parameters can be encapsulated into a Software Development Kit (SDK), allowing any development business party to directly reference them. Additionally, the code for the various curves, their descriptive parameters, and the parameter ranges of these parameters can be open-sourced, enabling anyone to freely modify the code implementation and collaborate on its development.

[0097] As described above, in the interactive method for adjusting curves according to embodiments of this application, the presentation mode of animation can be calculated using curves, such as designing various animation effects, including show and disappearance effects, page fade-in and fade-out effects, window pop-up effects, or motion effects of various moving objects. Therefore, the adjusted curves and their determined descriptive parameters and parameter values ​​according to embodiments of this application can also be used for object motion design.

[0098] Therefore, in the interactive method for adjusting a curve according to the embodiments of this application, after determining the description parameters and their values ​​of the adjusted curve, it further includes: calculating the presentation mode of the animation based on the adjusted curve having the determined description parameters and their values.

[0099] Furthermore, in the above-described interactive method for adjusting the curve, after determining the description parameters and their values ​​of the adjusted curve, the method further includes: designing the action of the object based on the adjusted curve having the determined description parameters and their values.

[0100] In the embodiments of this application, the objects used for motion design may include various moving objects in various scenarios, such as characters in a game, and other moving objects in the game, such as vehicles. Alternatively, the objects used for motion design may also include various virtual characters, such as virtual anchors, virtual customer service representatives, and virtual shopping guides in virtual live streaming.

[0101] Therefore, in the interaction method for adjusting curves according to the embodiments of this application, the motion design of the object includes at least one of the following: motion design of characters in a game, motion design of other moving objects in a game, motion design of virtual anchors in virtual live streaming, motion design of virtual customer service, and motion design of virtual shopping guides.

[0102] Example interactive interface

[0103] Figures 4A to 4D The illustration shows a schematic diagram of the interaction process of the curve interaction method according to an embodiment of this application.

[0104] like Figure 4AAs shown, in response to the selection of an elastic curve, the curve style of the elastic curve can be displayed. Furthermore, as... Figure 4B As shown, in response to an adjustment request for the elastic curve, the descriptive parameters of the elastic curve and their ranges can be displayed. Additionally, as... Figure 4B As shown, when displaying the parameter range, the default values ​​of each descriptive parameter can be displayed.

[0105] That is, in the curve interaction method according to the embodiments of this application, displaying the description parameters and parameter range of the predetermined curve includes: displaying the default values ​​of the description parameters of the predetermined curve.

[0106] In addition, such as Figure 4A and Figure 4B As shown by the list icon in the upper right corner, during the interaction process of the curve interaction method according to the embodiments of this application, the user can select a predetermined curve to display. That is, the curve interaction method according to the embodiments of this application further includes displaying a list of curves containing the predetermined curve.

[0107] And, as Figure 4A and Figure 4B As shown at the top, during this interaction, a dynamic preview of the selected predefined curve, such as an elastic curve, can be displayed. Furthermore, as... Figure 4A and Figure 4B As shown by the option icons, you can adjust the displacement, scaling, rotation, and transparency of the dynamic preview effect. Additionally, as... Figure 4A and Figure 4B As shown by the loop preview icon, this dynamic preview effect can be played in a loop.

[0108] That is, the curve interaction method according to the embodiments of this application further includes: displaying a dynamic preview effect of the predetermined curve.

[0109] Furthermore, in the above-mentioned curve interaction method, displaying the dynamic preview effect of the predetermined curve includes: in response to the request to adjust the displacement, scaling, rotation, and transparency of the dynamic preview effect of the predetermined curve, adjusting the displacement, scaling, rotation, and transparency of the dynamic preview effect respectively.

[0110] Furthermore, in the above curve interaction method, displaying the dynamic preview effect of the predetermined curve includes: in response to a loop preview request for the dynamic preview effect, looping the dynamic preview effect.

[0111] like Figure 4CAs shown, a predetermined curve, such as an elastic curve, can be output in code form after the adjustment of its descriptive parameters is completed. That is, the curve interaction method according to the embodiments of this application further includes: in response to the export request of the predetermined curve, generating and displaying predetermined code for representing the parameter values ​​of the predetermined curve and its descriptive parameters.

[0112] like Figure 4D As shown, code suitable for different platform types, such as iOS and Android, can be output. That is, in the above curve interaction method, in response to the export request of the predetermined curve, generating and displaying predetermined code for representing the parameter values ​​of the predetermined curve and its descriptive parameters includes: determining the export request of the predetermined curve for a predetermined platform type, and generating and displaying predetermined code for representing the parameter values ​​of the desired curve and its descriptive parameters based on the platform type.

[0113] As can be seen, the curve interaction method according to the embodiments of this application is applicable to curve designers, who can modify various descriptive parameters of a predetermined curve to obtain curves of different styles when a predetermined curve is selected.

[0114] Furthermore, designers can preview the dynamic effects of the curves, and during the preview, they can adjust the displacement, scaling, rotation, transparency, and other aspects of the dynamic preview effect to determine the dynamic preview effect under various conditions.

[0115] After obtaining a satisfactory curve, the designer can export the code snippet used to implement the curve, and can also export code snippets for different platforms, such as iOS and Android.

[0116] Exemplary device

[0117] Figure 5 The figure shows a block diagram of an interactive device for adjusting a curve according to an embodiment of this application.

[0118] like Figure 5 As shown, the interactive device 200 for adjusting a curve according to an embodiment of this application includes: a display unit 210 for displaying the predetermined curve in response to an operation of selecting a predetermined curve for achieving a dynamic effect; an adjustment unit 220 for adjusting the display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation of the predetermined curve; and a determination unit 230 for determining the descriptive parameters and parameter values ​​of the adjusted curve.

[0119] In one example, in the interactive device described above for adjusting a curve, the display unit 210 is used to display the descriptive parameters of the predetermined curve and their parameter ranges.

[0120] In one example, in the interactive device described above for adjusting a curve, the display unit 210 displays the descriptive parameters of the predetermined curve and their parameter ranges, including displaying the default values ​​of the descriptive parameters of the predetermined curve.

[0121] In one example, in the interactive device described above for adjusting a curve, the adjustment unit 220 is configured to: adjust one or more parameters within a parameter range of one or more parameters in the description parameters of the predetermined curve; and adjust the display pattern of the predetermined curve based on the changes in the one or more parameters to obtain an adjusted curve.

[0122] In one example, in the interactive device described above for adjusting a curve, the adjustment unit 220 is used to: directly adjust the curve shape of the predetermined curve on the display pattern of the predetermined curve to obtain the adjusted curve.

[0123] In one example, in the above-described interactive device for adjusting a curve, the adjustment unit 220 is configured to: in response to an adjustment operation on the predetermined curve, fix a portion of the display pattern of the predetermined curve and adjust other portions of the display pattern of the predetermined curve to obtain an adjusted curve.

[0124] In one example, in the interactive device described above for adjusting curves, the display unit 210 is further configured to: display a list of curves containing the predetermined curve.

[0125] In one example, in the interactive device described above for adjusting curves, the display unit 210 is further configured to: display a dynamic preview effect of the predetermined curve and / or the adjusted curve.

[0126] In one example, in the interactive device described above for adjusting curves, the display unit 210 displays a dynamic preview effect of the predetermined curve and / or the adjusted curve, including: adjusting the displacement, scaling, rotation, and transparency of the predetermined curve and / or the adjusted curve respectively in response to a request for adjustment of the displacement, scaling, rotation, and transparency of the dynamic preview effect of the predetermined curve and / or the adjusted curve.

[0127] In one example, in the interactive device described above for adjusting curves, the display unit 210 displays a dynamic preview effect of the predetermined curve and / or the adjusted curve, including: cyclically displaying the dynamic preview effect in response to a request for a cyclic preview of the dynamic preview effect.

[0128] In one example, the interactive device for adjusting the curve described above further includes an output unit for outputting the adjusted curve and parameter values ​​of its descriptive parameters in response to an export request for the adjusted curve.

[0129] In one example, in the interactive device described above for adjusting a curve, the output unit is configured to: in response to an export request for the adjusted curve, generate and display predetermined codes representing parameter values ​​of the adjusted curve and its descriptive parameters.

[0130] In one example, in the above-described interactive device for adjusting a curve, the output unit, in response to an export request for the adjusted curve, generates and displays predetermined code representing parameter values ​​of the adjusted curve and its descriptive parameters, including: determining the export request for the adjusted curve for a predetermined platform type, and generating and displaying predetermined code representing parameter values ​​of the adjusted curve and its descriptive parameters based on the platform type.

[0131] In one example, in the interactive device described above for adjusting curves, the predetermined curves include: curves of a first category described by existing descriptive parameters and their ranges; curves of a second category described by existing descriptive parameters and their ranges and additional descriptive parameters and their ranges; curves of a third category described by existing descriptive parameters and their additionally defined ranges; and curves of a fourth category described by additionally defined descriptive parameters and their ranges.

[0132] In one example, in the above-described interactive device for adjusting curves, the first category of curves includes linear curves, acceleration curves, deceleration curves, and standard curves; the second category of curves includes desired curves and transition curves; the third category of curves includes elastic curves and bouncing curves; and the fourth category of curves includes cosine curves.

[0133] In one example, the interactive device for adjusting the curve described above further includes: a calculation unit, configured to calculate the presentation mode of the animation based on the adjusted curve having the determined description parameters and parameter values ​​after determining the description parameters and parameter values ​​of the adjusted curve.

[0134] In one example, the interactive device for adjusting the curve described above further includes a design unit for designing the action of an object based on the adjusted curve having the determined description parameters and parameter values, after determining the description parameters and parameter values ​​of the adjusted curve.

[0135] In one example, in the interactive device described above for adjusting the curve, the motion design of the object includes at least one of the following: motion design of a character in a game, motion design of other moving objects in a game, motion design of a virtual anchor in a virtual live broadcast, motion design of a virtual customer service representative, and motion design of a virtual shopping guide.

[0136] Here, those skilled in the art will understand that the specific functions and operations of each unit and module in the interactive device 200 for adjusting the curve described above have been referenced above. Figures 1 to 3 The interactive methods for adjusting curves are described in detail here, and therefore, their repeated description will be omitted.

[0137] As described above, the interactive device 200 for adjusting curves according to embodiments of this application can be implemented in various terminal devices, such as smartphones, desktop computers, or servers. In one example, the interactive device 200 for adjusting curves according to embodiments of this application can be integrated into the terminal device as a software module and / or hardware module. For example, the interactive device 200 for adjusting curves can be a software module in the operating system of the terminal device, or it can be an application developed for the terminal device; of course, the interactive device 200 for adjusting curves can also be one of many hardware modules of the terminal device.

[0138] Alternatively, in another example, the interactive device 200 for adjusting the curve and the terminal device can also be separate devices, and the interactive device 200 for adjusting the curve can be connected to the terminal device via wired and / or wireless networks, and transmit interactive information in accordance with an agreed data format.

[0139] Exemplary electronic devices

[0140] Below, for reference Figure 6 This describes an electronic device according to embodiments of the present application.

[0141] Figure 6 A block diagram of an electronic device according to an embodiment of this application is illustrated.

[0142] like Figure 6 As shown, the electronic device 10 includes one or more processors 11 and memory 12.

[0143] The processor 11 may be a central processing unit (CPU) or other form of processing unit with data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device 10 to perform desired functions.

[0144] The memory 12 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 11 may execute the program instructions to implement the interactive methods for adjusting curves and / or other desired functions described in the various embodiments of this application above. Various contents such as predetermined curves, their descriptive parameters, and parameter values ​​may also be stored in the computer-readable storage medium.

[0145] In one example, the electronic device 10 may also include an input device 13 and an output device 14, which are interconnected via a bus system and / or other forms of connection mechanism (not shown).

[0146] The input device 13 may include, for example, a keyboard, a mouse, etc.

[0147] The output device 14 can output various information to the outside, including adjusted curves and their descriptive parameters and parameter values. The output device 14 may include, for example, a display, a speaker, a printer, and a communication network and its connected remote output devices, etc.

[0148] Of course, for the sake of simplicity, Figure 6 Only some of the components of the electronic device 10 relevant to this application are shown in this illustration; components such as buses, input / output interfaces, etc., are omitted. In addition, the electronic device 10 may include any other suitable components depending on the specific application.

[0149] Exemplary computer program products and computer-readable storage media

[0150] In addition to the methods and devices described above, embodiments of this application may also be computer program products comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps of the interactive methods for adjusting curves according to various embodiments of this application as described in the "Exemplary Methods" section of this specification.

[0151] The computer program product can be written in any combination of one or more programming languages ​​to perform the operations of the embodiments of this application. The programming languages ​​include object-oriented programming languages ​​such as Java and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the first user's computing device, partially on the first user's computing device, as a standalone software package, partially on the first user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0152] Furthermore, embodiments of this application may also be computer-readable storage media storing computer program instructions that, when executed by a processor, cause the processor to perform the steps of the interactive methods for adjusting curves according to various embodiments of this application described in the "Exemplary Methods" section of this specification.

[0153] The computer-readable storage medium may be any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may, for example, include, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0154] The basic principles of this application have been described above with reference to specific embodiments. However, it should be noted that the advantages, benefits, and effects mentioned in this application are merely examples and not limitations, and should not be considered as essential features of each embodiment of this application. Furthermore, the specific details disclosed above are for illustrative and facilitative purposes only, and are not limitations. These details do not limit the application to the necessity of employing the aforementioned specific details for implementation.

[0155] The block diagrams of devices, apparatuses, devices, and systems involved in this application are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, devices, and systems can be connected, arranged, and configured in any manner. Words such as “comprising,” “including,” “having,” etc., are open-ended terms meaning “including but not limited to,” and are used interchangeably with them. The terms “or” and “and” as used herein refer to the terms “and / or,” and are used interchangeably with them unless the context clearly indicates otherwise. The term “such as” as used herein refers to the phrase “such as but not limited to,” and is used interchangeably with it.

[0156] It should also be noted that in the apparatus, equipment, and methods of this application, the components or steps can be disassembled and / or recombined. These disassemblies and / or recombinations should be considered as equivalent solutions of this application.

[0157] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use this application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of this application. Therefore, this application is not intended to be limited to the aspects shown herein, but rather to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0158] The above description has been given for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of this application to the forms disclosed herein. Although numerous exemplary aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations thereof.

Claims

1. An interactive method for adjusting a curve, comprising: displaying a predetermined curve in response to an operation of selecting the predetermined curve for implementing a dynamic effect; wherein the predetermined curve is classified into four categories of curves based on the implemented dynamic effect; the first category of curves comprises a linear curve, an acceleration curve, a deceleration curve, and a standard curve; the second category of curves comprises a desired curve and a transition curve; the third category of curves comprises a spring curve and a bounce curve; and the fourth category of curves comprises a cosine curve; adjusting a display pattern of the predetermined curve to obtain an adjusted curve in response to an adjusting operation on the predetermined curve; and determining a description parameter of the adjusted curve and a parameter value thereof; determining a derivation request of the adjusted curve for a predetermined platform type, generating and displaying a predetermined code for representing the adjusted curve and the parameter value of the description parameter thereof based on the platform type; adjusting a display pattern of the predetermined curve to obtain an adjusted curve in response to an adjusting operation on the predetermined curve comprises: directly adjusting a curve shape of the predetermined curve on the display pattern of the predetermined curve to obtain the adjusted curve; further comprising, after determining the description parameter of the adjusted curve and the parameter value thereof: calculating a presentation mode of an animation based on the adjusted curve with the determined description parameter and the parameter value thereof; or designing a motion of an object based on the adjusted curve with the determined description parameter and the parameter value thereof.

2. The interactive method for adjusting a curve of claim 1, wherein, adjusting a display pattern of the predetermined curve to obtain an adjusted curve in response to an adjusting operation on the predetermined curve comprises: fixing a part of the display pattern of the predetermined curve and adjusting another part of the display pattern of the predetermined curve to obtain the adjusted curve in response to the adjusting operation on the predetermined curve. 3.The interactive method for adjusting a curve according to claim 1, further comprising: displaying a curve list containing the predetermined curve. 4.The interactive method for adjusting a curve according to claim 1, further comprising: displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve.

5. The interactive method for adjusting a curve of claim 4, wherein, displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve comprises: adjusting a displacement, a scaling, a rotation, and a transparency of the predetermined curve and / or the adjusted curve in response to a displacement, a scaling, a rotation, and a transparency adjusting request of the dynamic preview effect of the predetermined curve and / or the adjusted curve, respectively.

6. The interactive method for adjusting a curve of claim 4, wherein, displaying a dynamic preview effect of the predetermined curve and / or the adjusted curve comprises: cyclically displaying the dynamic preview effect in response to a cyclic preview request of the dynamic preview effect. 7.The interactive method for adjusting a curve according to any one of claims 1 to 6, wherein, the first category of curves is described with an existing description parameter and a parameter range thereof; the second category of curves is described with the existing description parameter and the parameter range thereof and an additional description parameter and a parameter range thereof; the third category of curves is described with the existing description parameter and an additionally defined parameter range thereof; and the fourth category of curves is described with an additionally defined description parameter and a parameter range thereof.

8. The interactive method for adjusting a curve of claim 1, wherein, The action design of the object includes at least one of the following: Action design of a character in a game, action design of other moving objects in the game, action design of a virtual host in a virtual live broadcast, action design of a virtual customer service, and action design of a virtual shopping guide.

9. An interactive device for adjusting a curve, comprising: a display unit configured to display a predetermined curve in response to an operation of selecting the predetermined curve for implementing a dynamic effect, wherein the predetermined curve is divided into four categories of curves based on the implemented dynamic effect; the first category of curves includes a linear curve, an acceleration curve, a deceleration curve, and a standard curve; the second category of curves includes an expectation curve and a transition curve; the third category of curves includes an elastic curve and a spring curve; and the fourth category of curves includes a cosine curve; an adjustment unit configured to adjust a display pattern of the predetermined curve to obtain an adjusted curve in response to an adjustment operation on the predetermined curve; and a determination unit configured to determine a description parameter of the adjusted curve and a parameter value thereof; an output unit configured to determine an export request of the adjusted curve for a predetermined platform type, and generate and display a predetermined code for representing the adjusted curve and the parameter value of the description parameter thereof based on the platform type; the adjustment unit is specifically configured to directly adjust a curve shape of the predetermined curve on the display pattern of the predetermined curve to obtain the adjusted curve; a calculation unit configured to calculate a presentation mode of an animation based on the adjusted curve with the determined description parameter and the parameter value thereof; or design an action of an object based on the adjusted curve with the determined description parameter and the parameter value thereof.

10. An electronic device, comprising: a processor; and a memory having computer program instructions stored therein, the computer program instructions, when executed by the processor, causing the processor to perform the interactive method for adjusting a curve according to any one of claims 1-8.

Citation Information

Patent Citations

  • Interface display method and device

    CN107122177A

  • System and method for generation and manipulation of a curve in a dynamic graph based on user input

    US20140098142A1