CN110851200A - Animation response type driving method and device and electronic equipment - Google Patents
Animation response type driving method and device and electronic equipment Download PDFInfo
- Publication number
- CN110851200A CN110851200A CN201911015813.7A CN201911015813A CN110851200A CN 110851200 A CN110851200 A CN 110851200A CN 201911015813 A CN201911015813 A CN 201911015813A CN 110851200 A CN110851200 A CN 110851200A
- Authority
- CN
- China
- Prior art keywords
- attribute
- animation
- operated object
- monitoring
- preset
- 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.)
- Withdrawn
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- 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/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention provides a response type driving method and device of animation and electronic equipment, wherein the method comprises the following steps: the method comprises the steps of obtaining a page element, obtaining an operated object, endowing the operated object with a monitoring attribute, and associating the operated object with a preset attribute of the page element in an assignor, wherein the assignor comprises a centralized monitoring type assignor. Because the monitoring is centralized, all animation logics can update the DOM at a centralized point, so that unnecessary intermediate steps are easily reduced, the backflow and redrawing of the DOM are controlled, and the performance is improved.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for responsive driving of an animation, and an electronic device.
Background
WEB animation based on Document Object Model (DOM) has not been an easy thing, CSS3 can only do simple animations, and for some complex scenes it is often not desirable because of lack of necessary programming power.
The JavaScript can control complex animation, conventional animation control is developed based on command programming, namely, to make a DOM element move, the reference of the DOM is obtained through the JS, and then the animation style of the element is set by using the API of the DOM. The disadvantage of this approach is that due to the uncertainty of the application logic, the style update for the DOM is scattered everywhere in the execution logic, the imperative call to the DOM API is not only difficult to maintain, but also is prone to cause unnecessary redrawing and computation by the browser, leading to performance problems such as animation stuttering.
Disclosure of Invention
The technical problem of animation jamming in the prior art is solved.
According to a first aspect, the present invention provides a responsive driving method of an animation, comprising: acquiring page elements; acquiring an operated object; assigning the operated object to a monitoring attribute; and associating the operated object with the preset attributes of the page elements in an assigner, wherein the assigner comprises a centralized monitoring type assigner.
Optionally, the assigning the operated object to a listening attribute includes: and setting the monitoring attribute for the operated object by any one of a getter/setter function, data hijacking or a data agent.
Optionally, the obtaining page elements includes: and acquiring the identification information of the page element.
Optionally, the associating, in the valuator, the operated object with the preset attribute of the page element includes: searching for a preset attribute in the corresponding page element according to the identification information; and associating the monitoring attribute with the preset attribute.
Optionally, after associating the operated object with the preset attribute of the page element in the valuator, the method includes: acquiring the assigned action of the operated object; triggering the assigner based on the monitoring attribute of the operated object; and assigning the preset attribute by using the assigned action based on the incidence relation between the monitoring attribute and the preset attribute.
Optionally, after the assigning the preset attribute by using the assigned action based on the association relationship between the monitoring attribute and the preset attribute, the method includes: monitoring updated assignments in the same frame of page elements in the assignor; and when a plurality of updated assignments exist in the same frame page element, combining the updated assignments to a unique latest value according to the updating sequence of the assignments.
According to a second aspect, an embodiment of the present invention provides a responsive driving apparatus for animation, including: a first obtaining unit, configured to obtain a page element; a second acquisition unit configured to acquire an operated object; the attribute transformation unit is used for endowing the operated object with monitoring attributes; and the association unit is used for associating the operated object with the preset attributes of the page elements in an assignor, wherein the assignor comprises a centralized monitoring type assignor.
Optionally, the attribute transformation unit is further configured to set the monitoring attribute for the operated object by any one of a getter/setter function, data hijacking, or a data agent.
According to a third aspect, embodiments of the present invention provide an electronic device including 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 to cause the at least one processor to perform the method of responsive driving of animation as defined in any one of the above first aspects.
According to a fourth aspect, an embodiment of the present invention provides a non-transitory storage medium, wherein the computer readable storage medium stores computer instructions for causing the computer to execute the method for responsive driving of an animation according to any one of the above first aspects.
The embodiment of the invention has the following beneficial effects:
the method comprises the steps of obtaining a page element, obtaining an operated object, endowing the operated object with a monitoring attribute, and associating the operated object with a preset attribute of the page element in an assignor, wherein the assignor comprises a centralized monitoring type assignor. Because the monitoring is centralized, all animation logics can update the DOM at a centralized point, so that unnecessary intermediate steps are easily reduced, the backflow and redrawing of the DOM are controlled, and the performance is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a flow chart of a responsive driving method for animation according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a responsive driving device for animation according to another embodiment of the present invention;
fig. 3 is an electrical schematic diagram provided in accordance with an embodiment of the present invention.
Detailed Description
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusions
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
An embodiment of the present invention provides a response type driving method for an animation, and as shown in fig. 1, the method may further include:
and S10, acquiring page elements. As an exampleFor example, a single DOM element may be used as an example in this embodiment, assuming that DOM element a needs to be removed from point X0Move to X1I.e. X0->X1Assume that the attributes to be moved are: TranslateX (0) ->TranslateX (100). And acquiring the identification information of the page element, namely confirming the identity of the DOM element to be processed.
S20, obtaining the operated object. As an exemplary embodiment, the operated object is assigned to a specific object type, for example, an object obj can be defined.
And S30, endowing the operated object with a monitoring attribute. As an exemplary embodiment, the listening attribute may be set for the operated object by any one of a getter/setter function, data hijacking, or a data agent. Specifically, the operated object may be read/assigned by an object setter/setter in JavaScript, defined and assigned by an object.
And S40, associating the operated object with the preset attributes of the page elements in an assignor, wherein the assignor comprises a centralized monitoring type assignor. As an exemplary embodiment, the assignor may be a setter assignor, specifically, when associating the operated object with the preset attribute of the page element, the preset attribute in the corresponding page element may be searched for according to the identification information; and associating the monitoring attribute with the preset attribute. Specifically, a corresponding page element may be obtained according to the identification information, and a corresponding preset attribute may be obtained in a style under the page element, specifically, in this embodiment, a "transform" attribute of the element may be obtained in a style under the DOM element whose identification information is a, the "transform" attribute is assigned as a motion attribute "translatex (value)", and specifically, the listening attribute may be associated with the motion attribute "translatex (value)". After association, when the operated object is assigned, acquiring an assigned action of the operated object; triggering the assigner based on the monitoring attribute of the operated object; and assigning the preset attribute by using the assigned action based on the incidence relation between the monitoring attribute and the preset attribute. Specifically, taking a DOM element as an example, when an operated object obj is called in a program, the attribute of obj is assigned, and since the operated object obj has a listening attribute, when obj.TranslateX is monitored to be 10 by the listening attribute, a setter is triggered to execute a true DOM element update operation a.style.TranslateX (10px) "inside the setter, that is," transform "in the style of the DOM element whose identification information is a is assigned with the value of the motion attribute" TranslateX (10px) ", that is, the DOM element whose identification information is a is moved by 10 pixels. When the operated object is assigned, monitoring updated assignment in the same frame page element in the assigner, and when a plurality of updated assignments exist in the same frame page element, merging the updated assignments to the only latest value according to the update sequence of the assignments. Because the valuator is centralized monitoring, repeated animation calculation in each frame can be guaranteed. Unnecessary intermediate steps are easily reduced, reflow and redrawing of the DOM are controlled, and performance is improved.
An embodiment of the present invention provides a response type driving apparatus for an animation, as shown in fig. 2, the apparatus may include: a first obtaining unit 10, configured to obtain a page element; a second acquisition unit 20 for acquiring an object to be operated; an attribute transformation unit 30, configured to assign a monitoring attribute to the operated object; and the associating unit 40 is configured to associate the operated object with the preset attribute of the page element in an assigner, where the assigner includes a centralized monitoring assigner. As an exemplary embodiment, the attribute transforming unit 30 is further configured to set the listening attribute for the operated object by any one of a getter/setter function, data hijacking, or data agent.
Embodiments of the present invention provide a non-transitory storage medium storing computer instructions for causing a computer to execute a responsive driving method of an animation as described in any one of the above embodiments.
An embodiment of the present invention provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor executes the computer program to implement the item presentation method according to the above embodiment. As shown in fig. 3, the electronic device includes one or more processors 31 and a memory 32, for example, a processor 33 in fig. 3.
The control unit may further include: an input device 33 and an output device 34.
The processor 31, the memory 32, the input device 33 and the output device 34 may be connected by a bus or other means, and fig. 3 illustrates the connection by a bus as an example.
The processor 31 may be a Central Processing Unit (CPU). The Processor 31 may also be other general purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components, or combinations thereof. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 32, which is a non-transitory computer readable storage medium, may be used to store non-transitory software programs, non-transitory computer executable programs, and modules, such as the user matching corresponding program instructions/modules in the embodiments of the present application. The processor 31 executes various functional applications of the server and data processing, i.e., the responsive driving method of animation implementing the above-described method embodiments, by running non-transitory software programs, instructions and modules stored in the memory 32.
The memory 32 may include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function; the storage data area may store data created according to use of a processing device operated by the server, and the like. Further, the memory 32 may include high speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, the memory 32 may optionally include memory located remotely from the processor 31, which may be connected to a network connection device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The input device 33 may receive input numeric or character information and generate key signal inputs related to user settings and function control of the processing device of the server. The output device 34 may include a display device such as a display screen.
One or more modules are stored in the memory 32, which when executed by the one or more processors 31 perform the method as shown in fig. 1.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Finally, the principle and the implementation of the present invention are explained by applying the specific embodiments in the present invention, and the above description of the embodiments is only used to help understanding the method and the core idea of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. A method for responsive driving of an animation, comprising:
acquiring page elements;
acquiring an operated object;
assigning the operated object to a monitoring attribute;
and associating the operated object with the preset attributes of the page elements in an assigner, wherein the assigner comprises a centralized monitoring type assigner.
2. The animation response driven method according to claim 1, wherein said assigning the manipulated object to a listening attribute comprises:
and setting the monitoring attribute for the operated object by any one of a getter/setter function, data hijacking or a data agent.
3. The animation response driven method of claim 1, wherein the obtaining a page element comprises:
and acquiring the identification information of the page element.
4. The animation response driven method according to claim 3, wherein the associating the manipulated object with the preset property of the page element in the assigner comprises:
searching for a preset attribute in the corresponding page element according to the identification information;
and associating the monitoring attribute with the preset attribute.
5. The animation response driven method according to claim 3, comprising, after said associating in a valuator said manipulated object with a preset property of said page element:
acquiring the assigned action of the operated object;
triggering the assigner based on the monitoring attribute of the operated object;
and assigning the preset attribute by using the assigned action based on the incidence relation between the monitoring attribute and the preset attribute.
6. The animation response driving method according to claim 5, wherein after the assigning the preset attribute with the assigned action based on the association relationship between the listening attribute and the preset attribute, the method comprises:
monitoring updated assignments in the same frame of page elements in the assignor;
and when a plurality of updated assignments exist in the same frame page element, combining the updated assignments to a unique latest value according to the updating sequence of the assignments.
7. A responsive driving device for an animation, comprising:
a first obtaining unit, configured to obtain a page element;
a second acquisition unit configured to acquire an operated object;
the attribute transformation unit is used for endowing the operated object with monitoring attributes;
and the association unit is used for associating the operated object with the preset attributes of the page elements in an assignor, wherein the assignor comprises a centralized monitoring type assignor.
8. The responsive driving apparatus of animation as claimed in claim 7, wherein said property transforming unit is further configured to set said listening property for said operated object by any one of a getter/setter function, data hijacking, or data agent.
9. An electronic device comprising at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the one processor to cause the at least one processor to perform the responsive driving method of animation of any one of claims 1-6.
10. A non-transitory storage medium, wherein the computer-readable storage medium stores computer instructions for causing the computer to execute the responsive driving method of animation according to any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911015813.7A CN110851200A (en) | 2019-10-23 | 2019-10-23 | Animation response type driving method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911015813.7A CN110851200A (en) | 2019-10-23 | 2019-10-23 | Animation response type driving method and device and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110851200A true CN110851200A (en) | 2020-02-28 |
Family
ID=69597747
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911015813.7A Withdrawn CN110851200A (en) | 2019-10-23 | 2019-10-23 | Animation response type driving method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110851200A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112540820A (en) * | 2020-12-09 | 2021-03-23 | 北京奇艺世纪科技有限公司 | User interface updating method and device and electronic equipment |
-
2019
- 2019-10-23 CN CN201911015813.7A patent/CN110851200A/en not_active Withdrawn
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112540820A (en) * | 2020-12-09 | 2021-03-23 | 北京奇艺世纪科技有限公司 | User interface updating method and device and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9015657B2 (en) | Systems and methods for developing and delivering platform adaptive web and native application content | |
| TWI672027B (en) | Data processing method, device and system in webpage | |
| CN107885645B (en) | Method and device for calculating rendering duration of first screen of page and electronic equipment | |
| CN107479868B (en) | Interface loading method, device and equipment | |
| CN110765208B (en) | Data synchronization method and device, electronic equipment and storage medium | |
| KR20200102409A (en) | Key frame scheduling method and apparatus, electronic devices, programs and media | |
| CN113095995A (en) | Webpage watermark adding method and device, electronic equipment and storage medium | |
| CN109684000B (en) | APP data display method, device, equipment and computer readable storage medium | |
| CN111796821A (en) | Page updating method and device | |
| CN108595211B (en) | Method and apparatus for outputting data | |
| CN110851200A (en) | Animation response type driving method and device and electronic equipment | |
| CN113552988A (en) | Interface focus control method and device, electronic equipment and storage medium | |
| US20160275200A1 (en) | Information processing apparatus, information processing method, and information processing program | |
| CN116661936A (en) | Page data processing method and device, computer equipment and storage medium | |
| CN111767433A (en) | Data processing method, device, storage medium and terminal | |
| CN109309874B (en) | Focus updating method and device | |
| CN116483425A (en) | Micro-service gray level edition issuing method, device, equipment and storage medium thereof | |
| CN108037914B (en) | Method and device for developing android native system by combining js | |
| US20150106303A1 (en) | Finite state machine forming | |
| CN112799745B (en) | Page display control method and device | |
| CN109150993B (en) | Method for obtaining network request tangent plane, terminal device and storage medium | |
| CN109726346B (en) | Page component processing method and device | |
| US9069562B2 (en) | Mobile computing program slicing and behavior | |
| CN109299223B (en) | Method and device for inquiring instruction | |
| CN112463202A (en) | Configuration method and device of operating system functional components |
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 | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20200228 |
|
| WW01 | Invention patent application withdrawn after publication |