CN112817636A - Animation component configuration method and display method of pop-up layer - Google Patents

Animation component configuration method and display method of pop-up layer Download PDF

Info

Publication number
CN112817636A
CN112817636A CN202110167949.0A CN202110167949A CN112817636A CN 112817636 A CN112817636 A CN 112817636A CN 202110167949 A CN202110167949 A CN 202110167949A CN 112817636 A CN112817636 A CN 112817636A
Authority
CN
China
Prior art keywords
animation
parameter
pop
target component
layer
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
CN202110167949.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.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili 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 Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202110167949.0A priority Critical patent/CN112817636A/en
Publication of CN112817636A publication Critical patent/CN112817636A/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/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • 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
    • G06T2213/00—Indexing scheme for animation
    • G06T2213/08—Animation software package

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The embodiment of the application discloses a method for configuring an animation assembly of a pop-up layer, which comprises the following steps: configuring a target component comprising a plurality of pieces of animation code for implementing a plurality of animation effects; and configuring a parameter inlet for the target component, wherein the parameter inlet is used for receiving animation type parameters representing animation types, the target component is instantiated according to the inlet parameters to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameters. The embodiment of the application can ensure that the interaction form of the pop-up layer is diversified and customized efficiently, and is suitable for the Internet products with strong interaction requirements.

Description

Animation component configuration method and display method of pop-up layer
Technical Field
The embodiment of the application relates to the technical field of display of page pop-up layers, in particular to a method and a system for configuring an animation assembly of a pop-up layer, computer equipment, a readable storage medium and a display method of the pop-up layer.
Background
As the services supported by applications become more complex, a large number of pop-up layers are often involved through which content is exposed. Taking live broadcasting as an example, it is necessary to present goods and the like to a user through various pop-up layers. In the prior art, the webpage display solution of the pop-up layer generally adopts a pop (pop-up layer) component in the mint-ui and ant-design.
However, the existing webpage display solution of the pop-up layer is not suitable for some internet products with strong interaction requirements, such as a webpage game.
Disclosure of Invention
In view of the above, an object of the embodiments of the present application is to provide a method, a system, a computer device and a computer-readable storage medium for displaying a pop-up layer, which are used to solve the following problems: the existing webpage display solution of the pop-up layer is not suitable for some Internet products with strong interaction requirements.
One aspect of an embodiment of the present application provides a method for configuring an animation component of a popup layer, the method including: configuring a target component comprising a plurality of pieces of animation code for implementing a plurality of animation effects; and configuring a parameter inlet for the target component, wherein the parameter inlet is used for receiving animation type parameters representing animation types, the target component is instantiated according to the inlet parameters to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameters.
Optionally, the parameter entry is further configured to receive a visualization parameter; the target component instance is also used for controlling the display state of the target pop-up layer according to the visualization parameters.
Optionally, the parameter entry is further configured to receive a display region style parameter; the target component instance is also used for controlling the display area and the display style of the target pop-up layer according to the display area style parameter.
Optionally, the parameter entry is further configured to receive an animation duration parameter; the target component instance is further used for controlling the display duration of the target pop-up layer according to the animation duration parameter.
Optionally, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations in a component initialization stage: splicing to obtain a first character string according to the animation type parameters and the animation display suffix; splicing to obtain a second character string according to the animation type parameter and the animation closing suffix; and transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
Optionally, when an animation duration (animation duration) parameter is received through the parameter interface, the target component is further configured to perform the following operations in a component initialization stage: splicing into a third character string according to the animation duration parameter; passing the third string into a-webkit-animation-duration attribute of a styleSheets attribute of a DOM element of a root node of the target component.
Optionally, each animation effect is formed by combining a plurality of animations, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited.
An aspect of an embodiment of the present application further provides an animation component configuration system of a popup layer, the system including: a first configuration module to configure a target component, the target component comprising a plurality of pieces of animation code to implement a plurality of animation effects; and the second configuration module is used for configuring a parameter inlet for the target component, the parameter inlet is used for receiving an animation type parameter representing an animation type, the target component is instantiated according to the inlet parameter to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameter.
An aspect of the embodiments of the present application further provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the computer program, implements the steps of the animation component configuration method as described above for the pop-up layer.
An aspect of embodiments of the present application further provides a computer-readable storage medium including a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the animation component configuration method as described above for a pop-up layer when executing the computer program.
An aspect of an embodiment of the present application further provides a method for displaying a pop-up layer, where the method includes: instantiating a target component according to an entry parameter to obtain a target component instance, wherein the entry parameter comprises an animation type parameter representing an animation type, and the target component is packaged with a plurality of sections of animation codes for realizing a plurality of animation effects; and controlling the target pop-up layer to execute the target animation effect corresponding to the animation type parameter through the target component instance.
Optionally, the entry parameter comprises a visualization parameter; the method further comprises the following steps:
and controlling the display state of the target pop-up layer according to the visualization parameters through a target component instance.
Optionally, the entry parameter includes a presentation region style parameter; the method further comprises the following steps:
and controlling the display area and the display style of the target pop-up layer according to the display area style parameter through a target component example.
Optionally, the entry parameter includes an animation duration parameter; the method further comprises the following steps: and controlling the display time length of the target pop-up layer according to the animation time length parameter through a target component example.
Optionally, when the animation type parameter is received through the parameter interface; the method further comprises an initialization operation of the target component: splicing to obtain a first character string according to the animation type parameters and the animation display suffix; splicing to obtain a second character string according to the animation type parameter and the animation closing suffix; and transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
Optionally, when receiving an animation duration (animation duration) parameter through the parameter interface; the method further comprises an initialization operation of the target component: splicing into a third character string according to the animation duration parameter; passing the third string into a-webkit-animation-duration attribute of a styleSheets attribute of a DOM element of a root node of the target component.
Optionally, each animation effect is formed by combining a plurality of animations, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited.
The method, the system, the computer device and the computer-readable storage medium for configuring the animation component of the pop-up layer provided by the embodiment of the application have the following advantages:
(1) through the encapsulation of multi-section animation codes with various animation effects, the single component with the control popup layer is configured, the diversification and high-efficiency customization of the interaction mode of the popup layer are effectively ensured, and the method is suitable for the Internet products with strong interaction requirements.
(2) Because the target component is packaged with a plurality of sections of animation codes with various animation effects, different animation type parameters can be provided for the target component, and the animation type of the pop-up layer is switched or the self-defined animation type is expanded.
Drawings
FIG. 1 schematically illustrates an application environment diagram of an animation component configuration method for a popup layer according to an embodiment of the present application;
FIG. 2 is a flow chart schematically illustrating a method for configuring an animation component of a popup layer according to an embodiment of the present application;
FIG. 3 schematically illustrates a component configuration parameter list according to an embodiment of the present application;
FIG. 4 schematically illustrates an operational flow of an initialization phase of a target component according to an embodiment of the present application;
FIG. 5 schematically illustrates an operational flow of an initialization phase of a target component according to an embodiment of the present application;
FIG. 6 is a block diagram of an animation component configuration system for a pop-up layer according to a second embodiment of the present application;
fig. 7 schematically shows a hardware architecture diagram of a computer device according to a third embodiment of the present application;
FIG. 8 is a flow chart schematically illustrating a method for displaying a pop-up layer according to an embodiment of the present application; and
fig. 9 to 13 schematically show a new flowchart of a method for displaying a pop-up layer according to a fifth embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. 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.
It should be noted that the descriptions relating to "first", "second", "third", etc. in this application are for descriptive purposes only and are not to be construed as indicating or implying relative importance or implicit to the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In addition, technical solutions between various embodiments may be combined with each other, but must be realized by a person skilled in the art, and when the technical solutions are contradictory or cannot be realized, such a combination should not be considered to exist, and is not within the protection scope of the present application.
FIG. 1 schematically illustrates an environment application diagram of an animation component configuration method of a popup layer according to an embodiment of the present application.
The computer device 2 may be configured to receive page information of the service side 4 via the network 6. The computer device 2 may include any type of computing device, such as a mobile device, a tablet device, a laptop computer, a computing station, a smart device (e.g., smart apparel, smart watch, smart speaker, smart glasses), a virtual reality device, a gaming device, a set-top box, a digital streaming device, a vehicle terminal, a smart television, a television box, an MP4 (moving picture experts group audio layer IV) player, and so forth.
In an exemplary embodiment, the computer device 2 may include an application 8 (e.g., a browser). The application 8 outputs (e.g., displays, renders) the content to the user. The content may be presented in a page, which may include video, audio, comments, text data and/or the like, or may pop up a layer of content to present a portion of the content, such as a dialog box or the like.
The computer device 2 may include a user interface 10, which may be configured to receive user instructions. In some embodiments, the computer device 2 may also be used for some configuration and the like operations, such as customizing various pop-up effects of a pop-up layer and the like.
Example one
FIG. 2 is a flow chart schematically illustrating an animation component configuration method of a popup layer according to an embodiment of the present application. The present embodiment may be executed in the computer device 2, and the flowchart of the present embodiment is not used to limit the order of executing the steps.
As shown in FIG. 2, the method for configuring animation components of a pop-up layer may include steps S200 to S202, wherein:
step S200, configuring a target component, wherein the target component comprises a plurality of sections of animation codes for realizing a plurality of animation effects.
By way of example, the plurality of animation effects includes, but is not limited to: fade, zoom, rotate, flip, door, move-up, move-down, move-left, move-right, slide-up, slide-down, slide-left, slide-right.
As an example, each animation effect may be combined from a plurality of animations for diversification of the animation effects, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited. Correspondingly, each animation type in the target component corresponds to two sections of animation codes, wherein one section of codes is used for controlling the animation effect when the pop-up layer is displayed, and the other section of codes is used for controlling the animation effect when the pop-up layer is quitted. Taking the animation type silde-up as an example, it can be defined that: (1) display animation code corresponding to animation type side-up (the code name of the segment is slide-up-enter-active) and (2) exit animation code corresponding to animation type side-up (the code name of the segment is side-up-leave-active). The display animation code slide-up-enter-active is used for controlling the animation effect when the pop-up layer is displayed, and the quit animation code side-up-leave-active is used for controlling the animation effect when the pop-up layer is closed. In addition, the animation effect can be formed by combining a series of animation technologies such as 3D zooming, 3D rotation, 3D deformation, depth of field, transparency change and the like, and is specifically realized by providing the @ keyframe identifier by the css.
The plurality of animation codes are in a CSS format and exist in an animation.css animation library file.
Step S202, configuring a parameter entry for the target component, wherein the parameter entry is used for receiving an animation type parameter representing an animation type, the target component is instantiated according to the entry parameter to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameter.
An animation type (animation type) parameter for controlling an animation effect when the popup layer is displayed.
As an example, the animationType parameter may take the values: 'fade', 'zoom', 'rotate', 'flip', 'down', 'move-up', 'move-down', 'move-left', 'move-right', 'slide-up', 'slide-down', 'slide-left', or 'slide-right'.
For example, if the animationType parameter passed into the parameter entry is 'fade', the target component instance obtained by instantiating the target component is used for controlling the target pop-up layer to execute the target animation effect of 'fade-in and fade-out'.
For example, if the animationType parameter introduced into the parameter entry is 'slide-left', the target component instance obtained by instantiating the target component is used for controlling the target pop-up layer to execute the target animation effect of 'sliding left'.
Not to mention one by one, it can be known from the above examples that in the embodiment described above, the animation type of the pop-up layer can be switched or the customized animation type can be expanded by providing different animation type parameters.
The method for configuring the animation component of the pop-up layer in the first embodiment of the application comprises the following steps:
one is as follows: through the encapsulation of multi-section animation codes with various animation effects, the single component with the control popup layer is configured, the diversification and high-efficiency customization of the interaction mode of webpage display of the popup layer are effectively ensured, and the user experience is improved.
The second step is as follows: due to the fact that the target component is in a single component form and has the advantages of reusability and universality, the configured target component can be directly called in an SDK (Software Development Kit) form for a webpage developer, the webpage developer is not required to repeatedly develop animation codes for all webpages, and the amount of the animation codes is reduced. Namely, redundant animation codes can be reduced, and the pop-up layer development efficiency can be improved.
And thirdly: when the animation type of the pop-up layer needs to be added or modified, the target component can be modified on the service side, developers do not need to modify the animation codes of the pop-up layer of each webpage, and development and maintenance efficiency is improved.
Fourthly, the method comprises the following steps: because the target component is packaged with a plurality of sections of animation codes with various animation effects, different animation type parameters can be provided for the target component, and the animation type of a popup layer is switched or the customized animation type is expanded.
As an example, the parameter portal is further for receiving visualization parameters. The target component instance is also used for controlling the display state of the target pop-up layer according to the visualization parameters. For example, if the visual parameter is 'tune', it indicates that the pop-up layer is controlled to be hidden, and if the visual parameter is 'false', it indicates that the pop-up layer is controlled to be displayed. The display and hiding of the target pop-up layer can be controlled through the parameters provided by the embodiment.
As an example, the parameter entry is further configured to receive a presentation region style parameter. The target component instance is also used for controlling the display area and the display style of the target pop-up layer according to the display area style parameter. For example, if the value of the display region style (align) parameter is 'center', it indicates that the control popup layer is located in the middle of the page; if the align parameter is taken as 'top', the popup layer is controlled to be positioned at the top of the page; if the align parameter is 'bottom', the popup layer is controlled to be positioned at the bottom of the page; if the value of align parameter is left', it represents that the control popup layer is positioned at the left side of the page; the value of align parameter is 'right', which means that the control popup layer is located at the right side of the page. The anchor position of the target pop-up layer on the page can be controlled through the parameters provided by the embodiment.
As an example, the parameter entry is further configured to receive an animation duration parameter. The target component instance is further used for controlling the display duration of the target pop-up layer according to the animation duration parameter. By the animation duration (animation duration) parameter provided by the embodiment, the execution time of the target pop-up layer animation effect can be controlled.
It should be noted that the parameter entry may also receive other parameters according to the function of the target component. As shown in fig. 3, the reference entry may also be used to receive the following parameters: a prefix parameter, a hasMask parameter, a mask type parameter, such as transparent type, normal type, etc.
In addition, in the aspect of animation processing:
by way of example, as shown in fig. 4, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations in a component initialization phase: s400, splicing to obtain a first character string according to the animation type parameters and the animation display suffix; step S402, according to the animation type parameters and the animation closing suffix, splicing to obtain a second character string; step S404, transmitting the first character string and the second character string into the classname attribute of the DOM element of the root node of the target component. The present embodiment is directed to animation codes (animation codes when the pop-up layer is displayed and animation codes when the pop-up layer exits) that are located into the target component by the first character string and the second character string. For example, a display animation code (named as zoom-enter-active) of the zoom animation type corresponding to the pop-up layer and an exit animation code (named as zoom-leave-active) of the zoom animation type corresponding to the pop-up layer are packaged in the target component. When the target component receives the animationType parameter 'zoom' through the parameter entry, two character strings of zoom-enter-active and zoom-leave-active are obtained through splicing, and then the character strings are transmitted into the classname attribute of the component root node DOM element of the target component, so that the exit animation code of the zoom animation type corresponding to the pop-up layer and the exit animation code of the zoom animation type corresponding to the pop-up layer are quickly positioned.
By way of example, as shown in fig. 5, when receiving an animation Duration (animation Duration) parameter through the parameter interface, the target component is further configured to perform the following operations in a component initialization stage: step S500, splicing a third character string according to the animation duration parameter; step S502, the third character string is transmitted into a-webkit-animation-duration attribute of the styleSheets attribute of the DOM element of the root node of the target component. The embodiment is that an animation duration (e.g. 300 ms) is inserted into the corresponding animation code in the target component through steps S500 to S502. For example, the third string may be in the form of: $ this, the animation duration } ms; animation-duration $ (this. animation duration } ms').
Example two
Fig. 6 schematically illustrates a block diagram of an animation component configuration system of a pop-up layer according to a second embodiment of the present application, which may be partitioned into one or more program modules, the one or more program modules being stored on a storage medium and executed by one or more processors to implement the embodiments of the present application. The program module referred to in the embodiments of the present application refers to a series of computer program instruction segments capable of performing specific functions, and is more suitable for describing the execution process of the animation component configuration system of the pop-up layer in the storage medium than the program itself.
As shown in FIG. 6, the pop-up layer animation component configuration system 600 can include a first configuration module 610 and a first configuration module 620, wherein:
a first configuration module 610 for configuring a target component comprising a plurality of pieces of animation code for implementing a plurality of animation effects.
A second configuration module 620, configured to configure a parameter entry for the target component, where the parameter entry is configured to receive an animation type parameter indicating an animation type, and the target component is instantiated according to the entry parameter to obtain a target component instance, where the target component instance is used to control a target pop-up layer to execute a target animation effect corresponding to the animation type parameter.
In an exemplary embodiment, the parameter portal is further for receiving a visualization parameter; the target component instance is also used for controlling the display state of the target pop-up layer according to the visualization parameters.
In an exemplary embodiment, the parameter entry is further configured to receive a presentation region style parameter; the target component instance is also used for controlling the display area and the display style of the target pop-up layer according to the display area style parameter.
In an exemplary embodiment, the parameter entry is further configured to receive an animation duration parameter; the target component instance is further used for controlling the display duration of the target pop-up layer according to the animation duration parameter.
In an exemplary embodiment, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations in a component initialization phase: splicing to obtain a first character string according to the animation type parameters and the animation display suffix; splicing to obtain a second character string according to the animation type parameter and the animation closing suffix; and transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
In an exemplary embodiment, when an animation duration (animation duration) parameter is received through the parameter interface, the target component is further configured to perform the following operations in a component initialization stage: splicing into a third character string according to the animation duration parameter; passing the third string into a-webkit-animation-duration attribute of a styleSheets attribute of a DOM element of a root node of the target component.
In an exemplary embodiment, each animation effect is composed of a plurality of animations, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited.
EXAMPLE III
Fig. 7 schematically shows a hardware architecture diagram of a computer device suitable for implementing the animation component configuration method of the popup layer according to a third embodiment of the present application. In the present embodiment, the computer device 2 is a device capable of automatically performing numerical calculation and/or information processing in accordance with a command set in advance or stored. For example, mobile devices, tablet devices, laptop computers, computing stations, smart devices (e.g., smart apparel, smart watches, smart speakers, smart glasses), virtual reality devices, gaming devices, set-top boxes, digital streaming devices, vehicle terminals, smart televisions, television boxes, MP4 (moving picture experts group audio layer IV) players, and server-based virtual terminal devices, among others. As shown in fig. 7, the computer device 2 includes at least, but is not limited to: memory 710, processor 720, and network interface 730 may be communicatively linked to each other by a system bus. Wherein:
the memory 710 includes at least one type of computer-readable storage medium including a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the storage 710 may be an internal storage module of the computer device 2, such as a hard disk or a memory of the computer device 2. In other embodiments, the memory 710 may also be an external storage device of the computer device 2, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, provided on the computer device 2. Of course, memory 710 may also include both internal and external memory modules of computer device 2. In this embodiment, the memory 710 is generally used for storing the operating system installed in the computer device 2 and various types of application software, such as program codes of animation component configuration methods of the popup layer, and the like. In addition, the memory 710 may also be used to temporarily store various types of data that have been output or are to be output.
Processor 720 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 720 is generally used for controlling the overall operation of the computer device 2, such as performing control and processing related to data interaction or communication with the computer device 2. In this embodiment, processor 720 is configured to execute program codes stored in memory 710 or process data.
Network interface 730 may include a wireless network interface or a wired network interface, with network interface 730 typically being used to establish communication links between computer device 2 and other computer devices. For example, the network interface 730 is used to connect the computer device 2 with an external terminal via a network, establish a data transmission channel and a communication link between the computer device 2 and the external terminal, and the like. The network may be a wireless or wired network such as an Intranet (Intranet), the Internet (Internet), a Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth (Bluetooth), or Wi-Fi.
It should be noted that FIG. 7 only shows a computer device having components 710 and 730, but it should be understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
In this embodiment, the animation component configuration method of the pop-up layer stored in the memory 710 may be further divided into one or more program modules and executed by one or more processors (in this embodiment, the processor 720) to complete the present application.
Example four
The present embodiment also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the animation component configuration method of the popup layer in the embodiment.
In this embodiment, the computer-readable storage medium includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the computer readable storage medium may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the computer device. Of course, the computer-readable storage medium may also include both internal and external storage devices of the computer device. In this embodiment, the computer-readable storage medium is generally used to store an operating system and various types of application software installed in the computer device, for example, program codes of the animation component configuration method of the pop-up layer in the embodiment, and the like. Further, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.
EXAMPLE five
Unlike the animation component configuration scheme corresponding to the pop-up layer in the first embodiment, the present embodiment discloses a display scheme of the pop-up layer. However, for technical details and technical effects in this embodiment, reference may be made to embodiment one to avoid further description.
Fig. 8 schematically shows a flowchart of a display method of a pop-up layer according to a fifth embodiment of the present application. The present embodiment may be executed in the computer device 2, and the flowchart of the present embodiment is not used to limit the order of executing the steps.
As shown in fig. 8, the method for displaying the pop-up layer may include steps S800 to S802, wherein:
step S800, instantiating the target component according to the entry parameters to obtain a target component example, wherein the entry parameters comprise animation type parameters representing animation types, and the target component is packaged with multiple sections of animation codes for realizing multiple animation effects.
And step S802, controlling the target pop-up layer to execute the target animation effect corresponding to the animation type parameter through the target component instance.
In an exemplary embodiment, the entry parameter includes a visualization parameter. As shown in fig. 9, the method further includes step S900: and controlling the display state of the target pop-up layer according to the visualization parameters through a target component instance.
In an exemplary embodiment, the entry parameter includes a presentation region style parameter. As shown in fig. 10, the method further includes step S1000: and controlling the display area and the display style of the target pop-up layer according to the display area style parameter through a target component example.
In an exemplary embodiment, the entry parameter includes an animation duration parameter. As shown in fig. 11, the method further includes step S1100: and controlling the display time length of the target pop-up layer according to the animation time length parameter through a target component example.
In an exemplary embodiment, as shown in fig. 12, when the animation type parameter is received through the parameter interface, the method further includes an initialization operation for the target component: step S1200, according to the animation type parameters and the animation display suffix, splicing to obtain a first character string; step S1202, splicing to obtain a second character string according to the animation type parameter and the animation closing suffix; step S1204, transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
In an exemplary embodiment, as shown in FIG. 13, when an animation duration (animation duration) parameter is received through the parameter interface; the method further comprises an initialization operation of the target component: step S1300, splicing a third character string according to the animation duration parameter; step S1302, the third string is transmitted to a-webkit-animation-duration attribute of the styleSheets attribute of the DOM element of the root node of the target component.
In an exemplary embodiment, each animation effect is composed of a plurality of animations, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited.
It will be apparent to those skilled in the art that the modules or steps of the embodiments of the present application described above may be implemented by a general purpose computing device, they may be centralized on a single computing device or distributed across a network of multiple computing devices, and alternatively, they may be implemented by program code executable by a computing device, such that they may be stored in a storage device and executed by a computing device, and in some cases, the steps shown or described may be performed in an order different from that described herein, or they may be separately fabricated into individual integrated circuit modules, or multiple ones of them may be fabricated into a single integrated circuit module. Thus, embodiments of the present application are not limited to any specific combination of hardware and software.
The above description is only a preferred embodiment of the present application, and not intended to limit the scope of the present application, and all modifications of equivalent structures and equivalent processes, which are made by the contents of the specification and the drawings of the present application, or which are directly or indirectly applied to other related technical fields, are included in the scope of the present application.

Claims (17)

1. A method for configuring an animation component of a popup layer, the method comprising:
configuring a target component comprising a plurality of pieces of animation code for implementing a plurality of animation effects;
and configuring a parameter inlet for the target component, wherein the parameter inlet is used for receiving animation type parameters representing animation types, the target component is instantiated according to the inlet parameters to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameters.
2. The method for configuring an animation component of a pop-up layer according to claim 1, wherein the parameter entry is further configured to receive a visualization parameter;
the target component instance is also used for controlling the display state of the target pop-up layer according to the visualization parameters.
3. The method for configuring animation components of a pop-up layer according to claim 1, wherein the parameter entry is further configured to receive a presentation area style parameter;
the target component instance is also used for controlling the display area and the display style of the target pop-up layer according to the display area style parameter.
4. The method for configuring animation components of a pop-up layer according to claim 1, wherein the parameter entry is further configured to receive an animation duration parameter;
the target component instance is further used for controlling the display duration of the target pop-up layer according to the animation duration parameter.
5. The method for configuring animation component of pop-up layer according to claim 3, wherein when receiving the animation type parameter through the parameter interface, the target component is further configured to perform the following operations in component initialization stage:
splicing to obtain a first character string according to the animation type parameters and the animation display suffix;
splicing to obtain a second character string according to the animation type parameter and the animation closing suffix;
and transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
6. The method for configuring animation component of pop-up layer according to claim 1, wherein when receiving an animation duration (animation duration) parameter through the parameter interface, the target component is further configured to perform the following operations in a component initialization stage:
splicing into a third character string according to the animation duration parameter;
passing the third string into a-webkit-animation-duration attribute of a styleSheets attribute of a DOM element of a root node of the target component.
7. The method of configuring an animation component of a popup layer according to claim 1, wherein each animation effect is composed of a plurality of animations, and each animation effect includes an animation effect when the popup layer is displayed and an animation effect when the popup layer is exited.
8. An animation component configuration system for a popup layer, the system comprising:
a first configuration module to configure a target component, the target component comprising a plurality of pieces of animation code to implement a plurality of animation effects;
and the second configuration module is used for configuring a parameter inlet for the target component, the parameter inlet is used for receiving an animation type parameter representing an animation type, the target component is instantiated according to the inlet parameter to obtain a target component example, and the target component example is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameter.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the steps of the method of any of claims 1 to 7 are implemented by the processor when executing the computer program.
10. A computer-readable storage medium, having stored thereon a computer program, the computer program being executable by at least one processor to cause the at least one processor to perform the steps of the method according to any one of claims 1 to 7.
11. A display method of a popup layer is characterized by comprising the following steps:
instantiating a target component according to an entry parameter to obtain a target component instance, wherein the entry parameter comprises an animation type parameter representing an animation type, and the target component is packaged with a plurality of sections of animation codes for realizing a plurality of animation effects; and
and controlling the target pop-up layer to execute the target animation effect corresponding to the animation type parameter through the target component instance.
12. The pop-up layer presentation method of claim 11, wherein the entry parameter comprises a visualization parameter; the method further comprises the following steps:
and controlling the display state of the target pop-up layer according to the visualization parameters through a target component instance.
13. The method for displaying a pop-up layer according to claim 11, wherein the entry parameter comprises a display region style parameter; the method further comprises the following steps:
and controlling the display area and the display style of the target pop-up layer according to the display area style parameter through a target component example.
14. The method for displaying the pop-up layer of claim 11, wherein the entry parameter comprises an animation duration parameter; the method further comprises the following steps:
and controlling the display time length of the target pop-up layer according to the animation time length parameter through a target component example.
15. The method for displaying a pop-up layer according to claim 13, wherein when the animation type parameter is received through the parameter interface; the method further comprises an initialization operation of the target component:
splicing to obtain a first character string according to the animation type parameters and the animation display suffix;
splicing to obtain a second character string according to the animation type parameter and the animation closing suffix;
and transmitting the first character string and the second character string into a classname attribute of a DOM element of a root node of the target component.
16. The method for displaying a popup layer according to claim 11, wherein when an animation duration (animation duration) parameter is received through the parameter interface; the method further comprises an initialization operation of the target component:
splicing into a third character string according to the animation duration parameter;
passing the third string into a-webkit-animation-duration attribute of a styleSheets attribute of a DOM element of a root node of the target component.
17. A pop-up layer presentation method according to claim 11, wherein each animation effect is composed of a combination of a plurality of animations, and each animation effect includes an animation effect when the pop-up layer is displayed and an animation effect when the pop-up layer is exited.
CN202110167949.0A 2021-02-07 2021-02-07 Animation component configuration method and display method of pop-up layer Pending CN112817636A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110167949.0A CN112817636A (en) 2021-02-07 2021-02-07 Animation component configuration method and display method of pop-up layer

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110167949.0A CN112817636A (en) 2021-02-07 2021-02-07 Animation component configuration method and display method of pop-up layer

