Process animation implementation method and device, electronic equipment, storage medium and product

Abstract

The invention discloses a process animation implementation method and device, electronic equipment, a storage medium and a product, and relates to the technical field of computer graphics, and the method comprises the steps: receiving first node connection information of an input node of a target pipeline section and second node connection information of an output node through an SVG container; determining path drawing data based on the first node connection information and the second node connection information through the SVG container; setting the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, setting the path drawing data and preset second visual data as attributes of a second path element, and performing line animation drawing to obtain a dynamic pipeline flow so as to obtain a pipeline flow assembly corresponding to the target pipeline section; and connecting the pipeline flow components corresponding to the pipeline sections based on the flow sequence of the to-be-processed flow to obtain a flow animation corresponding to the to-be-processed flow. According to the method, the development efficiency of process animation implementation is improved.

Description

Technical Field

[0001] This application relates to the field of computer graphics technology, and particularly to a method, apparatus, electronic device, storage medium, and product for implementing process animation. Background Art

[0002] In modern software development and visualization displays, process animations are increasingly widely used, such as in workflow management systems, data processing flow displays, business logic demonstrations, etc. Currently, the common ways to implement process animations mainly include combining background images with positioning CSS (Cascading Style Sheets) animations and drawing based on Canvas (HTML5 Canvas). However, these methods all have certain limitations. The method of combining background images with positioning CSS animations requires accurately setting the positioning information of each element. The node and line layouts in the process are often relatively complex, requiring a large amount of manual calculation and debugging. Moreover, when the process changes, the modification and maintenance of the positioning information are extremely cumbersome, and the development efficiency is low. The method of drawing based on the Canvas requires gradually constructing graphics from points to lines and then to surfaces, involving a large amount of mathematical calculations and graphic drawing logic. For developers, implementing a simple process animation may require writing a large amount of code, and the development efficiency is low. In summary, the implementation processes of existing process animation implementation methods are cumbersome, and the development efficiency is low.

[0003] The above content is only used to assist in understanding the technical solution of this application, and does not represent an admission that the above content is prior art. Summary of the Invention

[0004] The main purpose of this application is to provide a method, apparatus, electronic device, storage medium, and product for implementing process animation, aiming to solve the technical problem that the implementation processes of existing process animation implementation methods are cumbersome and the development efficiency is low.

[0005] To achieve the above objective, this application proposes a method for implementing process animation, and the method includes:

[0006] Receiving, through an SVG (Scalable Vector Graphics) container, first node connection information of an input node and second node connection information of an output node of a target pipeline segment, where the target pipeline segment is any one of the pipeline segments of a process to be processed;

[0007] Determining path drawing data based on the first node connection information and the second node connection information through the SVG container;

[0008] Setting the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, and setting the path drawing data and preset second visual data as attributes of a second path element and performing line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, wherein the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow;

[0009] Connecting the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

[0010] In one embodiment, the first node connection information includes an input node coordinate and an input node connection orientation, and the second node connection information includes an output node coordinate and an output node connection orientation;

[0011] The step of determining path drawing data based on the first node connection information and the second node connection information by means of the SVG container includes:

[0012] Determining a connection mode between the output node and the input node according to the input node connection orientation and the output node connection orientation, wherein the connection mode includes a horizontal connection, a vertical connection, and a mixed connection;

[0013] Based on the connection mode, determining control point coordinates according to the input node coordinates and the output node coordinates, and determining path drawing data based on the control point coordinates, wherein the control point coordinates are the coordinates of a path control point of a connection path between the input node and the output node.

[0014] In one embodiment, if the connection path is a cubic Bezier curve, the control point coordinates include first control point coordinates and second control point coordinates;

[0015] The step of determining control point coordinates according to the input node coordinates and the output node coordinates based on the connection mode includes:

[0016] If the connection mode is the horizontal connection, then determining the sum of the abscissa value of the input node and a first horizontal offset as the abscissa value of the first control point coordinate, determining the ordinate value of the input node as the ordinate value of the first control point coordinate, and determining the sum of the abscissa value of the output node and a second horizontal offset as the abscissa value of the second control point coordinate, and determining the ordinate value of the output node as the ordinate value of the second control point coordinate;

[0017] If the connection method is the vertical connection, the abscissa value of the input node is compared with the abscissa value determined as the abscissa coordinate of the first control point, and the ordinate value of the input node plus the vertical first offset is determined as the ordinate coordinate of the first control point. Also, the abscissa value of the output node is compared with the abscissa value determined as the abscissa coordinate of the second control point, and the ordinate value of the input node plus the vertical second offset is determined as the ordinate coordinate of the second control point;

[0018] If the connection method is the hybrid connection, calculate the total displacement vector based on the output node coordinates and the input node coordinates, decompose the total displacement vector into an abscissa component and an ordinate component. Based on the abscissa value of the input node and the abscissa component, determine the abscissa coordinate of the first control point. Based on the ordinate value of the input node and the ordinate component, determine the ordinate coordinate of the first control point. Also, based on the abscissa value of the output node and the abscissa component, determine the abscissa coordinate of the second control point, and based on the ordinate value of the input node and the ordinate component, determine the ordinate coordinate of the second control point.

[0019] In one embodiment, the second visual data includes the pipe width and the pipe color;

[0020] The step of setting the path drawing data and the preset second visual data as the attributes of the second path element and performing a line animation drawing to obtain the dynamic pipeline flow includes:

[0021] Determine the path drawing data as the d attribute of the second path element, determine the pipe width as the width value of the second path element, and determine the pipe color as the color value of the second path element to obtain the flow path element;

[0022] Perform a line animation drawing on the flow path element based on the dotted line mode and the dotted line offset attribute of the SVG container to obtain the dynamic pipeline flow.

[0023] In one embodiment, before the step of setting the path drawing data and the preset first visual data as the attributes of the first path element to obtain the static background pipeline, and setting the path drawing data and the preset second visual data as the attributes of the second path element and performing a line animation drawing to obtain the dynamic pipeline flow, so as to obtain the pipeline flow component corresponding to the target pipeline segment, further includes:

[0024] Calculate the abscissa difference between the abscissa value in the output node coordinates and the abscissa value in the input node coordinates through the SVG container, and calculate the ordinate difference between the ordinate value in the output node coordinates and the ordinate value in the input node coordinates through the SVG container;

[0025] Determine the abscissa difference as the width attribute of the SVG container, and determine the ordinate difference as the height attribute of the SVG container, so as to display the pipeline flow component within the drawing area formed by the height attribute and the width attribute.

