CN113849164A - Data processing method and device, electronic equipment and memory - Google Patents

Data processing method and device, electronic equipment and memory Download PDF

Info

Publication number
CN113849164A
CN113849164A CN202111130351.0A CN202111130351A CN113849164A CN 113849164 A CN113849164 A CN 113849164A CN 202111130351 A CN202111130351 A CN 202111130351A CN 113849164 A CN113849164 A CN 113849164A
Authority
CN
China
Prior art keywords
value
attribute
target
animation
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111130351.0A
Other languages
Chinese (zh)
Inventor
何亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN202111130351.0A priority Critical patent/CN113849164A/en
Publication of CN113849164A publication Critical patent/CN113849164A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures

Abstract

The disclosure provides a data processing method and device, electronic equipment and a memory, and relates to the technical field of computers, in particular to the field of webpage display. The specific implementation scheme is as follows: acquiring a target attribute of a webpage element; determining that 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 the target animation on the target interface based on the starting value and the ending value of the target attribute, wherein the target animation is used for displaying process data of the target attribute changing from the starting value to the ending value, and the technical problem that the animation of the webpage element cannot be effectively displayed is solved.

Description

Data processing method and device, electronic equipment and memory
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a data processing method and apparatus, an electronic device, and a memory in the field of web page display.
Background
At present, for the service development of a web page, in the process of changing the attribute of a web page element, the web page element is usually directly displayed according to the changed attribute without animation processing, that is, a certain animation effect is not presented in the process of changing the attribute of the web page element, so that the transformation state of the web page element is relatively hard.
Disclosure of Invention
The disclosure provides a data processing method and device, an electronic device and a memory.
According to an aspect of the present disclosure, a data processing method is provided. The method can comprise the following steps: acquiring a target attribute of a webpage element; determining that 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 the target interface based on the starting value and the ending value of the target attribute, wherein the target animation is used for displaying the process data of the target attribute changing from the starting value to the ending value.
According to another aspect of the present disclosure, a data processing apparatus is provided. The apparatus may include: the first acquisition unit is used for acquiring the target attribute of the webpage element; the first determining unit is used for determining that the attribute value of the target attribute is changed from the first attribute value to the second attribute value; a second determination unit configured to determine an end value of the target attribute based on the second attribute value; and the first rendering unit is used for rendering the target animation on the target interface based on the starting value and the ending value of the target attribute, wherein the target animation is used for showing the process data of the target attribute changing from the starting value to the ending value.
According to another aspect of the present disclosure, an electronic device is also provided. The electronic device may include: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executable by the at least one processor to enable the at least one processor to perform the data processing method of the embodiments of the present disclosure.
According to another aspect of the present disclosure, there is also provided a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the data processing method of the embodiments of the present disclosure.
According to another aspect of the present disclosure, a computer program product is also provided. The computer program product may comprise a computer program which, when executed by a processor, implements the data processing method of an embodiment of the present disclosure.
It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.
Drawings
The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:
FIG. 1 is a data processing method according to an embodiment of the present disclosure;
FIG. 2 is a flow chart of another method of data processing according to an embodiment of the present disclosure;
FIG. 3A is a schematic diagram of an animation implemented using CSS3 transitions, according to an embodiment of the present disclosure;
FIG. 3B is a flow diagram of a method of implementing animation using CSS3 transitions in accordance with an embodiment of the present disclosure;
FIG. 4 is a schematic diagram of a data processing apparatus according to an embodiment of the present disclosure;
FIG. 5 is a schematic diagram of another data processing apparatus according to an embodiment of the present disclosure;
fig. 6 is a schematic block diagram of an electronic device in accordance with an embodiment of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
The embodiment of the disclosure provides a data processing method.
Fig. 1 is a data processing method according to an embodiment of the present disclosure. As shown in fig. 1, the data processing method may include the steps of:
step S102, acquiring the target attribute of the webpage element.
In the technical solution provided in the above step 102 of the present disclosure, the web page element may be an element to be animated, which is displayed on a page of the client, for example, the element may be an element Cascading Style Sheet (CSS) attribute of the animation, and may include a container, a function control, and the like. The client may be a browser, and the container may be a tab container, that is, at least one tab may be displayed through the container.
Alternatively, the above-mentioned web page element of this embodiment may be a Document Object Model (DOM) element.
In this embodiment, a target attribute of a web page element is obtained, which may include a Height (Height) and/or a Width (Width) of the web page element.
And step S104, determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
In the technical solution provided in the above step 104 of the present disclosure, after the target attribute of the web page element is obtained, it is determined that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
In this embodiment, the attribute value of the target attribute may be obtained, for example, if the target attribute is the height of the web page element, the attribute value may be a height value, and if the target attribute is the width of the web page element, the attribute value may be a width value. The attribute value of the target attribute of this embodiment may be changed from the first attribute value to the second attribute value, for example, the web page element may be a page container, the page container may include a tag 1, a tag 2, and a tag 3, and the height value of the page container may be 30px at this time, and after the tag 4 is added to the page container, for example, the page where the page container is located has a function control for adding a tag, and the tag 4 may be further added to the page container through the function control in response to the operation instruction, and at this time, the height value of the page container may be changed, and the height value of the page container may be 50 px.
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, where the first target engine may be a JS engine supported by the client, that is, the embodiment may dynamically calculate the second attribute value of the target attribute by the JS engine, for example, the second attribute value may be obtained by getserving clientrect in the JS engine. It may also be referred to as an element attribute value, e.g., an element height value, DOM element height.
Optionally, the timing for acquiring the second attribute value in this embodiment may be in a callback function ($ nextTick) to ensure that the second attribute value after the change of the first attribute value is acquired.
Step S106, determining the end value of the target attribute based on the second attribute value.
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 may be determined based on the second attribute value.
In this embodiment, the target attribute has a start value and an end value, which are specific values, and in the case that the end value is unknown, the end value of the target attribute may be determined based on the second attribute value, so as to add the end value to the web page element.
This embodiment dynamically adds an end value corresponding to the true attribute value of the web page element to the web page element by determining the end value of the target attribute based on the second attribute value, which is also applicable even in a scene where the content of the web page element changes, instead of directly setting a fixed value of the maximum attribute value (maximum height max-width) to the web page element, resulting in failure to set the end value of the web page element with high accuracy.
And step S108, rendering the target animation on the target interface based on the starting value and the ending value of the target attribute.
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 the end value of the target attribute, where the target animation is used to show process data of the target attribute changing from the start value to the end value.
In this embodiment, the start value of the target attribute may be known, and 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 may change from the start value to the end value.
Acquiring target attributes of the webpage elements through the steps S102 to S108; determining that 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 the target interface based on the starting value and the ending value of the target attribute, wherein the target animation is used for displaying the process data of the target attribute changing from the starting value to the ending value. That is to say, in this embodiment, when the attribute value of the web page element changes, the changed attribute value is calculated and is used as the end value of the attribute, and then the animation is rendered by using the start value and the end value of the attribute, so that it is avoided that a maximum attribute value is directly set for the web page element, but the end value of the web page element cannot be set very accurately, thereby solving the technical problem that the animation effect of the web page element cannot be effectively displayed, and achieving the technical effect of effectively displaying the animation effect of the web page element.
The above-described method of this embodiment is further described below.
As an alternative implementation, the step S106, determining the end value of the target attribute based on the second attribute value includes: the second attribute value is determined as the ending value of the target attribute.
In this embodiment, when determining the end value of the target attribute based on the second attribute value is implemented, the embodiment may directly determine the second attribute value as the end value of the target attribute, that is, the end value of the target attribute is a value obtained by changing the calculated first attribute value, so that the embodiment dynamically adds the end value equal to the actual attribute value of the web page element to the web page element, and implements the purpose of accurately calculating the end value of the web page element.
As an optional implementation manner, in step S108, rendering the target animation on the target interface based on the start value and the end value of the target property includes: in the case that 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.
In this embodiment, the start value of the target attribute may be a default value that has been set in advance, for example, 0, and may be flexibly set according to a specific scene, where no specific limitation is made here, so that this embodiment may render the target animation on the target interface based on the start value and the end value that are the default values.
As an optional implementation, the target attribute is a style attribute, and the style attribute is used to represent a style of the web page element, and the method further includes: determining attribute variables in the style attributes; an end value is assigned to the attribute variable.
In this embodiment, the target attribute may belong to one of style attributes (styles), such as height or width of a web page element. The embodiment may determine the attribute variable in the style attribute, for example, if the style attribute has a high variable of a web page element below, which may be represented by height, the end value may be assigned to the high variable, that is, the calculated second attribute value may be assigned to the high variable.
According to the embodiment, the JS engine is used for dynamically acquiring the second attribute value, the target animation is realized by modifying the value of the attribute variable through the style attribute of the webpage element, and a third-party library is not required to be introduced, so that the maintenance cost is low.
As an optional implementation, the method further comprises: and determining that the transition transformation operation is allowed to be carried out on the webpage elements through the cascading style sheet.
In this embodiment, for the animation effect of the change process of the target attribute of the web page element from one first attribute value to another second attribute value, a transition transformation operation (transition) can be adopted, and the scheme is simple to use, simple in code, less in dependence, convenient to maintain, low in implementation cost, smooth in animation effect, and capable of improving the overall use experience of the system.
This embodiment may determine, through a Cascading Style Sheets (CCS), that a transition operation is allowed to be performed on a web page element before rendering a target animation on a target interface based on a start value and an end value of a target attribute, that is, this embodiment sets a transition (CSS3 transition) through a CSS, for example, when the target attribute is high of the web page element, the transition may be set in advance: height.3s ease.
The client side of the embodiment supports CSS3 transition, can control the webpage elements to realize the change of the target attributes based on CSS3 transition, has smooth effect, and can flexibly set animation duration, animation effect and the like.
As an optional implementation manner, in step S108, rendering the target animation on the target interface based on the start value and the end value of the target property includes: carrying out transition transformation operation on the starting value and the ending value to obtain a target animation; and rendering the target animation on the target interface by utilizing the rendering process.
In this embodiment, when rendering a target animation on a target interface based on the start value and the end value of the target attribute is implemented, a transition transformation operation may be performed on the start value and the end value, and a target animation for showing a change process of the target attribute from the start value to the end value may be obtained. Optionally, after determining the end value of the target attribute, the embodiment may place the processing of the end value in setTimeout, so that when the rendering process is started, the target animation may be rendered on the target interface to show the animation effect of the target attribute. The rendering process may be a User Interface (UI) rendering process.
Optionally, the rendering process in this embodiment is started by a rendering engine, which may be a CSS rendering engine, so that the effect of rendering the animation of the target animation by calculating the second attribute value after the first attribute value is changed by using a JS engine, and by assigning the second attribute value to the attribute variable under the style attribute of the web page element, further cooperating with the CSS rendering engine is achieved.
According to the embodiment, the problem that the animation effect is wrong only by setting the maximum attribute value under the condition that the attribute value of the target attribute is unknown can be solved by dynamically acquiring the attribute value of the target attribute of the webpage element, and the technical effect of effectively displaying the animation effect of the webpage element is achieved.
The disclosed embodiments also provide another data processing method from an educational scenario.
FIG. 2 is a flow chart of another data processing method according to an embodiment of the disclosure. As shown in fig. 2, the method may include the steps of:
step S202, acquiring the target attribute of the webpage element on the teaching platform, wherein the webpage element is used for displaying teaching information.
In the technical solution provided in the above step S202 of the present disclosure, the teaching platform may be a platform related to educational and educational resources, the web page element may be an element to be animated and displayed on a page of a client of the teaching platform, and may include a container, a function control, and the like, and is used to display teaching information, where the teaching information may be teaching content, or may also be related information of a teaching object, such as teacher information, student information, and the like, and the teaching information may be flexibly set according to an actual scene without specific limitation.
In this embodiment, a target attribute of a web page element on a tutorial platform is obtained, which may include the height and/or width of the web page element.
Step S204, determining that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
In the technical solution provided in the above step S204 of the present disclosure, after the target attribute of the web page element on the teaching platform is acquired, it is determined that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
In this embodiment, the attribute value of the target attribute may be obtained, for example, if the target attribute is the height of the web page element, the attribute value may be a height value, and if the target attribute is the width of the web page element, the attribute value may be a width value. The attribute value of the target attribute of this embodiment may be changed from a first attribute value to a second attribute value.
Alternatively, after the change of the first attribute value, the above-described second attribute value to which the first attribute value is changed may be calculated by the first target engine.
In step S206, an end value of the target attribute is determined based on the second attribute value.
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 may be determined based on the second attribute value.
In this embodiment, the target attribute of the web page element on the teaching platform has a start value and an end value, where the start value and the end value are specific values, and in the case that the end value is unknown, the end value of the target attribute of the web page element on the teaching platform may be determined based on the second attribute value, so as to add the end value to the web page element on the teaching platform.
The embodiment dynamically adds the end value corresponding to the real attribute value of the web page element to the web page element on the teaching platform by determining the end value of the target attribute of the web page element on the teaching platform based on the second attribute value, and is also applicable even in a scene 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 results in that the end value of the web page element on the teaching platform cannot be set very accurately.
And S208, rendering the target animation on the interface of the teaching platform based on the starting value and the ending value of the target attribute.
In the technical solution provided in the above step S208 of the present disclosure, after determining the end value of the target attribute based on the second attribute value, the target animation may be rendered on the interface of the teaching platform based on the start value and the end value of the target attribute. The target animation is used for showing the process data of the target attribute changing from the starting value to the ending value.
In this embodiment, the start value of the target attribute of the web page element on the teaching platform may be known, and after the end value of the target attribute of the web page element on the teaching platform 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 on the teaching platform may change from the start value to the end value, and this embodiment may render a target animation on a target interface based on the start value and the end value of the target attribute of the web page element on the teaching platform to show process data of the target attribute changing from the start value to the end value, where the process data may be data related to animation effects of the target attribute of the web page element on the teaching platform changing from the start value to the end value, so that this embodiment may implement, in any teaching scenario, in a case that the attribute value of the target attribute of the web page element on the teaching platform is unknown, a smooth animation effect can still be produced.
According to the embodiment, the problem that the animation effect is wrong only by setting the maximum attribute value under the condition that the attribute value of the target attribute of the webpage element on the teaching platform is unknown can be solved by dynamically acquiring the attribute value of the target attribute of the webpage element on the teaching platform, so that the technical effect of effectively displaying the animation effect of the webpage element is achieved, and the development of education business is supported.
The technical solutions of the embodiments of the present disclosure are further illustrated below with reference to preferred embodiments.
With the development of technologies such as HyperText Markup Language 5 (HTML 5 for short) 5, CSS3, JS version standard (ECMAScript 6.0, ES6 for short) 5, and the improvement of browser performance, users have made higher demands on the use experience of products, which may include, but is not limited to, animation effects when the height or width of a web page element changes, animation effects when the position of the web page element moves, and the like.
The methods for realizing animation can be CSS3 animation (animation), HTML5 animation execution request (requestanimation frame), can directly operate web page elements, or introduce a third-party animation library, and the like, but the methods are limited by the following three factors:
(1) using cost factors, the product requirements only require that the webpage elements realize the animation effect when the height changes, and in this case, using animation, requestanimation frame, operating DOM or a third-party animation library brings great workload, so that the cost is increased by multiple times;
(2) the technology development driving factor, with the increasing development of WEB page (WEB) technology, a way of implementing animation by directly operating DOM using a JS engine is not recommended. From a design point of view, the CSS itself is the JS control logic designed to render the style, so it is preferred to recommend animation in the way of CSS or CSS3+ as it were.
(3) The project can be maintained, the introduction of a third-party animation library in the project can cause the increase of project volume, developers need to learn the functions and the usage of the third-party library, and the maintenance cost is increased to some extent.
In the related art, an optimization scheme for animation may be generally performed by: no animation exists in the process of changing the attributes (height, width and the like) of the elements, and the method ensures that the state switching is hard and the experience is poor; according to the animation mode and the CSS3 native animation property, the animation effect with more complexity and rich functions can be realized, more codes are needed for realizing animation, the method is suitable for more complex animation scenes, and the workload is large; a third-party animation library (animation libraries such as animation. js, Lottie and the like) is introduced, but the method has certain learning cost, increases the volume of packaged projects, and has high maintenance cost; the transition mode can be adopted for the animation effect of the process of changing the height, width and other attributes of the webpage elements from one value to another value, the scheme is simple to use and convenient to maintain, the scheme for realizing the animation through the transition has a requirement on the CSS attribute to be animated, the initial value and the end value must be specific values, the initial value of the attribute of the webpage elements is known, and the end value is unknown, the maximum height max-height and the maximum width max-width can be set for the webpage elements to realize the animation effect, but the method has certain limitation, because the end value of the webpage elements is uncertain, the maximum height or the maximum width value cannot be equal to the real attribute value of the elements, so that the end value of the webpage elements cannot be set accurately, and is particularly not suitable for the scene of content change of the webpage elements, the experience is not very friendly.
However, in this embodiment, the browsers all support the CSS3 transition attribute, and in the case that the initial value is known (default 0), it may be necessary to dynamically and accurately calculate the height value and/or the width value of the web page element through JS as the end value, and then add the end value of the attribute to the web page element through style, so that a smooth animation effect can be achieved in the case that the height (width, etc.) of any scene element is unknown. As described further below.
FIG. 3A is a schematic diagram of an animation implemented using CSS3 transitions, according to an embodiment of the disclosure. As shown in fig. 3A, the page has a label container in which a label 1, a label 2, and a label 3 are disposed in an initial state of the page, and the height of the label container at this time is 30 px. By clicking the function control of "add label" on the page, the label 4 can be dynamically added to the label container, and the height of the label container is changed from the original 30px to 50 px.
Fig. 3B is a flowchart of a method of implementing animation using CSS3 transitions, according to an embodiment of the disclosure. As shown in fig. 3B, the method may include the steps of:
step S301, a label is added to the label container.
Step S302, dynamically calculating the height of the tag container through the JS engine, and setting a height value for the webpage element through style.
This embodiment adds an end value to the label container by style that may be the calculated height described above.
It should be noted that this embodiment needs to dynamically calculate the height of the label container through the JS engine before the animation is implemented, and then dynamically assign a value to the height variable below the style attribute of the label container as the height of the label container calculated above.
Step S303, the height change of the label container is smoothly switched.
According to the embodiment, the height change is smoothly switched through the default starting value and the default ending value of the label container, and the animation effect of the height change of the label container can be displayed on the target interface.
It should be noted that, in this embodiment, the web page element to be animated must be set in advance by the CSS, for example, setting the transition: height.3s ease, the scheme for realizing the animation has the advantages of simple code, less dependence, lower realization cost and smooth animation effect, and improves the overall use experience of the system; the timing for obtaining the height value of the web page element to be animated is that after the height of the web page element changes, the processing of the height value of the changed web page element can be placed in setTimeout, so that the animation effect can be rendered when the UI rendering process is started next time.
It should be noted that the above method related to the height of the web page element is also applicable to the width of the web page element.
The above method of this embodiment may be implemented based on the new characteristics of the CSS3, that is, the attributes (height, width, etc.) of the animation, the animation duration, the animation effect, etc. may be implemented based on the CSS3 transition control element; the rendering method is achieved by interaction between a JS engine and a CSS rendering engine, namely, the embodiment is based on HTML5 and W3C standard WEB technologies, the height and/or army of a webpage element are/is dynamically calculated by using JS, and the animation effect is achieved by the cooperation of height and/width variables below the style attribute of the webpage element and the CSS rendering engine; this embodiment may be implemented based on the VUE framework, and the opportunity to obtain the height and/or width of a web page element change is in the $ nextTick callback function to ensure that the changed height and/or width value of the web page element is obtained.
According to the embodiment, animation is realized by combining the height of the element acquired by the JS engine and the CSS3 transition, and compared with a method for realizing animation effect under the condition that the height and/or width of the webpage element are unknown in the related art, the animation effect realized by the embodiment is smooth, low in realization cost, good in compatibility and the like. For example, the core of the animation realized by the embodiment is based on CSS3 transition, the effect is smooth, and the animation duration and the animation effect can be flexibly set; the embodiment uses JS to dynamically acquire the height and/or width of the webpage element, and animation is realized by modifying the value of the height and/or width variable through the style attribute of the webpage element without introducing a third-party library, so that the maintenance cost is low; in addition, both the CSS3 and the JS technology used in this embodiment are supported by the mainstream browser, for example, both the PC/H5 mainstream browser supports CSS transition, and the method getbackingclientrect of obtaining the height and/or width of a web page element is also supported by all the mainstream browsers, so that the method of this embodiment has good compatibility.
The method for dynamically acquiring the height and/or width of the web page element according to the embodiment can solve the problem that the animation effect is wrong only by setting the fixed values of the maximum height value and the maximum width value when the height and/or width of the web page element is unknown.
The method of the embodiment can be applied to an educational teaching and research resource platform to support the development of educational business.
The embodiment of the disclosure provides a data processing device. It should be noted that the data processing apparatus of this embodiment may be used to execute the data processing method of the embodiment shown in fig. 1 of the present disclosure.
Fig. 4 is a schematic diagram of a data processing apparatus according to an embodiment of the present disclosure. As shown in fig. 4, the data processing apparatus 40 may include: a first acquisition unit 41, a first determination unit 42, a second determination unit 43, and a first rendering unit 44.
A first obtaining unit 41, configured to obtain a target attribute of a web page element.
The first determining unit 42 is configured to determine that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
A second determining unit 43 for determining an end value of the target property based on the second property value.
And 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, where the target animation is used to show the process data of the target attribute changing from the start value to the end value.
Optionally, the second determination unit includes: and the determining module is used for determining the second attribute value as the end value of the target attribute.
Optionally, the first rendering unit 44 includes: and the first rendering module is used for rendering the target animation on the target interface based on the starting value and the ending value under the condition that the starting value is a default value.
Optionally, the target attribute is a style attribute, and the style attribute is used to represent a style of the web page element, and the apparatus further includes: a third determining unit for determining an attribute variable in the style attribute; and the assignment unit is used for assigning an end value to the attribute variable.
Optionally, the apparatus further comprises: and the fourth determination unit is used for determining that the transition transformation operation is allowed to be carried out on the webpage elements through the cascading style sheet.
Optionally, the first rendering unit includes: the transition module is used for carrying out transition transformation operation on the starting value and the ending value to obtain a target animation; and the second rendering module is used for rendering the target animation on the target interface by utilizing the rendering process.
Optionally, the target attribute includes a width of the web page element and/or a height of the web page element.
Optionally, the first obtaining unit includes: the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring the target attribute of a webpage element on a teaching platform, and the webpage element is used for displaying teaching information; the first rendering unit includes: and the third rendering module is used for rendering the target animation on the interface of the teaching platform based on the starting value and the ending value.
The disclosed embodiment provides another data processing apparatus. It should be noted that the data processing apparatus of this embodiment may be used to execute the data processing method of the embodiment shown in fig. 2 of the present disclosure.
FIG. 5 is a schematic diagram of another data processing apparatus according to an embodiment of the present disclosure. As shown in fig. 5, the data processing apparatus 50 may include: a second acquisition unit 51, a fifth determination unit 52, a sixth determination unit 53, and a second rendering unit 54.
The second obtaining unit 51 is configured to obtain a target attribute of a web page element on the teaching platform, where the web page element is used to display teaching information.
A fifth determining unit 52, configured to determine that the attribute value of the target attribute changes from the first attribute value to the second attribute value.
A sixth determining unit 53, configured to determine an end value of the target attribute based on the second attribute value.
And a second rendering unit 54, configured 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, where the target animation is used to show process data of the target attribute changing from the start value to the end value.
In the data processing apparatus of this embodiment, when the attribute value of the web page element changes, the changed attribute value is calculated and used as the end value of the attribute, and then the animation is rendered by using the start value and the end value of the attribute, so that it is avoided that a maximum attribute value is directly set for the web page element, but the end value of the web page element cannot be set very accurately, thereby solving the technical problem that the animation effect of the web page element cannot be effectively displayed, and achieving the technical effect of effectively displaying the animation effect of the web page element.
It should be noted that the above units and modules can be implemented by software or hardware, and for the latter, the following manners can be implemented, but are not limited to the following manners: the modules are all positioned in the same processor; alternatively, the modules are respectively located in different processors in any combination.
In the technical scheme of the disclosure, the acquisition, storage, application and the like of the personal information of the related user all accord with the regulations of related laws and regulations, and do not violate the good customs of the public order.
The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.
Fig. 6 is a schematic block diagram of an electronic device in accordance with an embodiment of the present disclosure. As shown in FIG. 6, the electronic device is intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 6, the apparatus 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. In the RAM 603, various programs and data required for the operation of the device 600 can also be stored. The calculation 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 bus 604.
A number of components in the device 600 are connected to the I/O interface 605, including: an input unit 606 such as a keyboard, a mouse, or the like; an output unit 607 such as various types of displays, speakers, and the like; a storage unit 608, such as a magnetic disk, optical disk, or the like; and a communication unit 609 such as a network card, modem, wireless communication transceiver, etc. The communication unit 609 allows the device 600 to exchange information/data with other devices via a computer network such as the internet and/or various telecommunication networks.
The computing unit 601 may be a variety of general and/or special purpose processing components having 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 running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and the like. The calculation unit 601 executes the respective methods and processes described above, such as the data processing method. For example, in some embodiments, the data processing method may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and/or installed onto 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 may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform the data processing method by any other suitable means (e.g. by means of firmware).
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here 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 a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, 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 may be received in any form, including acoustic, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, 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: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.
The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.
It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and the present disclosure is not limited herein.
The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the scope of protection of the present disclosure.

Claims (19)

1. A method of data processing, comprising:
acquiring a target attribute of a webpage element;
determining that 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 starting value and the ending value of the target attribute, wherein the target animation is used for displaying the process data of the target attribute changing from the starting value to the ending value.
2. The method of claim 1, wherein determining the ending value of the target attribute based on the second attribute value comprises:
determining the second attribute value as an end value of the target attribute.
3. The method of claim 1, wherein rendering a target animation on a target interface based on the start value and the end value of the target property comprises:
in the case that the start value is a default value, rendering the target animation on the target interface based on the start value and the end value.
4. The method of claim 1, the target attribute being a style attribute for representing a style of the web page element,
the method further comprises the following steps: determining attribute variables in the style attributes;
and assigning the end value to the attribute variable.
5. The method of claim 1, further comprising:
and determining that the transition transformation operation is allowed to be carried out on the webpage elements through a cascading style sheet.
6. The method of claim 5, wherein rendering a target animation on a target interface based on the start value and the end value of the target property comprises:
performing the transition transformation operation on the starting value and the ending value to obtain the target animation;
and rendering the target animation on the target interface by utilizing a rendering process.
7. The method of any of claims 1-6, target attributes comprising a width of the web page element and/or a height of the web page element.
8. The method of any one of claims 1 to 6,
the acquiring of the target attribute of the web page element comprises the following steps: acquiring the target attribute of the webpage element on a teaching platform, wherein the webpage element is used for displaying teaching information;
rendering a target animation on a target interface based on the start value and the end value of the target property comprises: rendering the target animation on an interface of the teaching platform based on the start value and the end value.
9. A data processing apparatus comprising:
the first acquisition unit is used for acquiring the target attribute of the webpage element;
the first determining unit is used for determining that the attribute value of the target attribute is changed from the first attribute value to the second attribute value;
a second determining unit configured to determine an end value of the target attribute based on the second attribute value;
and the first rendering unit is used for rendering a target animation on a target interface based on the starting value and the ending value of the target attribute, wherein the target animation is used for displaying the process data of the target attribute changing from the starting value to the ending value.
10. The apparatus of claim 9, wherein the second determining unit comprises:
a determining module, configured to determine the second attribute value as an end value of the target attribute.
11. The apparatus of claim 9, wherein the first rendering unit comprises:
a first rendering module, configured to render the target animation on the target interface based on the start value and the end value if the start value is a default value.
12. The apparatus of claim 9, the target attribute being a style attribute, the style attribute being used to represent a style of the web page element,
the device further comprises: a third determining unit, configured to determine an attribute variable in the style attribute;
and the assignment unit is used for assigning the end value to the attribute variable.
13. The apparatus of claim 9, further comprising:
and the fourth determination unit is used for determining that the transition transformation operation is allowed to be carried out on the webpage elements through the cascading style sheet.
14. The apparatus of claim 13, wherein the first rendering unit comprises:
the transition module is used for carrying out transition transformation operation on the starting value and the ending value to obtain the target animation;
and the second rendering module is used for rendering the target animation on the target interface by utilizing a rendering process.
15. The apparatus of any of claims 9 to 14, a target attribute comprising a width of the web page element and/or a height of the web page element.
16. The apparatus of any one of claims 9 to 14,
the first acquisition unit includes: the acquisition module is used for acquiring the target attribute of the webpage element on a teaching platform, wherein the webpage element is used for displaying teaching information;
the first rendering unit includes: and the third rendering module is used for rendering the target animation on the interface of the teaching platform based on the starting value and the ending value.
17. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.
18. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-8.
19. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-8.
CN202111130351.0A 2021-09-26 2021-09-26 Data processing method and device, electronic equipment and memory Pending CN113849164A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111130351.0A CN113849164A (en) 2021-09-26 2021-09-26 Data processing method and device, electronic equipment and memory

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111130351.0A CN113849164A (en) 2021-09-26 2021-09-26 Data processing method and device, electronic equipment and memory