Publications (1)

Publication Number Publication Date
CN112817636A true CN112817636A (en) 2021-05-18

Family

ID=75862177

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110167949.0A Pending CN112817636A (en) 2021-02-07 2021-02-07 Animation component configuration method and display method of pop-up layer

Country Status (1)

Country Link
CN (1) CN112817636A (en)

Similar Documents

Publication Publication Date Title
CN110489116B (en) Page rendering method and device and computer storage medium
CN113190776B (en) Popup window display method and system
CN107992301B (en) User interface implementation method, client and storage medium
US11216253B2 (en) Application prototyping tool
CN106991096B (en) Dynamic page rendering method and device
CN113286159B (en) Page display method, device and equipment of application program
US20140279025A1 (en) Methods and apparatus for display of mobile advertising content
US20230367953A1 (en) Display rendering method and system
US20190378319A1 (en) Virtual scene display method and apparatus, and storage medium
WO2017107851A1 (en) Method and device for releasing and updating desktop application component
EP3367238A1 (en) Producing method and producing system for desktop launcher of mobile terminal
CN112528203A (en) Webpage-based online document making method and system
CN113055750A (en) Live broadcast method, device, terminal and storage medium
CN115309516A (en) Application life cycle detection method and device and computer equipment
CN112423111A (en) Graphic engine and graphic processing method suitable for player
CN106204695A (en) The edit methods of a kind of 3D animation and device
CN107562324B (en) Data display control method and terminal
CN111125480A (en) Background music playing method and equipment, client device and electronic equipment
CN106648623B (en) Display method and device for characters in android system
CN112817636A (en) Animation component configuration method and display method of pop-up layer
CN113784194A (en) Embedding method and device of video player
CN111352665A (en) Page loading method, device, equipment and storage medium thereof
CN112667942A (en) Animation generation method, device and medium
CN114281310A (en) Page frame setting method, device, equipment, storage medium and program product
Dea JavaFX 2.0: introduction by example

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