Complex object CSS animation generation method based on triangulation

Abstract

The invention relates to the technical field of CSS animation, and discloses a triangulation-based complex object CSS animation generation method, which comprises the following steps: abstracting picture frames of a complex object in different animation states into a vector model fitted by a plurality of triangles, recording a triangular form, a stacking hierarchical relationship and a first vertex coordinate which are used for constructing the vector model; the vertex coordinates are adjusted, and gaps at the splicing positions of different triangles are eliminated; on the basis of the triangular geometric features and the hierarchical layout, generating a CSS style code, and further generating a corresponding HTML (Hypertext Markup Language) structure code; associating triangles contained in the picture frames in the continuous animation state, and establishing a corresponding triangle inheritance relationship; based on the relation, different processing is carried out for animation scene switching of the same complex object and different complex objects so as to realize smooth transition of animation switching, and CSS animation key frame codes are generated; and integrating the codes involved in the previous steps according to a style-structure-animation association logic to generate a webpage file.

Description

Technical Field

[0001] This manual relates to the field of CSS animation technology, and in particular to a method for generating CSS animations for complex objects based on triangulation. Background Technology

[0002] CSS animation technology, as the mainstream solution for realizing dynamic graphic effects on the web, relies on the dynamic switching characteristics of CSS style states to achieve smooth switching of element style states through underlying capabilities such as property transitions.

[0003] Existing technical solutions have several shortcomings. First, traditional CSS animation solutions have limitations in adapting to graphic objects. For simple graphic objects, smooth transitions can only be achieved through basic properties such as position and size. However, for the animation requirements of complex objects, existing solutions use keyframes and image frame insertion to fill the transition gaps. This fails to structurally deconstruct complex objects or establish relationships between different states, resulting in abrupt transitions and poor visual continuity when complex objects change form. Second, there are limitations in animation performance and resource consumption. Existing complex animations require loading a large number of image resources or calculating the entire object's properties, increasing resource burden and performance overhead, making it difficult to balance effect and efficiency. Third, there are limitations in the intelligence of animation control. Some optimization solutions only focus on code simplification and style reuse to improve execution efficiency, but they do not address the core of complex object animation, namely, the lack of an intelligent processing module that can structurally deconstruct complex objects and achieve smooth transitions through geometric matching logic, thus failing to achieve smoothness and efficiency in the transformation of complex object forms.

[0004] Therefore, there is an urgent need for a method to generate CSS animations for complex objects based on triangulation in order to solve the above problems. Summary of the Invention

[0005] In view of this, the present invention aims to propose a method for generating CSS animations of complex objects based on triangulation, in order to solve the problems of unsmooth animation transitions and high resource consumption caused by the lack of object structuring processing mechanisms, poor shape correlation between different states, and lack of geometric matching strategies in existing CSS animation solutions. It achieves smooth transitions in the shape transformation of complex objects and efficient processing of animation generation.

[0006] To achieve the above objectives, the present invention adopts the following technical solution: A method for generating CSS animations for complex objects based on triangulation, the method comprising: S1. Abstract the drawing frames of complex objects in different animation states into a vector model fitted by multiple triangles, and record the triangle shape, stacking hierarchy and first vertex coordinates used to construct the vector model.

[0007] S2. Adjust the coordinates of the first vertex to eliminate gaps at the connection points of different triangles and obtain the coordinates of the second vertex.

[0008] S3. Based on the coordinates of the second vertex, the shape of the triangle, and the stacking hierarchy among multiple triangles, the CSS style code for rendering each triangle is automatically generated by configuring the clip-path and hierarchy attributes; and based on the CSS style code, div nodes are instantiated in sequence and injected with class names and hierarchy to generate the corresponding HTML structure code.

[0009] S4. Perform cross-frame association operation on the triangles contained in the picture frames in the continuous animation state to establish the triangle inheritance relationship between the picture frames in the target animation state and the picture frames in the next animation state.

[0010] S5. Based on the triangle inheritance relationship, for triangles of the same complex object in continuous animation states, generate keyframes rules for each pair of matching triangles, defining the change of their clip-path from the starting second vertex coordinate to the ending second vertex coordinate, and schedule the execution of the rules through the animation property to achieve a smooth transition between continuous animation states of the same complex object.

[0011] To facilitate smooth transitions between animation scenes of different complex objects, the CSS `transition` property is configured to set the `clip-path` property value of the overall geometric outline during the transition process.

[0012] S6. Based on the clip-path change rules defined in step S5, generate CSS animation keyframe code through standardized syntax conversion; and integrate the CSS style code, HTML structure code and CSS animation keyframe code according to the style-structure-animation association logic to generate a web page file containing animation display and interactive control functions.

[0013] The beneficial effects of this solution are as follows: In existing technologies, the generation of CSS animations for complex objects generally suffers from abrupt shape transformations, unsmooth transitions between different states, redundant code, and high performance overhead, which restricts the visual smoothness and development efficiency of complex object animations. This application transforms the complex shape transformation problem into a correspondence and interpolation calculation problem based on geometric units, thereby providing a structured and computable data foundation for subsequent operations; through vertex fine-tuning and intelligent triangle matching mechanisms, it establishes geometric correspondences for smooth transitions between states; and finally, it automatically generates lightweight, high-performance CSS and HTML code, realizing a leap from manual adjustment to automatic generation in animation development, effectively improving the smoothness, running efficiency, and naturalness of cross-state transitions in complex object animations.

[0014] Furthermore, step S2 also includes: identifying the vertex with the smallest x-coordinate among all the first vertices of a single triangle and decrementing its x-coordinate value by one; identifying the vertex with the largest x-coordinate among all the first vertices of a single triangle and incrementing its x-coordinate value by one; identifying the vertex with the smallest y-coordinate among all the first vertices of a single triangle and decrementing its y-coordinate value by one; and identifying the vertex with the largest y-coordinate among all the first vertices of a single triangle and incrementing its y-coordinate value by one.

[0015] Beneficial effects: By fine-tuning the minimum and maximum coordinate vertices of each triangle in the x and y directions by shrinking inward and expanding outward, visual gaps and overlaps that may occur at the junctions of triangles due to coordinate integerization or drawing errors are effectively eliminated. This ensures that the outline of a complex object composed of multiple triangles remains smooth and continuous when transitioning between different states. This improves the visual integrity and rendering quality of CSSclip-path animations.

[0016] Furthermore, step S3 also includes: S310. Based on the coordinates of the second vertex, determine the path code of each triangle using the clip-path property in CSS.

[0017] S320. Based on the stacking hierarchy, determine the stacking priority of each triangle using the z-index property in CSS.

[0018] S330. Assign a unique CSS class name to each triangle, and integrate the path code and the stacking priority code into the CSS class name to form independent CSS style code for each triangle.

[0019] S340. Based on the CSS style code, instantiate div nodes in sequence and inject class names and levels to generate corresponding HTML structure code.

[0020] Beneficial effects: This setup ensures the accurate reproduction of the visual position of each triangle and the correct stacking order. Furthermore, by generating independent CSS class names and structured HTML, it provides a lightweight and semantically clear code foundation for the precise control and efficient interpolation of subsequent CSS animation keyframes. This significantly reduces development complexity and runtime performance overhead while maintaining the visual effects of the animation.

[0021] Furthermore, step S4 also includes: S410. Use the first vertex of each triangle in the triangle set of the target animation state as the reference point.

[0022] S420. Calculate the Euclidean distance between the reference point and the first vertex of each triangle in the triangle set of the next animation state.

[0023] S430. Based on the Euclidean distance, a greedy algorithm is used to establish a triangular inheritance relationship between the target animation state and the next animation state.

[0024] Beneficial effects: By using vertex coordinates as the basis for inheritance pairing and employing a greedy algorithm for distance minimization matching, the correspondence between triangles in different animation states can be established efficiently and automatically. This ensures that each triangle can find the closest subsequent target when switching states, thus laying a geometric correspondence foundation for achieving smooth shape interpolation animation and effectively avoiding shape jumps or misalignments that may occur during the animation process.

[0025] Furthermore, the greedy algorithm in step S430 includes: S431. Select the triangle with the smallest Euclidean distance value to the reference point from the triangle set of the next animation state as the matching item.

[0026] S432. Remove the matching item from the triangle set of the next animation state, and record the inheritance relationship between the triangle corresponding to the current reference point and the inherited item, gradually forming a mapping to establish the triangle inheritance relationship between the target animation state and the next animation state.

[0027] Beneficial effects: By progressively selecting the nearest triangle and removing it from the candidate pool in real time, this setting ensures the local optimality of the matching process, effectively avoiding the repeated matching of the same triangle, thereby constructing a stable and consistent triangle correspondence mapping as a whole, providing a reliable structured relational foundation for the subsequent generation of smooth and coherent CSS shape transition animations.

[0028] Furthermore, step S5 also includes: If the number of triangles in the target animation state is different from the number of triangles in the next animation state, perform a quantity supplementation operation for the triangles with fewer triangles. If there is a triangle that fails to match in any animation state, it is associated with the end of the reordered triangle set to maintain the integrity of the triangle set data structure.

[0029] Beneficial effects: By using the quantity completion and mismatched item end-placement mechanism, the integrity and consistency of the triangle data structure between different animation states are ensured. Even if there are differences in the number of triangles or matching relationships between states, it can still provide stable and regular data input for CSS animation keyframe generation, thereby supporting smooth animation transitions when local shapes appear or disappear during complex object shape transformations.

[0030] Furthermore, the vector model abstracted by the drawing frames of the complex object in different animation states also includes quadrilaterals and hybrid forms of triangles and quadrilaterals in its fitted geometry.

[0031] Beneficial effects: By extending the fitted shape of the vector model to quadrilaterals and hybrid forms, the geometric expression capability of objects with regular edges or complex contours is enhanced. While maintaining the core matching mechanism of triangulation, it can more flexibly and accurately adapt to diverse object structures, thereby improving the animation fidelity and visual realism. Attached Figure Description

[0032] This specification will be further described by way of exemplary embodiments, which will be described in detail with reference to the accompanying drawings. These embodiments are not limiting; in these embodiments, the same reference numerals denote the same structures, wherein: Figure 1 This is an exemplary flowchart of a method for generating CSS animations for complex objects based on triangulation; Figure 2 This is an exemplary flowchart for generating HTML structure code; Figure 3 This is an example flowchart for matching animation states. Detailed Implementation

[0033] To more clearly illustrate the technical solutions of the embodiments in this specification, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are merely some examples or embodiments of this specification. For those skilled in the art, these drawings can be applied to other similar scenarios without creative effort. Unless obvious from the context or otherwise specified, the same reference numerals in the drawings represent the same structures or operations.

[0034] As indicated in this specification and claims, unless the context clearly indicates otherwise, the words "a," "an," "an," and / or "the" do not specifically refer to the singular and may also include the plural. Generally speaking, the terms "comprising" and "including" only indicate the inclusion of expressly identified steps and elements, which do not constitute an exclusive list, and the method or apparatus may also include other steps or elements.

[0035] Flowcharts are used in this specification to illustrate the operations performed by the system according to embodiments of this specification. It should be understood that the preceding or following operations are not necessarily performed in exact order. Instead, the steps can be processed in reverse order or simultaneously. Furthermore, other operations can be added to these processes, or one or more steps can be removed from them.

[0036] The following detailed explanation illustrates the specific implementation methods: Figure 1 This is an exemplary flowchart of a method for generating CSS animations for complex objects based on triangulation, such as... Figure 1 As shown, a method for generating CSS animations for complex objects based on triangulation includes: Step S1: Abstract the drawing frames of the complex object in different animation states into a vector model fitted by multiple triangles, and record the triangle shape, stacking hierarchy and first vertex coordinates used to construct the vector model.

[0037] Complex objects refer to a class of graphic entities that have irregular geometric outlines, multi-layered composition, rich local details, or need to undergo continuous shape changes during animation.

[0038] In CSS animation generation scenarios, the animation of complex objects involves not only changes in overall position or size, but also continuous deformation of their internal shape, relative movement of local structures, and dynamic occlusion relationships between sub-parts. Such animations are difficult to achieve smooth and efficient rendering effects directly through traditional CSS property transitions or simple keyframes.

[0039] Frames in different animation states refer to the static visual forms of the same complex object at different key points in the animation timeline. Each form reflects the specific shape, structure, and visual characteristics of the complex object at that moment.

[0040] Vector models are data models that use mathematical geometric figures and their coordinate data to represent the visual form of complex objects in a structured and discretized manner. These mathematical geometric figures include triangles and quadrilaterals.

[0041] Furthermore, the vector model abstracted by the drawing frames of complex objects in different animation states also includes quadrilaterals and hybrid forms of triangles and quadrilaterals in its fitted geometry.

[0042] In this embodiment, by extending the fitted shape of the vector model to quadrilaterals and hybrid shapes, the geometric expression capability of objects with regular edges or complex contours is enhanced. While maintaining the core matching mechanism of triangulation, it can more flexibly and accurately adapt to diverse object structures, thereby improving the animation fidelity and visual realism.

[0043] In this embodiment, the drawing frames of a complex object in different animation states are abstracted into a vector model fitted by multiple triangles, which can be accomplished in a variety of ways.

[0044] For example, designers can manually triangulate the image frames in each animation state using vector model editing tools. This involves manually decomposing the object's outline into multiple triangles and recording the vertex coordinates, fill style, and stacking order of each triangle. Finally, the data is exported as structured data and used as input for subsequent animation generation.

[0045] For example, a processor can automatically extract feature points and mesh triangles from an input bitmap or sketch using a triangulation algorithm to generate a preliminary vector triangular mesh. After manual fine-tuning or algorithm optimization, it can form triangle vertex and hierarchy data that can be used for CSS animations.

[0046] In this embodiment, the exported structured data format is JSON.

[0047] JSON, as a lightweight, highly readable, and widely supported data exchange format, can clearly and structurally store the geometry, style, and hierarchy information of each triangle, facilitating automated parsing, verification, and conversion by the system. It also benefits manual inspection and debugging, and provides a standardized and flexible data foundation for data transfer between subsequent modules, cross-platform compatibility, and extended maintenance.

[0048] The coordinates of the first vertex are the coordinates of each triangle that makes up the vector model.

[0049] Step S2: Adjust the coordinates of the first vertex to eliminate gaps at the connection points of different triangles and obtain the coordinates of the second vertex.

[0050] The second vertex coordinates are the updated vertex coordinates of each triangle after coordinate adjustment.

[0051] Furthermore, step S2 also includes: identifying the vertex with the smallest x-coordinate among all the first vertices of a single triangle and decrementing its x-coordinate value by one; identifying the vertex with the largest x-coordinate among all the first vertices of a single triangle and incrementing its x-coordinate value by one; identifying the vertex with the smallest y-coordinate among all the first vertices of a single triangle and decrementing its y-coordinate value by one; and identifying the vertex with the largest y-coordinate among all the first vertices of a single triangle and incrementing its y-coordinate value by one.

[0052] In this embodiment, by making slight adjustments to the coordinates of the triangle vertices, and by shrinking and expanding the minimum and maximum coordinate values ​​in the x and y directions respectively, the subtle gaps that may appear between triangle boundaries due to numerical rounding, drawing alignment, or format conversion can be effectively eliminated, ensuring that multiple triangles form a continuous and complete visual outline when stitched together. This avoids breakage or overlap defects in CSS clip-path animation rendering, improving the visual smoothness and geometric integrity of the final animation.

[0053] Step S3: Based on the coordinates of the second vertex, the shape of the triangle, and the stacking hierarchy among multiple triangles, the CSS style code for rendering each triangle is automatically generated by configuring the clip-path and hierarchy attributes; and based on the CSS style code, div nodes are instantiated in sequence and injected with class names and hierarchy to generate the corresponding HTML structure code.

[0054] Furthermore, Figure 2 This is an exemplary flowchart for generating HTML structure code. For example... Figure 2 As shown, step S3 further includes: Step S310: Based on the coordinates of the second vertex, determine the path code of each triangle using the clip-path property in CSS.

[0055] In this embodiment, the coordinates of the three second vertices of each triangle are combined sequentially into a polygon vertex sequence and formatted as a coordinate string that conforms to the clip-path syntax.

[0056] As an example, the vertices (50,0), (0,100), and (100,100) are converted to the CSS code clip-path:polygon(50% 0%, 0% 100%, 100% 100%); thus defining the clipping area and shape boundary of each triangle on the page.

[0057] Among them, polygon() is a basic shape function supported by the clip-path property in CSS, which is used to define a closed polygon clipping region by a series of vertex coordinates.

[0058] Step S320: Based on the stacking hierarchy, determine the stacking priority of each triangle using the z-index property in CSS.

[0059] In this embodiment, the predefined layer value of each triangle in the vector model is directly mapped to the z-index property value in the CSS style, generating code such as z-index: 2, thereby controlling the display layer of the triangle during rendering, with triangles with higher values ​​covering triangles with lower values.

[0060] Step S330: Assign a unique CSS class name to each triangle, and integrate the path code and stacking priority code into the CSS class name to form independent CSS style code for each triangle.

[0061] Step S340: Based on the CSS style code, instantiate div nodes in sequence and inject class names and hierarchies to generate the corresponding HTML structure code.

[0062] In this embodiment, a div element is created for each triangle, and its class attribute is set to the unique CSS class name corresponding to that triangle. At the same time, the positioning context is set according to the hierarchical needs. Finally, all divs are nested or arranged side by side in the same container to form the HTML structure code.

[0063] In this embodiment, the settings of steps S310-S340 not only ensure the accurate restoration of the visual position of each triangle and the correct stacking order, but also provide a lightweight and semantically clear code foundation for the precise control and efficient interpolation of subsequent CSS animation keyframes through the generation of independent CSS class names and structured HTML, thereby significantly reducing development complexity and runtime performance overhead while maintaining the visual effect of the animation.

[0064] Step S4: Perform cross-frame association operation on the triangles contained in the picture frames of the continuous animation state to establish the triangle inheritance relationship between the picture frames of the target animation state and the picture frames of the next animation state.

[0065] Furthermore, Figure 3 This is an example flowchart for animation state matching. For example... Figure 3 As shown, step S4 further includes: Step S410: Use the first vertex of each triangle in the triangle set of the target animation state as a reference point.

[0066] The target animation state refers to the animation state corresponding to the currently being processed frame in the animation timeline sequence.

[0067] The first vertex refers to the first vertex of each triangle arranged in a predetermined order in its vertex coordinate array. Unlike the "first vertex coordinates" in this embodiment, this vertex is selected as the representative position point of the triangle during the matching process to calculate the spatial distance between it and other triangles.

[0068] The agreed-upon order is an order that is set by people based on experience.

[0069] In this embodiment, the first vertex can be extracted as a reference point using the code form "x=item.points[0].x ,y=item.points[0].y".

[0070] Among them, item.points[0] is the first vertex object in the triangle vertex coordinate array, and its x and y attributes represent the horizontal and vertical coordinate values ​​of the vertex, which are used to form a reference point for distance calculation.

[0071] Step S420: Calculate the Euclidean distance between the reference point and the first vertex of each triangle in the triangle set of the next animation state.

[0072] Step S430: Based on Euclidean distance, a greedy algorithm is used to establish a triangular inheritance relationship between the target animation state and the next animation state.

[0073] Inheritance refers to the directional association mapping established between the current target animation state and the next animation state for each triangle.

[0074] During the animation transition, each triangle in the target animation state will correspond to a specific triangle in the next state, and interpolation calculations will be performed based on this correspondence to support the formation of a smooth shape transformation animation.

[0075] In this embodiment, by using vertex coordinates as the basis for inheritance pairing and employing a greedy algorithm for distance minimization matching, the correspondence between triangles in different animation states can be established efficiently and automatically. This ensures that each triangle can find the closest subsequent target when switching states, thus laying a geometric correspondence foundation for achieving smooth shape interpolation animation and effectively avoiding shape jumps or misalignments that may occur during the animation process.

[0076] Furthermore, the greedy algorithm in step S430 includes: Step S431: Select the triangle with the smallest Euclidean distance to the reference point from the triangle set of the next animation state as the matching item.

[0077] In this embodiment, step S431 can be executed using the code form min = next[0].shift() to select the nearest triangle.

[0078] Where next[0] is the first triangle in the array of triangles in the next state that has been sorted in ascending order by Euclidean distance. The .shift() method removes this triangle from the array and returns it, thus realizing the operation of retrieving the nearest item.

[0079] Step S432: Remove the matching item from the triangle set of the next animation state, and record the inheritance relationship between the triangle corresponding to the current reference point and the inherited item, gradually forming a mapping to establish the triangle inheritance relationship between the target animation state and the next animation state.

[0080] The operation of removing the matching item from the triangle set in the next animation state is described in step S431 above.

[0081] In this embodiment, by progressively selecting the nearest triangle and immediately removing it from the candidate pool, the local optimality of the matching process is ensured, effectively avoiding the repeated matching of the same triangle. This results in the construction of a stable and consistent triangle correspondence mapping, providing a reliable structured association foundation for the subsequent generation of smooth and coherent CSS shape transition animations.

[0082] Step S5: Based on the triangle inheritance relationship, for triangles of the same complex object in continuous animation states, generate keyframes rules for each pair of matching triangles, defining the change of their clip-path from the starting second vertex coordinate to the ending second vertex coordinate. And schedule the execution of these rules through the animation property to achieve a smooth transition between continuous animation states of the same complex object.

[0083] The keyframes rule is a CSS keyframe sequence based on linear interpolation that reflects the continuous change of triangle vertex coordinates on the animation timeline.

[0084] As an example, for each pair of triangles with an inheritance relationship, the vertex coordinates corresponding to each keyframe percentage (such as 0%, 25%, 50%, 75%, 100%) are calculated using a linear interpolation formula based on the coordinates of the second vertex in the initial and final states. These coordinate sequences are then converted into path strings that conform to the clip-path: polygon() syntax and finally organized into CSS keyframe code.

[0085] To facilitate smooth transitions between animation scenes of different complex objects, the CSS `transition` property is configured to set the `clip-path` property value of the overall geometric outline during the transition process.

[0086] Furthermore, step S5 also includes: If the number of triangles in the target animation state is different from the number of triangles in the next animation state, perform a quantity supplementation operation for the triangles with fewer triangles.

[0087] If there is a triangle that fails to match in any animation state, it is associated with the end of the reordered triangle set to maintain the integrity of the triangle set data structure.

[0088] In this embodiment, the processor can determine the number of triangles to be added by comparing the number of triangles in the target animation state with the number in the next animation state. Based on the comparison result, a corresponding number of virtual triangles are created for the side with fewer triangles, and the coordinates of their second vertex are uniformly set to a preset value. For example, the preset value is (x: 850, y: 400). The generated virtual triangles are added to the end of the triangle set in sequence to keep the number of triangles in the two states consistent.

[0089] Furthermore, an identifier is added to the virtual triangle in the data structure for identification and appropriate interpolation or fading during subsequent animation processing. The identifier may include: isVirtual: true.

[0090] Step S6: Based on the clip-path change rules defined in Step S5, CSS animation keyframe code is generated through standardized syntax transformation; and the CSS style code, HTML structure code, and CSS animation keyframe code are integrated according to the style-structure-animation association logic to generate a web page file containing animation display and interactive control functions.

[0091] In this embodiment, the generated CSS style code and CSS animation keyframe code are merged and written into the same... <style>标签或外部样式表中；同时，将对应的HTML结构代码嵌入<body>内；最终，在页面脚本中绑定动画触发与交互控制逻辑，形成具备完整动画展示与用户交互能力的单一HTML文件，从而实现复杂对象CSS动画的独立展示与交互操作。

[0092] 其中，动画触发与交互控制逻辑根据动画场景需求与应用交互设计来设置，在此不做限制。例如，其交互设置可以包括自动播放、事件触发、进度控制、状态切换等。以上逻辑可通过内联<script>或引入外部JavaScript文件实现，并与CSS类名、HTML元素事件绑定结合，形成完整的交互式动画体验。

[0093] 在本实施例中，步骤S1-S6通过将复杂的形状变化问题转化为基于几何单元的对应与插值计算问题，从而为后续操作提供结构化、可计算的数据基础；通过顶点微调与三角形智能匹配机制，建立状态间平滑过渡的几何对应关系；最终自动生成轻量、高性能的CSS与HTML代码，实现了从手动调整到自动生成的动画开发方式跨越，有效提升了复杂对象动画的平滑性、运行效率与跨状态切换的自然度。

[0094] 本公开实施例还提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被处理器执行时，能够实现上述一种基于三角剖分的复杂对象CSS动画生成方法的全部步骤。

[0095] 上文已对基本概念做了描述，显然，对于本领域技术人员来说，上述详细披露仅仅作为示例，而并不构成对本说明书的限定。虽然此处并没有明确说明，本领域技术人员可能会对本说明书进行各种修改、改进和修正。该类修改、改进和修正在本说明书中被建议，所以该类修改、改进、修正仍属于本说明书示范实施例的精神和范围。

[0096] 此外，除非权利要求中明确说明，本说明书所述处理元素和序列的顺序、数字字母的使用、或其他名称的使用，并非用于限定本说明书流程和方法的顺序。尽管上述披露中通过各种示例讨论了一些目前认为有用的发明实施例，但应当理解的是，该类细节仅起到说明的目的，附加的权利要求并不仅限于披露的实施例，相反，权利要求旨在覆盖所有符合本说明书实施例实质和范围的修正和等价组合。例如，虽然以上所描述的系统组件可以通过硬件设备实现，但是也可以只通过软件的解决方案得以实现，如在现有的服务器或移动设备上安装所描述的系统。

[0097] 同理，应当注意的是，为了简化本说明书披露的表述，从而帮助对一个或多个发明实施例的理解，前文对本说明书实施例的描述中，有时会将多种特征归并至一个实施例、附图或对其的描述中。但是，这种披露方法并不意味着本说明书对象所需要的特征比权利要求中提及的特征多。实际上，实施例的特征要少于上述披露的单个实施例的全部特征。

[0098] 一些实施例中使用了描述成分、属性数量的数字，应当理解的是，此类用于实施例描述的数字，在一些示例中使用了修饰词"大约”、"近似”或"大体上”来修饰。除非另外说明，"大约”、"近似”或"大体上”表明所述数字允许有±20%的变化。相应地，在一些实施例中，说明书和权利要求中使用的数值参数均为近似值，该近似值根据个别实施例所需特点可以发生改变。在一些实施例中，数值参数应考虑规定的有效数位并采用一般位数保留的方法。尽管本说明书一些实施例中用于确认其范围广度的数值域和参数为近似值，在具体实施例中，此类数值的设定在可行范围内尽可能精确。

[0099] 针对本说明书引用的每个专利、专利申请、专利申请公开物和其他材料，如文章、书籍、说明书、出版物、文档等，特此将其全部内容并入本说明书作为参考。与本说明书内容不一致或产生冲突的申请历史文件除外，对本说明书权利要求最广范围有限制的文件（当前或之后附加于本说明书中的）也除外。需要说明的是，如果本说明书附属材料中的描述、定义、和 / 或术语的使用与本说明书所述内容有不一致或冲突的地方，以本说明书的描述、定义和 / 或术语的使用为准。

[0100] 最后，应当理解的是，本说明书中所述实施例仅用以说明本说明书实施例的原则。其他的变形也可能属于本说明书的范围。因此，作为示例而非限制，本说明书实施例的替代配置可视为与本说明书的教导一致。相应地，本说明书的实施例不仅限于本说明书明确介绍和描述的实施例。< / style>

Claims

1. A method for generating CSS animation of a complex object based on triangulation, characterized in that, The method comprises: S1, abstracting picture frames of a complex object in different animation states into a vector model fitted by multiple triangles, and recording triangle shapes, superimposed hierarchical relationships and first vertex coordinates for constructing the vector model; S2, performing coordinate adjustment on the first vertex coordinates to eliminate gaps at connection places of different triangles, to obtain second vertex coordinates; S3, automatically generating CSS style code for rendering each triangle based on the second vertex coordinates, the triangle shapes and the superimposed hierarchical relationships among the multiple triangles by configuring clip-path paths and hierarchical attributes, and based on the CSS style code, sequentially instantiating div nodes and injecting class names and hierarchies to generate corresponding HTML structure code; S4, performing cross-frame association operations on triangles contained in picture frames in consecutive animation states to establish a triangle inheritance relationship between a picture frame in a target animation state and a picture frame in a next animation state; S5, based on the triangle inheritance relationship, for triangles of the same complex object in consecutive animation states, generating, for each pair of matching triangles, a keyframes rule defining a change of a clip-path path thereof from a starting second vertex coordinate to an ending second vertex coordinate, and scheduling and executing the rule through an animation attribute, to realize smooth transition between consecutive animation states of the same complex object; For animation scene switching of different complex objects, the clip-path attribute value of the overall geometric contour in the switching process is set through the transition attribute of CSS, to realize smooth transition of animation scene switching between different complex objects; S6, based on the clip-path path change rule defined in step S5, generating CSS animation keyframe code through standardized syntax conversion; and integrating the CSS style code, the HTML structure code and the CSS animation keyframe code according to the association logic of style-structure-animation, to generate a web page file containing animation display and interactive control functions.

2. The method of claim 1, wherein, The step S2 further comprises: identifying a vertex with the smallest x-coordinate among all first vertex coordinates of a single triangle, and reducing the x-coordinate value of the vertex by one; identifying a vertex with the largest x-coordinate among all first vertex coordinates of the single triangle, and increasing the x-coordinate value of the vertex by one; identifying a vertex with the smallest y-coordinate among all first vertex coordinates of the single triangle, and reducing the y-coordinate value of the vertex by one; and identifying a vertex with the largest y-coordinate among all first vertex coordinates of the single triangle, and increasing the y-coordinate value of the vertex by one.

3. The method of claim 2, wherein, The step S3 further comprises: S310, determining path code of each triangle through the clip-path attribute in CSS based on the second vertex coordinates; S320, determining superimposed priority code of each triangle through the z-index attribute in CSS based on the superimposed hierarchical relationships; S330, assigning a unique CSS class name to each triangle, and integrating the path code and the superimposed priority code into the CSS class name, to form independent CSS style code of each triangle. S340, based on the CSS style code, sequentially instantiating the div node and injecting the class name and hierarchy to generate corresponding HTML structure code.

4. The method of claim 3, wherein, The step S4 further comprises: S410, taking the first vertex of each triangle in the triangle set of the target animation state as a reference point; S420, calculating the Euclidean distance between the reference point and the first vertex of each triangle in the triangle set of the next animation state; S430, based on the Euclidean distance, establishing the triangle inheritance relationship between the target animation state and the next animation state by using a greedy algorithm.

5. The method of claim 4, wherein, The greedy algorithm in the step S430 comprises: S431, selecting the triangle with the smallest Euclidean distance value from the triangle set of the next animation state as a matching item; S432, removing the matching item from the triangle set of the next animation state, recording the inheritance relationship between the triangle corresponding to the current reference point and the inheritance item, and gradually forming a mapping to establish the triangle inheritance relationship between the target animation state and the next animation state.

6. The method of claim 5, wherein, The step S5 further comprises: If the number of triangle sets of the target animation state and the next animation state is inconsistent, performing a number complement operation on the triangle set with smaller number; If there is any triangle that is not successfully matched in any animation state, associating it to the end of the reordered triangle set to maintain the integrity of the triangle set data structure.

7. The method of claim 1, wherein, The vector model abstracted by the picture frames of the complex object in different animation states, the fitting geometric shape further comprises a quadrilateral and a mixed shape of a triangle and a quadrilateral.

Images