CN113568550B - Animation display method and device based on animation component and terminal equipment - Google Patents
Animation display method and device based on animation component and terminal equipment Download PDFInfo
- Publication number
- CN113568550B CN113568550B CN202110699344.6A CN202110699344A CN113568550B CN 113568550 B CN113568550 B CN 113568550B CN 202110699344 A CN202110699344 A CN 202110699344A CN 113568550 B CN113568550 B CN 113568550B
- Authority
- CN
- China
- Prior art keywords
- animation
- transition animation
- display
- transition
- component
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000007704 transition Effects 0.000 claims abstract description 202
- 238000004891 communication Methods 0.000 claims description 11
- 238000009877 rendering Methods 0.000 claims description 10
- 230000001747 exhibiting effect Effects 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000003111 delayed effect Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- 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
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses an animation display method, an animation display device and terminal equipment based on an animation component, wherein the method comprises the steps of obtaining transition animation attributes corresponding to a display page, and determining transition animation and a display form corresponding to the display page based on the transition animation attributes; and displaying the transition animation in the display page in the display form through a preset transition animation component. When the transition animation needs to be displayed, the display form of the transition animation can be determined through the transition animation component only by outputting the transition animation attribute, and the transition animation is displayed through the display form, so that different transition animation components are not required to be selected for each component in the display page, and convenience is brought to users.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to an animation display method and apparatus based on an animation component, and a terminal device.
Background
When developing an SPA (single page web application) page by using a VUE framework, the page is divided into different components to carry out page layout, and transitional animation is displayed when the page is switched so as to avoid the white screen problem of the page switching. However, the transition animation provided by the VUE framework at present requires different transition animation components according to list elements (HTML tags) or single elements (HTML tags), which is inconvenient for users to use.
There is thus a need for improvements and improvements in the art.
Disclosure of Invention
Aiming at the defects of the prior art, the technical problem to be solved by the application is to provide an animation display method, an animation display device and terminal equipment based on an animation component.
In order to solve the technical problems described above, a first aspect of an embodiment of the present application provides an animation display method based on an animation component, where the method is applied to configuring a web end of a vue framework; the generating method comprises the following steps:
acquiring transition animation attributes corresponding to a display page, and determining transition animation and a display form corresponding to the display page based on the transition animation attributes;
and displaying the transition animation in the display page in the display form through a preset transition animation component.
The animation display method based on the animation component, wherein the method further comprises the steps of:
and acquiring a transition animation component corresponding to the web terminal, and independently packaging the transition animation component in the web terminal.
The animation display method based on the animation component, wherein the transitional animation attribute at least comprises transitional animation identification information and list attribute.
The animation display method based on the animation component, wherein the determining the transition animation and the display form corresponding to the display page based on the transition animation attribute specifically comprises the following steps:
determining transition animation corresponding to the display page based on the transition animation identification information;
and determining the display form of the transition animation based on the list attribute.
The animation display method based on the animation component, wherein the determining the display form of the transition animation based on the list attribute specifically comprises the following steps:
detecting whether the list attribute is empty;
and if the list attribute is not null, displaying the list type item by item as the display type of the transition animation.
The animation display method based on the animation component, wherein the determining the display form of the transition animation based on the list attribute specifically comprises the following steps:
detecting whether the list attribute is empty;
if the list attribute is empty, acquiring the number of element nodes contained in the transition animation component;
when the number of the element nodes is 1, taking a single animation display form as the display form of the transition animation;
and when the number of the element nodes is greater than 1, displaying the element nodes in a list form one by one as the displaying form of the transition animation.
The animation display method based on the animation component, wherein the displaying of the transition animation in the display page through the preset transition animation component in the display form specifically comprises the following steps:
the transition animation component is controlled by the script program to display the transition animation in a display page in a display form by the transition animation component.
A second aspect of the embodiments of the present application provides an animation display device based on an animation component, where the generating device includes:
the acquisition module is used for acquiring transition animation attributes corresponding to the display page and determining transition animation and a display form corresponding to the display page based on the transition animation attributes;
the display module is used for displaying the transition animation in the display page in the display form through a preset transition animation component
A third aspect of the embodiments provides a computer-readable storage medium storing one or more programs executable by one or more processors to implement steps in an animation component-based animation rendering method as described above.
A fourth aspect of the present embodiment provides a terminal device, including: a processor, a memory, and a communication bus; the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the animation component-based animation rendering method as described in any of the above.
The beneficial effects are that: compared with the prior art, the application provides an animation display method, an animation display device and terminal equipment based on an animation component, wherein the method comprises the steps of obtaining transition animation attributes corresponding to a display page, and determining transition animation and a display form corresponding to the display page based on the transition animation attributes; and displaying the transition animation in the display page in the display form through a preset transition animation component. When the transition animation needs to be displayed, the display form of the transition animation can be determined through the transition animation component only by outputting the transition animation attribute, and the transition animation is displayed through the display form, so that different transition animation components are not required to be selected for each component in the display page, and convenience is brought to users.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without creative effort for a person of ordinary skill in the art.
Fig. 1 is a flowchart of an animation exhibiting method based on an animation component provided in the present application.
Fig. 2 is a flowchart illustrating an animation exhibiting method based on an animation component provided in the present application.
Fig. 3 is a schematic structural diagram of an animation exhibiting device based on an animation component provided in the present application.
Fig. 4 is a schematic structural diagram of a terminal device provided in the present application.
Detailed Description
The application provides an animation display method, an animation display device and terminal equipment based on an animation component, and in order to make the purposes, technical schemes and effects of the application clearer and more definite, the application is further described in detail below by referring to the accompanying drawings and the embodiments. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.
As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless expressly stated otherwise, as understood by those skilled in the art. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof. It will be understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements may also be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. The term "and/or" as used herein includes all or any element and all combination of one or more of the associated listed items.
It will be understood by those skilled in the art that all terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs unless defined otherwise. It will be further understood that terms, such as those defined in commonly used dictionaries, should be interpreted as having a meaning that is consistent with their meaning in the context of the prior art and will not be interpreted in an idealized or overly formal sense unless expressly so defined herein.
In particular implementations, the terminal devices described in embodiments of the present application include, but are not limited to, other portable devices such as mobile phones, laptop computers, or tablet computers having a touch-sensitive surface (e.g., a touch display screen and/or a touch pad). It should also be appreciated that in some embodiments, the device is not a portable communication device, but rather a desktop computer having a touch-sensitive surface (e.g., a touch display screen and/or a touchpad).
In the following discussion, a terminal device including a display and a touch-sensitive surface is described. However, it should be understood that the terminal device may also include one or more other physical user interface devices such as a physical keyboard, mouse, and/or joystick.
The terminal device supports various applications, such as one or more of the following: drawing applications, presentation applications, word processing applications, video conferencing applications, disk burning applications, spreadsheet applications, gaming applications, telephony applications, video conferencing applications, email applications, instant messaging applications, workout support applications, photo management applications, data camera applications, digital video camera applications, web browsing applications, digital music player applications, and/or digital video playing applications, among others.
Various applications that may be executed on the terminal device may use at least one common physical user interface device such as a touch sensitive surface. The first or more functions of the touch-sensitive surface and corresponding information displayed on the terminal may be adjusted and/or changed between applications and/or within the corresponding applications. In this way, the common physical framework (e.g., touch-sensitive surface) of the terminal may support various applications with user interfaces that are intuitive and transparent to the user.
It should be understood that the sequence number and the size of each step in this embodiment do not mean the sequence of execution, and the execution sequence of each process is determined by the function and the internal logic of each process, and should not constitute any limitation on the implementation process of the embodiment of the present application.
The inventor finds that when the SPA (single page web application) page is developed by using the VUE framework, the page is divided into different components to carry out page layout, and transitional animation is displayed during page switching to avoid the white screen problem of page switching. However, the transition animation provided by the VUE framework at present requires different transition animation components according to list elements (HTML tags) or single elements (HTML tags), which is inconvenient for users to use.
In order to solve the above problems, in the embodiment of the present application, a transition animation attribute corresponding to a display page is obtained, and a transition animation and a presentation form corresponding to the display page are determined based on the transition animation attribute; and displaying the transition animation in the display page in the display form through a preset transition animation component. When the transition animation needs to be displayed, the display form of the transition animation can be determined through the transition animation component only by outputting the transition animation attribute, and the transition animation is displayed through the display form, so that different transition animation components are not required to be selected for each component in the display page, and convenience is brought to users.
The application will be further described by the description of embodiments with reference to the accompanying drawings.
The embodiment provides an animation display method based on an animation component, as shown in fig. 1 and fig. 2, the method includes:
s10, acquiring transition animation attributes corresponding to a display page, and determining transition animation and a display form corresponding to the display page based on the transition animation attributes.
Specifically, the display page is a display page of a transition animation to be displayed, wherein the display page can be an SPA page developed by using a vue framework, and the display page can comprise a plurality of page components, and the page components form the display page. The transition animation attribute is an animation attribute of a transition animation to be displayed on the display page, and the transition animation corresponding to the display page, the display form of the transition animation, the display time of the transition animation and the like are determined through the transition animation attribute.
In one implementation of this embodiment, the transitional animation attribute includes at least transitional animation identification information and a list attribute. Correspondingly, the determining the transition animation and the presentation form corresponding to the display page based on the transition animation attribute specifically includes:
determining transition animation corresponding to the display page based on the transition animation identification information;
and determining the display form of the transition animation based on the list attribute.
Specifically, the transitional animation identification information is used for identifying the transitional animation, wherein the transitional animation identification information is a unique identification of the transitional animation, and after the transitional animation identification information is acquired, a transitional animation can be uniquely determined based on the transitional animation identification information. The transition animation is pre-stored in a preset transition animation component, that is, a plurality of transition animations are pre-stored in the transition animation component, after the transition animation identification information is acquired, the transition animation corresponding to the transition animation identification information is selected from the plurality of transition animations, and the selected transition animation is used as the transition animation corresponding to the display page. In addition, when the transitional animation is not found in the transitional animations according to the transitional animation identification information, prompt information can be generated to prompt the transitional animation to display and identify; or, a default transition animation is adopted as a transition animation corresponding to the display page, so that the problem that blank pages appear on the display page is avoided.
In an implementation manner of this embodiment, in order to improve a display effect of the transitional animation, the transitional animation attribute may further include a display duration of the transitional animation and a delay duration of the transitional animation, where the display duration is a time for displaying the transitional animation on a display page, and the delay duration is a time interval between a transition generation time and a display time, that is, after the transitional animation is generated, the delay duration may be delayed, and then the transitional animation is displayed on the display page, so that the timeliness of displaying the transitional animation may be generated in advance, and a blank display phenomenon of the display page caused by the timeliness of displaying the transitional animation due to the time spent for generating the transitional animation is avoided.
In one implementation manner of this embodiment, the determining, based on the list attribute, the presentation form of the transition animation specifically includes:
detecting whether the list attribute is empty;
if the list attribute is not null, using a list form to display the transition animation item by item as a display form of the transition animation;
if the list attribute is empty, acquiring the number of element nodes contained in the transition animation component;
when the number of the element nodes is 1, taking a single animation display form as the display form of the transition animation;
and when the number of the element nodes is greater than 1, displaying the element nodes in a list form one by one as the displaying form of the transition animation.
Specifically, the presentation form may be determined when the web interface is loaded, and it may be understood that whether the list attribute is empty is detected when the web interface is loaded, so as to determine the presentation form based on the detection result of the list attribute. The display forms comprise single animation display forms or display forms one by one in a list form, the list attribute is used for reflecting whether transition animations are displayed one by one in the list form, when the list attribute is not empty, the transition animations need to be displayed one by one in the list form, otherwise, when the list attribute is empty, the transition animations do not need to be displayed one by one in the list form, and at the moment, the transition animations can be displayed in the single animation display form. However, when the list attribute is empty, the transitional animation may include a plurality of element nodes or include one element node, and when the plurality of element nodes are included, the element nodes need to be displayed one by one, so that the number of the element nodes is greater than 1, each element node is used as a display list item, and the element nodes are displayed one by one in a list form so as to display the transitional animation.
And S20, displaying the transition animation in the display page in the display form through a preset transition animation component.
Specifically, the transition animation is used for being displayed in a display page, when the transition animation is displayed in the display page, the transition animation display is controlled through a preset transition animation component, and when the transition animation component is controlled to be displayed in the display page, the transition animation display is controlled based on the corresponding display form of the display page, for example, the transition animation is displayed in a list form or the transition animation is temporarily displayed in a single-action picture form. In addition, in practical application, the display page can include a plurality of components, so that when the transition animation is determined, the transition animation corresponding to each component and the display form of the transition animation can be determined, and the transition animation corresponding to each component is basically controlled to be displayed in the display area corresponding to each component in the respective corresponding display form, wherein the transition animation corresponding to each component is determined through a preset transition animation component, and when the transition animation corresponding to each component is determined, the preset transition animation component can acquire the transition animation attribute corresponding to the component, and determines the transition animation corresponding to the component and the display form of the transition animation based on the transition animation attribute corresponding to the component, so that for different components or different display pages, only the transition animation attribute corresponding to the component or the display page is required to be input, and the preset transition animation component can determine whether the transition animation corresponding to the component or the display page is a list element or a single element or not needed to select different transition animation components for different groups when the transition animation is generated, thereby bringing convenience to users.
In one implementation manner of this embodiment, before the receiving the transition animation attribute of the transition animation corresponding to the display page and determining the transition animation display form based on the transition animation attribute, the method further includes:
and acquiring a transition animation component corresponding to the web terminal, and independently packaging the transition animation component in the web terminal.
Specifically, the transition animation component is preassembled in the web end, the transition animation component can be a vue transition animation component based on TneenMax.js encapsulation, the transition animation component receives transition animation attributes, determines transition animations and display forms corresponding to display pages based on the transition animation attributes, and displays the transition animations and the display forms corresponding to the transition animations on the display pages. In one implementation manner of this embodiment, the transition animation component may be controlled by a script program, and accordingly, the displaying, by the preset transition animation component, the transition animation in the display page is specifically:
the transition animation component is controlled by the script program to display the transition animation in a display page in a display form by the transition animation component.
Specifically, the transition animation in the transition animation component can be realized by controlling TwienMax.js through a script program JavaScript, and a heavy browser prefix and hack are not needed to be added any more, but browser identification symbols are added in a cascading style sheet CSS style, and different browsers correspondingly identify the browser symbols in the graph, so that CSS attribute effects can be executed based on the browser identification symbols. In addition, when the transition animation in the transition animation component needs to be modified, the addition or adjustment of the transition animation effect can be realized only by adding or modifying the transition animation configuration in the transition animation component, so that the transition animation component is easy to expand and maintain.
Based on the animation display method based on the animation component, the embodiment provides an animation display device based on the animation component, as shown in fig. 3, the generating device includes:
the acquisition module 100 is configured to acquire a transition animation attribute corresponding to a display page, and determine a transition animation and a presentation form corresponding to the display page based on the transition animation attribute;
and the display module 200 is used for displaying the transition animation in the display page in the display form through a preset transition animation component.
Based on the animation display method based on the animation component described above, the present embodiment provides a computer-readable storage medium storing one or more programs executable by one or more processors to implement the steps in the animation display method based on the animation component described in the above embodiment.
Based on the animation display method based on the animation component, the application also provides a terminal device, as shown in fig. 4, which comprises at least one processor (processor) 20; a display screen 21; and a memory (memory) 22, which may also include a communication interface (Communications Interface) 23 and a bus 24. Wherein the processor 20, the display 21, the memory 22 and the communication interface 23 may communicate with each other via a bus 24. The display screen 21 is configured to display a user guidance interface preset in the initial setting mode. The communication interface 23 may transmit information. The processor 20 may invoke logic instructions in the memory 22 to perform the methods of the embodiments described above.
Further, the logic instructions in the memory 22 described above may be implemented in the form of software functional units and stored in a computer readable storage medium when sold or used as a stand alone product.
The memory 22, as a computer readable storage medium, may be configured to store a software program, a computer executable program, such as program instructions or modules corresponding to the methods in the embodiments of the present disclosure. The processor 20 performs functional applications and data processing, i.e. implements the methods of the embodiments described above, by running software programs, instructions or modules stored in the memory 22.
The memory 22 may include a storage program area that may store an operating system, at least one application program required for functions, and a storage data area; the storage data area may store data created according to the use of the terminal device, etc. In addition, the memory 22 may include high-speed random access memory, and may also include nonvolatile memory. For example, a plurality of media capable of storing program codes such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk, or an optical disk, or a transitory storage medium may be used.
In addition, the working process of the animation exhibiting device based on the animation component, the specific process of loading and executing the plurality of instruction processors in the storage medium and the terminal device are already described in detail in the above method, and will not be described one by one.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and are not limiting thereof; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the corresponding technical solutions.
Claims (7)
1. An animation display method based on animation components is characterized in that the method is applied to a web end of a configuration vue framework; the method comprises the following steps:
acquiring transition animation attributes corresponding to a display page, and determining transition animation and a display form corresponding to the display page based on the transition animation attributes;
displaying the transition animation in the display page in the display form through a preset transition animation component;
the transition animation attribute at least comprises transition animation identification information and a list attribute;
the determining the transition animation corresponding to the display page based on the transition animation attribute specifically comprises the following steps:
determining transition animation corresponding to the display page based on the transition animation identification information;
determining a presentation form of the transition animation based on the list attribute;
and displaying the transition animation in the display page in the display form through a preset transition animation component, wherein the transition animation comprises the following concrete steps:
controlling a transition animation component through a script program to display the transition animation in a display page in a display form through the transition animation component;
the display page is a SPA page developed using the vue framework.
2. The animation component-based animation rendering method of claim 1, wherein the acquiring transitional animation properties corresponding to a display page and determining a transitional animation corresponding to the display page and a rendering form based on the transitional animation properties, the method further comprises:
and acquiring a transition animation component corresponding to the web terminal, and independently packaging the transition animation component in the web terminal.
3. The animation component-based animation rendering method of claim 1, wherein the determining the transitional animation rendering form based on the list attribute comprises:
detecting whether the list attribute is empty;
and if the list attribute is not null, displaying the list type item by item as the display type of the transition animation.
4. The animation component-based animation rendering method of claim 1, wherein the determining the transitional animation rendering form based on the list attribute comprises:
detecting whether the list attribute is empty;
if the list attribute is empty, acquiring the number of element nodes contained in the transition animation component;
when the number of the element nodes is 1, taking a single animation display form as the display form of the transition animation;
and when the number of the element nodes is greater than 1, displaying the element nodes in a list form one by one as the displaying form of the transition animation.
5. An animation exhibiting device based on an animation component, the device comprising:
the acquisition module is used for acquiring transition animation attributes corresponding to the display page and determining transition animation and a display form corresponding to the display page based on the transition animation attributes;
the display module is used for displaying the transition animation in the display page in the display form through a preset transition animation component; the transition animation attribute at least comprises transition animation identification information and list attribute; the method is also used for determining transition animation corresponding to the display page based on the transition animation identification information; determining a presentation form of the transition animation based on the list attribute; the transition animation component is also used for controlling the transition animation component through the script program so as to display the transition animation in a display page in a display form through the transition animation component; and also for the display page to be a SPA page developed using the vue framework.
6. A computer-readable storage medium storing one or more programs executable by one or more processors to implement the steps in the animation component-based animation rendering method of any of claims 1-4.
7. A terminal device, comprising: a processor, a memory, and a communication bus, the memory having stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the animation component-based animation rendering method as claimed in any of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110699344.6A CN113568550B (en) | 2021-06-23 | 2021-06-23 | Animation display method and device based on animation component and terminal equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110699344.6A CN113568550B (en) | 2021-06-23 | 2021-06-23 | Animation display method and device based on animation component and terminal equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113568550A CN113568550A (en) | 2021-10-29 |
| CN113568550B true CN113568550B (en) | 2024-01-05 |
Family
ID=78162575
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110699344.6A Active CN113568550B (en) | 2021-06-23 | 2021-06-23 | Animation display method and device based on animation component and terminal equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113568550B (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108536832A (en) * | 2018-04-12 | 2018-09-14 | 江南大学 | A kind of page layout switch intelligent animation effect application process and system |
| CN109976755A (en) * | 2019-02-27 | 2019-07-05 | 深圳点猫科技有限公司 | Language is the method and electronic equipment of Vue making of cartoon effect based on programming |
| CN110276031A (en) * | 2019-06-24 | 2019-09-24 | 北京向上一心科技有限公司 | Animated show method, system, equipment and the computer readable storage medium of page assembly |
| CN110968373A (en) * | 2018-09-29 | 2020-04-07 | 北京国双科技有限公司 | Page switching implementation method and device, storage medium and processor |
| WO2020233056A1 (en) * | 2019-05-21 | 2020-11-26 | 深圳壹账通智能科技有限公司 | H5 page-based animation display method, apparatus and device, and storage medium |
| CN112114807A (en) * | 2020-09-28 | 2020-12-22 | 腾讯科技（深圳）有限公司 | Interface display method, device, equipment and storage medium |
| CN112965691A (en) * | 2020-12-30 | 2021-06-15 | 平安普惠企业管理有限公司 | Laminated page construction method and device, computer equipment and storage medium |
-
2021
- 2021-06-23 CN CN202110699344.6A patent/CN113568550B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108536832A (en) * | 2018-04-12 | 2018-09-14 | 江南大学 | A kind of page layout switch intelligent animation effect application process and system |
| CN110968373A (en) * | 2018-09-29 | 2020-04-07 | 北京国双科技有限公司 | Page switching implementation method and device, storage medium and processor |
| CN109976755A (en) * | 2019-02-27 | 2019-07-05 | 深圳点猫科技有限公司 | Language is the method and electronic equipment of Vue making of cartoon effect based on programming |
| WO2020233056A1 (en) * | 2019-05-21 | 2020-11-26 | 深圳壹账通智能科技有限公司 | H5 page-based animation display method, apparatus and device, and storage medium |
| CN110276031A (en) * | 2019-06-24 | 2019-09-24 | 北京向上一心科技有限公司 | Animated show method, system, equipment and the computer readable storage medium of page assembly |
| CN112114807A (en) * | 2020-09-28 | 2020-12-22 | 腾讯科技（深圳）有限公司 | Interface display method, device, equipment and storage medium |
| CN112965691A (en) * | 2020-12-30 | 2021-06-15 | 平安普惠企业管理有限公司 | Laminated page construction method and device, computer equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 码农家园.《https://www.codenong.com/cs108964405/》.2020,第1-3页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113568550A (en) | 2021-10-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8881055B1 (en) | HTML pop-up control | |
| US20170177547A1 (en) | Dynamic Content Layout Generator | |
| US9026931B2 (en) | Cross-browser “drag-and-drop” library | |
| US9484003B2 (en) | Content bound graphic | |
| CN109471626B (en) | Page logic structure, page generation method, page data processing method and device | |
| CN106941567A (en) | Show method, device and the user terminal of network picture | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| US9563327B1 (en) | Intelligent adjustment of graphical user interfaces | |
| CN106325687B (en) | Method and terminal for calling program | |
| US9575941B1 (en) | Dynamic adjustment to content for a display device | |
| KR102310654B1 (en) | Resizing technique for display content | |
| US9766860B2 (en) | Dynamic source code formatting | |
| CN112667330B (en) | Page display method and computer equipment | |
| US11151314B2 (en) | Extensible grid layout | |
| CN106874023B (en) | Dynamic page loading method and device | |
| KR20170062483A (en) | Interactive text preview | |
| TW201435713A (en) | Preserving layout of region of content during modification | |
| US20150278172A1 (en) | Simplifying identification of potential non-visibility of user interface components when responsive web pages are rendered by disparate devices | |
| CN112835499A (en) | Carousel graph display method, device, equipment and medium | |
| CN110262749B (en) | Webpage operation method, device, container, equipment and medium | |
| CN115309470A (en) | Method, device and equipment for loading widgets and storage medium | |
| JP6294349B2 (en) | Manage tab buttons | |
| CN117555459A (en) | Application group processing method and device, storage medium and electronic equipment | |
| CN113568550B (en) | Animation display method and device based on animation component and terminal equipment | |
| JP5959064B2 (en) | Computer, method and program for displaying document file |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |