Method and device for previewing prototype dynamic component in real time based on design tool

Abstract

The invention discloses a prototype dynamic component real-time preview method and device based on a design tool, and the method comprises the steps: creating a prototype dynamic component in a design canvas page, and recording the object attribute of each container in the prototype dynamic component; monitoring an interaction setting operation of the prototype dynamic component; wherein the interaction setting operation comprises animation interaction setting operation and object attribute setting operation; the animation interaction setting operation comprises a triggering condition, an interaction action, a target and animation setting; displaying a dynamic component preview area at a preset position of the prototype dynamic component after the interaction setting of the prototype dynamic component is completed or in the interaction setting process; and rendering the interactive operation process of the prototype dynamic component in real time through the dynamic component preview area so as to display the dynamic visual effect of the prototype dynamic component. According to the method, the fluency of a designer in a creative process is improved, and the number of design iterations caused by preview delay is reduced, so that the design efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and in particular to a method and device for real-time preview of prototype dynamic components based on design tools. Background Art

[0002] By designing interactions with dynamic components (such as the interactive transition process from one object to another), a variety of dynamic effects can be provided to meet more flexible and changeable interaction needs. Although existing design tools (such as Figma and Sketch) support the creation and preview of dynamic components, in actual use, users often encounter problems such as insufficient preview smoothness, complex interactions, and difficulty in supporting real-time updates. This in turn limits designers' immediate grasp of dynamic effects during the creative process, resulting in low design efficiency.

[0003] Especially when the component is complex or contains multiple nested elements, after each property change, the existing design tools cannot immediately use the latest state of the style layout as the benchmark for re-rendering, causing the designer to wait for several seconds or even longer to see the effect of the change. Since designers often need to make repeated changes, each preview requires a long preview time, which not only greatly reduces the design efficiency and design experience, but also seriously affects the designer's creativity.

[0004] To solve the above problems, the present invention develops a real-time preview method and device for prototype dynamic components based on design tools to improve the fluency of designers in the creative process, reduce the number of design iterations caused by preview delays, and thus improve design efficiency. Summary of the invention

[0005] In view of the above problems, a real-time preview method and device of prototype dynamic components based on design tools are proposed to improve the fluency of designers in the creative process.

[0006] According to one aspect of the present invention, a method for real-time preview of a prototype dynamic component based on a design tool is provided, comprising:

[0007] Creating a prototype dynamic component in a design canvas page, and recording the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, rounded corners, color, opacity, stroke, special effects, and layer order;

[0008] Monitoring the interactive setting operation of the prototype dynamic component; wherein the interactive setting operation includes an animation interactive setting operation and an object property setting operation; the animation interactive setting operation includes a trigger condition, an interactive action, a target, and an animation setting;

[0009] After the interactive setting of the prototype dynamic component is completed or during the interactive setting process, displaying a dynamic component preview area at a preset position of the prototype dynamic component;

[0010] The interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

[0011] In an optional manner, recording the object properties of each container in the prototype dynamic component further includes:

[0012] Constructing a virtual DOM node including a node type, node attributes, and a child node list; wherein the node type includes a div type, a span type, and a custom type; and the node attributes include a container identifier, a CSS class name of the container, and object attributes;

[0013] A virtual DOM node is created for each container, and a virtual DOM tree is generated according to the node attributes of the virtual DOM node and the interactive setting operation of the prototype dynamic component.

[0014] In an optional manner, the monitoring of the interactive setting operation of the prototype dynamic component further includes:

[0015] Creating an event listener to capture interactive setup operations of the prototype dynamic component;

[0016] After monitoring the interactive setting operation of the prototype dynamic component, updating the first virtual DOM tree corresponding to the prototype dynamic component to obtain a second virtual DOM tree;

[0017] The difference between the first virtual DOM tree and the second virtual DOM tree is compared according to a DIFF algorithm to obtain a real DOM tree, so as to render the interactive operation process of the prototype dynamic component in real time according to the real DOM tree; wherein the real DOM tree includes indicated change points that need to be added, deleted and modified.

[0018] In an optional manner, the real-time rendering of the interactive operation process of the prototype dynamic component according to the real DOM tree further includes:

[0019] Execute corresponding DOM API calls in the real DOM environment according to the indicated change points in the real DOM tree;

[0020] Multiple batch-triggered redraw operations and reflow operations are performed in the dynamic component preview area to update the responsive dynamic visual effect; wherein the redraw operation redraws the appearance of elements in the prototype dynamic component, and the reflow operation recalculates the position and size of elements in the prototype dynamic component.

[0021] In an optional manner, comparing the difference between the first virtual DOM tree and the second virtual DOM tree according to the DIFF algorithm to obtain the real DOM tree further includes:

[0022] Compare the root nodes of the first virtual DOM tree and the second virtual DOM tree, and if the root node types are different, use the second virtual DOM tree as the real DOM tree; if the root node types are the same, continue to compare the child nodes;

[0023] Compare the child nodes of each level in the first virtual DOM tree and the second virtual DOM tree through double pointers;

[0024] When the node types of two nodes are the same, the node attributes and child node lists of the nodes are compared respectively; if the node attributes and child node lists of the nodes are different, the node attributes and child node lists of the node are added to the node corresponding to the real DOM tree.

[0025] In an optional manner, the method further includes:

[0026] The dynamic visual effects of the prototype dynamic components are rendered in layers according to their hierarchical depth, interaction frequency, and style layout.

[0027] In an optional manner, the method further includes:

[0028] When a change in the style layout of the prototype dynamic component is detected, the rendering layer of the current state of the style layout is stopped, and the latest state of the style layout is recorded, and the latest state is used as a reference for re-rendering;

[0029] When the style layout stops changing, the latest state is re-rendered in a smooth transition manner.

[0030] In an optional manner, the method further includes:

[0031] If the magnitude of the change in the style layout of the prototype dynamic component is less than a preset pixel threshold, the prototype dynamic component is not re-rendered, and only the changed element layout style in the style layout is re-rendered.

[0032] In an optional manner, the prototype dynamic component includes a canvas page prototype mode and a canvas page development mode, and the dynamic component preview area adopts a small window playback mode;

[0033] The method further comprises:

[0034] When the prototype dynamic component is in canvas page development mode, a code framework of the prototype dynamic component is generated, wherein the code framework includes JS script code and CSS style code;

[0035] When the mouse hovers over the dynamic component preview area, the dynamic visual effect of the prototype dynamic component is triggered.

[0036] According to another aspect of the present application, a prototype dynamic component real-time preview device based on a design tool is provided, comprising:

[0037] A prototype dynamic component creation and recording module, used to create a prototype dynamic component in a design canvas page, and record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, rounded corners, color, opacity, stroke, special effects, and layer order;

[0038] An interaction setting monitoring module is used to monitor the interaction setting operation of the prototype dynamic component; wherein the interaction setting operation includes an animation interaction setting operation and an object property setting operation; the animation interaction setting operation includes a trigger condition, an interaction action, a target and an animation setting;

[0039] A dynamic component preview area display module, used to display a dynamic component preview area at a preset position of the prototype dynamic component after the interactive setting of the prototype dynamic component is completed or during the interactive setting process;

[0040] The dynamic visual real-time rendering module is used to render the interactive operation process of the prototype dynamic component in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

[0041] The solution provided by the above embodiment of the present invention is to create a prototype dynamic component in a design canvas page, record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, fillet, color, opacity, stroke, special effects and layer order; monitor the interactive setting operation of the prototype dynamic component; wherein the interactive setting operation includes animation interactive setting operation and object property setting operation; the animation interactive setting operation includes trigger conditions, interactive actions, targets and animation settings; after the interactive setting of the prototype dynamic component is completed or during the interactive setting process, display the dynamic component preview area at the preset position of the prototype dynamic component; the interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to show the dynamic visual effect of the prototype dynamic component. The present invention improves the fluency of designers in the creative process, reduces the number of design iterations caused by preview delays, and thus improves design efficiency.

[0042] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0044] Figure 1 A schematic flow chart of a method for real-time preview of a prototype dynamic component based on a design tool according to an embodiment of the present invention is shown;

[0045] Figure 2A A schematic diagram of a prototype mode of a prototype dynamic component of an embodiment of the present invention is shown;

[0046] Figure 2B A schematic diagram of a development mode of a prototype dynamic component of an embodiment of the present invention is shown;

[0047] Figure 3 A schematic diagram showing object property changes of a prototype dynamic component according to an embodiment of the present invention is shown;

[0048] Figure 4A The prototype dynamic component creation schematic diagram of the embodiment of the present invention is shown Figure 1 ;

[0049] Figure 4B A second schematic diagram of creating a prototype dynamic component according to an embodiment of the present invention is shown;

[0050] Figure 5A A preview diagram showing a prototype dynamic component of an embodiment of the present invention Figure 1 ;

[0051] Figure 5B A second preview diagram of a prototype dynamic component of an embodiment of the present invention is shown;

[0052] Figure 6 A functional structural diagram of a prototype dynamic component real-time preview device based on a design tool according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0053] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

[0054] Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:

[0055] Components: They allow the UI to be divided into independent, reusable parts. In practical applications, components are often organized into a nested tree structure.

[0056] Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container and A4 paper container. In this application, in addition to defining the scope of the interface like the drawing board in traditional design software, the container can also add layout grid, rounded corner filling and other attributes to it, and can also nest another container in the container.

[0057] Layers: are like images containing elements such as text or graphics, which are stacked together in order and combined to form the final effect of the page. Layers can accurately position elements on the page. In this application, text, shapes, pictures, etc. can be added to the layers, and layers can be nested in the layers.

[0058] The following describes in detail the method and device for real-time preview of dynamic components of prototypes based on design tools proposed by the present invention through specific embodiments.

[0059] Embodiment 1:

[0060] Figure 1 The functional structure diagram of the real-time preview method of the prototype dynamic component based on the design tool of the embodiment of the present invention is shown. Figure 1 As shown, the following steps are included:

[0061] Step S101, create a prototype dynamic component in the design canvas page, and record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, rounded corners, color, opacity, stroke, special effects, and layer order.

[0062] In this embodiment, a dynamic component refers to a component set that creates an interactive user interface, and dynamically changes the display content of the component according to the user's operation or selection, thereby providing a rich user experience. For example, dynamic components are used to implement effects such as switching tabs, displaying and hiding pop-ups, clicking buttons, and carousels. Creating a prototype dynamic component in the design canvas page can simulate various user interaction methods, thereby more clearly combing the page logic and providing a rich user experience. The action of the above-mentioned interactive behavior is also called a trigger. During the demonstration, the user makes a designed triggering behavior of the prototype dynamic component in the specified area, and the corresponding interactive action will be played. Among them, the types of triggers include: click, hover, press, drag, press the mouse, lift the mouse, cursor move in, cursor move out, and delay, etc.

[0063] Specifically, create a prototype dynamic component in the design canvas page, such as Figure 2A , Figure 4A As shown in the figure, it includes container 1 and container 2. Select the container or layer to add interaction, and select "Interaction" in the "Interaction" column in the property panel to evoke the interaction setting pop-up window. Select the container or layer, press and hold the "+" on the right and drag it to the target container (not shown in the figure), and the connection line and interaction setting pop-up window will appear. After setting the interaction action and previewing, you can clearly see the gradient process between the two graphics. Figure 4B As shown in the figure, after designing the page with three key frames and setting the smart animation, you can get a very natural and smooth effect of turning on the low power mode (such as Figure 5B shown).

[0064] When the properties of the prototype dynamic component change, in order to ensure that it can be captured in time and display a smoother animation preview effect, in this embodiment, the change information of multiple properties of the interactive object (i.e., container or layer) of the prototype dynamic component, such as the occurrence position, width, height, angle, rounded corners, color, opacity, stroke, special effects, layer order, etc., is recorded at the same time (such as Figure 3 ). Previewing the prototype dynamic component in time according to the change information of the above multiple properties can improve the fluency of the designer in the creative process and reduce the number of design iterations caused by preview delays. It should be noted that some existing design tools on the market, such as Adobe XD, use a delayed preview method. Although it meets the display requirements of dynamic components to a certain extent, it cannot achieve true real-time preview. In some cases, when designers try to change the container properties of the prototype dynamic component, the preview effect does not change as expected. Each time the property is changed, it takes a long time to preview, and the preview rendering effect is not ideal and cannot meet the needs of designers.

[0065] In an optional manner, recording the object properties of each container in the prototype dynamic component further includes:

[0066] Constructing a virtual DOM node including a node type, node attributes, and a child node list; wherein the node type includes a div type, a span type, and a custom type; and the node attributes include a container identifier, a CSS class name of the container, and object attributes;

[0067] A virtual DOM node is created for each container, and a virtual DOM tree is generated according to the node attributes of the virtual DOM node and the interactive setting operation of the prototype dynamic component.

[0068] In this embodiment, the virtual DOM technology is used to compare the differences between the new and old virtual DOM trees, and only the parts that need to be updated are updated, thereby achieving real-time tracking of changes in component properties and immediately updating the virtual DOM tree, thereby ensuring the consistency of the preview effect with the latest state, thereby avoiding frequent DOM operations, significantly improving rendering efficiency, and reducing preview freezes and delays.

[0069] Specifically, a virtual DOM node including node type, node attribute and child node list is constructed; wherein the node type includes div type, span type and custom type; the node attribute includes container identifier (such as ID or class name), CSS class name of the container and object attribute. The child node list constructs a list including child nodes according to the hierarchical structure of the component.

[0070] Traverse each container of the prototype dynamic component, create a corresponding virtual DOM node for each container, and build a virtual DOM tree based on the node properties of the virtual DOM node and the interactive setting operation of the prototype dynamic component. Use the rendering engine to convert the virtual DOM tree into a real DOM structure, and then display the preview effect in the preview window. When the component properties change, rebuild the virtual DOM tree, compare the differences between the new and old trees, and only update the parts that need to be updated.

[0071] For example, taking the carousel as an example, its corresponding virtual DOM tree structure is shown in Table 1:

[0072] Table 1

[0073]

[0074] In Table 1, each row represents a node in the virtual DOM tree. The first column is the node level, which is the depth of the node in the DOM tree. The second column is the node type, such as div, img, or button. The third column is the node attributes, listed in the form of key-value pairs. If there are many attributes or complex objects (such as styles), simplified style processing is performed (such as style:{...}). The fourth column is the node's child nodes, listed in the form of a list. If the child node is empty, an empty array [] is used to represent it.

[0075] In an optional manner, the prototype dynamic component includes a canvas page prototype mode and a canvas page development mode;

[0076] When the prototype dynamic component is in the canvas page development mode, a code framework of the prototype dynamic component is generated, wherein the code framework includes JS script code and CSS style code.

[0077] In this embodiment, the page prototype can be quickly constructed and modified through the canvas page prototype mode. In the canvas page development mode, the page style and function can be adjusted more flexibly through the code framework (JS script code and CSS style code). Figure 2B As shown, the TypeScript (TSX) code and SCSS code are displayed in the right window. TypeScript is a superset of JavaScript, supports the ECMAScript 6 standard, and can be compiled into pure JavaScript. The compiled JavaScript can run on any browser. Sass (Syntactically Awesome Stylesheets) is a CSS extension language (Sass extends CSS3 and adds rules, variables, mixins, selectors, inheritance, built-in functions and other features), which can reduce CSS duplication and save development time. This article does not limit how to generate JS script code and CSS style code.

[0078] Step S102, monitoring the interaction setting operation of the prototype dynamic component; wherein the interaction setting operation includes animation interaction setting operation and object property setting operation; the animation interaction setting operation includes triggering conditions, interaction actions, targets and animation settings.

[0079] In this embodiment, by monitoring the interactive setting operation of the prototype dynamic component, the component state can be updated immediately or the corresponding animation effect can be triggered, thereby improving the smoothness of the interaction and the user experience. Figure 4A As shown, the animation interaction setting operation includes trigger conditions, interaction actions, targets, and animation settings.

[0080] Specifically, an event listener is registered on the prototype dynamic component to capture the interactive behavior of the prototype dynamic component and record the object properties of the prototype dynamic component according to the user's interactive behavior. For example, define a Component class that contains interactive setting operations such as interactive behavior, position, size, rotation angle, color, etc. The listener function is managed through the EventListener event listener class, and the addListener method is used to add a new listener function to the listener list, and the notifyListeners method is called to notify all registered listeners when needed, so as to record the changes in properties.

[0081] In an optional manner, the monitoring of the interactive setting operation of the prototype dynamic component further includes:

[0082] Creating an event listener to capture interactive setup operations of the prototype dynamic component;

[0083] After monitoring the interactive setting operation of the prototype dynamic component, updating the first virtual DOM tree corresponding to it to obtain a second virtual DOM tree;

[0084] The difference between the first virtual DOM tree and the second virtual DOM tree is compared according to a DIFF algorithm to obtain a real DOM tree, so as to render the interactive operation process of the prototype dynamic component in real time according to the real DOM tree; wherein the real DOM tree includes indicated change points that need to be added, deleted and modified.

[0085] In this embodiment, after the interactive setting operation is monitored, the corresponding virtual DOM tree (first virtual DOM tree) is updated to generate a new virtual DOM tree (second virtual DOM tree). The first virtual DOM tree is compared with the second virtual DOM tree through the DIFF algorithm to find the difference between the two trees, and identify the DOM nodes that need to be added, deleted or modified, that is, indicate the change point. For example, the prototype dynamic component includes a button and a text display area. Initially, the text display area displays "Hello, World!". When the user clicks the button, the text will change to "Hello, User!". The first virtual DOM node is the virtual DOM tree before the user interaction occurs, and includes a A container that contains a <button>elements and a element, The element displays the text "Hello, World!". The second virtual DOM node is the new virtual DOM tree after the user clicks the button. The text content of the element is changed from "Hello, World!" to "Hello, User!", and the rest of the content remains unchanged. The DIFF algorithm is used to compare the new and old virtual DOM trees to identify the changed parts and get the real DOM tree. In the real DOM tree, only one content has changed, so you only need to update The text content of the element.

[0086] Taking the above example, recursively traverse the old virtual DOM tree and the new virtual DOM tree starting from the root node. If the two nodes are of the same type (for example, both are ), then continue to compare the child nodes of the node. If the two node types are different, mark the old node as needing to be deleted, and mark the new node as needing to be inserted. If the node types are the same but the attributes are different (in the above example, no attributes have changed, so skip it), then mark them as needing to update the attributes.

[0087] For each node's child nodes, find the difference between the old child node list and the new child node list using a longest common subsequence algorithm, and mark the child nodes that need to be added, deleted, or reordered. If the node is a text node ( If the text content is different, it is marked as needing to be updated.

[0088] A change list is generated based on the comparison results, which contains information about nodes that need to be deleted, inserted, updated, or reordered.

[0089] In this example, the old virtual DOM tree and the new virtual DOM tree are compared using the DIFF algorithm, and the The text content of the element is changed from "Hello, World!" to "Hello, User!". A change list is then generated that contains a content change indicating that an update is required. The text content of the element. Applies the changes to the real DOM for subsequent rendering.

[0090] In an optional manner, the real-time rendering of the interactive operation process of the prototype dynamic component according to the real DOM tree further includes:

[0091] Execute corresponding DOM API calls in the real DOM environment according to the indicated change points in the real DOM tree;

[0092] Multiple batch-triggered redraw operations and reflow operations are performed in the dynamic component preview area to update the responsive dynamic visual effect; wherein the redraw operation redraws the appearance of elements in the prototype dynamic component, and the reflow operation recalculates the position and size of elements in the prototype dynamic component.

[0093] In this embodiment, by triggering redrawing and reflow operations in batches, the workload of the rendering engine can be reduced, especially in complex interactive scenarios, so that the prototype dynamic components can be rendered in real time.

[0094] Specifically, the MutationObserver API function is used to monitor the change events of the real DOM tree. When changes in the DOM structure or style are detected, the change point is recorded and the rendering process is triggered. According to the type of change point (such as style change, layout change, etc.), multiple DOM operations are merged into one batch. Document fragments can be used to temporarily store DOM operations, and then added to the real DOM at one time, which can greatly reduce the number of redrawing and reflow operations. Then, the visual rendering is updated in real time in the dynamic component preview area according to the changes in the real DOM tree.

[0095] In an optional manner, comparing the difference between the first virtual DOM tree and the second virtual DOM tree according to the DIFF algorithm to obtain the real DOM tree further includes:

[0096] Compare the root nodes of the first virtual DOM tree and the second virtual DOM tree, and if the root node types are different, use the second virtual DOM tree as the real DOM tree; if the root node types are the same, continue to compare the child nodes;

[0097] Compare the child nodes of each level in the first virtual DOM tree and the second virtual DOM tree through double pointers;

[0098] When the node types of two nodes are the same, the node attributes and child node lists of the nodes are compared respectively; if the node attributes and child node lists of the nodes are different, the node attributes and child node lists of the node are added to the node corresponding to the real DOM tree.

[0099] In this embodiment, the dual pointer can simultaneously maintain two pointers during the traversal process, pointing to the current node of the first virtual DOM tree and the current node of the second virtual DOM tree respectively. By comparing the types, attributes and child node lists of the nodes pointed to by the two pointers, it can be determined whether the nodes are the same, and then whether the real DOM tree needs to be updated. Therefore, the difference nodes can be located more efficiently, further reducing the number of comparisons and calculation complexity.

[0100] Step S103, after the interactive setting of the prototype dynamic component is completed or during the interactive setting process, a dynamic component preview area is displayed at a preset position of the prototype dynamic component.

[0101] In this embodiment, the designer can directly display the interactive effects of dynamic components in real time through the preview area during the interactive setting process. When the designer modifies the interactive settings, the preview area automatically updates the latest interactive effects. Figure 5A , Figure 5B As shown, the preview area (component) can be customized according to the designer's needs (such as adjusting the size, position, minimizing, displaying it on the top, placing it on the side of the interface, at the bottom, or floating display, etc.).

[0102] In an optional manner, the dynamic component preview area adopts a small window playback manner;

[0103] When the mouse hovers over the dynamic component preview area, the dynamic visual effect of the prototype dynamic component is triggered.

[0104] like Figure 5B As shown, when the mouse hovers over the small window area, a very natural and smooth dynamic effect of turning on the low power mode can be obtained in the dynamic component preview area.

[0105] Step S104, the interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

[0106] In this embodiment, the interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area, so that the designer can instantly see the dynamic visual effect of the component, thereby quickly adjusting and optimizing the interactive design. Real-time rendering shortens the design iteration cycle, and the designer can see the modified effect without waiting for a long compilation or loading time.

[0107] In an optional manner, the method further includes:

[0108] The dynamic visual effects of the prototype dynamic components are rendered in layers according to their hierarchical depth, interaction frequency, and style layout.

[0109] In this embodiment, layered rendering is performed according to the hierarchical depth, interaction frequency, and style layout of the components, which can optimize rendering performance, clearly display the visual hierarchical relationship between components, and reduce unnecessary calculation and rendering overhead.

[0110] Specifically, components are divided into foreground, middleground, and background layers according to their layer depth, interaction frequency, and style layout. The foreground layer contains high-frequency interaction and important components; the middleground layer contains medium-frequency interaction components; and the background layer contains low-frequency interaction and less important components. This ensures that components in the foreground layer can be rendered and updated in the most timely manner when interaction events are triggered, improving overall rendering performance.

[0111] In an optional manner, the method further includes:

[0112] When a change in the style layout of the prototype dynamic component is detected, the rendering layer of the current state of the style layout is stopped, and the latest state of the style layout is recorded, and the latest state is used as a reference for re-rendering;

[0113] When the style layout stops changing, the latest state is re-rendered in a smooth transition manner.

[0114] In this embodiment, when a change in the style layout of the prototype dynamic component is detected, the rendering layer of the current state of the style layout is stopped, and the latest state of the style layout is recorded. The latest state is used as a benchmark for re-rendering, which can avoid replaying the preview effect, reduce the waiting time for design, and improve work efficiency. For example, when a designer adjusts the second-to-last graphic of the carousel, re-rendering starts from the second-to-last graphic in a smooth transition manner, avoiding the designer waiting for the carousel to play to the effect of the second-to-last graphic each time the designer previews. Therefore, for multiple repeated changes, each preview does not need to wait for a long preview time, which greatly improves the design efficiency and design experience, and is more conducive to the designer's creativity.

[0115] In an optional manner, the method further includes:

[0116] If the magnitude of the change in the style layout of the prototype dynamic component is less than a preset pixel threshold, the prototype dynamic component is not re-rendered, and only the changed element layout style in the style layout is re-rendered.

[0117] In this embodiment, if the change in the style layout of the prototype dynamic component (such as the distance of position movement, the difference in size change, etc.) is less than the preset pixel threshold (5 pixels), the prototype dynamic component will not be re-rendered, and only the layout style of the changed elements in the style layout will be re-rendered. This can avoid unnecessary global re-rendering, and only re-render the changed elements, which can avoid flickering in the preview interface.

[0118] The solution provided by the above embodiment of the present invention is to create a prototype dynamic component in a design canvas page, record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, fillet, color, opacity, stroke, special effects and layer order; monitor the interactive setting operation of the prototype dynamic component; wherein the interactive setting operation includes animation interactive setting operation and object property setting operation; the animation interactive setting operation includes trigger conditions, interactive actions, targets and animation settings; after the interactive setting of the prototype dynamic component is completed or during the interactive setting process, display the dynamic component preview area at the preset position of the prototype dynamic component; the interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to show the dynamic visual effect of the prototype dynamic component. The present invention improves the fluency of designers in the creative process, reduces the number of design iterations caused by preview delays, and thus improves design efficiency.

[0119] Embodiment 2:

[0120] Figure 6 The functional structure diagram of the real-time preview device of the prototype dynamic component based on the design tool provided in the embodiment of the present application is shown. Figure 6 As shown, the device comprises:

[0121] The prototype dynamic component creation and recording module 601 is used to create a prototype dynamic component in the design canvas page and record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, fillet, color, opacity, stroke, special effects and layer order;

[0122] The interaction setting monitoring module 602 is used to monitor the interaction setting operation of the prototype dynamic component; wherein the interaction setting operation includes animation interaction setting operation and object property setting operation; the animation interaction setting operation includes triggering conditions, interaction actions, targets and animation settings;

[0123] A dynamic component preview area display module 603 is used to display a dynamic component preview area at a preset position of the prototype dynamic component after the interactive setting of the prototype dynamic component is completed or during the interactive setting process;

[0124] The dynamic visual real-time rendering module 604 is used to render the interactive operation process of the prototype dynamic component in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

[0125] In an optional manner, the prototype dynamic component creation and recording module 601 is further used to:

[0126] Constructing a virtual DOM node including a node type, node attributes, and a child node list; wherein the node type includes a div type, a span type, and a custom type; and the node attributes include a container identifier, a CSS class name of the container, and object attributes;