[0026] In one embodiment, the method further includes:

[0027] Through a preset dragging library, encapsulate the input nodes and output nodes of each pipeline segment corresponding to the pipeline flow component into a dragging component;

[0028] When a dragging operation based on the dragging component is monitored, determine the component identifier of the dragging component and determine a target node from the input nodes and output nodes of each pipeline flow component;

[0029] Update the current coordinates of the target node to obtain the updated node coordinates, and based on the updated node coordinates, adjust the pipeline flow component connected to the target node.

[0030] In addition, to achieve the above object, the present application also proposes a process animation implementation device, which includes:

[0031] A receiving module, configured to receive, through an SVG container, first node connection information of an input node and second node connection information of an output node of a target pipeline segment, where the target pipeline segment is any one of the pipeline segments of the to-be-processed process;

[0032] A determining module, configured to determine path drawing data based on the first node connection information and the second node connection information through the SVG container;

[0033] A component generation module, configured to set the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, and set the path drawing data and preset second visual data as attributes of a second path element and perform line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow;

[0034] A component connection module, configured to connect the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

[0035] In addition, to achieve the above object, the present application further provides an electronic device, which includes: a memory, a processor, and a computer program stored on the memory and executable on the processor, and the computer program is configured to implement the steps of the process animation implementation method as described above.

[0036] In addition, to achieve the above object, the present application further provides a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium, and when the computer program is executed by a processor, it implements the steps of the process animation implementation method as described above.

[0037] In addition, to achieve the above object, the present application further provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, it implements the steps of the process animation implementation method as described above.

[0038] One or more technical solutions proposed by the present application have at least the following technical effects:

[0039] The present application receives the first node connection information of the input node and the second node connection information of the output node of the target pipeline segment through an SVG container, where the target pipeline segment is any pipeline segment among the pipeline segments of the to-be-processed process; determines path drawing data based on the first node connection information and the second node connection information through the SVG container; sets the path drawing data and preset first visual data as the attributes of a first path element to obtain a static background pipeline, sets the path drawing data and preset second visual data as the attributes of a second path element and performs line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow; connects the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

[0040] The present application receives input-output node connection information through an SVG container, determines path drawing data based on this, and directly uses it to set the attributes of path elements to draw a static background pipeline and a dynamic pipeline flow, which simplifies the drawing process, reduces a large amount of manual calculations and complex graphic construction logics, and developers can implement process animations without writing too much code, improving the development efficiency.

[0041] In addition, when the process changes, the solution of the present application only needs to update the input-output node connection information received by the SVG container, and then can re-determine the path drawing data, and further update the pipeline flow component, making the modification and maintenance more convenient, and reducing the maintenance cost and difficulty. Description of the Drawings

[0042] The accompanying drawings here are incorporated into the specification and form a part of this specification, showing embodiments consistent with this application, and are used together with the specification to explain the principles of this application.

[0043] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the following will briefly introduce the accompanying drawings required for use in the description of the embodiments or the prior art. Obviously, for those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0044] Figure 1 The flowchart diagram provided for the first embodiment of the method for implementing the process animation of this application;

[0045] Figure 2 The flowchart diagram provided for the second embodiment of the method for implementing the process animation of this application;

[0046] Figure 3 The schematic diagram of the pipeline flow component provided for one embodiment of the method for implementing the process animation of this application;

[0047] Figure 4 The schematic diagram of the process animation provided for one embodiment of the method for implementing the process animation of this application;

[0048] Figure 5 The schematic diagram of the module structure of the device for implementing the process animation in the embodiment of this application;

[0049] Figure 6 The schematic diagram of the device structure of the hardware operating environment involved in the method for implementing the process animation in the embodiment of this application.

[0050] The realization of the purpose of this application, functional features and advantages will be further described with reference to the embodiments and the accompanying drawings. Detailed implementation manners

[0051] It should be understood that the specific embodiments described here are only used to explain the technical solutions of this application and are not used to limit this application.

[0052] To better understand the technical solutions of this application, the following will be described in detail in combination with the accompanying drawings of the specification and the specific implementation manners.

[0053] The main solution of the embodiment of this application is as follows: The SVG container receives the first node connection information of the input node and the second node connection information of the output node of the target pipeline segment, where the target pipeline segment is any one of the pipeline segments of the process to be processed; the SVG container determines path drawing data based on the first node connection information and the second node connection information; sets the path drawing data and preset first visual data as the attributes of the first path element to obtain a static background pipeline, and sets the path drawing data and preset second visual data as the attributes of the second path element and performs line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow; connects the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the process to be processed to obtain a process animation corresponding to the process to be processed.

[0054] In this embodiment, for the convenience of description, the following will be described with an electronic device as the execution subject.

[0055] Currently, the common ways to implement process animations mainly include combining background images with positioning CSS animations and drawing based on the Canvas canvas. However, these methods all have certain limitations. The method of combining background images with positioning CSS animations requires precise setting of the positioning information of each element. The node and line layouts in the process are often relatively complex, requiring a large amount of manual calculation and debugging. Moreover, when the process changes, the modification and maintenance of the positioning information are extremely cumbersome, and the development efficiency is low. The method of drawing based on the Canvas canvas requires gradually constructing graphics from points to lines and then to surfaces, involving a large amount of mathematical calculations and graphic drawing logics. For developers, implementing a simple process animation may require writing a large amount of code, and the development efficiency is low. In summary, the implementation processes of the existing methods for implementing process animations are cumbersome and the development efficiency is low.

[0056] This application receives input and output node connection information through the SVG container, determines path drawing data based on this, and directly uses it to set the attributes of path elements to draw static background pipelines and dynamic pipeline flows, which simplifies the drawing process, reduces a large amount of manual calculation and complex graphic construction logics. Developers can implement process animations without writing too much code, improving the development efficiency.

[0057] In addition, when the process changes, the solution of this application only needs to update the input and output node connection information received by the SVG container, then the path drawing data can be determined again, and further the pipeline flow components can be updated, making the modification and maintenance more convenient and reducing the maintenance cost and difficulty.

[0058] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication, and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of implementing the above functions. Hereinafter, taking an electronic device as an example, this embodiment and the following embodiments will be described.

[0059] Based on this, an embodiment of the present application provides a method for implementing a process animation. Refer to Figure 1 , Figure 1 which is a schematic flowchart of the first embodiment of the method for implementing a process animation of the present application.

[0060] In this embodiment, the method for implementing a process animation includes steps S10 to S40:

[0061] Step S10, receiving, by an SVG container, first node connection information of an input node and second node connection information of an output node of a target pipeline segment, where the target pipeline segment is any one of the pipeline segments of a process to be processed;

[0062] Obtaining the first node connection information of the input node and the second node connection information of the output node, and the connection information may include relevant data such as the position coordinates and connection orientations of the nodes. Using the SVG container as a unified entry for data reception makes the management and processing of data more standardized and orderly. No matter how many pipeline segments there are in the process to be processed, the node connection information can be passed to the SVG container in the same way, facilitating subsequent unified processing and operations.

[0063] It should be noted that the target pipeline segment is any one of the pipeline segments of the process to be processed, and the processing logic for each pipeline segment can be carried out independently. When it is necessary to modify or optimize a specific pipeline segment, only the input and output node connection information of that pipeline segment needs to be concerned, without affecting the processing of other pipeline segments.

[0064] Step S20, determining, by the SVG container, path drawing data based on the first node connection information and the second node connection information;

[0065] After obtaining the first node connection information and the second node connection information of the target pipeline segment, the SVG container uses this information to calculate and determine the data for drawing the pipeline path, which may include determining information such as the starting point, ending point, and intermediate control points (such as cubic Bezier curves) of the path according to the position coordinates and connection orientations of the nodes. The finally obtained path drawing data will be used for subsequent graphic drawing operations.

[0066] Determining path drawing data based on input and output node connection information can ensure that the drawn pipeline path accurately reflects the connection relationship between nodes, and can flexibly handle various different node connection situations. For example, when the connection orientation of a node changes, the SVG container can recalculate the path drawing data according to the new connection information to ensure the correct drawing of the pipeline path, enhancing the adaptability of the system to different process scenarios.

[0067] Step S30: Set the path drawing data and preset first visual data as the attributes of the first path element to obtain a static background pipeline, and set the path drawing data and preset second visual data as the attributes of the second path element and perform line animation drawing to obtain a dynamic pipeline flow, so as to obtain the pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow;

[0068] After obtaining the path drawing data, combine it with the preset first visual data and second visual data respectively. The first visual data is used to set the first <path>The attributes of the element (i.e., the first path element) are used to draw a static background pipeline, and usually a relatively large diameter is set to serve as the static outline of the pipeline. The second visual data is used to set the second <path>The attributes of the element (i.e., the second path element) are used, and line animations are drawn for this element to simulate the dynamic effect of the fluid in the pipeline. Its diameter is relatively small, thus obtaining the pipeline flow component corresponding to the target pipeline segment. This component includes two parts: a static background and a dynamic pipeline flow.

[0069] By separately drawing the static background pipeline and the dynamic pipeline flow and setting different visual attributes (such as diameter size and animation effects), the performance of the pipeline flow becomes more vivid and intuitive. The static background pipeline provides a stable pipeline contour, while the dynamic pipeline flow simulates the flow of the fluid. The combination of the two enables users to more clearly understand the flow direction and state of data or substances in the process, enhancing the user experience.

[0070] Step S40: Connect the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain the process animation corresponding to the to-be-processed process.

[0071] After completing the drawing of the pipeline flow components corresponding to each pipeline segment, according to the actual process sequence of the to-be-processed process, connect these pipeline flow components in sequence. This can include operations such as adjusting the positions of the components and docking the nodes, so that the pipeline flow in the entire process can be displayed coherently, and finally form the process animation corresponding to the complete to-be-processed process.

[0072] In a feasible embodiment, the method further includes:

[0073] Step S50: Enclose the input nodes and output nodes of the pipeline flow components corresponding to the respective pipeline segments into drag components through a preset drag library;

[0074] Using a pre-set drag library (such as a third-party open-source tool library like react-draggable), perform encapsulation processing on the input nodes and output nodes in the pipeline flow components corresponding to each pipeline segment. The encapsulation process adds drag-related functions and attributes to the nodes, enabling them to be dragged by users through operations such as mouse or touch. After encapsulation, the original ordinary input nodes and output nodes are transformed into interactive drag components that can respond to drag operations and trigger subsequent relevant logics.

[0075] By encapsulating into drag components, the position adjustment of the nodes becomes more flexible. Whether at the initial creation of the process or during subsequent modification of the process, users can easily drag the nodes without the need to achieve position changes through complex code modifications or parameter settings, reducing the operation difficulty and improving work efficiency.

[0076] Step S60, when a drag operation based on the drag component is monitored, determine that the component identifier of the drag component determines a target node from the input nodes and output nodes of each of the pipeline flow components;

[0077] Continuously monitor the operation events of all drag components on the page. When it is detected that a certain drag component is dragged by the user, first obtain the unique component identifier of this drag component (for example, identified by the set id, etc.). Then, based on this component identifier, accurately find the corresponding target node among the input nodes and output nodes of all pipeline flow components. The purpose of doing this is to clarify which specific node is currently being dragged, so as to perform subsequent processing and updates on this node.

[0078] In a complex process animation, there may be multiple pipeline segments and a large number of input and output nodes. Among the numerous input nodes and output nodes, the target node being dragged can be accurately determined through the component identifier. This enables clear identification of the dragged node even in the face of such complex situations, ensuring the accuracy and reliability of the system when processing complex processes.

[0079] Step S70, update the current coordinates of the target node to obtain the updated node coordinates, wherein, based on the updated node coordinates, adjust the pipeline flow components connected to the target node.

[0080] After determining the target node being dragged, obtain the current coordinate position of this target node after the drag operation. Then, update this current coordinate value to the coordinate attribute of the target node to obtain the updated node coordinates. Next, according to the updated node coordinates, make corresponding adjustments to the pipeline flow components connected to this target node. Specifically, it can include recalculating the path drawing data of the pipeline flow components, such as adjusting the coordinates of the starting point, ending point, or control points of the path, to ensure that the pipeline flow can accurately connect to the target node after the position update, maintaining the coherence and accuracy of the process animation.

[0081] As the position of the target node changes, timely update the node coordinates and adjust the connected pipeline flow components, so that the process animation can reflect the user's adjustment of the process layout in real time. By adjusting the pipeline flow components according to the updated coordinates, it is ensured that the pipeline flow can always correctly connect to the target node, avoiding situations such as pipeline breaks or incorrect connections caused by changes in the node position, and making the entire process animation remain coherent and smooth during the node dragging process, improving the quality and professionalism of the animation.

[0082] In this embodiment, the SVG container receives the input and output node connection information, and then determines the path drawing data based on the input and output node connection information. The path drawing data is directly used to set the path element attributes to draw the static background pipeline and the dynamic pipeline flow, which simplifies the drawing process, reduces a large amount of manual calculation and complex graphic construction logic. Developers can implement the process animation without writing too much code, improving the development efficiency.

[0083] In addition, when the process changes, the solution of this embodiment only needs to update the input and output node connection information received by the SVG container, then re-determine the path drawing data, and further update the pipeline flow component, making the modification and maintenance more convenient, and reducing the maintenance cost and difficulty.

[0084] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar content as that in the above-mentioned first embodiment can be referred to the above introduction and will not be repeated hereinafter. On this basis, please refer to Figure 2 , the first node connection information includes the input node coordinates and the input node connection orientation, and the second node connection information includes the output node coordinates and the output node connection orientation; the step S20: the step of determining the path drawing data by the SVG container based on the first node connection information and the second node connection information includes:

[0085] Step S201, determine the connection mode between the output node and the input node according to the input node connection orientation and the output node connection orientation, where the connection mode includes horizontal connection, vertical connection and hybrid connection;

[0086] Obtain the connection orientation of the input node (such as "top", "left", "bottom", "right", etc.) and the connection orientation information of the output node. By analyzing and judging these two orientation information, determine the specific connection mode between the output node and the input node. If the connection orientation of the input node and the output node indicates that they are connected to each other in the horizontal direction, then the connection mode is determined as a horizontal connection; if they are connected in the vertical direction, it is a vertical connection; and when the connection orientations of the two nodes are neither horizontal nor vertical, it is determined as a hybrid connection.

[0087] It can be understood that by determining the connection method, the relative position relationship and connection trend between the input node and the output node can be clearly understood. This provides important basic information for accurately drawing the connection path subsequently, enabling the drawn pipeline path to more realistically reflect the actual connection situation between the nodes, improving the accuracy and readability of the process animation. Different connection methods may adopt different calculation methods and logics when determining the path drawing data. Selecting the appropriate algorithm and processing flow according to the specific connection method can make the subsequent calculation and drawing work more efficient and orderly, reduce unnecessary calculations and judgments, and improve the operating efficiency of the system.

[0088] Step S202: Based on the connection method, determine the control point coordinates according to the input node coordinates and the output node coordinates, and determine the path drawing data based on the control point coordinates, where the control point coordinates are the coordinates of the path control points of the connection path between the input node and the output node.

[0089] After determining the connection method (horizontal connection, vertical connection or hybrid connection), use the coordinates of the input node (including the x coordinate and the y coordinate) and the coordinate information of the output node, and calculate the control point coordinates of the connection path according to the corresponding rules and algorithms. For example, if it is a horizontal connection, the position of the control point can be determined according to factors such as the distance and offset in the horizontal direction; for a hybrid connection, the calculation method of the control point coordinates can refer to the methods of horizontal connection and vertical connection. After obtaining the control point coordinates, use this coordinate information as part of the path drawing data for the subsequent operation of drawing the connection path.

[0090] By calculating the control point coordinates according to the connection method and the node coordinates, the drawn path can better fit the connection relationship between the nodes. Whether it is a straight-line connection or a curve connection, the accuracy and aesthetics of the path can be guaranteed, thus enhancing the visual effect of the process animation. Different connection methods can achieve the required path drawing effect through different control point settings, meeting the requirements of various complex connection situations, and enhancing the adaptability and versatility of the system to different process scenarios.

[0091] In a feasible embodiment, if the connection path is a cubic Bezier curve, the control point coordinates include the first control point coordinates and the second control point coordinates;

[0092] The step S202: The step of determining the control point coordinates according to the input node coordinates and the output node coordinates based on the connection method includes:

[0093] In step S2021, if the connection method is the horizontal connection, then the sum of the abscissa value of the input node and the first horizontal offset is determined as the abscissa value of the first control point coordinate, the ordinate value of the input node is determined as the ordinate value of the first control point coordinate, and the sum of the abscissa value of the output node and the second horizontal offset is determined as the abscissa value of the second control point coordinate, and the ordinate value of the output node is determined as the ordinate value of the second control point coordinate;

[0094] When the connection method between the input node and the output node is the horizontal connection, it means that there is an association between these two nodes in the horizontal direction. For the first control point, its abscissa value is the sum of the abscissa value of the input node and the first horizontal offset, which makes the curve have a proper starting point of bending at the input node; the ordinate value directly adopts the ordinate value of the input node to ensure that the first control point is on the same horizontal line as the input node. For the second control point, its abscissa value is the sum of the abscissa value of the output node and the second horizontal offset, and the ordinate value adopts the ordinate value of the output node, making the curve have a proper ending point of bending at the output node and being on the same horizontal line as the output node, so as to draw a cubic Bezier curve with a smooth transition in the horizontal direction.

[0095] In step S2022, if the connection method is the vertical connection, then the abscissa value of the input node is determined as the abscissa value of the first control point coordinate, the sum of the ordinate value of the input node and the first vertical offset is determined as the ordinate value of the first control point coordinate, and the abscissa value of the output node is determined as the abscissa value of the second control point coordinate, and the sum of the ordinate value of the input node and the second vertical offset is determined as the ordinate value of the second control point coordinate;

[0096] If the connection method is the vertical connection, it indicates that there is a connection relationship between the input node and the output node in the vertical direction. The abscissa value of the first control point directly adopts the abscissa value of the input node, and the ordinate value is the sum of the ordinate value of the input node and the first vertical offset, which makes the first control point have a proper offset in the vertical direction of the input node as the starting point of the curve bending. The abscissa value of the second control point adopts the abscissa value of the output node, and the ordinate value is the sum of the ordinate value of the input node and the second vertical offset, thus forming a proper ending point of bending in the vertical direction of the output node, and finally drawing a cubic Bezier curve with a smooth transition in the vertical direction.

[0097] In step S2023, if the connection method is the hybrid connection, calculate the total displacement vector based on the output node coordinates and the input node coordinates, decompose the total displacement vector into a horizontal coordinate component and a vertical coordinate component, determine the horizontal coordinate value of the first control point coordinate based on the horizontal coordinate value of the input node and the horizontal coordinate component, determine the vertical coordinate value of the first control point coordinate based on the vertical coordinate value of the input node and the vertical coordinate component, and determine the horizontal coordinate value of the second control point coordinate based on the horizontal coordinate value of the output node and the horizontal coordinate component, and determine the vertical coordinate value of the second control point coordinate based on the vertical coordinate value of the input node and the vertical coordinate component.

[0098] The hybrid connection refers to a connection method where the input node is horizontally connected to the output node vertically, or the input node is vertically connected to the output node horizontally. When the connection method is a hybrid connection, first calculate the total displacement vector according to the output node coordinates and the input node coordinates. This vector represents the overall movement direction and distance from the input node to the output node. Then decompose the total displacement vector into a horizontal coordinate component and a vertical coordinate component, which are respectively used to determine the horizontal and vertical coordinates of the first control point and the second control point. The horizontal coordinate value of the first control point is the horizontal coordinate value of the input node plus the horizontal coordinate component, and the vertical coordinate value is the vertical coordinate value of the input node plus the vertical coordinate component; the horizontal coordinate value of the second control point is the horizontal coordinate value of the output node plus the horizontal coordinate component, and the vertical coordinate value is the vertical coordinate value of the input node plus the vertical coordinate component. Thus, according to the specific connection method of the hybrid connection between nodes, the bending degree and direction of the curve can be determined, and a cubic Bézier curve that conforms to the hybrid connection can be drawn.

[0099] Adopting different methods to determine the control point coordinates for different connection methods can ensure that the cubic Bézier curve can accurately connect the input node and the output node in various situations, and the bending degree and direction of the curve meet the actual connection requirements, enabling the system to adapt to various complex node layouts and connection relationships, and ensuring the stability and reliability of the system in different application scenarios.

[0100] In a feasible embodiment, the second visual data includes the pipe width and the pipe color; the step S30: setting the path drawing data and the preset second visual data as the attributes of the second path element and performing line animation drawing to obtain the dynamic pipeline flow includes:

[0101] Step S301, determine the path drawing data as the d attribute of the second path element, determine the pipe width as the width value of the second path element, and determine the pipe color as the color value of the second path element to obtain the flow path element;

[0102] In SVG, <path>The element is used to draw various path graphics, and the previously determined path drawing data is assigned to the second <path>The d attribute of the element, where the d attribute is <path>The core attribute of the element, which defines the shape of the path and contains a series of commands and coordinate values to describe information such as the starting point, ending point, curves, and straight lines of the path, thereby determining the path direction of the dynamic pipeline flow. At the same time, assign the pipeline width in the preset second visual data to the second <path>The stroke-width property of the element, which determines the thickness of the drawn line, i.e., the width of the dynamic pipeline flow. Assign the pipeline color to the second <path>The stroke attribute of the element, which is used to set the color of the line, thus determining the color of the dynamic pipeline flow. After these settings, a <path>An element, which will be referred to as a stream <path>Element.

[0103] By setting the path drawing data, pipe width, and pipe color to <path>Among the corresponding attributes of the elements, the basic appearance characteristics of the dynamic pipeline flow can be clearly defined, including its shape, width, and color, making the visualization effect of the pipeline flow more intuitive and controllable. By separating the settings of the path and visual attributes, modular design is achieved. When modifying the path or visual effect, only the corresponding attribute settings need to be concerned, without affecting other parts of the code, improving the maintainability and extensibility of the code.

[0104] Step S302: Perform line animation drawing on the flow path element based on the dotted line mode and dotted line offset attributes of the SVG container to obtain a dynamic pipeline flow.

[0105] stroke-dasharray and dotted line offset are attributes in SVG used to create a dotted line effect and control the position of the dotted line. stroke-dasharray defines the pattern of the dotted line and is a list of numbers separated by commas or spaces. Each number in the list represents the length of the dotted line segment and the length of the interval in sequence. The dotted line offset specifies the offset of the dotted line pattern relative to the starting point of the path. By dynamically setting and animating these two attributes, a line animation effect can be achieved. For example, set stroke-dasharray to a relatively large value so that the interval of the dotted line is large enough, and then gradually change the value of the dotted line offset through animation to make the dotted line pattern move along the path, thus simulating the dynamic effect of the pipeline flow. For the previously obtained flow <path>By applying this line animation drawing method to the element, a pipeline flow with a dynamic effect can be obtained.

[0106] Using the stroke-dasharray and dash offset properties for line animation drawing can achieve the dynamic effect of pipeline flow in a simple and efficient way. Compared with traditional frame-by-frame animation or complex JavaScript animation implementation methods, this method utilizes the built-in properties of SVG and CSS animations, reducing the code volume, improving performance, and making the animation effect smoother and more natural.

[0107] In a feasible embodiment, before the step S30: setting the path drawing data and the preset first visual data as the attributes of the first path element to obtain a static background pipeline, and setting the path drawing data and the preset second visual data as the attributes of the second path element and performing line animation drawing to obtain a dynamic pipeline flow, so as to obtain the pipeline flow component corresponding to the target pipeline segment, further includes:

[0108] Step S01, calculating the horizontal coordinate difference between the horizontal coordinate value in the output node coordinates and the horizontal coordinate value in the input node coordinates through the SVG container, and calculating the vertical coordinate difference between the vertical coordinate value in the output node coordinates and the vertical coordinate value in the input node coordinates through the SVG container;

[0109] The SVG container will obtain the input node coordinates and the output node coordinates. The input node coordinates include a horizontal coordinate value (denoted as inputX) and a vertical coordinate value (denoted as inputY), and the output node coordinates include a horizontal coordinate value (denoted as outputX) and a vertical coordinate value (denoted as outputY). The horizontal coordinate difference is calculated by outputX - inputX, and this difference reflects the distance from the input node to the output node in the horizontal direction. Similarly, the vertical coordinate difference is calculated by outputY - inputY, which reflects the distance from the input node to the output node in the vertical direction.

[0110] By calculating the horizontal and vertical coordinate differences, the range occupied by the input node and the output node in the horizontal and vertical directions can be accurately determined, providing basic data for determining the size of the SVG container later, enabling the size of the SVG container to match the actual distance between the nodes, and avoiding problems such as waste of space due to an overly large container or incomplete display of the pipeline flow component due to an overly small container. In addition, in different process layouts, the positional relationship between the input node and the output node may vary greatly. The method of calculating the differences can flexibly adapt to various layout situations. Whether the nodes are horizontally arranged, vertically arranged, or connected in a mixed manner, accurate regional range information can be obtained through this calculation.

[0111] Step S02: Determine the abscissa difference as the width attribute of the SVG container, and determine the ordinate difference as the height attribute of the SVG container, so as to display the pipeline flow component within the drawing area formed by the height attribute and the width attribute.

[0112] After obtaining the abscissa and ordinate differences, assign the abscissa difference to the width attribute of the SVG container, and assign the ordinate difference to the height attribute of the SVG container. Thus, the SVG container has a definite size, and its width and height can just cover the area formed by the input node and the output node. When subsequently drawing the pipeline flow component within this SVG container, the pipeline flow component will be displayed within the drawing area defined by this width and height, ensuring that the pipeline flow component can completely display the connection relationship between the input node and the output node.

[0113] Set the abscissa and ordinate differences as the width and height attributes of the SVG container respectively, so that the SVG container can provide a suitable drawing area for the pipeline flow component. The pipeline flow component drawn within this area can completely and clearly display the connection path between the input node and the output node, improving the visualization effect of the process animation and enabling users to more intuitively understand the relationship between the nodes. Setting the size of the SVG container according to the actual node distance avoids unnecessary space occupation, improves the utilization efficiency of page resources, and at the same time, helps to reduce the burden of browser rendering, enhancing the performance and response speed of the page. Especially when dealing with complex process animations, this optimization effect will be more obvious.

[0114] Exemplarily, to help understand each step of the process animation implementation method obtained by combining this embodiment with the above Embodiment 1, specifically:

[0115] 1. Pipeline flow module: The component is <svg>As the root node, use position:fixed to remove it from the document flow and position it at the upper left corner of the entire page document. The component externally receives the position coordinates of the input and output nodes, as well as the connection orientations of the input and output nodes. Among them, there are four values for the connection orientation, namely: "top", "left", "bottom", "right". Use the position coordinates as the source data for the drawing area, and use the connection orientation to determine the specific coordinates of the curve drawing control points. First, subtract the two X-axis coordinates to obtain the width of the drawing area, subtract the two Y-axis coordinates to obtain the height of the drawing area, and set the calculated width and height to the root node respectively. Secondly, use the data source to calculate and set <path>For the d attribute of the label, taking the simple cubic Bézier curve as an example, its d attribute can be set as follows: ˋM${abscissa of the input node}${ordinate of the input node}C${abscissa of the first control node}${ordinate of the first control node},${abscissa of the second control node}${ordinate of the second control node},${abscissa of the output node}${ordinate of the output node}ˋ. Among them, the abscissas and ordinates of the first and second control nodes are calculated from the position coordinates of the input and output nodes. When it is monitored that the positions of the input and output nodes change, this type of component will automatically recalculate the width and height of the drawing area and the drawing path, and render them on the page after the update.

[0116] 2. Animation of the pipeline flow between nodes: <svg>Two are wrapped in the node <path>Element node, the first <path>The node is used as a pipeline, setting a relatively large width value as the pipeline width and a relatively light color value as the background color of the pipeline; the second <path>The node is a pipeline flow, setting a relatively small width value as the pipeline flow width, and the attribute stroke is set to be different from the first <path>Color value. Define the same d attribute for both to make them have the same path. Pipeline <path>The node is relatively stationary as the background, and the flow <path>The nodes draw line animations by using the animation attribute in combination with the dotted line pattern and dotted line offset attributes unique to SVG. By setting and adjusting the above node attributes, the pipeline flow animation effect can be achieved.

[0117] 3. Node connection and dragging module: The dragging component uses the third-party open-source tool react-draggable. Set ids for the input and output nodes respectively. When the element is dragged and the callback is called, after finding the dom elements of the input and output nodes through the id, obtain their respective new position coordinates, and update the new coordinates to the component state. The specific pipeline flow component can be referred to Figure 3 as shown.

[0118] 4. Overall implementation of the process animation: By combining multiple dragging components and pipeline flow components, set the coordinate points that each dragging component needs to connect into the state, and pass them to each pipeline flow component in the connection order, then the process animation effect can be achieved. The specific implementation result of the process animation can be referred to Figure 4 。

[0119] It should be noted that the above examples are only used to understand this application and do not constitute a limitation on the method for implementing the process animation of this application. Based on this technical concept, more forms of simple transformations are within the protection scope of this application.

[0120] This application also provides a device for implementing process animation. Please refer to Figure 5 The device for implementing process animation includes:

[0121] A receiving module 10, configured to receive the first node connection information of the input node and the second node connection information of the output node of the target pipeline segment through an SVG container, where the target pipeline segment is any one of the pipeline segments of the process to be processed;

[0122] A determining module 20, configured to determine path drawing data based on the first node connection information and the second node connection information through the SVG container;

[0123] A component generation module 30, configured to set the path drawing data and preset first visual data as the attributes of a first path element to obtain a static background pipeline, and set the path drawing data and preset second visual data as the attributes of a second path element and perform line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow;

[0124] A component connection module 10, configured to connect the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the process to be processed to obtain a process animation corresponding to the process to be processed.

[0125] Optionally, the first node connection information includes the input node coordinates and the input node connection orientation, and the second node connection information includes the output node coordinates and the output node connection orientation; the determining module 20 is configured to:

[0126] Determine the connection mode between the output node and the input node according to the input node connection orientation and the output node connection orientation, where the connection mode includes horizontal connection, vertical connection, and hybrid connection;

[0127] Based on the connection mode, determine the control point coordinates according to the input node coordinates and the output node coordinates, and determine the path drawing data based on the control point coordinates, where the control point coordinates are the coordinates of the path control points of the connection path between the input node and the output node.

[0128] Optionally, if the connection path is a cubic Bezier curve, the control point coordinates include the first control point coordinates and the second control point coordinates; the determining module 20 is configured to:

[0129] If the connection mode is the horizontal connection, then determine the sum of the abscissa value of the input node and the first horizontal offset as the abscissa value of the first control point coordinates, determine the ordinate value of the input node as the ordinate value of the first control point coordinates, and determine the sum of the abscissa value of the output node and the second horizontal offset as the abscissa value of the second control point coordinates, and determine the ordinate value of the output node as the ordinate value of the second control point coordinates;

[0130] If the connection mode is the vertical connection, then determine the abscissa value of the input node as the abscissa value of the first control point coordinates, determine the sum of the ordinate value of the input node and the first vertical offset as the ordinate value of the first control point coordinates, and determine the abscissa value of the output node as the abscissa value of the second control point coordinates, and determine the sum of the ordinate value of the input node and the second vertical offset as the ordinate value of the second control point coordinates;

[0131] If the connection mode is the hybrid connection, then calculate the total displacement vector based on the output node coordinates and the input node coordinates, decompose the total displacement vector into an abscissa component and an ordinate component, determine the abscissa value of the first control point coordinates based on the abscissa value of the input node and the abscissa component, determine the ordinate value of the first control point coordinates based on the ordinate value of the input node and the ordinate component, and determine the abscissa value of the second control point coordinates based on the abscissa value of the output node and the abscissa component, determine the ordinate value of the second control point coordinates based on the ordinate value of the input node and the ordinate component.

[0132] Optionally, the second visual data includes a pipe width and a pipe color; the component generation module 30 is configured to:

[0133] Determine the path drawing data as the d attribute of the second path element, determine the pipe width as the width value of the second path element, and determine the pipe color as the color value of the second path element, to obtain a flow path element;

[0134] Perform line animation drawing on the flow path element based on the dotted line pattern and dotted line offset attributes of the SVG container to obtain a dynamic pipe flow.

[0135] Optionally, the determination module 20 is configured to:

[0136] Calculate the abscissa difference between the abscissa value in the output node coordinates and the abscissa value in the input node coordinates through the SVG container, and calculate the ordinate difference between the ordinate value in the output node coordinates and the ordinate value in the input node coordinates through the SVG container;

[0137] Determine the abscissa difference as the width attribute of the SVG container, and determine the ordinate difference as the height attribute of the SVG container, for displaying the pipe flow component within the drawing area formed by the height attribute and the width attribute.

[0138] Optionally, the device further includes a dragging module, configured to:

[0139] Encapsulate the input node and output node of each pipe segment corresponding to the pipe flow component into a dragging component through a preset dragging library;

[0140] When a dragging operation based on the dragging component is monitored, determine the component identifier of the dragging component to determine a target node from the input nodes and output nodes of each pipe flow component;

[0141] Update the current coordinates of the target node to obtain updated node coordinates, and adjust the pipe flow component connected to the target node based on the updated node coordinates.

[0142] The process animation implementation device provided in this application adopts the process animation implementation method in the above embodiment, and can solve the technical problems of cumbersome implementation process and low development efficiency of the existing process animation implementation methods. Compared with the prior art, the beneficial effects of the process animation implementation device provided in this application are the same as those of the process animation implementation method provided in the above embodiment, and other technical features in the process animation implementation device are the same as those disclosed in the method of the above embodiment, and will not be elaborated here.

[0143] The present application provides an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the process animation implementation method in the first embodiment above.

[0144] Reference is made below Figure 6 to FIG., which shows a schematic structural diagram of an electronic device suitable for implementing the embodiments of the present application. The electronic device in the embodiments of the present application may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistant), PADs (Portable Application Description), PMPs (Portable Media Player), vehicle terminals (such as vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 6 The electronic device shown is only an example and should not impose any limitation on the functions and usage scope of the embodiments of the present application.

[0145] As Figure 6 shown, the electronic device may include a processing device 1001 (such as a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in the read-only memory 1002 or a program loaded from the storage device 1003 into the random access memory 1004. In the random access memory 1004, various programs and data required for the operation of the electronic device are also stored. The processing device 1001, the read-only memory 1002, and the random access memory 1004 are connected to each other through a bus 1005. The input / output interface 1006 is also connected to the bus. Generally, the following systems may be connected to the input / output interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the electronic device to communicate with other devices wirelessly or wiredly to exchange data. Although the figure shows an electronic device having various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems may be alternatively implemented or provided.

[0146] In particular, according to the embodiments disclosed in the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a read-only memory 1002. When the computer program is executed by a processing device 1001, the above functions defined in the methods of the embodiments disclosed in the present application are executed.

[0147] The electronic device provided by the present application adopts the flow animation implementation method in the above embodiments, and can solve the technical problems of the cumbersome implementation process and low development efficiency of the existing flow animation implementation methods. Compared with the prior art, the beneficial effects of the electronic device provided by the present application are the same as those of the flow animation implementation method provided in the above embodiments, and other technical features in the electronic device are the same as those disclosed in the method of the previous embodiment, and will not be elaborated here.

[0148] It should be understood that the various parts disclosed in the present application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in a suitable manner in any one or more embodiments or examples.

[0149] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present application, and all of them should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

[0150] The present application provides a computer-readable storage medium having computer-readable program instructions (i.e., computer programs) stored thereon, and the computer-readable program instructions are used to execute the flow animation implementation method in the above embodiments.

[0151] The computer-readable storage medium provided by the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections with one or more wires, portable computer 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 of the above. In this embodiment, the computer-readable storage medium may be any tangible medium that contains or stores a program, and this program can be used by or in combination with an instruction execution system or device. The program code contained on the computer-readable storage medium can be transmitted by any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0152] The above computer-readable storage medium may be included in an electronic device; or it may exist separately without being assembled into the electronic device.

[0153] The above computer-readable storage medium carries one or more programs. When the above one or more programs are executed by an electronic device, the electronic device is caused to: receive, through an SVG container, first node connection information of an input node and second node connection information of an output node of a target pipeline segment, where the target pipeline segment is any one of the pipeline segments of a to-be-processed process; determine path drawing data based on the first node connection information and the second node connection information through the SVG container; set the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, set the path drawing data and preset second visual data as attributes of a second path element and perform line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow; connect the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

[0154] Computer program code for performing the operations of this application can be written in one or more programming languages or combinations thereof. The above-mentioned programming languages include object-oriented programming languages such as Java, Smalltalk, C++, and also include conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, executed as an independent software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (for example, by using an Internet service provider to connect through the Internet).

[0155] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of the code, and this module, program segment, or part of the code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than that marked in the accompanying drawings. For example, two consecutively represented blocks can actually be executed substantially in parallel, and they can sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, as well as the combination of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0156] The modules described in the embodiments of this application can be implemented in software or in hardware. Among them, the name of the module does not constitute a limitation on the unit itself in some cases.

[0157] The readable storage medium provided in this application is a computer-readable storage medium. The computer-readable storage medium stores computer-readable program instructions (i.e., computer programs) for performing the above-mentioned method for implementing flow animations, and can solve the technical problems of the cumbersome implementation process and low development efficiency of the existing methods for implementing flow animations. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the method for implementing flow animations provided in the above embodiments, and will not be elaborated here.

[0158] The present application also provides a computer program product, including a computer program, which when executed by a processor implements the steps of the process animation implementation method as described above.

[0159] The computer program product provided by the present application can solve the technical problems of the cumbersome implementation process and low development efficiency of the existing process animation implementation methods. Compared with the prior art, the beneficial effects of the computer program product provided by the present application are the same as those of the process animation implementation method provided in the above embodiments, and will not be elaborated here.

[0160] The above are only some embodiments of the present application, and thus do not limit the patent scope of the present application. Any equivalent structural transformation made under the technical concept of the present application by using the content of the specification and drawings of the present application, or direct / indirect application in other related technical fields, is included in the patent protection scope of the present application.< / path> < / path> < / path> < / path> < / path> < / path> < / svg> < / path> < / svg> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path>

Claims

1. A method for implementing process animation, characterized in that, The method for implementing the process animation includes: Receiving, by an SVG container, first node connection information of an input node and second node connection information of an output node of a target pipeline segment, where the target pipeline segment is any one of the pipeline segments of a to-be-processed process; Determining, by the SVG container, path drawing data based on the first node connection information and the second node connection information; Setting the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, and setting the path drawing data and preset second visual data as attributes of a second path element and performing line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, where the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow; Connecting the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

2. The method for realizing process animation according to claim 1, wherein The first node connection information includes input node coordinates and an input node connection orientation, and the second node connection information includes output node coordinates and an output node connection orientation; The step of determining, by the SVG container, path drawing data based on the first node connection information and the second node connection information includes: Determining a connection manner between the output node and the input node according to the input node connection orientation and the output node connection orientation, where the connection manner includes a horizontal connection, a vertical connection, and a mixed connection; Based on the connection manner, determining control point coordinates according to the input node coordinates and the output node coordinates, and determining path drawing data based on the control point coordinates, where the control point coordinates are coordinates of a path control point of a connection path between the input node and the output node.

3. The method for implementing process animation according to claim 2, wherein If the connection path is a cubic Bezier curve, the control point coordinates include first control point coordinates and second control point coordinates; The step of determining control point coordinates according to the input node coordinates and the output node coordinates based on the connection manner includes: If the connection manner is the horizontal connection, determining the sum of the abscissa value of the input node and a first horizontal offset as the abscissa value of the first control point coordinate, determining the ordinate value of the input node as the ordinate value of the first control point coordinate, and determining the sum of the abscissa value of the output node and a second horizontal offset as the abscissa value of the second control point coordinate, and determining the ordinate value of the output node as the ordinate value of the second control point coordinate; If the connection manner is the vertical connection, determining the abscissa value of the input node as the abscissa value of the first control point coordinate, determining the sum of the ordinate value of the input node and a first vertical offset as the ordinate value of the first control point coordinate, and determining the abscissa value of the output node as the abscissa value of the second control point coordinate, and determining the sum of the ordinate value of the input node and a second vertical offset as the ordinate value of the second control point coordinate; If the connection method is the hybrid connection, calculate the total displacement vector based on the output node coordinates and the input node coordinates, decompose the total displacement vector into a horizontal coordinate component and a vertical coordinate component, determine the horizontal coordinate value of the first control point coordinate based on the horizontal coordinate value of the input node and the horizontal coordinate component, determine the vertical coordinate value of the first control point coordinate based on the vertical coordinate value of the input node and the vertical coordinate component, and determine the horizontal coordinate value of the second control point coordinate based on the horizontal coordinate value of the output node and the horizontal coordinate component, and determine the vertical coordinate value of the second control point coordinate based on the vertical coordinate value of the input node and the vertical coordinate component.

4. The method for implementing process animation according to claim 2, wherein The second visual data includes a pipeline width and a pipeline color; The step of setting the path drawing data and the preset second visual data as attributes of a second path element and performing a line animation drawing to obtain a dynamic pipeline flow includes: Determine the path drawing data as the d attribute of the second path element, determine the pipeline width as the width value of the second path element, and determine the pipeline color as the color value of the second path element to obtain a flow path element; Perform a line animation drawing on the flow path element based on the dotted line mode and the dotted line offset attribute of the SVG container to obtain a dynamic pipeline flow.

5. The method for implementing process animation according to claim 2, characterized in that Before the step of setting the path drawing data and the preset first visual data as attributes of a first path element to obtain a static background pipeline, setting the path drawing data and the preset second visual data as attributes of a second path element and performing a line animation drawing to obtain a dynamic pipeline flow to obtain a pipeline flow component corresponding to the target pipeline segment, further includes: Calculate the horizontal coordinate difference between the horizontal coordinate value in the output node coordinates and the horizontal coordinate value in the input node coordinates through the SVG container, and calculate the vertical coordinate difference between the vertical coordinate value in the output node coordinates and the vertical coordinate value in the input node coordinates through the SVG container; Determine the horizontal coordinate difference as the width attribute of the SVG container, and determine the vertical coordinate difference as the height attribute of the SVG container for displaying the pipeline flow component within the drawing area formed by the height attribute and the width attribute.

6. The method for implementing process animation according to any one of claims 1 to 5, characterized in that The method further includes: Encapsulate the input nodes and output nodes of the pipeline flow components corresponding to the respective pipeline segments into drag components through a preset drag library; When a drag operation based on the drag component is monitored, determine the component identifier of the drag component to determine a target node from the input nodes and output nodes of the respective pipeline flow components; Update the current coordinates of the target node with the updated coordinates of the target node to obtain the updated node coordinates, wherein the pipeline flow component connected to the target node is adjusted based on the updated node coordinates.

7. An apparatus for implementing process animation, characterized in that, The device includes: A receiving module, configured to receive, through an SVG container, first node connection information of an input node of a target pipeline segment and second node connection information of an output node, where the target pipeline segment is any one of the respective pipeline segments of a process to be processed; A determination module, configured to determine path drawing data based on the first node connection information and the second node connection information through the SVG container; A component generation module, configured to set the path drawing data and preset first visual data as attributes of a first path element to obtain a static background pipeline, and set the path drawing data and preset second visual data as attributes of a second path element and perform line animation drawing to obtain a dynamic pipeline flow, so as to obtain a pipeline flow component corresponding to the target pipeline segment, wherein the diameter of the static background pipeline is greater than the diameter of the dynamic pipeline flow; A component connection module, configured to connect the pipeline flow components corresponding to the respective pipeline segments based on the process sequence of the to-be-processed process to obtain a process animation corresponding to the to-be-processed process.

8. An electronic device, characterized in that, The device includes: a memory, a processor, and a computer program stored on the memory and executable on the processor, the computer program being configured to implement the steps of the process animation implementation method according to any one of claims 1 to 6.

9. A storage medium, characterized in that, The storage medium is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the process animation implementation method according to any one of claims 1 to 6 are implemented.

10. A computer program product, characterized in that, The computer program product includes a computer program, and when the computer program is executed by a processor, the steps of the process animation implementation method according to any one of claims 1 to 6 are implemented.

Images