Publications (1)

Publication Number Publication Date
CN113849164A true CN113849164A (en) 2021-12-28

Family

ID=78980159

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111130351.0A Pending CN113849164A (en) 2021-09-26 2021-09-26 Data processing method and device, electronic equipment and memory

Country Status (1)

Country Link
CN (1) CN113849164A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115048096A (en) * 2022-08-15 2022-09-13 广东工业大学 Dynamic visualization method and system for data structure

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115048096A (en) * 2022-08-15 2022-09-13 广东工业大学 Dynamic visualization method and system for data structure

Similar Documents

Publication Publication Date Title
US11030392B2 (en) Optimization for rendering web pages
CN108984714B (en) Page rendering method and device, electronic equipment and computer readable medium
CN113031946B (en) Method and device for rendering page component
CN109254771A (en) A kind of monitoring page generation method and device
US10768947B2 (en) Method for interface refresh synchronization,terminal device, and non-transitory computer-readable storage medium
CN114218890A (en) Page rendering method and device, electronic equipment and storage medium
CN111459501A (en) SVG-based Web configuration picture storage and display system, method and medium
CN113849164A (en) Data processing method and device, electronic equipment and memory
CN114168853A (en) Data visualization display method, device, medium and electronic equipment
CN113392346A (en) Path processing method and device for resource file, electronic equipment and storage medium
CN115731319A (en) Graph drawing method, device, equipment and storage medium
CN114741294A (en) Page debugging method, device, equipment and storage medium
CN113961279A (en) Page rendering method, device, server and storage medium
CN112418902A (en) Multimedia synthesis method and system based on webpage
GB2532822A (en) Techniques for providing a user interface incorporating sign language
CN113642295B (en) Page typesetting method, device and computer program product
CN114139083B (en) Webpage rendering method and device and electronic equipment
US20240160410A1 (en) Application Development Platform, Micro-program Generation Method, and Device and Storage Medium
CN111079038B (en) Method and equipment for inputting information in application
CN114065077A (en) Webpage display method and device, electronic equipment and storage medium
CN113971256A (en) Page processing method and device, electronic equipment and memory
CN115373659A (en) Business system construction method and device, electronic equipment and storage medium
CN116339728A (en) Data processing method, device, equipment, system, storage medium and product
CN115686714A (en) Page display method, device, equipment and storage medium
CN115510349A (en) Browser version switching method, device, equipment and medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination