Data processing method, device, electronic device and memory

Abstract

The present disclosure provides a data processing method, apparatus, electronic device, and memory device, relating to the field of computer technology, particularly web page display. The specific implementation scheme comprises: obtaining a target attribute of a web page element; determining when the attribute value of the target attribute changes from a first attribute value to a second attribute value; determining an end value of the target attribute based on the second attribute value; and rendering a target animation on a target interface based on the start and end values of the target attribute. The target animation displays data about the process of the target attribute changing from the start value to the end value, thereby resolving the technical problem of being unable to effectively display animations of web page elements.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a data processing method, device, electronic device, and memory in the field of web page display. Background Art

[0002] Currently, for web page business development, when the attributes of web page elements change, the web page elements are usually displayed directly according to the changed attributes without animation processing. That is, no certain animation effect is presented during the attribute change process of the web page elements, which makes the transformation state of the web page elements relatively stiff. Summary of the Invention

[0003] The present disclosure provides a data processing method, apparatus, electronic device, and memory.

[0004] According to one aspect of the present disclosure, a data processing method is provided. The method may include: obtaining a target attribute of a webpage element; determining that an attribute value of the target attribute changes from a first attribute value to a second attribute value; determining an end value of the target attribute based on the second attribute value; and rendering a target animation on a target interface based on the start value and end value of the target attribute, wherein the target animation is used to display process data of the target attribute changing from the start value to the end value.

[0005] According to another aspect of the present disclosure, a data processing device is provided. The device may include: a first acquisition unit for acquiring a target attribute of a webpage element; a first determination unit for determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value; a second determination unit for determining the end value of the target attribute based on the second attribute value; and a first rendering unit for rendering a target animation on a target interface based on the start value and the end value of the target attribute, wherein the target animation is used to display process data of the target attribute changing from the start value to the end value.

[0006] According to another aspect of the present disclosure, an electronic device is provided. The electronic device may include: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the data processing method of an embodiment of the present disclosure.

[0007] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is further provided, wherein the computer instructions are used to enable a computer to execute the data processing method of an embodiment of the present disclosure.

[0008] According to another aspect of the present disclosure, a computer program product is provided, which may include a computer program that implements the data processing method of the embodiment of the present disclosure when executed by a processor.

[0009] It should be understood that the contents described in this section are not intended to identify the key or important features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become readily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] The accompanying drawings are provided to facilitate a better understanding of the present invention and do not constitute a limitation of the present disclosure.

[0011] Figure 1 is a data processing method according to an embodiment of the present disclosure;

[0012] Figure 2 is a flow chart of another data processing method according to an embodiment of the present disclosure;

[0013] Figure 3A is a schematic diagram of implementing animation using CSS3 transition according to an embodiment of the present disclosure;

[0014] Figure 3B is a flowchart of a method for implementing animation using CSS3 transition according to an embodiment of the present disclosure;

[0015] Figure 4 is a schematic diagram of a data processing device according to an embodiment of the present disclosure;

[0016] Figure 5 is a schematic diagram of another data processing device according to an embodiment of the present disclosure;

[0017] Figure 6 is a schematic block diagram of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0018] The following description of exemplary embodiments of the present disclosure is made in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding. These details should be considered as merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0019] An embodiment of the present disclosure provides a data processing method.

[0020] Figure 1 This is a data processing method according to an embodiment of the present disclosure. Figure 1 As shown, the data processing method may include the following steps:

[0021] Step S102: Obtain target attributes of web page elements.

[0022] In the technical solution provided in step 102 of the present disclosure, the web page element may be an element displayed on a client's page for animation, for example, it may be an element Cascading Style Sheet (CSS) attribute of the animation element, and may include a container, a functional control, etc. The client may be a browser, and the container may be a tag container, that is, at least one tag may be displayed through the container.

[0023] Optionally, the web page element in this embodiment may be a Document Object Model (DOM) element.

[0024] In this embodiment, a target attribute of a web page element is obtained, and the target attribute may include a height (Height) and / or a width (Width) of the web page element.

[0025] Step S104: determining whether the attribute value of the target attribute changes from the first attribute value to the second attribute value.

[0026] In the technical solution provided in the above step 104 of the present disclosure, after obtaining the target attribute of the webpage element, it is determined that the attribute value of the target attribute changes from the first attribute value to the second attribute value.

[0027] In this embodiment, the attribute value of the target attribute can be obtained. For example, if the target attribute is the height of the web page element, the attribute value can be the height value. For another example, if the target attribute is the width of the web page element, the attribute value can be the width value. The attribute value of the target attribute in this embodiment can change from a first attribute value to a second attribute value. For example, the web page element can be a page container, and the page container can include tags 1, 2, and 3. At this time, the height value of the page container can be 30px. After tag 4 is added to the page container, for example, the page where the page container is located has a function control for adding tags. Through the function control responding to the operation instruction, tag 4 can be further added to the page container. At this time, the height of the page container will change, and the height value of the page container can be 50px.

[0028] Optionally, after the first attribute value changes, the second attribute value to which the first attribute value changes can be calculated by a first target engine. The first target engine can be a JS engine supported by the client. That is, in this embodiment, the second attribute value of the target attribute can be dynamically calculated by the JS engine. For example, the second attribute value can be obtained by using getBoundingClientRect in the JS engine. This can also be called an element attribute value, such as an element height value or a DOM element height.

[0029] Optionally, in this embodiment, the timing for obtaining the second attribute value may be in the callback function ($nextTick) to ensure that the second attribute value after the first attribute value changes is obtained.

[0030] Step S106: Determine the end value of the target attribute based on the second attribute value.

[0031] In the technical solution provided in the above step 106 of the present disclosure, after determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value, the end value of the target attribute can be determined based on the second attribute value.

[0032] In this embodiment, the target attribute has a start value and an end value, which are specific values. When the end value is unknown, the end value of the target attribute can be determined based on the second attribute value, and then the end value is added to the web page element.

[0033] This embodiment determines the end value of the target attribute based on the second attribute value, and dynamically adds an end value corresponding to the actual attribute value of the web page element to the web page element. This is applicable even in scenarios where the content of the web page element changes, rather than directly setting a fixed value such as a maximum attribute value (maximum height max-height, maximum width max-width) for the web page element, which makes it impossible to accurately set the end value of the web page element.

[0034] Step S108 : Rendering a target animation on the target interface based on the start value and the end value of the target attribute.

[0035] In the technical solution provided in the above step 108 of the present disclosure, after determining the end value of the target attribute based on the second attribute value, a target animation is rendered on the target interface based on the start value and end value of the target attribute, wherein the target animation is used to display the process data of the target attribute changing from the start value to the end value.

[0036] In this embodiment, the start value of the target attribute may be known. After the end value of the target attribute is obtained, the start value and the end value of the target attribute are specific values, so that the target attribute of the web page element can change from the start value to the end value. This embodiment can render the target animation on the target interface based on the start value and the end value of the target attribute, wherein the target interface is the interface of the client to display the process data of the target attribute changing from the start value to the end value. The process data may be data related to the animation effect of the target attribute changing from the start value to the end value. Therefore, this embodiment can achieve the purpose of generating a smooth animation effect of the web page element in any scenario when the attribute value of the target attribute of the web page element is unknown.

[0037] Through the above steps S102 to S108 of the present application, the target attribute of the web page element is obtained; the attribute value of the target attribute is determined to change from a first attribute value to a second attribute value; the end value of the target attribute is determined based on the second attribute value; and the target animation is rendered on the target interface based on the start value and end value of the target attribute, wherein the target animation is used to display the process data of the target attribute changing from the start value to the end value. In other words, when the attribute value of the web page element changes, this embodiment calculates the changed attribute value and uses it as the end value of the attribute, and then uses the start value and end value of the attribute to render the animation, avoiding directly setting a maximum attribute value for the web page element and being unable to accurately set the end value of the web page element, thereby solving the technical problem of not being able to effectively display the animation effect of the web page element and achieving the technical effect of effectively displaying the animation effect of the web page element.

[0038] The above method of this embodiment is further introduced below.

[0039] As an optional implementation, step S106, determining the end value of the target attribute based on the second attribute value includes: determining the second attribute value as the end value of the target attribute.

[0040] In this embodiment, when determining the end value of the target attribute based on the second attribute value, the embodiment can directly determine the second attribute value as the end value of the target attribute, that is, the end value of the target attribute is the value after the calculated first attribute value is changed, so that the embodiment dynamically adds an end value equal to the actual attribute value of the web page element to the web page element, achieving the purpose of accurately calculating the end value of the web page element. This is also applicable even in the scenario where the content of the web page element changes, rather than directly setting a maximum attribute value for the web page element, which cannot be equal to the actual attribute value of the web page element, resulting in the inability to accurately set the end value of the web page element.

[0041] As an optional implementation, step S108, rendering the target animation on the target interface based on the start value and end value of the target attribute includes: rendering the target animation on the target interface based on the start value and end value when the start value is a default value.

[0042] In this embodiment, the starting value of the target attribute can be a pre-set default value, for example, 0, which can be flexibly set according to the specific scenario. No specific restrictions are made here, so that this embodiment can render the target animation on the target interface based on the starting value and ending value of the default value.

[0043] As an optional implementation, the target attribute is a style attribute, and the style attribute is used to represent the style of the web page element. The method further includes: determining an attribute variable in the style attribute; and assigning an end value to the attribute variable.

[0044] In this embodiment, the target attribute may be a style attribute, such as the height or width of a web page element. In this embodiment, an attribute variable may be determined in the style attribute. For example, under the style attribute, there is a height variable for the web page element, which may be represented by height. Then, the end value may be assigned to the variable, that is, the calculated second attribute value.

[0045] This embodiment uses a JS engine to dynamically obtain the second attribute value, and implements the target animation by modifying the value of the attribute variable through the style attribute of the web page element. It does not require the introduction of a third-party library, thereby reducing maintenance costs.

[0046] As an optional implementation, the method further includes: determining, through a cascading style sheet, whether a transition transformation operation is allowed on the web page element.

[0047] In this embodiment, a transition operation can be used to animate the process of changing the target attribute of a web page element from a first attribute value to another second attribute value. This solution is simple to use, has simple code, few dependencies, and is easy to maintain. It has a low implementation cost, smooth animation effects, and can improve the overall user experience of the system.

[0048] This embodiment can determine whether transition transformation operations are allowed on web page elements through Cascading Style Sheets (CCS) before rendering the target animation on the target interface based on the start value and end value of the target attribute. That is, this embodiment sets transition (CSS3 transition) through CSS. For example, when the target attribute is the height of the web page element, transition: height.3s ease can be set in advance.

[0049] The client of this embodiment supports CSS3 transition, and can control web page elements based on CSS3 transition to achieve changes in target attributes. The effect is smooth, and the animation duration, animation effect, etc. can be flexibly set.

[0050] As an optional implementation, step S108, based on the start value and end value of the target attribute, rendering the target animation on the target interface includes: performing a transition transformation operation on the start value and the end value to obtain the target animation; and rendering the target animation on the target interface using a rendering process.

[0051] In this embodiment, when rendering a target animation on a target interface based on the start value and end value of a target attribute, a transition transformation operation can be performed on the start value and the end value to obtain a target animation for displaying the change process of the target attribute from the start value to the end value. Optionally, after determining the end value of the target attribute, this embodiment can place the processing of the end value in a setTimeout, so that when the rendering process is started, the target animation can be rendered on the target interface to display the animation effect of the target attribute. The rendering process can be a user interface (UI) rendering process.

[0052] Optionally, the above-mentioned rendering process of this embodiment is started by a rendering engine, which can be a CSS rendering engine, thereby realizing the calculation of the second attribute value after the first attribute value changes through the JS engine, and further collaborating with the CSS rendering engine to render the animation effect of the target animation by assigning the second attribute value to the attribute variable under the style attribute of the web page element.

[0053] This embodiment uses a method for dynamically obtaining the attribute value of the target attribute of the web page element to solve the problem of errors in the animation effect caused by only setting the maximum attribute value when the attribute value of the target attribute is unknown, thereby achieving the technical effect of effectively displaying the animation effect of the web page element.

[0054] The disclosed embodiment also provides another data processing method from an educational scenario.

[0055] Figure 2 FIG. 1 is a flow chart of another data processing method according to an embodiment of the present disclosure. Figure 2 As shown, the method may include the following steps:

[0056] Step S202: obtaining target attributes of web page elements on the teaching platform, wherein the web page elements are used to display teaching information.

[0057] In the technical solution provided in the above step S202 of the present disclosure, the teaching platform can be a platform related to educational and research resources, and the web page element can be an element to be animated displayed on the page of the client of the teaching platform, which can include containers, functional controls, etc., which are used to display teaching information. The teaching information can be teaching content or related information of the teaching object, such as teacher information, student information, etc., which can be flexibly set here according to the actual scenario without specific restrictions.

[0058] In this embodiment, a target attribute of a web page element on the teaching platform is obtained, and the target attribute may include the height and / or width of the web page element.

[0059] Step S204: determining whether the attribute value of the target attribute changes from the first attribute value to the second attribute value.

[0060] In the technical solution provided in the above step S204 of the present disclosure, after obtaining the target attribute of the web page element on the teaching platform, it is determined that the attribute value of the target attribute changes from the first attribute value to the second attribute value.

[0061] In this embodiment, the attribute value of the target attribute can be obtained. For example, if the target attribute is the height of the webpage element, the attribute value can be the height value. For another example, if the target attribute is the width of the webpage element, the attribute value can be the width value. The attribute value of the target attribute in this embodiment can change from a first attribute value to a second attribute value.

[0062] Optionally, after the first attribute value changes, the second attribute value to which the first attribute value changes may be calculated by the first target engine.

[0063] Step S206: Determine the end value of the target attribute based on the second attribute value.

[0064] In the technical solution provided in the above step S206 of the present disclosure, after determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value, the end value of the target attribute can be determined based on the second attribute value.

[0065] In this embodiment, the target attribute of the web page element on the teaching platform has a start value and an end value, which are specific values. When the end value is unknown, the end value of the target attribute of the web page element on the teaching platform can be determined based on the second attribute value, and then the end value is added to the web page element on the teaching platform.

[0066] This embodiment determines the end value of the target attribute of the web page element on the teaching platform based on the second attribute value, and dynamically adds an end value corresponding to the actual attribute value of the web page element to the web page element on the teaching platform. This embodiment is also applicable even in the scenario where the content of the web page element on the teaching platform changes, rather than directly setting a maximum attribute value for the web page element on the teaching platform, which makes it impossible to accurately set the end value of the web page element on the teaching platform.

[0067] Step S208: Rendering a target animation on the interface of the teaching platform based on the start value and the end value of the target attribute.

[0068] In the technical solution provided in step S208 of the present disclosure, after determining the end value of the target attribute based on the second attribute value, a target animation can be rendered on the teaching platform interface based on the start and end values of the target attribute. The target animation is used to display the process data of the target attribute changing from the start value to the end value.

[0069] In this embodiment, the starting value of the target attribute of the web page element on the teaching platform can be known. After obtaining the ending value of the target attribute of the web page element on the teaching platform, the starting value and the ending value of the target attribute are specific values, so that the target attribute of the web page element on the teaching platform can change from the starting value to the ending value. This embodiment can render a target animation on the target interface based on the starting value and the ending value of the target attribute of the web page element on the teaching platform to display the process data of the target attribute changing from the starting value to the ending value. The process data can be data related to the animation effect of the target attribute of the web page element on the teaching platform changing from the starting value to the ending value. Therefore, this embodiment can achieve a smooth animation effect in any teaching scenario when the attribute value of the target attribute of the web page element on the teaching platform is unknown.

[0070] This embodiment dynamically obtains the attribute value method of the target attribute of the web page element on the teaching platform, which can solve the problem of errors in the animation effect caused by setting the maximum attribute value when the attribute value of the target attribute of the web page element on the teaching platform is unknown. It achieves the technical effect of effectively displaying the animation effect of the web page element to support the development of the education business.

[0071] The technical solution of the embodiment of the present disclosure is further illustrated below with reference to preferred implementation methods.

[0072] With the development of technologies such as HyperText Markup Language 5 (HTML5), CSS3, and JS version standard (ECMAScript 6.0, ES6), as well as the improvement of browser performance, users have higher requirements for product usage experience. These good experiences may include but are not limited to animation effects when the height or width of web page elements changes, and animation effects when the position of web page elements moves.

[0073] Methods for implementing animation include CSS3 animation (animation), HTML5 animation execution request (requestAnimationFrame), directly manipulating web page elements, or introducing third-party animation libraries. However, these methods are limited by the following three factors:

[0074] (1) Cost factors: The product requirement is only to achieve animation effects when the height of the web page elements changes. In this case, using animation, requestAnimationFrame, operating DOM or third-party animation libraries will bring a lot of work, making the cost increase exponentially;

[0075] (2) Technology development drives the trend. With the increasing development of web technologies, using JS engines to directly manipulate the DOM to achieve animation is becoming less and less recommended. From a design perspective, CSS is designed to express styles, and JS controls logic. Therefore, the preferred method for achieving animation is through CSS, or CSS3+.

[0076] (3) Project maintainability factors: Introducing a third-party animation library into the project will increase the project size. Developers need to learn the functions and usage of the third-party library, which increases maintenance costs to some extent.

[0077] In related technologies, the optimization scheme for animation can usually be carried out through the following schemes: no animation during the process of attribute changes (height, width, etc.) of elements. This method makes the state switching stiff and the experience poor; animation method, CSS3 native animation properties, can achieve more complex and feature-rich animation effects, but it requires more code to implement animation, which is suitable for more complex animation scenes and has a large workload; introducing third-party animation libraries (Anime.js, Lottie, etc.), but this method has a certain learning cost, increases the size of the project after packaging, and has high maintenance costs; transition method, for the animation effect of the change process of attributes such as height and width of web page elements from one value to another, transition can be used. The solution is simple to use and easy to maintain, and the solution that realizes animation through transition has a requirement for the CSS properties to be animated. The starting value and the ending value must be specific values. For the case where the initial value of the attribute of the web page element is known but the ending value is unknown, the maximum height max-height and the maximum width max-width can be set to set the ending value for the web page element to achieve the animation effect. However, this method has certain limitations, because the ending value of the web page element is uncertain, and setting a maximum height or maximum width value cannot be equal to the actual attribute value of the element, so the ending value of the web page element cannot be set very accurately, especially in the scenario where the content of the web page element changes. Therefore, the experience is not very friendly.

[0078] However, in this embodiment, all browsers support the CSS3 transition property. If the initial value is known (default is 0), the height and / or width of the web page element can be accurately calculated dynamically through JavaScript and used as the end value. Then, the end value of the property can be added to the web page element through the style. This can achieve a smooth animation effect even when the height (width, etc.) of any scene element is unknown. This is further described below.

[0079] Figure 3A Schematic diagram of using CSS3 transition to implement animation according to an embodiment of the present disclosure. Figure 3A As shown, the page has a label container. In the initial state of the page, the label container contains labels 1, 2, and 3, and the height of the label container is 30px. Clicking the "Add Label" control on the page dynamically adds label 4 to the label container, and the height of the label container changes from 30px to 50px.

[0080] Figure 3BThis is a flow chart of a method for implementing animation using CSS3 transition according to an embodiment of the present disclosure. Figure 3B As shown, the method may include the following steps:

[0081] Step S301: Add a tag to the tag container.

[0082] Step S302: dynamically calculate the height of the label container through the JS engine, and set the height value for the web page element through style.

[0083] This embodiment adds the end value of the height calculated above to the label container through style.

[0084] It should be noted that this embodiment needs to dynamically calculate the height of the label container through the JS engine before implementing the animation, and then dynamically assign the height variable under the style attribute of the label container to the calculated height of the label container.

[0085] Step S303: The height change of the label container is switched smoothly.

[0086] This embodiment implements smooth switching of height changes through the default start value and end value of the label container, and can display the animation effect of the height change of the label container on the target interface.

[0087] It should be noted that, in this embodiment, the web page elements to be animated must be set with transition in advance through CSS, for example, setting transition: height.3s ease. This animation implementation solution has simple code, few dependencies, low implementation cost, smooth animation effect, and improves the overall user experience of the system; the timing for obtaining the height value of the web page element to be animated is after the height of the web page element changes. The processing of the changed height value of the web page element can be placed in setTimeout, so that the animation effect can be rendered the next time the UI rendering process is started.

[0088] It should be noted that the above method involving the height of a web page element is also applicable to the width of a web page element.

[0089] The above method of this embodiment can be implemented based on the new features of CSS3, that is, the animation properties (height, width, etc.), animation duration, animation effects, etc. can be implemented based on the CSS3 transition control element; it is implemented based on the interaction between the JS engine and the CSS rendering engine, that is, this embodiment is based on HTML5 and W3C standard WEB technology, and uses JS to dynamically calculate the height and / or width of the web page element, and cooperates with the CSS rendering engine through the height and / or width variables under the style attribute of the web page element to achieve the rendered animation effect; this embodiment can be implemented based on the VUE framework, and the timing of obtaining the changed height and / or width of the web page element must be in the $nextTick callback function to ensure that the changed value of the height and / or width of the web page element is obtained.

[0090] This embodiment implements a method of obtaining element height through a JS engine combined with CSS3 transition to achieve animation. Compared with the related art method of achieving animation effects when the height and / or width of a web page element are unknown, the animation effects achieved by this embodiment are smooth, low in cost, and highly compatible. For example, the core of the animation achieved by this embodiment is based on CSS3 transition, which has a smooth effect and can flexibly set the animation duration and effect. This embodiment uses JS to dynamically obtain the height and / or width of a web page element, and implements animation by modifying the values of the height and / or width variables through the style attribute of the web page element. This does not require the introduction of a third-party library, thus reducing maintenance costs. In addition, the CSS3 and JS technologies used in this embodiment are both supported by mainstream browsers. For example, mainstream PC / H5 browsers all support CSS transition, and the method getBoundingClientRect for obtaining the height and / or width of a web page element is also supported by all mainstream browsers, so the method of this embodiment has high compatibility.

[0091] The above-mentioned method of dynamically obtaining the height and / or width of a web page element involved in this embodiment can solve the problem of errors in animation effects caused by setting fixed values such as maximum height and maximum width when the height and / or width of a web page element are unknown.

[0092] The above method of this embodiment can be applied to an education and teaching research resource platform to support the development of education business.

[0093] The present disclosure provides a data processing device. It should be noted that the data processing device of this embodiment can be used to execute the present disclosure. Figure 1 The data processing method of the illustrated embodiment.

[0094] Figure 4 Schematic diagram of a data processing device according to an embodiment of the present disclosure. Figure 4 As shown, the data processing device 40 may include: a first acquiring unit 41 , a first determining unit 42 , a second determining unit 43 and a first rendering unit 44 .

[0095] The first acquiring unit 41 is configured to acquire a target attribute of a web page element.

[0096] The first determining unit 42 is configured to determine whether the attribute value of the target attribute changes from a first attribute value to a second attribute value.

[0097] The second determining unit 43 is configured to determine an end value of the target attribute based on the second attribute value.

[0098] The first rendering unit 44 is configured to render a target animation on the target interface based on the start value and the end value of the target attribute, wherein the target animation is configured to display process data of the target attribute changing from the start value to the end value.

[0099] Optionally, the second determining unit includes: a determining module, configured to determine the second attribute value as the end value of the target attribute.

[0100] Optionally, the first rendering unit 44 includes: a first rendering module, configured to render the target animation on the target interface based on the start value and the end value when the start value is a default value.

[0101] Optionally, the target attribute is a style attribute, and the style attribute is used to represent the style of the web page element. The device further includes: a third determining unit, used to determine an attribute variable in the style attribute; and an assigning unit, used to assign an end value to the attribute variable.

[0102] Optionally, the apparatus further comprises: a fourth determining unit, configured to determine, through a cascading style sheet, whether a transition transformation operation is allowed on a web page element.

[0103] Optionally, the first rendering unit includes: a transition module for performing a transition transformation operation on the start value and the end value to obtain a target animation; and a second rendering module for rendering the target animation on the target interface using a rendering process.

[0104] Optionally, the target attribute includes the width of the web page element and / or the height of the web page element.

[0105] Optionally, the first acquisition unit includes: an acquisition module for acquiring target attributes of web page elements on the teaching platform, wherein the web page elements are used to display teaching information; the first rendering unit includes: a third rendering module for rendering target animation on the interface of the teaching platform based on the start value and the end value.

[0106] The present disclosure provides another data processing device. It should be noted that the data processing device of this embodiment can be used to execute the present disclosure. Figure 2 The data processing method of the illustrated embodiment.

[0107] Figure 5 FIG. 1 is a schematic diagram of another data processing device according to an embodiment of the present disclosure. Figure 5 As shown, the data processing device 50 may include: a second obtaining unit 51 , a fifth determining unit 52 , a sixth determining unit 53 and a second rendering unit 54 .

[0108] The second acquiring unit 51 is configured to acquire target attributes of web page elements on the teaching platform, wherein the web page elements are used to display teaching information.

[0109] The fifth determining unit 52 is configured to determine whether the attribute value of the target attribute changes from the first attribute value to the second attribute value.

[0110] The sixth determining unit 53 is configured to determine an end value of the target attribute based on the second attribute value.

[0111] The second rendering unit 54 is used to render a target animation on the interface of the teaching platform based on the start value and the end value of the target attribute, wherein the target animation is used to display process data of the target attribute changing from the start value to the end value.

[0112] In the data processing device of this embodiment, when the attribute value of a web page element changes, the changed attribute value is calculated and used as the end value of the attribute, and then the start value and end value of the attribute are used to render the animation, avoiding directly setting a maximum attribute value for the web page element and not being able to accurately set the end value of the web page element, thereby solving the technical problem of not being able to effectively display the animation effect of the web page element and achieving the technical effect of effectively displaying the animation effect of the web page element.

[0113] It should be noted that the above-mentioned units and modules can be implemented through software or hardware. For the latter, it can be implemented in the following ways, but not limited to: the above-mentioned modules are all located in the same processor; or the above-mentioned modules are located in different processors in any combination.

[0114] In the technical solutions disclosed herein, the acquisition, storage, and application of user personal information involved comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0115] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0116] Figure 6 : is a schematic block diagram of an electronic device according to an embodiment of the present disclosure. Figure 6As shown, electronic devices are intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are intended to be examples only and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0117] like Figure 6 As shown, the device 600 includes a computing unit 601, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 602 or a computer program loaded from a storage unit 608 into a random access memory (RAM) 603. Various programs and data required for the operation of the device 600 can also be stored in the RAM 603. The computing unit 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0118] Various components in device 600 are connected to I / O interface 605, including an input unit 606, such as a keyboard, mouse, etc.; an output unit 607, such as various types of displays, speakers, etc.; a storage unit 608, such as a magnetic disk, optical disk, etc.; and a communication unit 609, such as a network card, modem, wireless communication transceiver, etc. The communication unit 609 allows device 600 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0119] The computing unit 601 can be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 801 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units that run machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 601 performs the various methods and processes described above, such as the data processing method. For example, in some embodiments, the data processing method can be implemented as a computer software program that is tangibly contained in a machine-readable medium, such as the storage unit 608. In some embodiments, part or all of the computer program can be loaded and / or installed on the device 600 via the ROM 602 and / or the communication unit 609. When the computer program is loaded into the RAM 603 and executed by the computing unit 601, one or more steps of the data processing method described above can be performed. Alternatively, in other embodiments, the computing unit 601 can be configured to perform the data processing method by any other appropriate means (e.g., by means of firmware).

[0120] Various embodiments of the systems and techniques described herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include being implemented in one or more computer programs that are executable and / or interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0121] The program code for implementing the method of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device so that when the program code is executed by the processor or controller, the functions / operations specified in the flow chart and / or block diagram are implemented. The program code can be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0122] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium can include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0123] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0124] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0125] A computer system may include a client and a server. The client and server are generally remote from each other and typically interact through a communication network. The client-server relationship arises through computer programs running on the respective computers and having a client-server relationship with each other. The server may be a cloud server, a server in a distributed system, or a server integrated with a blockchain.

[0126] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this disclosure can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved. This is not a limitation herein.

[0127] The above specific embodiments do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure shall be included within the scope of protection of this disclosure.

Claims

1. A data processing method, comprising: Acquire a target attribute of a webpage element, wherein the target attribute is a style attribute, and the style attribute is used to represent the style of the webpage element; Determining that the attribute value of the target attribute changes from a first attribute value to a second attribute value; Determining the second attribute value as the end value of the target attribute; rendering a target animation on a target interface based on the start value and the end value of the target attribute, wherein the target animation is used to display process data of the target attribute changing from the start value to the end value; Wherein, determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value includes: dynamically calculating the second attribute value of the target attribute by a first target engine, wherein the timing of calculating the second attribute value is in a callback function $nextTick, and the first target engine is a JS engine; The method of rendering a target animation on a target interface based on the start value and the end value of the target attribute comprises: determining, through a cascading style sheet (CSS), that a transition transformation operation is allowed for the web page element, performing the transition transformation operation on the start value and the end value to obtain the target animation; and starting a rendering process using a CSS rendering engine to render the target animation on the target interface. After determining the second attribute value as the end value of the target attribute, the method further includes: processing the end value in setTimeout; determining an attribute variable in the style attribute, and assigning the processed end value to the attribute variable.

2. The method according to claim 1, wherein Rendering a target animation on a target interface based on the start value and the end value of the target attribute includes: When the start value is a default value, the target animation is rendered on the target interface based on the start value and the end value. 3 . The method according to claim 1 , wherein the target attribute comprises the width of the web page element and / or the height of the web page element.

4. The method according to any one of claims 1 to 2, wherein: Acquiring the target attribute of the webpage element includes: acquiring the target attribute of the webpage element on the teaching platform, wherein the webpage element is used to display teaching information; Rendering a target animation on a target interface based on the start value and the end value of the target attribute includes: rendering the target animation on an interface of the teaching platform based on the start value and the end value.

5. A data processing device comprising: A first acquiring unit is configured to acquire a target attribute of a webpage element, wherein the target attribute is a style attribute, and the style attribute is used to represent the style of the webpage element; a first determining unit, configured to determine whether the attribute value of the target attribute changes from a first attribute value to a second attribute value; a second determining unit, configured to determine the second attribute value as the end value of the target attribute; a first rendering unit, configured to render a target animation on a target interface based on the start value and the end value of the target attribute, wherein the target animation is configured to display process data of the target attribute changing from the start value to the end value; The second determining unit is further configured to determine that the attribute value of the target attribute changes from the first attribute value to the second attribute value by: dynamically calculating the second attribute value of the target attribute by a first target engine, wherein the timing for calculating the second attribute value is in a callback function $nextTick, and the first target engine is a JS engine; The first rendering unit is further configured to render a target animation on a target interface based on the start value and the end value of the target attribute by: determining, through a cascading style sheet (CSS), that a transition transformation operation is allowed for the web page element, performing the transition transformation operation on the start value and the end value to obtain the target animation; and starting a rendering process using a CSS rendering engine to render the target animation on the target interface. After the second determining unit determines the second attribute value as the end value of the target attribute, the device is further used to: process the end value in setTimeout; determine an attribute variable in the style attribute, and assign the processed end value to the attribute variable.

6. The device according to claim 5, wherein The first rendering unit includes: A first rendering module is configured to render the target animation on the target interface based on the start value and the end value when the start value is a default value. 7 . The device according to claim 5 , wherein the target attribute comprises a width of the web page element and / or a height of the web page element.

8. The device according to any one of claims 5 to 6, wherein: The first acquisition unit includes: an acquisition module, configured to acquire the target attribute of the web page element on the teaching platform, wherein the web page element is used to display teaching information; The first rendering unit includes: a third rendering module, which is used to render the target animation on the interface of the teaching platform based on the start value and the end value.

9. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 4.

10. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-4.

11. A computer program product comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 1 to 4.

Images