[0127] A virtual DOM node is created for each container, and a virtual DOM tree is generated according to the node attributes of the virtual DOM node and the interactive setting operation of the prototype dynamic component.

[0128] In an optional manner, the interaction setting monitoring module 602 is further used to:

[0129] Creating an event listener to capture interactive setup operations of the prototype dynamic component;

[0130] After monitoring the interactive setting operation of the prototype dynamic component, updating the first virtual DOM tree corresponding to the prototype dynamic component to obtain a second virtual DOM tree;

[0131] The difference between the first virtual DOM tree and the second virtual DOM tree is compared according to a DIFF algorithm to obtain a real DOM tree, so as to render the interactive operation process of the prototype dynamic component in real time according to the real DOM tree; wherein the real DOM tree includes indicated change points that need to be added, deleted and modified.

[0132] In an optional manner, the interaction setting monitoring module 602 is further used to:

[0133] Execute corresponding DOM API calls in the real DOM environment according to the indicated change points in the real DOM tree;

[0134] Multiple batch-triggered redraw operations and reflow operations are performed in the dynamic component preview area to update the responsive dynamic visual effect; wherein the redraw operation redraws the appearance of elements in the prototype dynamic component, and the reflow operation recalculates the position and size of elements in the prototype dynamic component.

[0135] In an optional manner, the interaction setting monitoring module 602 is further used to:

[0136] Compare the root nodes of the first virtual DOM tree and the second virtual DOM tree, and if the root node types are different, use the second virtual DOM tree as the real DOM tree; if the root node types are the same, continue to compare the child nodes;

[0137] Compare the child nodes of each level in the first virtual DOM tree and the second virtual DOM tree through double pointers;

[0138] When the node types of two nodes are the same, the node attributes and child node lists of the nodes are compared respectively; if the node attributes and child node lists of the nodes are different, the node attributes and child node lists of the node are added to the node corresponding to the real DOM tree.

[0139] In an optional manner, the dynamic visual real-time rendering module 604 is further used for:

[0140] The dynamic visual effects of the prototype dynamic components are rendered in layers according to their hierarchical depth, interaction frequency, and style layout.

[0141] In an optional manner, the dynamic visual real-time rendering module 604 is further used for:

[0142] When a change in the style layout of the prototype dynamic component is detected, the rendering layer of the current state of the style layout is stopped, and the latest state of the style layout is recorded, and the latest state is used as a reference for re-rendering;

[0143] When the style layout stops changing, the latest state is re-rendered in a smooth transition manner.

[0144] In an optional manner, the dynamic visual real-time rendering module 604 is further used for:

[0145] If the magnitude of the change in the style layout of the prototype dynamic component is less than a preset pixel threshold, the prototype dynamic component is not re-rendered, and only the changed element layout style in the style layout is re-rendered.

[0146] In an optional manner, the prototype dynamic component includes a canvas page prototype mode and a canvas page development mode, and the dynamic component preview area adopts a small window playback method; when the prototype dynamic component is in the canvas page development mode, a code framework of the prototype dynamic component is generated, wherein the code framework includes JS script code and CSS style code.

[0147] In an optional manner, the dynamic component preview area display module 603 is further used to:

[0148] When the mouse hovers over the dynamic component preview area, the dynamic visual effect of the prototype dynamic component is triggered.

[0149] The solution provided by the above embodiment of the present invention is to create a prototype dynamic component in a design canvas page, record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, fillet, color, opacity, stroke, special effects and layer order; monitor the interactive setting operation of the prototype dynamic component; wherein the interactive setting operation includes animation interactive setting operation and object property setting operation; the animation interactive setting operation includes trigger conditions, interactive actions, targets and animation settings; after the interactive setting of the prototype dynamic component is completed or during the interactive setting process, display the dynamic component preview area at the preset position of the prototype dynamic component; the interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to show the dynamic visual effect of the prototype dynamic component. The present invention improves the fluency of designers in the creative process, reduces the number of design iterations caused by preview delays, and thus improves design efficiency.

[0150] The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages ​​can be utilized to realize the content of the present invention described herein, and the description made to specific languages ​​above is for disclosing the best mode of the present invention.

[0151] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0152] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

[0153] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0154] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.

[0155] The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0156] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution. < / button>

Claims

1. A real-time preview method of prototype dynamic components based on design tools, characterized in that: include: Creating a prototype dynamic component in a design canvas page, and recording the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, rounded corners, color, opacity, stroke, special effects, and layer order; Monitoring the interactive setting operation of the prototype dynamic component; wherein the interactive setting operation includes an animation interactive setting operation and an object property setting operation; the animation interactive setting operation includes a trigger condition, an interactive action, a target, and an animation setting; After the interactive setting of the prototype dynamic component is completed or during the interactive setting process, displaying a dynamic component preview area at a preset position of the prototype dynamic component; The interactive operation process of the prototype dynamic component is rendered in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

2. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 1, characterized in that: The recording of the object properties of each container in the prototype dynamic component further includes: Constructing a virtual DOM node including a node type, node attributes, and a child node list; wherein the node type includes a div type, a span type, and a custom type; and the node attributes include a container identifier, a CSS class name of the container, and object attributes; A virtual DOM node is created for each container, and a virtual DOM tree is generated according to the node attributes of the virtual DOM node and the interactive setting operation of the prototype dynamic component.

3. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 2, characterized in that: The monitoring of the interactive setting operation of the prototype dynamic component further includes: Creating an event listener to capture interactive setup operations of the prototype dynamic component; After monitoring the interactive setting operation of the prototype dynamic component, updating the first virtual DOM tree corresponding to it to obtain a second virtual DOM tree; The difference between the first virtual DOM tree and the second virtual DOM tree is compared according to a DIFF algorithm to obtain a real DOM tree, so as to render the interactive operation process of the prototype dynamic component in real time according to the real DOM tree; wherein the real DOM tree includes indicated change points that need to be added, deleted and modified.

4. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 3, characterized in that: The real-time rendering of the interactive operation process of the prototype dynamic component according to the real DOM tree further includes: Execute corresponding DOM API calls in the real DOM environment according to the indicated change points in the real DOM tree; Multiple batch-triggered redraw operations and reflow operations are performed in the dynamic component preview area to update the responsive dynamic visual effect; wherein the redraw operation redraws the appearance of elements in the prototype dynamic component, and the reflow operation recalculates the position and size of elements in the prototype dynamic component.

5. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 3, characterized in that: The step of comparing the difference between the first virtual DOM tree and the second virtual DOM tree according to the DIFF algorithm to obtain the real DOM tree further comprises: Compare the root nodes of the first virtual DOM tree and the second virtual DOM tree, and if the root node types are different, use the second virtual DOM tree as the real DOM tree; if the root node types are the same, continue to compare the child nodes; Compare the child nodes of each level in the first virtual DOM tree and the second virtual DOM tree through double pointers; When the node types of two nodes are the same, the node attributes and child node lists of the nodes are compared respectively; if the node attributes and child node lists of the nodes are different, the node attributes and child node lists of the node are added to the node corresponding to the real DOM tree.

6. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 4, characterized in that: The method further comprises: The dynamic visual effects of the prototype dynamic components are rendered in layers according to their hierarchical depth, interaction frequency, and style layout.

7. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 6, characterized in that: The method further comprises: When a change in the style layout of the prototype dynamic component is detected, the rendering layer of the current state of the style layout is stopped, and the latest state of the style layout is recorded, and the latest state is used as a reference for re-rendering; When the style layout stops changing, the latest state is re-rendered in a smooth transition manner.

8. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 7, characterized in that: The method further comprises: If the magnitude of the change in the style layout of the prototype dynamic component is less than a preset pixel threshold, the prototype dynamic component is not re-rendered, and only the changed element layout style in the style layout is re-rendered.

9. The method for real-time preview of dynamic components of prototypes based on design tools according to claim 1, characterized in that: The prototype dynamic component includes a canvas page prototype mode and a canvas page development mode, and the dynamic component preview area adopts a small window playback mode; The method further comprises: When the prototype dynamic component is in canvas page development mode, a code framework of the prototype dynamic component is generated, wherein the code framework includes JS script code and CSS style code; When the mouse hovers over the dynamic component preview area, the dynamic visual effect of the prototype dynamic component is triggered.

10. A real-time preview device for prototype dynamic components based on design tools, characterized in that: include: A prototype dynamic component creation and recording module, used to create a prototype dynamic component in a design canvas page, and record the object properties of each container in the prototype dynamic component; wherein the object properties include position, width, height, angle, rounded corners, color, opacity, stroke, special effects, and layer order; An interaction setting monitoring module is used to monitor the interaction setting operation of the prototype dynamic component; wherein the interaction setting operation includes an animation interaction setting operation and an object property setting operation; the animation interaction setting operation includes a trigger condition, an interaction action, a target and an animation setting; A dynamic component preview area display module, used to display a dynamic component preview area at a preset position of the prototype dynamic component after the interactive setting of the prototype dynamic component is completed or during the interactive setting process; The dynamic visual real-time rendering module is used to render the interactive operation process of the prototype dynamic component in real time through the dynamic component preview area to display the dynamic visual effect of the prototype dynamic component.

Images