Webpage animation processing method, device, equipment, storage medium and program product

Abstract

Embodiments of the present disclosure provide a webpage animation processing method and device, equipment, a storage medium and a program product, which are related to the field of webpage animation processing, and the application scenarios include but are not limited to webpage animation processing scenarios. The method comprises the following steps: obtaining a cascading style sheet variable set of a root component of a target webpage, a cascading style sheet attribute of a target sub-component corresponding to the root component, and a target animation instance corresponding to the root component; determining an initial attribute value corresponding to the cascading style sheet attribute of the target sub-component based on the cascading style sheet variable set, the initial attribute value being used to represent an initial style of the target sub-component; determining a target attribute value corresponding to the cascading style sheet attribute of the target sub-component based on at least one cascading style sheet variable in the target animation instance, the target attribute value being used to represent a target style of the target sub-component; and displaying a webpage animation corresponding to the target sub-component based on the initial attribute value and the target attribute value.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a web page animation processing method, apparatus, device, storage medium, and program product. Background Technology

[0002] In existing technologies, web page animations of DOM (Document Object Model) elements can be implemented using CSS3 transitions and animations, and DOM element animations can also be implemented using JavaScript (JS, a scripting programming language). For example, in web page animation scenarios, the child components corresponding to the root component of the web page are DOM elements. Using these child components as animation targets, existing technologies cannot find or may lose the animation target for events such as unloading, hiding, or repainting DOM elements, thus preventing the web page animation from executing. In other words, the execution efficiency of web page animations is low. Summary of the Invention

[0003] This disclosure addresses the shortcomings of existing methods by proposing a web page animation processing method, apparatus, device, computer-readable storage medium, and computer program product to solve the problem of how to improve the execution efficiency of web page animations.

[0004] Firstly, this disclosure provides a method for processing web page animations, including: Get the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial property value corresponding to each CSS variable. Each CSS variable is used to represent a custom property. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. Based on the Cascading Style Sheet (CSS) variable set, determine the initial property values ​​corresponding to the CSS properties of the target child component. The initial property values ​​are used to characterize the initial style of the target child component. Based on at least one Cascading Style Sheet variable in the target animation instance, determine the target property value corresponding to the Cascading Style Sheet property of the target sub-component. The target property value is used to characterize the target style of the target sub-component. Based on the initial and target attribute values, the web page animation corresponding to the target sub-component is displayed. The web page animation is the process of the target sub-component changing from the initial style to the target style.

[0005] In one embodiment, obtaining the Cascading Style Sheet (CSS) variable set of the root component of the target webpage includes: Obtain multiple Cascading Style Sheet (CSS) variables of the root component of the target webpage, as well as the initial property value corresponding to each CSS variable, and determine the multiple CSS variables and their corresponding initial property values ​​as a CSS variable set.

[0006] In one embodiment, retrieving the cascading style sheet properties of the target child component corresponding to the root component includes: Get the Cascading Style Sheet properties of the target child component and the target function corresponding to the Cascading Style Sheet properties of the target child component; The target sub-component is either an interactive component or a data component. For interactive components, the Cascading Style Sheet (CSS) properties of the interactive component and the target function corresponding to the CSS properties of the interactive component are obtained when preset conditions are met. The target function is used by the target sub-component to reference the initial property value corresponding to at least one CSS variable.

[0007] In one embodiment, before displaying the webpage animation corresponding to the target subcomponent, the method further includes: Based on the initial property values ​​corresponding to the Cascading Style Sheet properties of the target subcomponent and at least one Cascading Style Sheet variable referenced by the target function, the target subcomponent with the initial style will be displayed on the target webpage.

[0008] In one embodiment, determining the initial property values ​​of the Cascading Style Sheets (CSS) properties of the target child component based on the CSS variable set includes: The target child component references the initial property value corresponding to at least one Cascading Style Sheet variable in the Cascading Style Sheet variable set through the target function, and determines the referenced initial property value as the initial property value corresponding to the Cascading Style Sheet property of the target child component.

[0009] In one embodiment, determining the target property value corresponding to the Cascading Style Sheet (CSS) property of the target child component based on at least one CSS variable in the target animation instance includes: The target child component references the target property value corresponding to at least one Cascading Style Sheet variable in the target animation instance through the target function, and the referenced target property value is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component. In the target animation instance, the root component is set as the animation execution target.

[0010] In one embodiment, prior to obtaining the target animation instance, the method further includes: Set the root component as the animation target; For the animation execution target, construct the target animation instance corresponding to the root component. The target animation instance includes the interface for animation creation corresponding to the root component. The interface includes multiple animation properties, the property value corresponding to each animation property, and the Cascading Style Sheet (CSS) variable passing function. The CSS variable passing function includes at least one CSS variable and the target property value corresponding to at least one CSS variable. The CSS variable passing function is used to set the target property value corresponding to at least one CSS variable.

[0011] In one embodiment, based on initial attribute values ​​and target attribute values, the webpage animation corresponding to the target sub-component is displayed, including: Based on the animation execution method, initial attribute value, and target attribute value represented by the attribute values ​​of each animation attribute in multiple animation properties, the web page animation corresponding to the target sub-component is displayed.

[0012] Secondly, this disclosure provides a web page animation processing apparatus, including: The first processing module is used to obtain the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial property value corresponding to each CSS variable. Each CSS variable is used to represent a custom property. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. The second processing module is used to determine the initial property values ​​corresponding to the Cascading Style Sheet (CSS) properties of the target sub-component based on the CSS variable set. The initial property values ​​are used to characterize the initial style of the target sub-component. The third processing module is used to determine the target attribute value corresponding to the Cascading Style Sheet property of the target sub-component based on at least one Cascading Style Sheet variable in the target animation instance. The target attribute value is used to characterize the target style of the target sub-component. The fourth processing module is used to display the web page animation corresponding to the target sub-component based on the initial attribute value and the target attribute value. The web page animation is the process of the target sub-component changing from the initial style to the target style.

[0013] Thirdly, this disclosure provides an electronic device, including: a processor, a memory, and a bus; A bus is used to connect the processor and memory; Memory, used to store operation instructions; A processor is used to execute the web page animation processing method of the first aspect of this disclosure by invoking operation instructions.

[0014] Fourthly, this disclosure provides a computer-readable storage medium storing a computer program that is used to execute the web page animation processing method of the first aspect of this disclosure.

[0015] Fifthly, this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the web page animation processing method in the first aspect of this disclosure.

[0016] The technical solutions provided in this disclosure have at least the following beneficial effects: The process involves retrieving the Cascading Style Sheets (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and their initial property values. Each CSS variable represents a custom property, and the target child component's CSS properties correspond to at least one CSS variable in the CSS variable set. Based on the CSS variable set, the initial property values ​​corresponding to the target child component's CSS properties are determined, representing the initial style of the target child component. Finally, based on at least one CSS variable in the target animation instance, the target property values ​​corresponding to the target child component's CSS properties are determined. The target attribute value is used to characterize the target style of the target child component. Based on the initial attribute value and the target attribute value, the web page animation corresponding to the target child component is displayed. The web page animation is the process of the target child component changing from the initial style to the target style. In this way, by attaching the Cascading Style Sheet (CSS) variable to the root component and matching the CSS properties of the target child component with the corresponding CSS variable, the root component is used as the animation execution target (animation target), instead of the target child component. This solves the problem in the existing technology that the animation target (child component, i.e., DOM element) cannot be found or is lost due to certain situations (such as the unloading, hiding, and repainting of DOM elements), thus improving the execution efficiency of web page animations. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the embodiments of this disclosure, the accompanying drawings used in the description of the embodiments of this disclosure will be briefly introduced below.

[0018] Figure 1 This is a diagram illustrating webpage animation processing. Figure 2 This is a diagram illustrating webpage animation processing. Figure 3 This is a schematic diagram of the architecture of the web page animation processing system provided in the embodiments of this disclosure; Figure 4A schematic flowchart illustrating a web page animation processing method provided in this embodiment of the disclosure; Figure 5 A schematic diagram illustrating webpage animation processing provided in this embodiment of the disclosure; Figure 6 A schematic diagram illustrating webpage animation processing provided in this embodiment of the disclosure; Figure 7 A schematic diagram illustrating webpage animation processing provided in this embodiment of the disclosure; Figure 8 A schematic flowchart illustrating a web page animation processing method provided in this embodiment of the disclosure; Figure 9 This is a schematic diagram of the structure of a web page animation processing device provided in an embodiment of the present disclosure; Figure 10 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0019] The embodiments of this disclosure are described below with reference to the accompanying drawings. It should be understood that the embodiments described below with reference to the accompanying drawings are exemplary descriptions for explaining the technical solutions of the embodiments of this disclosure, and do not constitute a limitation on the technical solutions of the embodiments of this disclosure.

[0020] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the terms “comprising” and “including” as used in embodiments of this disclosure mean that the corresponding feature can be implemented as the presented feature, information, data, step, operation, element, and / or component, but do not exclude implementation as other features, information, data, step, operation, element, component, and / or combinations thereof supported by the art. It should be understood that when we say that an element is “connected” or “coupled” to another element, the one element can be directly connected or coupled to the other element, or it can mean that the one element and the other element are connected through an intermediate element. Furthermore, “connected” or “coupled” as used herein can include wireless connection or wireless coupling. The term “and / or” as used herein indicates at least one of the items defined by the term; for example, “A and / or B” indicates implementation as “A,” or implementation as “B,” or implementation as “A and B.”

[0021] It is understood that in the specific embodiments of this disclosure, data related to web page animation processing is involved. When the above embodiments of this disclosure are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0022] To make the objectives, technical solutions, and advantages of this disclosure clearer, the embodiments of this disclosure will be described in further detail below with reference to the accompanying drawings.

[0023] This disclosure provides a web animation processing method for a web animation processing system, which relates to the fields of web animation processing.

[0024] To better understand and explain the solutions of the embodiments of this disclosure, some technical terms involved in the embodiments of this disclosure will be briefly explained below.

[0025] CSS (Cascading Style Sheets) is a computer language used to style HTML (HyperText Markup Language) or XML (Extensible Markup Language) documents. CSS can not only statically style web pages, but also dynamically format various elements of a web page in conjunction with various scripting languages. CSS can precisely control the layout of elements on a web page at the pixel level, supports almost all font sizes and styles, and has the ability to edit the styles of web page objects and models.

[0026] CSS properties: CSS properties are specific functions in the CSS language used to control page layout and style, such as color and font-size.

[0027] CSS Variables: A CSS variable is a custom property, and a custom property is also a CSS property. CSS variables can create values ​​that can be reused throughout the entire CSS file. CSS variables can be used to adjust themes, simplify stylesheet management, and create flexible designs. CSS variables are defined using `:root` or any other selector. The property name begins with two hyphens (--), for example, `--main-color:#000000`, where `--main-color` represents the CSS variable, and `#000000` represents the value of the CSS variable, i.e., the CSS property value. CSS variables can be reused throughout the document. The value of a CSS variable can be obtained using the `var()` function. For example, `color:var(--main-color)`, which is equivalent to `color:#000000`, where `color` represents the CSS property, and `#000000` represents the CSS property value.

[0028] GSAP: GSAP (GreenSock Animation Platform) is a JavaScript animation library used to create high-performance, easy-to-use animations. GSAP provides a powerful way to control the animation of HTML and JavaScript elements. GSAP supports various animation types, including position movement, scaling, rotation, and transparency changes, and provides a rich API (Application Programming Interface) and tools. GSAP is widely used to create high-performance animations that are cross-browser and cross-platform.

[0029] DOM: The DOM provides a structured description of a document and connects HTML pages with scripts and programming languages.

[0030] DOM elements: DOM elements are nodes in an HTML or XML document. DOM elements can be the root node, element nodes, text nodes, comment nodes, etc. In an HTML page, DOM elements represent tags, such as... 、 、 wait.

[0031] React: React is a JavaScript library for building user interfaces, primarily used for building single-page applications.

[0032] Vue: Vue is a progressive JavaScript framework designed to simplify the development process by adopting a model-view-view model architecture.

[0033] In existing technologies, during the development of component-based modern front-end frameworks such as React or Vue, the internal business logic of components is complex and includes additional interactive behaviors. On the browser page, user actions and data changes will cause DOM elements to be regenerated. For example, destroying and regenerating DOM elements that have already generated animations will cause the animations to fail. Another example is that when optimizing the rendering pressure of a large number of lists on the page, using lists optimized with virtual scrolling will result in frequent and large-scale destruction and regeneration of DOM elements, which will also cause animations to fail.

[0034] gsap.js is a front-end animation application library. gsap.js animates DOM elements by continuously calculating and updating their properties after obtaining them. In normal use, it can meet most application scenarios. However, in some scenarios, such as when the component composition is complex and has interactive elements such as showing and hiding, or when the DOM element is redrawn when the component data changes, web page animations will not be able to be executed.

[0035] For example, such as Figure 1 As shown, root component A corresponds to two child components: interactive component B and data component C. Interactive component B's Cascading Style Sheet (CSS) property is `background-color`, and its corresponding CSS property value is `red`, i.e., `background-color: red`. Data component C's Cascading Style Sheet (CSS) property is `border-color`, and its corresponding CSS property value is `red`, i.e., `border-color: red`. Data component C's Cascading Style Sheet (CSS) property is `border-width`, and its corresponding CSS property value is `1px`, i.e., `border-width: 1px`. All of these CSS property values ​​are initial CSS property values. For example, as... Figure 2 As shown, the root component A corresponds to two child components, namely the interactive component B and the data component C. The gsap.js instance includes background-color: white, border-color: white, and border-width: 5px. The CSS property value (target property value) of the Cascading Style Sheet property background-color of the interactive component B is white. The CSS property value (target property value) of the Cascading Style Sheet property border-color of the data component C is white. The CSS property value (target property value) of the Cascading Style Sheet property border-width of the data component C is 5px. Figure 1 and Figure 2 The child component is used as the animation execution target. When the gsap.js instance executes the animation, the animation execution target needs to exist. If the animation execution target is not rendered in the page, the animation execution target cannot be found and the animation cannot be executed. Figure 1 and Figure 2 The code uses a child component as the animation target. When the data changes, the child component is regenerated. It appears unchanged on the page, but in reality, the child component has changed. This causes the gsap.js instance to lose its animation target, resulting in the newly generated child component having no animation effect, i.e., it cannot execute the animation. The animation executes the CSS properties of the child component (interactive component B or data component C). Since the child component has changed, the previous animation behavior of the gsap.js instance loses its original target, causing the new child component to not execute the original animation.

[0036] Based on this, the present disclosure provides a web page animation processing method, apparatus, device, computer-readable storage medium, and program product, and the specific technical solutions will be described in detail below.

[0037] The solutions provided in this disclosure relate to web page animation processing technology. The technical solutions of this disclosure are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of this disclosure will now be described with reference to the accompanying drawings.

[0038] To better understand the solution provided in this disclosure, the solution will be described below in conjunction with a specific application scenario.

[0039] In one embodiment, Figure 3 The diagram shows an architecture schematic of a web page animation processing system applicable to embodiments of this disclosure. It is understood that the web page animation processing method provided in these embodiments can be applied to, but is not limited to, applications such as... Figure 3 In the application scenarios shown.

[0040] In this example, as Figure 3 As shown, the architecture of the web page animation processing system in this example may include, but is not limited to, server 10, terminal 20, and database 30. Server 10, terminal 20, and database 30 can interact with each other via network 40.

[0041] Server 10 obtains the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and an initial property value corresponding to each CSS variable. Each CSS variable represents a custom property. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. Based on the CSS variable set, Server 10 determines the initial property value corresponding to the CSS property of the target child component. The initial property value represents the initial style of the target child component. Based on at least one CSS variable in the target animation instance, Server 10 determines the target property value corresponding to the CSS property of the target child component. The target property value represents the target style of the target child component. Based on the initial property value and the target property value, Server 10 displays the webpage animation corresponding to the target child component through Terminal 20. The webpage animation is the process of the target child component changing from the initial style to the target style. Server 10 retrieves the target animation instance corresponding to the root component from database 30, such as an animation library, and the animation library such as GSAP.

[0042] It is understood that the above is only one example, and this embodiment is not limited here.

[0043] Terminals include, but are not limited to, smartphones (such as Android phones, iOS phones, etc.), mobile phone emulators, tablets, laptops, digital broadcast receivers, MIDs (Mobile Internet Devices), PDAs (Personal Digital Assistants), smart voice interaction devices, smart home appliances, and in-vehicle terminals.

[0044] A server can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server or server cluster that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0045] The aforementioned networks may include, but are not limited to, wired networks and wireless networks. Wired networks include local area networks (LANs), metropolitan area networks (MANs), and wide area networks (WANs). Wireless networks include Bluetooth, Wi-Fi, and other networks that enable wireless communication. Specific details can be determined based on actual application scenario requirements and are not limited here.

[0046] See Figure 4 , Figure 4 This diagram illustrates a flowchart of a webpage animation processing method provided by an embodiment of this disclosure. This method can be executed by any electronic device, such as a server. As an optional implementation, the method can be executed by a server. For ease of description, the following description of some optional embodiments will use server execution as an example. Figure 4 As shown, the web page animation processing method provided in this embodiment includes the following steps: S201, obtain the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial property value corresponding to each CSS variable. Each CSS variable is used to represent a custom property. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set.

[0047] Specifically, both the root component and the target child components are Document Object Model (DOM) elements of the target webpage. The root component holds a collection of Cascading Style Sheets (CSS) variables. For example, the root component could be a dog, and the target child components could be the dog's tail, fur, and ears. Similarly, the root component could be a cat with a Chinese bell, and the target child components could be the cat's tail, fur, and ears.

[0048] For example, for a table component, you can animate the border color using `--table-border-color` and the border width using `--table-border-width`. Both `--table-border-color` and `--table-border-width` represent Cascading Style Sheet (CSS) variables. When encapsulating the component, all colors that need to be controlled are defined as CSS variables (e.g., `--table-border-color`), and then referenced to the corresponding CSS properties (e.g., `border-color:var(--table-border-color)`, where `border-color` represents a CSS property). The CSS variables (e.g., `--table-border-color`, `--table-border-width`, etc.) are declared on the root element of the table component. The root element of the table component is the root component; all child components corresponding to the root component (e.g., the target child component) can correctly find and reference the CSS variables.

[0049] For example, the application of CSS variables is shown below: :root{ --main-bg-color:#f0f0f0; / / Define a global color variable to control the background color. --main-text-color:#333333; / / Define a global color variable to control the font color. } body{ background-color:var(--main-bg-color); / / Background color of page element, imported as a global variable. color:var(--main-text-color); / / Page element, font color is imported as a global variable (style variable property color: property value var(--main-text-color)=#333333) font-size: 16px; / / Font size } h1{ `color:var(--main-text-color);` / / Heading element, font color is imported as a global variable. font-size:2em; / / Font size } It should be noted that `--main-bg-color` represents a CSS variable, and `#f0f0f0` represents the value of `--main-bg-color`, i.e., the CSS property value of `--main-bg-color`; `--main-text-color` represents a CSS variable, and `#333333` represents the value of `--main-text-color`, i.e., the CSS property value of `--main-text-color`; `background-color` represents a CSS property, and `var(--main-bg-color)` represents the property value of `background-color`, i.e., the property value of `background-color` is `var(--main-text-color)=#f0f0f0`; `color` represents a CSS property, and `var(--main-text-color)` represents the property value of `color`, i.e., the property value of `color` is `var(--main-text-color)=#333333`; `font-size` represents a CSS property, and `2em` represents the property value of `font-size`; the `var()` function is used to insert the value of the CSS variable.

[0050] For example, retrieve the target animation instance corresponding to the root component from the animation library GSAP, such as the gsap.js instance.

[0051] For example, such as Figure 5 As shown, the root component (root element) has a Cascading Style Sheets (CSS) variable set attached. This set includes three CSS variables: `--table-background-color`, `--table-border-color`, and `--table-border-width`. The target child components corresponding to the root component are child component A (component element A) and child component B (component element B). Child component A's CSS properties correspond to one CSS variable in the CSS variable set: `--table-background-color`. This means child component A uses `--table-background-color` through the target function `var()`. Child component B's CSS properties correspond to two CSS variables in the CSS variable set: `--table-border-color` and `--table-border-width`. This means child component B uses `--table-border-color` and `--table-border-width` through the target function `var()`.

[0052] S202, based on the Cascading Style Sheet (CSS) variable set, determine the initial property values ​​corresponding to the CSS properties of the target sub-component. The initial property values ​​are used to characterize the initial style of the target sub-component.

[0053] Specifically, for example, the target child component references the initial property value corresponding to the Cascading Style Sheet variable in the Cascading Style Sheet variable collection through the target function var(), and determines the referenced initial property value as the initial property value corresponding to the Cascading Style Sheet property of the target child component.

[0054] Target sub-components include interactive components and data components; interactive components embody interactive behaviors, such as a bell, which flashes when the user clicks on it; data components include a cat's tail, cat's fur, and cat's ears.

[0055] For example, if the target child component's Cascading Style Sheet (CSS) property is background-color, and the initial property value of the target child component's background-color property is red, then the initial property value red indicates that the background color of the target child component is red, meaning that the initial style of the target child component is the background color red.

[0056] S203, based on at least one Cascading Style Sheet variable in the target animation instance, determine the target attribute value corresponding to the Cascading Style Sheet property of the target sub-component. The target attribute value is used to characterize the target style of the target sub-component.

[0057] Specifically, for example, the target child component references the target property value corresponding to the Cascading Style Sheet variable in the target animation instance through the target function var(), and the referenced target property value is determined to be the target property value corresponding to the Cascading Style Sheet property of the target child component. For example, if the target child component's Cascading Style Sheet (CSS) property is background-color, and the target property value corresponding to the target child component's background-color is white, then the target property value white indicates that the background color of the target child component is white, meaning that the target style of the target child component is the background color white.

[0058] S204, based on the initial attribute value and the target attribute value, displays the web page animation corresponding to the target sub-component. The web page animation is the process of the target sub-component changing from the initial style to the target style.

[0059] Specifically, for example, the Cascading Style Sheet (CSS) property of the target child component is `background-color`, and the initial property value of the `background-color` property is `red`. The initial property value `red` indicates that the background color of the target child component is red, that is, the initial style of the target child component is the background color red. The target property value of the `background-color` property is `white`, and the target property value `white` indicates that the background color of the target child component is white, that is, the target style of the target child component is the background color white. Based on the initial property value `red` and the target property value `white`, the web page animation corresponding to the target child component is displayed, and the web page animation is the process of the target child component changing from a background color of red to a background color of white.

[0060] For example, the target sub-component is a Chinese bell, which gradually changes from red to white. Another example is a cat's tail, which gradually changes from short to long.

[0061] In this embodiment, the following steps are taken: The Cascading Style Sheet (CSS) variable set of the root component of the target webpage is obtained; the CSS properties of the target child component corresponding to the root component are obtained; and the target animation instance corresponding to the root component is obtained. The CSS variable set includes multiple CSS variables and an initial attribute value corresponding to each CSS variable. Each CSS variable is used to represent a custom attribute. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. Based on the CSS variable set, the initial attribute value corresponding to the CSS property of the target child component is determined. The initial attribute value is used to represent the initial style of the target child component. Based on at least one CSS variable in the target animation instance, the target animation instance corresponding to the CSS property of the target child component is determined. The target attribute value is used to characterize the target style of the target child component. Based on the initial attribute value and the target attribute value, the web page animation corresponding to the target child component is displayed. The web page animation is the process of the target child component changing from the initial style to the target style. In this way, by attaching the Cascading Style Sheet (CSS) variable to the root component and matching the CSS properties of the target child component with the corresponding CSS variable, the root component is used as the animation execution target (animation target), instead of the target child component. This solves the problem in the existing technology where the animation target (child component, i.e., DOM element) cannot be found or is lost due to certain situations (such as unloading, hiding, repainting, etc. of DOM elements), thus improving the execution efficiency of web page animations.

[0062] In one embodiment, obtaining the Cascading Style Sheet (CSS) variable set of the root component of the target webpage includes: Obtain multiple Cascading Style Sheet (CSS) variables of the root component of the target webpage, as well as the initial property value corresponding to each CSS variable, and determine the multiple CSS variables and their corresponding initial property values ​​as a CSS variable set.

[0063] Specifically, for example, such as Figure 6 As shown, multiple Cascading Style Sheet (CSS) variables of the root component A of the target webpage are obtained, along with the initial property value of each CSS variable. The multiple CSS variables are `--table-border-color`, `--table-border-width`, and `--table-background-color`. The initial property value of `--table-border-color` is `red`, i.e., `--table-border-color: red`. The initial property value of `--table-border-width` is `1px`, i.e., `--table-border-width: 1px`. The initial property value of `--table-background-color` is `red`, i.e., `--table-background-color: red`. These multiple CSS variables and their initial property values ​​are defined as a set of CSS variables, i.e., the set of CSS variables includes `--table-border-color: red`, `--table-border-width: 1px`, and `--table-background-color: red`.

[0064] It should be noted that, for example, such as Figure 6 As shown, the Cascading Style Sheet (CSS) variables (--table-border-color, --table-border-width, and --table-background-color) are mounted on the root component A, and the CSS properties of the two target child components (interactive component B and data component C) are mapped to the CSS variables, namely background-color: var(--table-background-color), border-color: var(--table-border-color), and border-width: var(--table-border-width). This allows the root component to be used as the animation target, rather than the target child components. In this way, the problem in the existing technology that the animation target cannot be found (the target child component is used as the animation target) or the animation target is lost in certain situations (such as the target child component being unloaded, hidden, or repainted), thus improving the execution efficiency of web page animations.

[0065] In one embodiment, retrieving the cascading style sheet properties of the target child component corresponding to the root component includes: Get the Cascading Style Sheet properties of the target child component and the target function corresponding to the Cascading Style Sheet properties of the target child component; The target sub-component is either an interactive component or a data component. For interactive components, the Cascading Style Sheet (CSS) properties of the interactive component and the target function corresponding to the CSS properties of the interactive component are obtained when preset conditions are met. The target function is used by the target sub-component to reference the initial property value corresponding to at least one CSS variable.

[0066] Specifically, for example, such as Figure 6 As shown, the root component A corresponds to two target sub-components, namely the interaction component B and the data component C.

[0067] For example, such as Figure 6 As shown, for interactive component B, when a preset condition (condition item) is met, the interactive component is obtained. For example, the preset condition is that interactive component B appears at 12 o'clock. When the time is 12 o'clock, the preset condition is met, the preset condition is set to success, and interactive component B is generated. The Cascading Style Sheet (CSS) property of interactive component B and the target function corresponding to the CSS property of interactive component B are obtained. The CSS property of interactive component B is background-color, and the target function corresponding to the CSS property of interactive component B is var(--table-background-color), that is, background-color: var(--table-background-color). The target function var(--table-background-color) is used by interactive component B to reference the initial property value corresponding to the CSS variable --table-background-color. When the time is not 12 o'clock, the preset condition is not met, the preset condition is set to failure, and interactive component B is not generated or is destroyed. Interactive component B is, for example, a Chinese bell.

[0068] For example, such as Figure 6 As shown, for data component C, data component C is generated, and the Cascading Style Sheet (CSS) properties and their corresponding target functions for data component C are obtained. The two CSS properties of data component C are `border-color` and `border-width`. The target function for the CSS property `border-color` is `var(--table-border-color)`, i.e., `border-color: var(--table-border-color)`. The target function `var(--table-border-color)` is used by data component C to reference the initial property value corresponding to the CSS variable `--table-border-color`. The target function for the CSS property `border-width` is... The function is var(--table-border-width), meaning border-width: var(--table-border-width). The target function var(--table-border-width) is used by data component C to reference the initial property value corresponding to the Cascading Style Sheet variable --table-border-width; to display data, for example, to display data component C with the initial style on the target webpage; data component C, for example, a cat's tail of type A, changes the data, for example, changing the cat's tail of type A to a tail of type B; component destruction, that is, destroying data component C, for example, destroying the cat's tail of type A; regenerating the component, that is, based on the new data (for example, a tail of type B), regenerating a new data component C, the new data component C being the cat's tail of type B.

[0069] It should be noted that, for example, such as Figure 6 As shown, the Cascading Style Sheet (CSS) variables (--table-border-color, --table-border-width, and --table-background-color) are attached to the root component A, and the CSS properties of the two target child components (interactive component B and data component C) are mapped to the CSS variables, i.e., background-color: var(--table-background-color), border-color: var(--table-border-color), and border-width: var(--table-border-width). This achieves the goal of using the root component as the animation target, rather than the target child components. During the webpage animation execution, even if the interactive component B changes, the animation target remains the same. The root component (CSS properties, i.e., CSS variables on root component A) and interactive component B only use CSS variables. The webpage animation corresponding to interactive component B is not its own CSS property. Therefore, no matter what changes occur to interactive component B itself, it will not affect the execution of the webpage animation. During the execution of the webpage animation, even if data component C changes, the animation execution target is the root component (CSS properties, i.e., CSS variables on root component A). Data component C only uses CSS variables, and the webpage animation corresponding to data component C is not its own CSS property. Therefore, no matter what changes occur to data component C itself, it will not affect the execution of the webpage animation. In this way, the problem that the animation execution target cannot be found (using the target child component as the animation execution target) or the animation execution target is lost in the existing technology due to certain situations (such as the unloading, hiding, repainting, etc. of the target child component), thus preventing the execution of webpage animations, is improved.

[0070] In one embodiment, before displaying the webpage animation corresponding to the target subcomponent, the method further includes: Based on the initial property values ​​corresponding to the Cascading Style Sheet properties of the target subcomponent and at least one Cascading Style Sheet variable referenced by the target function, the target subcomponent with the initial style will be displayed on the target webpage.

[0071] Specifically, for example, such as Figure 6 and Figure 7 As shown, the root component A corresponds to two target sub-components, namely the interaction component B and the data component C.

[0072] For example, such as Figure 6 and Figure 7 As shown, for interactive component B, if the preset conditions are met, the preset conditions are set to success, and interactive component B is generated. This involves obtaining the Cascading Style Sheet (CSS) property of interactive component B and the target function corresponding to the CSS property. The CSS property of interactive component B is `background-color`, and the target function corresponding to the CSS property is `var(--table-background-color)`, i.e., `background-color : var(--table-background-color)`. The target function `var(--table-background-color)` is used by interactive component B to reference the initial property value corresponding to the CSS variable `--table-background-color`. Based on the CSS property `background-color` of interactive component B and the initial property value `var(--table-background-color)` referenced by the target function, interactive component B with the initial style is displayed on the target webpage.

[0073] For example, such as Figure 6 and Figure 7 As shown, for data component C, data component C is generated, and the Cascading Style Sheet (CSS) properties and their corresponding target functions for data component C are obtained. The two CSS properties of data component C are `border-color` and `border-width`. The target function for the CSS property `border-color` is `var(--table-border-color)`, i.e., `border-color: var(--table-border-color)`. The target function `var(--table-border-color)` is used by data component C to reference the initial property value corresponding to the CSS variable `--table-border-color`. The target function for the CSS property `border-width` is `var(-...`. -table-border-width), that is, border-width: var(--table-border-width), the target function var(--table-border-width) is used to reference the initial property value corresponding to the Cascading Style Sheet variable --table-border-width of data component C; based on the Cascading Style Sheet property border-color of data component C and the initial property value corresponding to the Cascading Style Sheet variable referenced by the target function var(--table-border-color), as well as the Cascading Style Sheet property border-width of data component C and the initial property value corresponding to the Cascading Style Sheet variable referenced by the target function var(--table-border-width), the data component C with the initial style will be displayed on the target webpage.

[0074] In one embodiment, determining the initial property values ​​of the Cascading Style Sheets (CSS) properties of the target child component based on the CSS variable set includes: The target child component references the initial property value corresponding to at least one Cascading Style Sheet variable in the Cascading Style Sheet variable set through the target function, and determines the referenced initial property value as the initial property value corresponding to the Cascading Style Sheet property of the target child component.

[0075] Specifically, for example, such as Figure 6 As shown, the root component A corresponds to two target sub-components, namely the interaction component B and the data component C.

[0076] For example, such as Figure 6 As shown, for interactive component B, when a preset condition is met, the interactive component is obtained. For example, the preset condition is that interactive component B appears at 12 o'clock. When the time is 12 o'clock, the preset condition is met, the preset condition is set to success, and interactive component B is generated. The Cascading Style Sheet (CSS) property of interactive component B and the target function corresponding to the CSS property of interactive component B are obtained. The CSS property of interactive component B is background-color, and the target function corresponding to the CSS property of interactive component B is var(--table-background-color), that is, background-color: var(--table-background-color). The target function var(--table-background-color) is used by interactive component B to reference the initial property value corresponding to the CSS variable --table-background-color. The interactive component B references the initial property value red corresponding to the CSS variable --table-background-color through the target function var(--table-background-color), and determines the referenced initial property value red as the initial property value corresponding to the CSS property background-color of interactive component B.

[0077] For example, such as Figure 6 As shown, for data component C, data component C is generated, and the Cascading Style Sheet (CSS) properties and their corresponding target functions for data component C are obtained. The two CSS properties of data component C are `border-color` and `border-width`. The target function for the CSS property `border-color` is `var(--table-border-color)`, meaning `border-color : var(--table-border-color)`. The target function `var(--table-border-color)` is used by data component C to reference the initial property value corresponding to the CSS variable `--table-border-color`. The target function for the CSS property `border-width` is `var(--table-border-width)`, meaning `border-width : var(--table-border-color)`. The `var(--table-border-width)` function is used to reference the initial property value of the Cascading Style Sheet variable `--table-border-width` in data component C. The `var(--table-border-color)` function references the initial property value `red` of the Cascading Style Sheet variable `--table-border-color` in data component C, and sets the referenced initial property value `red` as the initial property value of the Cascading Style Sheet property `border-color` in data component C. Finally, the `var(--table-border-width)` function references the initial property value `1px` of the Cascading Style Sheet variable `--table-border-width` in data component C, and sets the referenced initial property value `1px` as the initial property value of the Cascading Style Sheet property `border-width` in data component C.

[0078] It should be noted that, for example, such as Figure 6 As shown, the Cascading Style Sheet (CSS) variables (--table-border-color, --table-border-width, and --table-background-color) are attached to the root component A, and the CSS properties of the two target child components (interactive component B and data component C) are mapped to the CSS variables, i.e., background-color: var(--table-background-color), border-color: var(--table-border-color), and border-width: var(--table-border-width). This achieves the goal of using the root component as the animation target, rather than the target child components. During the webpage animation execution, even if the interactive component B changes, the animation target remains the same. The root component (CSS properties, i.e., CSS variables on root component A) and interactive component B only use CSS variables. The webpage animation corresponding to interactive component B is not its own CSS property. Therefore, no matter what changes occur to interactive component B itself, it will not affect the execution of the webpage animation. During the execution of the webpage animation, even if data component C changes, the animation execution target is the root component (CSS properties, i.e., CSS variables on root component A). Data component C only uses CSS variables, and the webpage animation corresponding to data component C is not its own CSS property. Therefore, no matter what changes occur to data component C itself, it will not affect the execution of the webpage animation. In this way, the problem that the animation execution target cannot be found (using the target child component as the animation execution target) or the animation execution target is lost in the existing technology due to certain situations (such as the unloading, hiding, repainting, etc. of the target child component), thus preventing the execution of webpage animations, is improved.

[0079] In one embodiment, determining the target property value corresponding to the Cascading Style Sheet (CSS) property of the target child component based on at least one CSS variable in the target animation instance includes: The target child component references the target property value corresponding to at least one Cascading Style Sheet variable in the target animation instance through the target function, and the referenced target property value is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component. In the target animation instance, the root component is set as the animation execution target.

[0080] Specifically, for example, the target animation instance corresponding to the root component is obtained from the animation library GSAP. The target animation instance is, for example, a gsap.js instance; the gsap.js instance is shown below: gsap.to(eleTarget,{ repeat: 0, / / The animation should not repeat. yoyo:true, / / Returns to the initial state after the animation completes (only effective when repeat > 0) duration: 10, / / Animation duration in seconds repeatDelay:10, / / Delay time between repetitions in seconds (This setting is actually ineffective since repeat is 0) paused: true, / / The animation is paused at the start. attr:{ "--main-bg-color":"#fff", / / Changes the main background color to white "--main-text-color":"#000" / / Changes the main text color to black }, onComplete:()=>{}, / / Callback function when animation completes } It should be noted that `gsap.to` represents the API (Application Programming Interface) for generating animations (executing webpage animations), `eleTarget` represents the root component, and in the `gsap.js` instance, `eleTarget` is set as the animation execution target. `repeat`, `yoyo`, `duration`, `repeatDelay`, and `paused` all represent animation properties. `attr` is a function provided by GSAP that receives parameters. `--main-bg-color` and `--main-text-color` both represent Cascading Style Sheet (CSS) variables. `#fff` represents the value corresponding to `--main-bg-color` (CSS property value is white), and `#000` represents the value corresponding to `--main-text-color`. The target child component is assigned the target property value (CSS property value is black) by using the target function var(--main-bg-color) to reference the target property value #fff corresponding to the Cascading Style Sheet variable --main-bg-color in the target animation instance, and the referenced target property value #fff is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component; the target child component is assigned the target property value #000 corresponding to the Cascading Style Sheet variable --main-text-color in the target animation instance by using the target function var(--main-text-color), and the referenced target property value #000 is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component.

[0081] For example, such as Figure 7 As shown, the target animation instance is, for example, the gsap.js instance. Animations are created using the gsap.js instance, which includes three Cascading Style Sheets (CSS) variables and their corresponding target property values. These three CSS variables are `--table-border-color`, `--table-border-width`, and `--table-background-color`. The target property value for `--table-border-color` is white, i.e., `--table-border-color: white`. The target property value for `--table-border-width` is 5px, i.e., `--table-border-width: 5px`. The target property value for `--table-background-color` is white, i.e., `--table-background-color: white`. The interactive component B is then animated using the target function `var(--tab)`. The function `var(--table-background-color)` references the target property value `white` corresponding to `--table-background-color` in the `gsap.js` instance, and sets the referenced target property value `white` as the target property value corresponding to the Cascading Style Sheet property `background-color` of interactive component B; the function `var(--table-border-color)` references the target property value `white` corresponding to `--table-border-color` in the `gsap.js` instance, and sets the referenced target property value `white` as the target property value corresponding to the Cascading Style Sheet property `border-color` of data component C; the function `var(--table-border-width)` references the target property value `5px` corresponding to `--table-border-width` in the `gsap.js` instance, and sets the referenced target property value `5px` as the target property value corresponding to the Cascading Style Sheet property `border-width` of data component C.

[0082] It's important to note that the root component (root component A) is used as the animation target, rather than the target child components (interactive component B and data component C). During the webpage animation execution, even if interactive component B changes, the animation target is the root component (the CSS properties, i.e., CSS variables, on root component A). Interactive component B only uses CSS variables; the webpage animation corresponding to interactive component B is not its own CSS property. Therefore, any changes to interactive component B itself will not affect the webpage animation execution. Similarly, even if data component C changes, the animation target is still the root component (the CSS properties, i.e., CSS variables, on root component A). Data component C only uses CSS variables; the webpage animation corresponding to data component C is not its own CSS property. Therefore, any changes to data component C itself will not affect the webpage animation execution. This solves the problem in existing technologies where, under certain circumstances (such as the target child component being unloaded, hidden, or repainted), the animation target cannot be found (using the target child component as the animation target) or the animation target is lost, thus preventing the webpage animation from executing. This improves the execution efficiency of webpage animations.

[0083] In one embodiment, prior to obtaining the target animation instance, the method further includes: Set the root component as the animation target; For the animation execution target, construct the target animation instance corresponding to the root component. The target animation instance includes the interface for animation creation corresponding to the root component. The interface includes multiple animation properties, the property value corresponding to each animation property, and the Cascading Style Sheet (CSS) variable passing function. The CSS variable passing function includes at least one CSS variable and the target property value corresponding to at least one CSS variable. The CSS variable passing function is used to set the target property value corresponding to at least one CSS variable.

[0084] Specifically, for example, a target animation instance is a gsap.js instance; a gsap.js instance is shown below: gsap.to(eleTarget,{ repeat: 0, / / The animation should not repeat. yoyo:true, / / Returns to the initial state after the animation completes (only effective when repeat > 0) duration: 10, / / Animation duration in seconds repeatDelay:10, / / Delay time between repetitions in seconds (This setting is actually ineffective since repeat is 0) paused: true, / / The animation is paused at the start. attr:{ "--main-bg-color":"#fff", / / Changes the main background color to white "--main-text-color":"#000" / / Changes the main text color to black }, onComplete:()=>{}, / / Callback function when animation completes } It should be noted that the root component `eleTarget` is set as the animation execution target. For the animation execution target `eleTarget`, a `gsap.js` instance corresponding to the root component `eleTarget` is constructed. The `gsap.js` instance includes the interface `gsap.to` for animation creation corresponding to the root component `eleTarget`. The interface `gsap.to` includes multiple animation properties, the property values ​​for each animation property, and Cascading Style Sheets (CSS) variable passing functions. The multiple animation properties are `repeat`, `yoyo`, `duration`, `repeatDelay`, and `paused`. The property value for the `repeat` animation property is 0. The attribute yoyo has a value of true, the animation duration has a value of 10, the animation repeatDelay has a value of 10, and the Cascading Style Sheets (CSS) variable is passed to the function attr. attr includes two CSS variables and their respective target attribute values. The two CSS variables are --main-bg-color and --main-text-color. The target attribute value for the CSS variable --main-bg-color is #fff, and the target attribute value for the CSS variable --main-text-color is #000.

[0085] In one embodiment, based on initial attribute values ​​and target attribute values, the webpage animation corresponding to the target sub-component is displayed, including: Based on the animation execution method, initial attribute value, and target attribute value represented by the attribute values ​​of each animation attribute in multiple animation properties, the web page animation corresponding to the target sub-component is displayed.

[0086] Specifically, for example, the target sub-component is a Chinese bell with an initial property value of red and a target property value of white. Animation property 1 indicates that the duration of each animation cycle is 10 seconds, and animation property 2 indicates that the animation repeats for 10 cycles. The Chinese bell gradually changes from red to white, with each change lasting 10 seconds, and the Chinese bell gradually changes from red to white 10 times.

[0087] For example, the target sub-component is the cat's tail, the initial attribute value is short tail, the target attribute value is long tail, the animation attribute 1 indicates that the duration of each animation cycle is 5 seconds, the animation attribute 2 indicates that the animation repeats for 50 cycles, the cat's tail gradually changes from short tail to long tail, the duration of each gradual change is 5 seconds, and the number of times the cat's tail gradually changes from short tail to long tail is repeated is 50 times.

[0088] For example, a Chinese bell gradually changes from red to white, and during the process, the Chinese bell is destroyed, while the European bell that replaces it continues to gradually change from red to white; both the Chinese bell and the European bell are interactive components.

[0089] For example, a cat's type A tail gradually changes from short to long. During the process, the type A tail is destroyed, and the replacement type B tail continues to gradually change from short to long. Both type A and type B tails are data components.

[0090] It's important to note that when using a child component as the animation target, the gsap.js instance requires the animation target (e.g., the cat's tail of type A) to exist before executing the animation. If the animation target is not rendered on the page, it cannot be found, and the animation will not execute. Conversely, when using a child component as the animation target, if the data changes (e.g., the cat's tail of type A is replaced by a tail of type B), the child component (e.g., the cat's tail of type B) is regenerated. While the page may appear unchanged, the child component has actually changed, causing the gsap.js instance to... If the animation execution target (e.g., a cat's tail of type A) is lost, the newly generated child component (e.g., a cat's tail of type B) will not have an animation effect, meaning the animation cannot be executed. Applying this embodiment, if the root component is used as the animation execution target, and the child component is not rendered before the animation, the animation execution will not be affected, and the root component cannot be regenerated or unloaded. Applying this embodiment, if the root component is used as the animation execution target, after the animation takes effect, changes in data (child components) and re-rendering will not affect the animation execution, and the root component cannot be regenerated or unloaded.

[0091] Applying the embodiments of this disclosure has at least the following beneficial effects: By attaching Cascading Style Sheet (CSS) variables to the root component and mapping the CSS properties of the target child component to these CSS variables, the root component is used as the animation target, rather than the target child component. This solves the problem in existing technologies where the animation target (child component) cannot be found or is missing in certain situations (such as the unloading, hiding, or repainting of the child component), thus improving the execution efficiency of web animations.

[0092] To better understand the methods provided in the embodiments of this disclosure, the solutions of the embodiments of this disclosure will be further explained below with reference to specific application scenarios.

[0093] In a specific application scenario, such as web page animation processing, see [link to example]. Figure 8 This illustrates the processing flow of a web page animation processing method, such as... Figure 8 As shown, the processing flow of the web page animation processing method provided in this embodiment includes the following steps: S801, the server obtains multiple Cascading Style Sheet (CSS) variables of the root component of the target webpage, the initial attribute value of each CSS variable, and the CSS properties of the target child component corresponding to the root component.

[0094] Specifically, for example, such as Figure 6 As shown, multiple Cascading Style Sheet (CSS) variables of the root component A of the target webpage are obtained, along with the initial property value of each CSS variable. The multiple CSS variables are `--table-border-color`, `--table-border-width`, and `--table-background-color`. The initial property value of `--table-border-color` is `red`, i.e., `--table-border-color: red`. The initial property value of `--table-border-width` is `1px`, i.e., `--table-border-width: 1px`. The initial property value of `--table-background-color` is `red`, i.e., `--table-background-color: red`. These multiple CSS variables and their initial property values ​​are defined as a set of CSS variables, i.e., the set of CSS variables includes `--table-border-color: red`, `--table-border-width: 1px`, and `--table-background-color: red`.

[0095] For example, such as Figure 6 As shown, the Cascading Style Sheet (CSS) variables (--table-border-color, --table-border-width, and --table-background-color) are attached to the root component A, and the CSS properties of the two target child components (interactive component B and data component C) are mapped to the CSS variables, namely background-color: var(--table-background-color), border-color: var(--table-border-color), and border-width: var(--table-border-width). This achieves the goal of using the root component as the animation target, rather than using the target child components as the animation target.

[0096] For example, such as Figure 6 As shown, for interactive component B, when a preset condition is met, the interactive component is obtained. For example, the preset condition is that interactive component B appears at 12 o'clock. When the time is 12 o'clock, the preset condition is met, the preset condition is set to success, and interactive component B is generated. The Cascading Style Sheet (CSS) property of interactive component B and the target function corresponding to the CSS property of interactive component B are obtained. The CSS property of interactive component B is background-color, and the target function corresponding to the CSS property of interactive component B is var(--table-background-color), that is, background-color: var(--table-background-color). The target function var(--table-background-color) is used by interactive component B to reference the initial property value corresponding to the CSS variable --table-background-color. When the time is not 12 o'clock, the preset condition is not met, the preset condition is set to failure, and interactive component B is either not generated or destroyed. Interactive component B is, for example, a Chinese bell.

[0097] For example, such as Figure 6 As shown, for data component C, data component C is generated, and the Cascading Style Sheet (CSS) properties and their corresponding target functions for data component C are obtained. The two CSS properties of data component C are `border-color` and `border-width`. The target function for the CSS property `border-color` is `var(--table-border-color)`, i.e., `border-color: var(--table-border-color)`. The target function `var(--table-border-color)` is used by data component C to reference the initial property value corresponding to the CSS variable `--table-border-color`. The CSS property `border-width`... The target function corresponding to 'h' is var(--table-border-width), which means border-width: var(--table-border-width). The target function var(--table-border-width) is used by data component C to reference the initial property value corresponding to the Cascading Style Sheet variable --table-border-width; to display data, for example, to display data component C with the initial style on the target webpage; data component C is, for example, a cat's tail of type A. If the data changes, for example, changing the cat's tail of type A to a tail of type B, data component C is destroyed, for example, the cat's tail of type A is destroyed, and a new data component C is regenerated based on the new data (for example, a tail of type B), that is, the new data component C is the cat's tail of type B.

[0098] S802, the server displays the target subcomponent with the initial style on the target webpage based on the Cascading Style Sheet properties of the target subcomponent and the initial property values ​​corresponding to the Cascading Style Sheet variables referenced by the target function.

[0099] Specifically, for example, such as Figure 6 and Figure 7 As shown, the root component A corresponds to two target sub-components, namely the interaction component B and the data component C.

[0100] For example, such as Figure 6 and Figure 7 As shown, for interactive component B, if the preset conditions are met, the preset conditions are set to success, and interactive component B is generated. This involves obtaining the Cascading Style Sheet (CSS) property of interactive component B and the target function corresponding to the CSS property. The CSS property of interactive component B is `background-color`, and the target function corresponding to the CSS property is `var(--table-background-color)`, i.e., `background-color : var(--table-background-color)`. The target function `var(--table-background-color)` is used by interactive component B to reference the initial property value corresponding to the CSS variable `--table-background-color`. Based on the CSS property `background-color` of interactive component B and the initial property value `var(--table-background-color)` referenced by the target function, interactive component B with the initial style is displayed on the target webpage.

[0101] For example, such as Figure 6 and Figure 7 As shown, for data component C, data component C is generated, and the Cascading Style Sheet (CSS) properties and their corresponding target functions for data component C are obtained. The two CSS properties of data component C are `border-color` and `border-width`. The target function for the CSS property `border-color` is `var(--table-border-color)`, i.e., `border-color: var(--table-border-color)`. The target function `var(--table-border-color)` is used by data component C to reference the initial property value corresponding to the CSS variable `--table-border-color`. The target function for the CSS property `border-width` is `var(-...`. -table-border-width), that is, border-width: var(--table-border-width), the target function var(--table-border-width) is used to reference the initial property value corresponding to the Cascading Style Sheet variable --table-border-width of data component C; based on the Cascading Style Sheet property border-color of data component C and the initial property value corresponding to the Cascading Style Sheet variable referenced by the target function var(--table-border-color), as well as the Cascading Style Sheet property border-width of data component C and the initial property value corresponding to the Cascading Style Sheet variable referenced by the target function var(--table-border-width), the data component C with the initial style will be displayed on the target webpage.

[0102] S803: The server creates an animation based on a target animation instance in the animation library.

[0103] Specifically, for example, such as Figure 7 As shown, the target animation instance is, for example, the gsap.js instance. Animations are created using the gsap.js instance, which includes three Cascading Style Sheets (CSS) variables and their corresponding target property values. These three CSS variables are `--table-border-color`, `--table-border-width`, and `--table-background-color`. The target property value for `--table-border-color` is white, i.e., `--table-border-color: white`. The target property value for `--table-border-width` is 5px, i.e., `--table-border-width: 5px`. The target property value for `--table-background-color` is white, i.e., `--table-background-color: white`. The interactive component B is then animated using the target function `var(--tab)`. The function `var(--table-background-color)` references the target property value `white` corresponding to `--table-background-color` in the `gsap.js` instance, and sets the referenced target property value `white` as the target property value corresponding to the Cascading Style Sheet property `background-color` of interactive component B; the function `var(--table-border-color)` references the target property value `white` corresponding to `--table-border-color` in the `gsap.js` instance, and sets the referenced target property value `white` as the target property value corresponding to the Cascading Style Sheet property `border-color` of data component C; the function `var(--table-border-width)` references the target property value `5px` corresponding to `--table-border-width` in the `gsap.js` instance, and sets the referenced target property value `5px` as the target property value corresponding to the Cascading Style Sheet property `border-width` of data component C.

[0104] For example, retrieve the target animation instance corresponding to the root component from the animation library GSAP. The target animation instance is, for example, a gsap.js instance; the gsap.js instance is shown below: gsap.to(eleTarget,{ repeat: 0, / / The animation should not repeat. yoyo:true, / / Returns to the initial state after the animation completes (only effective when repeat > 0) duration: 10, / / Animation duration in seconds repeatDelay:10, / / Delay time between repetitions in seconds (This setting is actually ineffective since repeat is 0) paused: true, / / The animation is paused at the start. attr:{ "--main-bg-color":"#fff", / / Changes the main background color to white "--main-text-color":"#000" / / Changes the main text color to black }, onComplete:()=>{}, / / Callback function when animation completes } It should be noted that `gsap.to` represents the API (Application Programming Interface) for generating animations (executing webpage animations), `eleTarget` represents the root component, and in the `gsap.js` instance, `eleTarget` is set as the animation execution target. `repeat`, `yoyo`, `duration`, `repeatDelay`, and `paused` all represent animation properties. `attr` is a function provided by GSAP that receives parameters. `--main-bg-color` and `--main-text-color` both represent Cascading Style Sheet (CSS) variables. `#fff` represents the value corresponding to `--main-bg-color` (CSS property value is white), and `#000` represents the value corresponding to `--main-text-color`. The target child component is assigned the target property value (CSS property value is black) by using the target function var(--main-bg-color) to reference the target property value #fff corresponding to the Cascading Style Sheet variable --main-bg-color in the target animation instance, and the referenced target property value #fff is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component; the target child component is assigned the target property value #000 corresponding to the Cascading Style Sheet variable --main-text-color in the target animation instance by using the target function var(--main-text-color), and the referenced target property value #000 is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component.

[0105] S804: The server displays the web page animation corresponding to the target sub-component based on the initial attribute value, the target attribute value, and the attribute values ​​of each animation attribute in the multiple animation attributes of the target animation instance.

[0106] Specifically, for example, the target sub-component is a Chinese bell with an initial property value of red and a target property value of white. Animation property 1 indicates that the duration of each animation cycle is 10 seconds, and animation property 2 indicates that the animation repeats for 10 cycles. The Chinese bell gradually changes from red to white, with each change lasting 10 seconds, and the Chinese bell gradually changes from red to white 10 times.

[0107] For example, the target sub-component is the cat's tail, the initial attribute value is short tail, the target attribute value is long tail, the animation attribute 1 indicates that the duration of each animation cycle is 5 seconds, the animation attribute 2 indicates that the animation repeats for 50 cycles, the cat's tail gradually changes from short tail to long tail, the duration of each gradual change is 5 seconds, and the number of times the cat's tail gradually changes from short tail to long tail is repeated is 50 times.

[0108] Applying the embodiments of this disclosure has at least the following beneficial effects: It should be noted that, for example, such as Figure 6 As shown, the Cascading Style Sheet (CSS) variables (--table-border-color, --table-border-width, and --table-background-color) are attached to the root component A, and the CSS properties of the two target child components (interactive component B and data component C) are mapped to the CSS variables, i.e., background-color: var(--table-background-color), border-color: var(--table-border-color), and border-width: var(--table-border-width). This achieves the goal of using the root component as the animation target, rather than the target child components. During the webpage animation execution, even if the interactive component B changes, the animation target remains the same. The root component (CSS properties, i.e., CSS variables on root component A) and interactive component B only use CSS variables. The webpage animation corresponding to interactive component B is not its own CSS property. Therefore, no matter what changes occur to interactive component B itself, it will not affect the execution of the webpage animation. During the execution of the webpage animation, even if data component C changes, the animation execution target is the root component (CSS properties, i.e., CSS variables on root component A). Data component C only uses CSS variables, and the webpage animation corresponding to data component C is not its own CSS property. Therefore, no matter what changes occur to data component C itself, it will not affect the execution of the webpage animation. In this way, the problem that the animation execution target cannot be found (using the target child component as the animation execution target) or the animation execution target is lost in the existing technology due to certain situations (such as the unloading, hiding, repainting, etc. of the target child component), thus preventing the execution of webpage animations, is improved.

[0109] This disclosure also provides a web page animation processing device, the structural schematic diagram of which is shown below. Figure 9 As shown, the web page animation processing device 70 includes a first processing module 701, a second processing module 702, a third processing module 703, and a fourth processing module 704.

[0110] The first processing module 701 is used to obtain the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial attribute value corresponding to each CSS variable. Each CSS variable is used to represent a custom attribute. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. The second processing module 702 is used to determine the initial attribute values ​​corresponding to the Cascading Style Sheet properties of the target sub-component based on the Cascading Style Sheet variable set. The initial attribute values ​​are used to characterize the initial style of the target sub-component. The third processing module 703 is used to determine the target attribute value corresponding to the Cascading Style Sheet property of the target sub-component based on at least one Cascading Style Sheet variable in the target animation instance. The target attribute value is used to characterize the target style of the target sub-component. The fourth processing module 704 is used to display the web page animation corresponding to the target sub-component based on the initial attribute value and the target attribute value. The web page animation is the process of the target sub-component changing from the initial style to the target style.

[0111] In one embodiment, the first processing module 701 is specifically used for: Obtain multiple Cascading Style Sheet (CSS) variables of the root component of the target webpage, as well as the initial property value corresponding to each CSS variable, and determine the multiple CSS variables and their corresponding initial property values ​​as a CSS variable set.

[0112] In one embodiment, the first processing module 701 is specifically used for: Get the Cascading Style Sheet properties of the target child component and the target function corresponding to the Cascading Style Sheet properties of the target child component; The target sub-component is either an interactive component or a data component. For interactive components, the Cascading Style Sheet (CSS) properties of the interactive component and the target function corresponding to the CSS properties of the interactive component are obtained when preset conditions are met. The target function is used by the target sub-component to reference the initial property value corresponding to at least one CSS variable.

[0113] In one embodiment, the first processing module 701 is further configured to: Based on the initial property values ​​corresponding to the Cascading Style Sheet properties of the target subcomponent and at least one Cascading Style Sheet variable referenced by the target function, the target subcomponent with the initial style will be displayed on the target webpage.

[0114] In one embodiment, the second processing module 702 is specifically used for: The target child component references the initial property value corresponding to at least one Cascading Style Sheet variable in the Cascading Style Sheet variable set through the target function, and determines the referenced initial property value as the initial property value corresponding to the Cascading Style Sheet property of the target child component.

[0115] In one embodiment, the third processing module 703 is specifically used for: The target child component references the target property value corresponding to at least one Cascading Style Sheet variable in the target animation instance through the target function, and the referenced target property value is determined as the target property value corresponding to the Cascading Style Sheet property of the target child component. In the target animation instance, the root component is set as the animation execution target.

[0116] In one embodiment, the first processing module 701 is further configured to: Set the root component as the animation target; For the animation execution target, construct the target animation instance corresponding to the root component. The target animation instance includes the interface for animation creation corresponding to the root component. The interface includes multiple animation properties, the property value corresponding to each animation property, and the Cascading Style Sheet (CSS) variable passing function. The CSS variable passing function includes at least one CSS variable and the target property value corresponding to at least one CSS variable. The CSS variable passing function is used to set the target property value corresponding to at least one CSS variable.

[0117] In one embodiment, the fourth processing module 704 is specifically used for: Based on the animation execution method, initial attribute value, and target attribute value represented by the attribute values ​​of each animation attribute in multiple animation properties, the web page animation corresponding to the target sub-component is displayed.

[0118] Applying the embodiments of this disclosure has at least the following beneficial effects: The process involves retrieving the Cascading Style Sheets (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and their initial property values. Each CSS variable represents a custom property, and the target child component's CSS properties correspond to at least one CSS variable in the CSS variable set. Based on the CSS variable set, the initial property values ​​corresponding to the target child component's CSS properties are determined, representing the initial style of the target child component. Finally, based on at least one CSS variable in the target animation instance, the target property values ​​corresponding to the target child component's CSS properties are determined. The target attribute value is used to characterize the target style of the target child component. Based on the initial attribute value and the target attribute value, the web page animation corresponding to the target child component is displayed. The web page animation is the process of the target child component changing from the initial style to the target style. In this way, by attaching the Cascading Style Sheet (CSS) variable to the root component and matching the CSS properties of the target child component with the corresponding CSS variable, the root component is used as the animation execution target (animation target), instead of the target child component. This solves the problem in the existing technology that the animation target (child component, i.e., DOM element) cannot be found or is lost due to certain situations (such as the unloading, hiding, and repainting of DOM elements), thus improving the execution efficiency of web page animations.

[0119] This disclosure also provides an electronic device, the structural schematic diagram of which is shown below. Figure 10 As shown, Figure 10 The illustrated electronic device 4000 includes a processor 4001 and a memory 4003. The processor 4001 and the memory 4003 are connected, for example, via a bus 4002. Optionally, the electronic device 4000 may further include a transceiver 4004, which can be used for data interaction between the electronic device and other electronic devices, such as sending and / or receiving data. It should be noted that in practical applications, the transceiver 4004 is not limited to one type, and the structure of the electronic device 4000 does not constitute a limitation on the embodiments of this disclosure.

[0120] Processor 4001 may be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It may implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with this disclosure. Processor 4001 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0121] Bus 4002 may include a pathway for transmitting information between the aforementioned components. Bus 4002 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Bus 4002 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 10 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0122] The memory 4003 may be ROM (Read Only Memory) or other types of static storage devices capable of storing static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices capable of storing information and instructions, or EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media, other magnetic storage devices, or any other medium capable of carrying or storing computer programs and capable of being read by a computer, without limitation herein.

[0123] The memory 4003 is used to store computer programs that execute embodiments of the present disclosure, and is controlled by the processor 4001 to execute them. The processor 4001 is used to execute the computer programs stored in the memory 4003 to implement the steps shown in the foregoing method embodiments.

[0124] Electronic devices include, but are not limited to, servers.

[0125] Applying the embodiments of this disclosure has at least the following beneficial effects: The process involves retrieving the Cascading Style Sheets (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and their initial property values. Each CSS variable represents a custom property, and the target child component's CSS properties correspond to at least one CSS variable in the CSS variable set. Based on the CSS variable set, the initial property values ​​corresponding to the target child component's CSS properties are determined, representing the initial style of the target child component. Finally, based on at least one CSS variable in the target animation instance, the target property values ​​corresponding to the target child component's CSS properties are determined. The target attribute value is used to characterize the target style of the target child component. Based on the initial attribute value and the target attribute value, the web page animation corresponding to the target child component is displayed. The web page animation is the process of the target child component changing from the initial style to the target style. In this way, by attaching the Cascading Style Sheet (CSS) variable to the root component and matching the CSS properties of the target child component with the corresponding CSS variable, the root component is used as the animation execution target (animation target), instead of the target child component. This solves the problem in the existing technology that the animation target (child component, i.e., DOM element) cannot be found or is lost due to certain situations (such as the unloading, hiding, and repainting of DOM elements), thus improving the execution efficiency of web page animations.

[0126] This disclosure provides a computer-readable storage medium storing a computer program, which, when executed by a processor, can implement the steps and corresponding content of the aforementioned method embodiments.

[0127] This disclosure also provides a computer program product, including a computer program that, when executed by a processor, can implement the steps and corresponding content of the aforementioned method embodiments.

[0128] It should be understood that although arrows indicate various operation steps in the flowcharts of the embodiments of this disclosure, the order in which these steps are implemented is not limited to the order indicated by the arrows. Unless explicitly stated herein, in some implementation scenarios of the embodiments of this disclosure, the implementation steps in each flowchart can be executed in other orders as required. Furthermore, some or all of the steps in each flowchart may include multiple sub-steps or multiple stages based on the actual implementation scenario. Some or all of these sub-steps or stages can be executed at the same time, and each sub-step or stage can also be executed at different times. In scenarios where execution times differ, the execution order of these sub-steps or stages can be flexibly configured as required, and the embodiments of this disclosure do not limit this.

[0129] The above description is only an optional implementation method for some implementation scenarios of this disclosure. It should be noted that for those skilled in the art, other similar implementation methods based on the technical concept of this disclosure, without departing from the technical concept of this disclosure, also fall within the protection scope of the embodiments of this disclosure.

Claims

1. A webpage animation processing method, characterized in that, include: Obtain the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial attribute value corresponding to each CSS variable. Each CSS variable is used to represent a custom attribute. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. Based on the Cascading Style Sheet (CSS) variable set, the initial attribute values ​​corresponding to the CSS properties of the target sub-component are determined, and the initial attribute values ​​are used to characterize the initial style of the target sub-component. Based on at least one Cascading Style Sheet variable in the target animation instance, the target attribute value corresponding to the Cascading Style Sheet property of the target sub-component is determined, and the target attribute value is used to characterize the target style of the target sub-component. Based on the initial attribute value and the target attribute value, the web page animation corresponding to the target sub-component is displayed. The web page animation is the process of the target sub-component changing from the initial style to the target style.

2. The method according to claim 1, characterized in that, The process of obtaining the Cascading Style Sheet (CSS) variable set of the root component of the target webpage includes: Obtain multiple Cascading Style Sheet (CSS) variables of the root component of the target webpage, as well as the initial attribute value corresponding to each CSS variable, and determine the multiple CSS variables and the initial attribute value corresponding to each CSS variable as the CSS variable set.

3. The method according to claim 1, characterized in that, The step of obtaining the Cascading Style Sheet properties of the target child component corresponding to the root component includes: Obtain the Cascading Style Sheet (CSS) properties of the target sub-component and the target function corresponding to the CSS properties of the target sub-component; Wherein, the target sub-component is an interactive component or a data component. For the interactive component, the Cascading Style Sheet (CSS) properties of the interactive component and the target function corresponding to the CSS properties of the interactive component are obtained when preset conditions are met. The target function is used by the target sub-component to reference the initial attribute value corresponding to the at least one CSS variable.

4. The method according to claim 3, characterized in that, Before displaying the webpage animation corresponding to the target sub-component, the method further includes: Based on the Cascading Style Sheet (CSS) properties of the target sub-component and the initial attribute values ​​corresponding to the at least one CSS variable referenced by the target function, the target sub-component adopting the initial style is displayed on the target webpage.

5. The method according to claim 3, characterized in that, The step of determining the initial attribute values ​​of the Cascading Style Sheet (CSS) properties of the target sub-component based on the CSS variable set includes: The target sub-component references the initial property value corresponding to at least one Cascading Style Sheet variable in the Cascading Style Sheet variable set through the target function, and determines the referenced initial property value as the initial property value corresponding to the Cascading Style Sheet property of the target sub-component.

6. The method according to claim 3, characterized in that, The step of determining the target attribute value corresponding to the Cascading Style Sheet property of the target sub-component based on at least one Cascading Style Sheet variable in the target animation instance includes: The target sub-component references the target property value corresponding to at least one Cascading Style Sheet variable in the target animation instance through the target function, and determines the referenced target property value as the target property value corresponding to the Cascading Style Sheet property of the target sub-component. In the target animation instance, the root component is set as the animation execution target.

7. The method according to claim 6, characterized in that, Before obtaining the target animation instance, the following is also included: Set the root component as the animation execution target; For the animation execution target, a target animation instance corresponding to the root component is constructed. The target animation instance includes an interface for animation creation corresponding to the root component. The interface includes multiple animation properties, attribute values ​​corresponding to each of the multiple animation properties, and a Cascading Style Sheet (CSS) variable passing function. The CSS variable passing function includes at least one CSS variable and a target attribute value corresponding to the at least one CSS variable. The CSS variable passing function is used to set the target attribute value corresponding to the at least one CSS variable.

8. The method according to claim 7, characterized in that, The step of displaying the webpage animation corresponding to the target sub-component based on the initial attribute value and the target attribute value includes: Based on the animation execution method represented by the attribute values ​​corresponding to each of the multiple animation attributes, the initial attribute value, and the target attribute value, the web page animation corresponding to the target sub-component is displayed.

9. A webpage animation processing device, characterized in that, include: The first processing module is used to obtain the Cascading Style Sheet (CSS) variable set of the root component of the target webpage, the CSS properties of the target child component corresponding to the root component, and the target animation instance corresponding to the root component. The CSS variable set includes multiple CSS variables and the initial attribute value corresponding to each CSS variable. Each CSS variable is used to represent a custom attribute. The CSS properties of the target child component correspond to at least one CSS variable in the CSS variable set. The second processing module is used to determine the initial attribute values ​​corresponding to the Cascading Style Sheet (CSS) properties of the target sub-component based on the CSS variable set, wherein the initial attribute values ​​are used to characterize the initial style of the target sub-component. The third processing module is used to determine the target attribute value corresponding to the Cascading Style Sheet (CSS) property of the target sub-component based on at least one CSS variable in the target animation instance. The target attribute value is used to characterize the target style of the target sub-component. The fourth processing module is used to display the web page animation corresponding to the target sub-component based on the initial attribute value and the target attribute value. The web page animation is the process of the target sub-component changing from the initial style to the target style.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory, characterized in that, The processor executes the computer program to implement the steps of the method according to any one of claims 1-8.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1-8.

12. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1-8.

Images