CN116991528B - Page switching method and device, storage medium and electronic equipment - Google Patents

Page switching method and device, storage medium and electronic equipment Download PDF

Info

Publication number
CN116991528B
CN116991528B CN202311016261.8A CN202311016261A CN116991528B CN 116991528 B CN116991528 B CN 116991528B CN 202311016261 A CN202311016261 A CN 202311016261A CN 116991528 B CN116991528 B CN 116991528B
Authority
CN
China
Prior art keywords
page
switching
node
animation
occupancy map
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
Application number
CN202311016261.8A
Other languages
Chinese (zh)
Other versions
CN116991528A (en
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202311016261.8A priority Critical patent/CN116991528B/en
Publication of CN116991528A publication Critical patent/CN116991528A/en
Application granted granted Critical
Publication of CN116991528B publication Critical patent/CN116991528B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/003D [Three Dimensional] image rendering
    • G06T15/005General purpose rendering architectures

Abstract

The application discloses a page switching method, a device, a storage medium and electronic equipment, and relates to the technical field of Internet, wherein the method is used for improving continuity and fluency of page switching, specifically, terminal equipment responds to page switching operation triggered by a first page to obtain a first node set corresponding to the first page and having a hierarchical relationship, wherein each first node represents a component obtained after a single element in the first page is disassembled; in the first node set, at least one target node is selected based on the acquired display configuration parameters, rendering processing is carried out on elements respectively represented by the at least one target node, and a corresponding occupancy map is obtained, wherein the occupancy map contains presentation elements displayed in the page switching process; and switching from the first page to the second page, playing the switching animation generated based on the occupancy map on the second page subjected to blurring processing in the switching process, and hiding the switching animation after the playing is finished.

Description

Page switching method and device, storage medium and electronic equipment
Technical Field
The present application relates to the field of internet technologies, and in particular, to a method and apparatus for switching pages, a storage medium, and an electronic device.
Background
In recent years, with the rapid development of internet technology, in order to improve the visual appeal of page switching of application pages, page switching between two pages is generally implemented based on large-layer transition animation.
In the related art, in response to a trigger operation of the object for a target component specified in a first page, a gradual enlarging animation process is performed for the target component, and a switch is made to a second page of a full-screen floating layer.
However, although the large-layer transition animation realizes the page switching in a full-screen floating layer mode, the mode only aims at the appointed component to trigger, and the triggering requirement of using the object diversity cannot be met; in addition, in the page switching process, if the triggered designated component is a text component, the corresponding full-screen floating layer type page switching mode is more abrupt under the influence of the text component, which affects the overall effect of page switching and leads to poor consistency of page switching.
Disclosure of Invention
The application provides a page switching method, a page switching device, a storage medium and electronic equipment, which are used for improving continuity and fluency of page switching.
In a first aspect, the present application provides a page switching method, including:
Responding to page switching operation triggered by aiming at a first page, and acquiring a first node set corresponding to the first page and having a hierarchical relationship; wherein each of the first nodes characterizes: a component obtained after disassembling the single element in the first page, wherein the hierarchical relationship is characterized in that: the inclusion relationship among the elements in the first page;
in the first node set, at least one target node is selected based on the acquired display configuration parameters, and rendering processing is carried out on elements respectively represented by the at least one target node to obtain a corresponding occupancy map; the occupancy map comprises: presentation elements displayed during page switching;
and switching from the first page to a second page, wherein in the switching process, a switching animation generated based on the occupancy map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden.
In a second aspect, the present application provides a page switching apparatus, including:
the method comprises the steps that an acquisition unit responds to page switching operation triggered for a first page to acquire a first node set corresponding to the first page and having a hierarchical relationship; wherein each of the first nodes characterizes: a component obtained after disassembling the single element in the first page, wherein the hierarchical relationship is characterized in that: the inclusion relationship among the elements in the first page;
The obtaining unit is used for selecting at least one target node from the first node set based on the obtained display configuration parameters, and rendering the elements respectively represented by the at least one target node to obtain a corresponding occupancy map; the occupancy map comprises: presentation elements displayed during page switching;
and the switching unit is used for switching from the first page to the second page, wherein in the switching process, switching animation generated based on the occupancy map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden.
In a third aspect, the present application provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing any one of the page switching methods of the first aspect when executing the computer program.
In a fourth aspect, the present application provides a computer storage medium having stored therein computer program instructions for execution by a processor of any one of the page switching methods of the first aspect.
In a fifth aspect, an embodiment of the present application provides a computer program product, including computer program instructions, where the computer program instructions implement any one of the page switching methods of the first aspect when executed by a processor.
The beneficial effects of the application are as follows:
in the embodiment of the present application, a terminal device obtains a first node set with a hierarchical relationship corresponding to a first page in response to a page switching operation triggered for the first page, where each first node represents: a component obtained after disassembling a single element in a first page, and a hierarchical relationship is characterized: inclusion relationships between elements in the first page. Therefore, fine granularity splitting aiming at the first page is realized, each element in the first page is disassembled into corresponding component nodes according to the inclusion relation among components in the first page, and a first node set corresponding to the first page and having a hierarchical relation is obtained, so that personalized screening of the component nodes is realized aiming at the first node set, and the triggering requirement of using object diversification is met.
Then, in the first node set, at least one target node is selected based on the acquired display configuration parameters, rendering processing is performed on elements respectively represented by the selected at least one target node, and a corresponding occupancy map is obtained, wherein the occupancy map comprises: presentation elements displayed during a page switch. In this way, the diversified occupation map generation requirements are realized, specifically, the display configuration parameters can be pre-acquired parameters meeting the triggering requirements of the object diversification, based on the display configuration parameters, at least one target node meeting the triggering requirements of the object diversification can be selected individually from the first node set, and then the elements respectively represented by the target nodes are rendered, so that the occupation map meeting the individual triggering requirements is obtained.
In addition, the first page is switched to the second page, wherein in the switching process, the switching animation generated based on the occupancy map is played on the second page subjected to the blurring process, and after the playing is finished, the switching animation is hidden. In this way, aiming at the page switching process, on one hand, on the visual effect, the second page to be switched can be displayed in a fuzzy manner, and the occupation map is displayed in a highlighted and clear manner, so that the display of the switching process is smoother and more attractive; on the other hand, in the aspect of the switching effect, because the occupation map and the corresponding switching animation are generated in advance, the playing of the switching animation is very smooth, and the second page is loaded in accordance with the loading time, in other words, the loading katon of the second page does not cause adverse effect on the switching effect of the page switching because the second page is subjected to the blurring processing, and the network is not required for the clear display and the playing of the occupation map and the generated switching animation, so that the attractive appearance and the silky of the page switching can be realized while the triggering requirement of a user can be met; more specifically, the method can be used for solving the problem of poor experience caused by the fact that a second page which cannot be normally loaded occurs in the animation processing process of a designated component due to the fact that the internet speed is blocked in the related technology under some scenes with poor internet speed.
Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the application. The objectives and other advantages of the application will be realized and attained by the structure particularly pointed out in the written description and claims thereof as well as the appended drawings.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the application and do not constitute an undue limitation to the application. In the drawings:
fig. 1A to fig. 1B are schematic diagrams of optional application scenarios in the embodiments of the present application;
fig. 2 is a schematic flow chart of a page switching method provided in an embodiment of the present application;
FIG. 3 is a schematic diagram of a process of triggering an application page switching operation in an embodiment of the present application;
fig. 4 is a schematic diagram of a first node set corresponding to a first page in an embodiment of the present application;
5A-5C are schematic diagrams of target nodes and characterization elements thereof in the embodiment of the application;
FIG. 6 is a schematic diagram of a configuration process of an animation display region according to an embodiment of the present application;
fig. 7A to fig. 7E are schematic views of obtaining a second page subjected to blurring processing in the embodiment of the present application;
Fig. 8 is a flowchart of another page switching method according to an embodiment of the present application;
fig. 9 is an overall flow diagram of a page switching method provided in an embodiment of the present application;
fig. 10 is a schematic structural diagram of a page switching device provided in an embodiment of the present application;
fig. 11 is a schematic structural diagram of a computer device according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application.
In the embodiment of the application, the related processes of collecting, storing, using, processing, transmitting, providing, disclosing and the like of the personal information of the user accord with the regulations of related laws and regulations, and the public order colloquial is not violated.
In order to facilitate understanding of the technical solutions provided in the embodiments of the present application, some key terms used in the embodiments of the present application are first explained.
The embodiment of the application relates to the Internet technology, which is an information technology developed and established on the basis of computer technology. Specifically, the internet technology connects different devices with each other through a computer network, accelerates the transmission speed of information, widens the acquisition channel of information, and promotes the development of various different application programs.
User Interface (IU) refers to the overall design of man-machine interaction, operation logic and Interface aesthetics of an application program. Specifically, the user interface is a medium for interaction and information exchange between the system and the target object, and can be used for realizing conversion between an internal form of information and an acceptable form of the target object.
The user interface referred to in the embodiments of the present application may be a front-end interface, for example: application (APP) front-end interfaces, web pages, applet front-end interfaces, etc. The front-end interface is designed around the behavior of the target object, and may contain at least one component, each of which may be used to implement a corresponding business function, such as: a first page or a second page, etc.
Component (Component) is a simple package of data and methods. In the embodiment of the application, the package of the component combines the data obtained by the abstract logic and the method to form an organic whole, namely, the packaged component conceals the object attribute and the implementation detail thereof, only discloses the interface externally, and further controls the access level of the attribute reading and modification in the application program.
The components referred to in the embodiments of the present application may be graphical components, for example: taking a front-end interface as a first page as an example, a component characterizes an element on the first page, and the element has a visual representation on the first page; the first page may be defined as a whole as a component, and each of the components may include a visual presentation element as another component having an inclusion relationship with the first page.
Rendering: refers to a process of displaying contents such as graphics or images on a screen.
The following briefly describes the design concept of the embodiment of the present application.
Currently, in the field of page switching, it is common to use an object to click a button or link in a first page to implement page switching, i.e. to jump from the first page to a second page. The related art generally adopts a manner of directly switching pages, that is, the switching process does not involve any switching animation or transitional effect, which makes the visual presentation of the page switching appear abrupt and incoherent, and further affects the use experience of the user object. Although this jump approach is straightforward, it is not ideal in terms of improving the user object switching experience and the visual appeal of the application. Therefore, when the page switching of the application program is designed, some animation or transition effect is usually adopted to enhance the continuity and fluency between pages, so that the use experience of the user is improved.
In the related art, in order to improve the visual appeal of switching and optimize the switching experience of the used object, a page switching scheme of, for example, a large-image floating layer transition animation is proposed, where in an application program, after the used object clicks a small cover image, the used object is guided to a full-screen floating layer page through an animation effect. The scheme is generally suitable for scenes of pictures or videos, and corresponding animation effects are usually gradually enlarged from a small cover map of a current page to a full-screen floating layer page, so that a user object can more intuitively view a large map or play the videos in a full screen mode. The transition mode of the large floating layer transition animation not only can improve user experience, but also can increase visual appeal of pages, and in a word, the page switching mode is a very popular page switching mode at present and can be used for improving user experience and visual effect of application programs.
However, the related schemes are generally only applicable to scenes of pictures or videos, and are not applicable to transitional effects of other page elements. This is because the design of the large floating layer transition animation is initially designed to enhance the browsing experience of the user on the picture or video, and the picture or video occupies the whole page, so that the transition effect by adopting the full-screen floating layer mode is natural and suitable. But for other page elements, such as text, buttons, icons, etc., which typically occupy only a portion of the page, the effect may appear less natural and appropriate by transitioning in a full-screen floating layer.
Considering the reason that the above page switching cannot meet the diversified switching page, the method is basically the current page switching mode, only considers the design thought of the front-end page developer, but the common use object does not have front-end development experience, lacks a way for feeding back the self-customized page switching requirement, and cannot quickly and accurately convert the display configuration requirement of the common use object on the page switching into a corresponding switching animation, so that in order to meet the switching requirement of using object diversification, an interface for inputting the customized page switching requirement of the use object can be provided for the use object, so that the use object provides display configuration parameters related to the page switching based on the interface, and visual presentation of the corresponding switching animation is further obtained.
In view of this, an embodiment of the present application provides a method for switching a page, in the method, a manner of selecting page elements in a user-defined manner is provided, first, each element in a first page is disassembled, for example, each element in the first page is disassembled into corresponding components according to a containing relationship between each element in the first page, and accordingly, an electronic device obtains a first node set corresponding to the first page and having a hierarchical relationship in response to a page switching operation triggered for the first page; secondly, the user-defined selection of the page element can be realized by setting the display configuration parameters by using the object, namely, the terminal equipment selects at least one target node in the first node set based on the acquired display configuration parameters.
Secondly, the embodiment of the application further provides a method for obtaining the occupation map in a self-defining manner, at least one target node meeting the personalized requirement of the use object is selected according to the obtained display configuration parameters, then the terminal equipment performs rendering processing on the elements respectively represented by the at least one target node to obtain the corresponding occupation map, and the occupation map comprises: presentation elements displayed during page switching; in this way, the subsequent switching animation generated based on the occupancy map can meet the personalized requirements of the user object.
And finally, the embodiment of the application also provides a mode for playing the switching animation, wherein in the process of switching the first page to the second page, the switching animation generated based on the occupancy map is played on the second page subjected to the blurring process, and after the playing is finished, the switching animation is hidden. On the one hand, on the visual effect, the second page to be switched can be displayed in a fuzzy manner, and the occupation map is displayed in a highlighted and clear manner, so that the display of the switching process is smoother and more attractive; on the other hand, in the aspect of the switching effect, the occupation map and the corresponding switching animation are generated in advance, so that the display of the occupation map and the corresponding switching animation is very smooth, and the second page is loaded in accordance with the corresponding loading time, in other words, the second page is subjected to the blurring processing, so that the loading katon of the second page does not have adverse effect on the switching effect of the page switching, and the occupation map and the generated switching animation are clearly displayed and displayed without requiring a network, so that the attractive appearance and the silky of the page switching can be realized while the triggering requirement of a user can be met.
The following description is made for some simple descriptions of application scenarios applicable to the technical solutions of the embodiments of the present application, and it should be noted that the application scenarios described below are only used for illustrating the embodiments of the present application and are not limiting. In the specific implementation process, the technical scheme provided by the embodiment of the application can be flexibly applied according to actual needs.
The scheme provided by the embodiment of the application can be applied to most scenes involving page switching, for example: page switch scenes of APP, page switch scenes of applet, etc. As shown in fig. 1A, an application scenario is schematically provided in an embodiment of the present application, where the scenario may include a terminal device 110 and a server 120.
The terminal device 110 may be, for example, a mobile phone, a tablet computer (PAD), a notebook computer, a desktop computer, a smart television, a smart car device, a smart wearable device, etc. The terminal device 110 may be installed or connected to a switching configuration platform capable of performing page switching, where the switching configuration platform according to the embodiment of the present application may be a low-code configuration platform, and the application related to page switching may be an applet application, or may be an application such as a web page, software, etc., and the application platform carried by the application may be an applet client, or may be a browser, a software, etc., and the server 120 is a background server corresponding to the applet, the web page, the software, etc., without limiting the specific type of the application platform.
The server 120 may be a background server corresponding to a switching configuration platform installed or accessed on the terminal device 110, and may implement a background function of visual page switching to implement the steps of the page switching method provided in the embodiments of the present application. For example, the cloud server may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, namely, content delivery networks (Content Delivery Network, CDNs), basic cloud computing services such as big data and artificial intelligence platforms, etc., but the present invention is not limited thereto.
The page switching method provided in the embodiment of the present application may be performed by the terminal device 110 or the server 120, or may also be performed by a combination of the terminal device 110 and the server 120. Either the terminal device 110 or the server 120 can include one or more processors, memory, and I/O interfaces to interact with the terminals, etc. In addition, the terminal device 110 or the server 120 may also configure a database, or interact with the server 120 configured with the database, where the database may be used to store preset component nodes, preset display configuration parameters, and the like. Program instructions of the page switching method provided in the embodiment of the present application may also be stored in the memory of the terminal device 110 or the server 120, where the program instructions, when executed by the processor, can be used to implement steps of the page switching method provided in the embodiment of the present application, so as to implement custom page switching.
In particular, the solution provided by the embodiment of the present application may also be applicable to most of the visual page switching scenarios involving applications, for example: visual page switching scenes of APP, visual page switching scenes of webpages, visual page switching scenes of applets and the like.
As shown in fig. 1B, an application scenario diagram for visualization development provided in the embodiment of the present application is shown, in this scenario, a server 120 is used as a background server of a page switching platform, and a terminal device 110 is used as a main body of interaction between the page switching platform and a user object; the use object may use a page switching platform on the terminal device 110, by sending a user-defined requirement including a display configuration parameter to the page switching platform, or selecting a target component meeting the user-defined requirement by means of a visualization operation through the page switching platform, and subsequently, the use object may view a first page presented on the terminal device 110, and by triggering a corresponding page switching operation on the first page, view a switching animation presented on a front-end interface and meeting the user-defined requirement, and after the switching animation is played, view a second page presented on the front-end interface, and so on.
In one embodiment, the application scene may be a visual page switching scene of various APP (for example, office APP, chat communication APP, music video APP, leisure entertainment APP, life service APP, photographic picture APP, news information APP, shopping APP, financial APP, travel APP, etc.) having a page switching function, in which the terminal device is a client for running a page switching platform, where the page switching platform is a main body that interacts with a user object and is deployed in a background server, and the client is also an application platform carried by a web page; then: the terminal equipment responds to page switching operation triggered by aiming at a first page, and acquires a first node set corresponding to the first page and having a hierarchical relationship, wherein each first node represents: a component obtained after disassembling a single element in a first page, and a hierarchical relationship is characterized: and selecting at least one target node based on the acquired display configuration parameters customized by the object in the first node set, and rendering the elements respectively represented by the at least one target node to acquire a corresponding occupancy map, wherein the occupancy map comprises the following components: the method comprises the steps that presentation elements displayed in a page switching process are finally switched from a first page to a second page, wherein in the switching process, switching animation generated based on a occupation map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden; therefore, the page switching process meets the self-defining requirement of the applicable object, and in the switching process, the switching animation is presented on the blurred second page, so that the page switching process is more attractive and smooth, and the continuity and fluency of the page switching are improved.
In one embodiment, the application scenario may be a visual page switch scenario of an applet, in which the terminal device is various applets (e.g., office applet, chat communication applet, music video applet, recreational applet, life service applet, photographic picture applet, news information applet, shopping applet, financial applet, travel applet, etc.) for running a page switch platform, where the page switch platform is a main body for interacting with a use object and is deployed in a background server, and the applet is also an application platform for web page loading; then: the terminal equipment responds to page switching operation triggered by aiming at a first page, and acquires a first node set corresponding to the first page and having a hierarchical relationship, wherein each first node represents: a component obtained after disassembling a single element in a first page, and a hierarchical relationship is characterized: and selecting at least one target node based on the acquired display configuration parameters customized by the object in the first node set, and rendering the elements respectively represented by the at least one target node to acquire a corresponding occupancy map, wherein the occupancy map comprises the following components: the method comprises the steps that presentation elements displayed in a page switching process are finally switched from a first page to a second page, wherein in the switching process, switching animation generated based on a occupation map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden; therefore, the page switching process meets the self-defining requirement of the applicable object, and in the switching process, the switching animation is presented on the blurred second page, so that the page switching process is more attractive and smooth, and the continuity and fluency of the page switching are improved.
In the visual page switching scene of the applet, the application platform and the page switching platform carried by the applet can respectively correspond to different clients, and the corresponding clients are respectively deployed in different background servers; for example, the applet-loaded application platform corresponds to an applet client, and the page switch platform corresponds to an APP client, and the applet client and APP client are deployed in different backend servers, respectively.
A direct or indirect communication connection may be made between terminal device 110 and server 120 via one or more networks 130. The network 130 may be a wired network, or may be a Wireless network, for example, a mobile cellular network, or may be a Wireless-Fidelity (WIFI) network, or may be other possible networks, which are not limited in this embodiment of the present invention.
In this embodiment, the number of the terminal devices 110 may be one or more, and similarly, the number of the servers 120 may be one or more, that is, the number of the terminal devices 110 or the servers 120 is not limited.
In one possible application scenario, in order to facilitate reducing the communication delay of the search, the servers 120 may be deployed in each region, or for load balancing, different servers 120 may serve the terminal devices 110 in different regions, for example, the terminal device 110 is located at the site a, a communication connection is established with the server 120 serving the site a, the terminal device 110 is located at the site b, a communication connection is established with the server 120 serving the site b, and multiple servers 120 form a data sharing system to implement data sharing through a blockchain.
For each server 120 in the data sharing system having a node identifier corresponding to the server 120, each server 120 in the data sharing system may store the node identifiers of other servers 120 in the data sharing system, so that the generated block may be subsequently broadcast to other servers 120 in the data sharing system according to the node identifiers of the other servers 120. A list of node identifiers may be maintained in each server 120, and the server 120 name and node identifier may be stored in the list of node identifiers. The node identity may be a protocol (Internet Protocol, IP) address of the interconnection between networks, as well as any other information that can be used to identify the node.
Of course, the method provided in the embodiment of the present application is not limited to the application scenario shown in fig. 1A or fig. 1B, but may be used in other possible application scenarios, and the embodiment of the present application is not limited. The functions that can be implemented by each device in the application scenario shown in fig. 1A or fig. 1B will be described together in the following method embodiments, which are not described here again.
The method flow provided in the embodiments of the present application with reference to the drawings may be performed by the server 120 or the terminal device 110 in fig. 1A or fig. 1B, or may be performed by the terminal device 110 and the server 120 together, and is mainly described herein by way of example as being performed by the terminal device 110.
Referring to fig. 2, a flow chart of a page switching method provided in an embodiment of the present application is shown.
Step 201: the terminal equipment responds to page switching operation triggered by aiming at a first page to acquire a first node set corresponding to the first page and having a hierarchical relationship; wherein each first node characterizes: a component obtained after disassembling a single element in a first page, and a hierarchical relationship is characterized: inclusion relationships between elements in the first page.
In this embodiment of the present application, the terminal device may be any electronic device, and the first page is a page that has been loaded by the terminal device and is presented on the front-end interface.
In one embodiment, the page switch operation may be triggered by using the object to interact directly or indirectly with the terminal device. For example, the object is used in the first page, the designated area is triggered by means of mouse key, touch control and the like, and then the terminal equipment acquires a page switching instruction (used for representing the page switching operation) triggered by the object aiming at the designated area. For another example, the use object sends a page switching instruction for the first page to the terminal device through other communication devices connected with the terminal device, and then the terminal device obtains the page switching instruction sent by the use object (used for characterizing the page switching operation).
Referring to fig. 3, for example, taking APP as a process schematic diagram for triggering an application page switching operation, in a first page of APP, the first page shown in fig. 3 may be seen, and may include a plurality of elements, where an object is used to trigger any element by means of a mouse key, touch, or the like, or an object is used to trigger a specified area of the first page by means of a mouse key, touch, or the like, so that a corresponding page switching instruction may be generated, and then the terminal device obtains the page switching instruction.
Further, in the embodiment of the present application, in order to meet the user-defined requirement of the usage object, the terminal device further responds to the page switching operation to obtain a first node set with a hierarchical relationship corresponding to the first page, that is, obtain each element in the first page.
In one embodiment, in response to a page switching operation, the terminal device disassembles each element in the first page, and disassembles the first page into a first set of nodes (i.e., component nodes) having a hierarchical relationship, for example, a first component tree, based on the inclusion relationship between each element in the first page.
Specifically, the first node set may be a first component tree, where the first node is a form in which elements represented by a page component and configuration information thereof exist in the first component tree, and the first node may be divided into a composite first node and an atomic first node: the composite first node may have a subordinate first node (e.g., composite first node or atomic first node); an atomic first node is the node of the smallest granularity, i.e. there is no subordinate first node in the atomic first node.
Referring to fig. 4, a schematic diagram of a first node set corresponding to a first page is shown, taking the first node set represented as a first component tree as an example, a root node of the first component tree is used to represent the first page, that is, the first node P is a composite first node including all elements in the first page, and there are a subordinate first node a and a first node B, where the first node a corresponds to each element of a region a in the first page, the first node B corresponds to each element of a region B in the first page, and accordingly, the first node P is disassembled for each composite first element, and atomic nodes are sequentially presented. Of course, each first node in the first node set further includes corresponding component configuration information, which is not described herein.
In summary, in response to the page switching operation triggered by the first page, the first node set with the hierarchical relationship corresponding to the first page is obtained, fine granularity splitting for the first page is achieved, each element in the first page is disassembled into corresponding component nodes according to the inclusion relationship among each component in the first page, and the first node set with the hierarchical relationship corresponding to the first page is obtained, so that personalized screening for the component nodes is achieved for the first node set, and triggering requirements of using object diversification are met.
Step 202: the terminal equipment selects at least one target node in the first node set based on the acquired display configuration parameters, and performs rendering processing on elements respectively represented by the at least one target node to acquire a corresponding occupation map; the occupancy map contains: presentation elements displayed during a page switch.
In this embodiment of the present application, the display configuration parameter is obtained by directly or indirectly interacting with the terminal device by using the object, so that the first node set is triggered, and the interaction between the object and the terminal device may be understood as editing the first node set by using the object in a mode of mouse key, touch control, or the like on the page switching platform, or may be understood as sending the display configuration parameter for the first node set to the terminal device by using the object through other communication devices connected with the terminal device.
In one embodiment, the terminal device obtains a display configuration parameter generated after the editing operation is performed on the first node set by using the object, where the display configuration parameter is at least used for: a presentation element displayed during a page switch is specified. Then, the terminal device selects at least one target node from the first node set based on the acquired display configuration parameters. Alternatively, if at least two target nodes are selected, a hierarchical relationship exists between the target nodes.
Specifically, the above-described editing operation may include a selection operation (deletion operation), a modification operation, and an addition operation. For example, at least one first node is selected from the first node set by using the object as a target node meeting the user-defined requirement. And secondly, modifying the selected first node in the first node set by using the object, so that the modified target node meets the user-defined requirement. For another example, the object is used to select at least one first node from the first node set, and select at least one preset component node from the database as a target node meeting the user-defined requirement. For example, the object is used to select at least one first node from the first node set, and select at least one preset component node from the database, and modify the selected first node, so that the modified target node meets the user-defined requirement.
It should be noted that, the use object may perform one of the selecting operation (deleting operation), modifying operation and adding operation and the combination according to the custom requirement, and the order of performing the operations is not limited herein.
For ease of understanding, the following is divided into three sections to illustrate: display configuration parameters and corresponding target nodes related to a selection operation, display configuration parameters and corresponding target nodes related to a modification operation, and display configuration parameters and corresponding target nodes related to an addition operation.
A first part: display configuration parameters and corresponding target nodes of the selection operation are involved.
In the embodiment of the application, the terminal device acquires the display configuration parameters generated after the selection operation is performed on at least one first node in the first node set by using the object, and selects the corresponding first node as the target node based on the display configuration parameters.
Referring to fig. 5A, which is a schematic diagram of at least one target node and its characterizing elements, it can be seen that in the first page shown in fig. 5A, a case is selected directly for the composite first node, for example: and if each element in the area A2 is a component for selecting 1 operation by using the object, the display configuration parameters acquired by the terminal equipment are used for indicating to extract the operation of selecting 1 for the corresponding first node A2 in the first node set, and the hierarchical relationship between the first node and the node subordinate to the first node A2 is reserved in the process of selecting 1, so that at least one target node is acquired. In another case, after selecting 2 for the composite first node, the subordinate first nodes that do not meet the user-defined requirement are screened out for the composite first node, for example: the partial elements in the area A2 are components for selecting the object to perform the operation 2, and generally, the first node A2 and the first node subordinate thereto are obtained, and then the first node which does not meet the user-defined requirement is screened out, so that the display configuration parameters meeting the user-defined requirement are obtained, and the display configuration parameters are used for performing the operation of selecting the object to perform the operation 2 at least for the first node A2 in the first node set and the first node subordinate thereto selected by the frame, so as to obtain at least one target node.
A second part: to modifying display configuration parameters of an operation and corresponding target nodes.
In the embodiment of the application, after obtaining the modification operation of the use object on any selected first node (or preset component node), the terminal device generates a display configuration parameter, and selects a corresponding first node as a target node based on the display configuration parameter.
Referring to fig. 5B, which is a schematic diagram of at least one target node and its characterizing elements, it can be seen that in the first page shown in fig. 5B, each element in the area A2 is each component that uses an object to perform a selection 1 operation, and an element in an upper left corner area of the area A2 is a component that uses the object to perform a modification operation on component configuration information, where the display configuration parameters acquired by the terminal device are used to indicate that the operation of selecting 1 is performed on a corresponding first node A2 in the first node set, and the modification operation of performing, on one node, the component configuration information is performed, where the illustrated modification operation is: a literal description of "user ABC" is added in the indicating node. Thus, the terminal device obtains the display configuration parameters, and based on the display configuration parameters, obtains at least one target node meeting the user-defined requirements of the use object.
Third section: display configuration parameters and corresponding target nodes relating to the add operation.
In the embodiment of the application, the terminal device acquires the display configuration parameters generated after the selection operation is performed on at least one first node in the first node set and the preset component node by the use object, and selects the corresponding first node as the target node based on the display configuration parameters.
Referring to fig. 5C, which is a schematic diagram of at least one target node and its characterizing elements, it can be seen that in the first page shown in fig. 5C, each element in the area A2 is each component that uses an object to perform a 1 selection operation, and an element in a lower right corner area of the area A2 is an element that uses an object to characterize a preset component node added from a database, where the display configuration parameters obtained by the terminal device are used to instruct the 1 selection operation to perform the 1 selection operation for a corresponding first node A2 in the first node set, and the add operation to perform the add operation to the preset component node that performs the database acquisition (e.g., external database acquisition; further e.internal database pre-storing), where the illustrated add operation is: an icon of "LOGO" is added in a specified location area (related to inclusion relationships between elements).
Of course, the display parameter may also be information abstracted by the object according to self-defined requirements, for example, hierarchical information for identifying the component tree where the target node is located, which is not described herein, and the terminal device correspondingly obtains the display configuration parameter from the database.
Further, after at least one target node is obtained, rendering processing is performed on each element characterized by each target node, so as to obtain a corresponding occupancy map.
In one embodiment, the terminal device obtains a containment relationship between elements respectively represented by at least one target node based on a hierarchical relationship between the at least one target node, and performs off-screen rendering on the elements respectively represented by the at least one target node according to the containment relationship to obtain a corresponding occupancy map.
Specifically, before rendering the occupation map, a corresponding animation display area, namely a switching page, needs to be acquired, wherein the animation display area is a display area pre-designated by the user object, namely a display area meeting the requirement of realizing page switching visualization by using the user object. In practical applications, after determining the range of the animation display region, the animation display region needs to be fixed, and a dedicated component (e.g., a View component) is used for wrapping. And then, according to the hierarchical relation among at least one target node, performing off-screen rendering on each corresponding presentation element in the animation display region, in other words, according to the relative position of each representation presentation element of at least one target node in the first page, drawing the corresponding presentation element in the animation display region to obtain a drawn occupancy map for occupancy display in the page switching process.
Referring to fig. 6, a schematic configuration diagram of an animation display area is shown, wherein a display range of the animation display area is first obtained, the animation display area is an area for playing a switching animation in a page switching process, then at least one target node meeting a user-defined requirement is obtained based on a first page, off-screen drawing is performed on a canvas where the animation display area is located on presentation elements represented by the at least one target node, and rendering is performed to form a occupation map.
It should be noted that, the off-screen drawing for the occupancy map is equivalent to a custom screenshot drawing, which has at least the following differences from the conventional screenshot: 1. the conventional screenshot is usually cut by adopting a standard graph for the first page, but in the embodiment of the application, each element in the first page is selected according to the user-defined requirement of the use object, so that a technical scheme for realizing the idea is provided; 2. the elements intercepted by the traditional screenshot are identical to the partial elements in the intercepted first page, but the embodiment of the application is not particularly limited to the elements, and specifically, the operation modes of screening the elements, modifying the display information of the elements, adding preset elements and the like are provided for the use object so as to meet the user-defined requirement of the use object.
In summary, the diversified bitmap generation requirements are achieved, specifically, the display configuration parameters may be pre-acquired parameters meeting the triggering requirements of the object diversification, based on the display configuration parameters, at least one target node meeting the triggering requirements of the object diversification may be selected individually from the first node set, and then the elements respectively represented by the target nodes are rendered, so as to obtain the bitmap meeting the individual triggering requirements.
Step 203: and switching from the first page to the second page, wherein in the switching process, the switching animation generated based on the occupancy map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden.
In the embodiment of the application, after the occupation map is rendered, the actual page switching action can be executed; of course, the page switching action may also be performed while generating the occupancy bitmap, for example: the loading of the second page, where the switching display of the second page includes loading and rendering, at least before the rendering operation is performed on the second page, a corresponding occupancy map is obtained, which will not be repeated hereinafter.
In one embodiment, in the process of switching from the first page to the second page, the second page is loaded first, blurring processing is performed on each element in the second page, a second page subjected to blurring processing is obtained, then the occupancy map is overlaid on the second page subjected to blurring processing according to the relative position of the occupancy map in the first page, a switching animation generated by animation processing on the occupancy map is obtained, and the switching animation is played.
Aiming at obtaining a second page subjected to blurring processing, specifically, the terminal equipment obtains a second node set corresponding to the second page and having a hierarchical relationship, wherein each second node represents: and (3) a component obtained after disassembling the single element in the second page, wherein the hierarchical relationship is characterized by: the inclusion relationship among the elements in the second page; then, setting the display state of each characterization element of each second node to be a transparent state, and obtaining a corresponding second transparent node set, wherein the second transparent node set characterizes: and the second page is subjected to blurring processing.
Referring to fig. 7A, a schematic diagram of obtaining a second page after blurring processing according to an embodiment of the present application is shown; the loading of the second page is equivalent to obtaining a second node set corresponding to the second page and having a hierarchical relationship, and in order to avoid the blocking or unsmooth page switching caused by the rendering process of the second page, the display state of each second node in the second node set is set to be a transparent state, and accordingly, the second page is presented to be a transparent state (i.e. the second page subjected to the blurring processing).
For coverage of the occupancy map, the terminal equipment adds at least one target node into a second transparent node set based on a hierarchical relationship among the at least one target node to obtain a switching node set, wherein a switching page represented by the switching node set comprises: and the second page subjected to blurring processing and the occupancy bitmap covered on the second page.
Referring to fig. 7B, a schematic diagram of an overlay process of a occupancy bitmap according to an embodiment of the present application is shown; taking the second transparent node set as an example of the second transparent component tree, taking at least one target node (target node set) as an example of the target component tree, inserting the target component tree into the second transparent component tree, and illustrating a possible inserting mode of inserting a root node of the target component tree below any leaf node in the second transparent component tree, wherein the inserting mode is not particularly limited. In this way, the second transparent component tree after the insertion operation is used as a switching component tree (i.e. a switching node set), in the switching component tree, the target node A2 node and its subordinate nodes are in a non-transparent state, i.e. visual display, and the other nodes are in a transparent state, i.e. blurring display (including: transparent display).
Referring to fig. 7C, a schematic display diagram of each node representing element in a switching component tree according to an embodiment of the present application is shown, where a occupation map corresponding to a target node set is covered on a second page that is subjected to blurring processing and corresponds to a switching node set (i.e., a second transparent node set), so as to obtain a switching page corresponding to the switching component tree, where each element in the second page is in a transparent state (for example, set to be a specified transparent percentage), and above the transparent state, the occupation map is clearly displayed, so that situations of switching stuck or unsmooth caused by loading the second page are avoided.
It should be noted that, the above-mentioned direct addition of the at least one target node to the second transparent node set is a possible implementation scheme, in some scenarios, in order to make the page switch smoother, when the object is used to perform corresponding processing operation according to the user-defined requirement, and generate the display configuration parameter, the similarity between the presentation element, which is respectively represented by the at least one target node and obtained based on the display configuration parameter, and a part of elements in the second page is greater than a preset threshold. As a possible scenario, the presentation element represented by each of the at least one target node is identical to the partial element in the second page, and the processing may be to replace the at least one target node with a corresponding second transparent node in the second transparent node set.
Aiming at the generation of the switching animation, the terminal equipment performs animation processing aiming at the generated occupancy map in the animation display area to obtain the corresponding switching animation. For example, in a preset playing period (generally set according to the time required for loading and rendering the second page), the bitmap is subjected to operations such as picture zooming or picture panning.
Referring to fig. 7D, a schematic playing diagram of a switching animation according to an embodiment of the present application is shown; if the preset playback duration of the switching animation is 0.03 minutes, performing the animation operation of picture translation for the occupancy map, as shown in fig. 7D, where 11:11:01 is the play start time of the switching animation, at this time, each presentation element in the occupied bitmap may be substantially matched with the corresponding element in the first page, 11:11:02 for switching the animation at a moment in the playing process, the occupation map can be seen to translate towards a designated direction (such as up, down, left, right, etc.) in the animation display region, and 11:11:03 is the play termination time of the switching animation, and the occupied bitmap in the illustration is at the uppermost part of the animation display region.
It should be noted that, in order to make the playing of the switching animation smoother, the playing of the switching animation is preset, and the occupation map can be set to match the position of the selected first node in the first page at the time of starting playing; the occupancy map may be set to match the location of a similar second node in the second page at the end of play.
In addition, in the embodiment of the present application, after the switching animation is played, the switching animation is hidden, the occupancy map is hidden, and the second page subjected to the blurring process is subjected to the defuzzification process, so that the second page is displayed.
Referring to fig. 7E, a schematic process diagram of displaying a second page in the present application is provided; wherein, at the moment when the playing of the switching animation is finished, the switching animation is hidden, namely: and hiding the animation display area and the covered occupation map, and performing deblurring processing on the second page, namely setting the display state of each second transparent node in the second page to be a non-transparent state, and displaying the second page at the moment to realize smooth switching from the first page to the second page.
In summary, the switching from the first page to the second page is realized, and in terms of the page switching process, on one hand, the second page to be switched can be displayed in a fuzzy manner and the occupation map is displayed in a highlighted and clear manner on the visual effect, so that the display in the switching process is smoother and more attractive; on the other hand, in the aspect of the switching effect, because the occupation map and the corresponding switching animation are generated in advance, the playing of the switching animation is very smooth, and the second page is loaded in accordance with the loading time, in other words, the loading katon of the second page does not cause adverse effect on the switching effect of the page switching because the second page is subjected to the blurring processing, and the network is not required for the clear display and the playing of the occupation map and the generated switching animation, so that the attractive appearance and the silky of the page switching can be realized while the triggering requirement of a user can be met; more specifically, the method can be used for solving the problem of poor experience caused by the fact that a second page which cannot be normally loaded occurs in the animation processing process of a designated component due to the fact that the internet speed is blocked in the related technology under the scene that the internet speed is not increased.
Further, after describing the process of switching from the first page to the second page, referring to fig. 8, a page switching scheme for switching from the second page back to the first page is provided for the embodiment of the present application, which is specifically as follows.
Step 801: and responding to the page switching back operation triggered by aiming at the second page, and acquiring the switching back animation used for representing the reverse play of the switching animation.
In the embodiment of the present application, the database of the terminal device or the external database will also store: the previous occupation map generated in the process of switching from the first page to the second page and the corresponding switching animation. And the terminal equipment responds to the page switching back operation triggered by the second page, and acquires the occupancy map stored in the previous page switching and the corresponding switching back animation thereof from the database or the external database. The switch back animation is generated by performing reverse play processing on the switch animation generated based on the occupancy map.
Therefore, by storing the occupancy map and the corresponding switching animation thereof, the calculation resources and the wasted calculation time consumed by regenerating the occupancy map in the switching back process are saved, and the generation cost of the switching back animation is further reduced.
Step 802: and switching back to the first page from the second page, wherein in the switching back process, the switching back animation is played on the first page subjected to blurring processing or the second page subjected to blurring processing, and after the playing is finished, the switching back animation is hidden.
In this embodiment of the present application, the implementation of the second page switching back to the first page is similar to that described in step 203, and the switching back process is briefly described below, and the differences between the two processes are specifically described.
In one embodiment, the terminal device performs the blurring process on the second page, or obtains the second page that has undergone the blurring process and is cached in the previous time, and obtains the relative position of the occupancy map in the first page, and then based on the relative position, overlays the occupancy map onto the second page that has undergone the blurring process, and plays the cut-back animation.
In another embodiment, the terminal device loads the first page, performs blurring processing on each element in the first page, obtains the first page subjected to blurring processing, obtains a relative position of the occupancy map in the first page, and covers the occupancy map on the first page subjected to blurring processing based on the relative position to play the cut-back animation.
In the previous process of switching from the first page to the second page, the first node set corresponding to the first page may not be cached to release the storage space, and of course, the caching of the first page may also be implemented, which is not limited specifically herein.
In addition, for the above-mentioned switching back process, the first page is loaded, that is, the first node set with the hierarchical relationship corresponding to the first page is obtained, the display state of each first node is set to be the hidden state, the first hidden node set is obtained, and then each target node corresponding to the obtained occupancy map is inserted into the first hidden node set, or the target node corresponding to the obtained occupancy map is adopted to replace the same node in the first hidden node set, so that repeated description is omitted for similar ideas. In other words, the occupancy map is overlaid on the first page subjected to the blurring process, and the switch-back animation is played in the animation display area where the occupancy map is located until the switch-back animation is played, at this time, each presentation element in the occupancy map should be displayed in a visual manner overlapping with a corresponding element in the first page subjected to the blurring process.
After the reverse cut picture is played, hiding the reverse cut picture, hiding the occupied bit map, performing defuzzification processing on the first page subjected to the fuzzification processing, and displaying the first page. The smoothness and the high efficiency of switching back from the second page to the first page are realized.
Further, the second page is destroyed, so that the cache space is saved, and the flow and the high efficiency of the subsequent page switching are ensured.
In summary, the embodiment of the present application provides a manner of generating a occupation map, so as to meet the user-defined requirement of using an object to play a visual animation in page switching; the embodiment of the application provides a page switching mode based on the switching of a occupation map from a first page to a second page, so as to realize the fluency and the high efficiency of page switching; the embodiment of the application also provides a page switching mode based on the occupation map switching from the second page back to the first page.
Referring to fig. 9, a more specific page switching method provided in the embodiments of the present application is shown in the following complete description, where the page switching method provided in the embodiments of the present application is combined with an actual application scenario.
Step 901: and switching the configuration flow of the animation.
Specifically, in order to meet the user-defined requirement of the use object, firstly, the configuration information of the animation display area configured by the use object according to the self-requirement, namely, the area for playing the animation is definitely obtained; then, the animation display area is defined, namely, the animation display area is wrapped by using a special component View, and then, a displayed animation area initial canvas is generated from the View; thirdly, eliminating components which do not meet the user-defined requirements of the user object in the animation display area wrapped by the View, so that the configuration work of the early-stage switching animation for the first page is ready to be completed.
Step 902: and switching the playing flow of the animation.
Specifically, in response to a click operation for a target area of a first page, a start presentation of a switching animation is started. Specifically, the device first extracts a dedicated component View for animation presentation area delineation; then, reading display configuration parameters meeting the user-defined requirements of the application object, eliminating the component nodes which do not meet the user-defined requirements, and obtaining at least one target node; and then, starting screenshot drawing, namely performing off-screen drawing on presentation elements represented by each target node in the animation displayable region, rendering into a occupancy bitmap, and storing the occupancy bitmap, so that the display occupancy bitmap for page switching is ready. Further, a second page is started, the display state of each element in the second page is set to be transparent, the previously generated occupation map is covered on the second page subjected to blurring treatment, and optionally, the occupation map is positioned at the position of a similar (or same) element area in the second page; and then carrying out zooming-in (zooming-out) or panning processing on the occupancy map to generate a switching animation, playing the switching animation, hiding the occupancy map after the switching animation is finished, and setting a second page to be in a visible state to realize smooth, smooth and efficient page switching.
Step 903: and switching back to the playing flow of the animation.
The switch back animation may be adapted to exit the second page scene or switch back to the first page scene, and the page switch logic of step 902 may be multiplexed in order for the page switch process to also achieve the silky effect. Specifically, the terminal device responds to a switching-back operation triggered by the second page, acquires the cached occupancy map and the relative position of the occupancy map to the first page, then covers the occupancy map on the second page subjected to blurring processing, plays a switching-back picture (corresponding to reverse play of the switching animation), returns to the extracted initial position at the moment when the playing of the switching-back picture is finished, destroys the second page at the moment, hides the occupancy map, and presents the first page.
In summary, compared with the existing large-layer transition animation, the page switching method is only suitable for image or video scenes, and the scheme has the characteristic of wider scene universality, and can improve the smoothness of page switching while meeting the user-defined requirement of the used object, so that the use experience of the used object is improved.
Specifically, under the condition that the technical scheme provided by the embodiment of the application is applied to the page switching scene with similar areas or similar elements, the similar parts can be extracted and used as switching animation, smooth seamless page switching can be realized, and the user-defined requirement of the object can be combined, for example, in order to achieve a smoother switching effect, the similar area elements extracted by the object aiming at the first page are modified, so that the modified occupation map and the generated switching animation are consistent with the partial areas in the second page, and the smoothness and the high efficiency of page switching in the application program can be better improved, and the trust feeling and the loyalty of the application program of the object are improved.
The technical scheme provided by the embodiment of the application has strong universality, and is characterized in that the method is used for carrying out the mapping on any element or region in the first page to obtain a bitmap, and can be understood as a screenshot, and simultaneously, the method also supports the user-defined modification of the object, namely, can be understood as supporting the P diagram for the screenshot, and then playing the switching animation. The display content and effect of the animation can be switched more flexibly.
In addition, the technical scheme provided by the embodiment of the application has the advantages of simple realization logic and less calculation force, and in practical application, the cost for realizing smooth page switching by accessing the scheme is extremely low, and accordingly, the page switching experience of a user can be improved.
Based on the same inventive concept as the above-mentioned method embodiment, the present application embodiment further provides a page switching device, which has a similar principle of solving the problem as the page switching method of the above-mentioned embodiment, so that the implementation of the device can refer to the implementation of the above-mentioned method, and the repetition is omitted.
As shown in fig. 10, a page switching device provided in an embodiment of the present application includes:
an obtaining unit 1001, configured to obtain a first node set having a hierarchical relationship corresponding to a first page in response to a page switching operation triggered for the first page; wherein each first node characterizes: a component obtained after disassembling a single element in a first page, and a hierarchical relationship is characterized: the inclusion relationship among the elements in the first page;
An obtaining unit 1002, in the first node set, based on the obtained display configuration parameters, selecting at least one target node, and performing rendering processing on elements respectively represented by the at least one target node, to obtain a corresponding occupancy map; the occupancy map contains: presentation elements displayed during page switching;
and a switching unit 1003 for switching from the first page to the second page, wherein in the switching process, the switching animation generated based on the occupancy map is played on the second page subjected to the blurring process, and after the playing is finished, the switching animation is hidden.
Optionally, the obtaining unit 1002 is configured to select, in the first node set, at least one target node based on the obtained display configuration parameter, specifically configured to:
acquiring display configuration parameters generated after editing operation of the use object on the first node set; the display configuration parameters are at least for: designating presentation elements displayed in a page switching process;
and selecting at least one target node from the first node set based on the display configuration parameters.
Optionally, the obtaining unit 1002 is configured to obtain a display configuration parameter generated after the editing operation is performed on the first node set by using the object, where the display configuration parameter includes any one of the following manners:
Acquiring a display configuration parameter generated after the selection operation of a use object aiming at least one first node in the first node set;
acquiring a display configuration parameter generated after the use object performs a selection operation on at least one first node in the first node set and a modification operation on the selected at least one first node;
acquiring display configuration parameters generated after the use object performs selection operation on at least one first node in the first node set and a preset component node;
and acquiring the display configuration parameters generated after the use object performs selection operation on at least one first node in the first node set and the preset component node and performs modification operation on the selected at least one first node.
Optionally, the obtaining unit 1002 is configured to perform rendering processing on the elements respectively represented by at least one target node to obtain a corresponding occupancy map, which is specifically configured to:
obtaining inclusion relationships between elements respectively characterized by at least one target node based on the hierarchical relationships between the at least one target node;
and performing off-screen rendering on the elements respectively represented by at least one target node according to the inclusion relation to obtain a corresponding occupancy map.
Optionally, the switching unit 1003 is configured to play, on the second page subjected to the blurring process, a switching animation generated based on the occupancy map, and specifically is configured to:
loading a second page, and carrying out blurring processing on each element in the second page to obtain a second page subjected to blurring processing;
covering the occupation map on a second page subjected to blurring processing according to the relative position of the occupation map in the first page;
and acquiring the switching animation generated by animation processing aiming at the occupancy map, and playing the switching animation.
Optionally, the switching unit 1003 is configured to perform blurring processing on each element in the loaded second page, so as to obtain a second page subjected to blurring processing, and specifically is configured to:
acquiring a second node set corresponding to a second page and having a hierarchical relationship; wherein each second node characterizes: and (3) a component obtained after disassembling the single element in the second page, wherein the hierarchical relationship is characterized by: the inclusion relationship among the elements in the second page;
setting the display state of each characterization element of each second node to be a transparent state, and obtaining a corresponding second transparent node set; the second transparent node set characterizes: and the second page is subjected to blurring processing.
Optionally, the switching unit 1003 is configured to overlay the occupancy map onto the second page subjected to the blurring process according to the relative position of the occupancy map in the first page, and play a switching animation generated based on the occupancy map, and is specifically configured to:
adding at least one target node into a second transparent node set based on the hierarchical relationship among the at least one target node to obtain a switching node set; the switching page characterized by the switching node set comprises the following components: the second page subjected to blurring processing and the occupancy map covered on the second page;
and acquiring the switching animation generated by animation processing aiming at the occupancy map, and playing the switching animation.
Optionally, the switching unit 1003 is further configured to, after switching from the first page to the second page, specifically:
hiding the occupancy map, performing defuzzification processing on the second page subjected to the fuzzification processing, and displaying the second page.
Optionally, the apparatus further comprises: a switch back unit 1004, configured to, after switching from the first page to the second page, specifically:
responding to page switching back operation triggered by aiming at a second page, and acquiring a switching back animation used for representing reverse playing of the switching animation;
And switching back to the first page from the second page, wherein in the switching back process, the switching back animation is played on the second page subjected to blurring processing or the first page subjected to blurring processing, and after the playing is finished, the switching back animation is hidden.
Optionally, the cut-back unit 1004 is configured to play a cut-back animation on the first page subjected to blurring processing, and specifically is configured to:
loading a first page, and carrying out blurring processing on each element in the first page to obtain a first page subjected to blurring processing;
and acquiring the relative position of the occupation map in the first page, covering the occupation map on the first page subjected to blurring processing based on the relative position, and playing the cut-back animation.
Optionally, the cut-back unit 1004 is further configured to conceal the cut-back picture after playing, specifically configured to:
hiding the occupancy map, performing defuzzification processing on the first page subjected to the fuzzification processing, displaying the first page, and deleting the second page.
The apparatus may be used to perform the methods shown in the embodiments of the present application, so the descriptions of the foregoing embodiments may be referred to for the functions that can be implemented by each functional module of the apparatus, and are not repeated.
Referring to fig. 11, based on the same technical concept, the embodiment of the present application further provides a computer device 1100, where the computer device 1100 may be a terminal device or a server shown in fig. 1A or fig. 1B, and the computer device 1100 may include a memory 1101 and a processor 1102.
The memory 1101 is used for storing a computer program executed by the processor 1102. The memory 1101 may mainly include a storage program area that may store an operating system, application programs required for at least one function, and the like, and a storage data area; the storage data area may store data created according to the use of the computer device, etc. The processor 1102 may be a central processing unit (central processing unit, CPU), or a digital processing unit or the like. The specific connection medium between the memory 1101 and the processor 1102 is not limited in the embodiments of the present application. In the embodiment of the present application, the memory 1101 and the processor 1102 are connected by a bus 1103 in fig. 11, the bus 1103 is shown by a thick line in fig. 11, and the connection manner between other components is only schematically illustrated, and is not limited thereto. The bus 1103 can be classified into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 11, but not only one bus or one type of bus.
The memory 1101 may be a volatile memory (RAM), such as a random-access memory (RAM); the memory 1101 may also be a nonvolatile memory (non-volatile memory), such as a read-only memory, a flash memory (flash memory), a Hard Disk Drive (HDD) or a Solid State Drive (SSD), or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited thereto. The memory 1101 may be a combination of the above memories.
The processor 1102 is configured to execute the methods executed by the apparatus in the embodiments of the present application when it invokes a computer program stored in the memory 1101.
In some possible implementations, aspects of the methods provided herein may also be implemented in the form of a program product comprising program code for causing a so-called computer device to carry out the steps of the methods according to the various exemplary embodiments of the application described above, when the so-called program product is run on a computer device, e.g. the so-called computer device may carry out the methods performed by the devices in the various embodiments of the application.
The program product may take the form of any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
While preferred embodiments of the present application have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. It is therefore intended that the following claims be interpreted as including the preferred embodiments and all such alterations and modifications as fall within the scope of the application.
It will be apparent to those skilled in the art that various modifications and variations can be made in the present application without departing from the spirit or scope of the application. Thus, if such modifications and variations of the present application fall within the scope of the claims and the equivalents thereof, the present application is intended to cover such modifications and variations.

Claims (13)

1. A method for switching pages, comprising:
responding to page switching operation triggered by aiming at a first page, and acquiring a first node set corresponding to the first page and having a hierarchical relationship; wherein each of the first nodes characterizes: a component obtained after disassembling at least one element in the first page, the hierarchical relationship being characterized by: the inclusion relationship among the elements in the first page;
acquiring display configuration parameters generated after editing operation of a use object on the first node set; the display configuration parameters are at least for: designating presentation elements displayed in a page switching process;
selecting at least one target node meeting the user-defined requirement of the use object from the first node set based on the display configuration parameters;
obtaining inclusion relationships between elements respectively characterized by the at least one target node based on the hierarchical relationships between the at least one target node;
performing off-screen rendering on the elements respectively represented by the at least one target node according to the inclusion relation to obtain a corresponding occupancy map; the occupancy map comprises: presentation elements displayed during page switching;
And switching from the first page to a second page, wherein in the switching process, a switching animation generated based on the occupancy map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden.
2. The method of claim 1, wherein the obtaining the display configuration parameters generated after the editing operation of the usage object for the first node set includes any one of the following manners:
acquiring a display configuration parameter generated after a selection operation is performed on at least one first node in the first node set by using an object;
acquiring a display configuration parameter generated by using an object to perform a selection operation on at least one first node in the first node set and performing a modification operation on the selected at least one first node;
acquiring display configuration parameters generated after a use object performs selection operation on at least one first node and a preset component node in the first node set;
and acquiring a display configuration parameter generated after the use object performs selection operation on at least one first node in the first node set and a preset component node and performs modification operation on the selected at least one first node.
3. The method of claim 1, wherein playing the switching animation generated based on the occupancy map on the blurred second page comprises:
loading the second page, and carrying out blurring processing on each element in the second page to obtain a second page subjected to blurring processing;
according to the relative position of the occupancy map in the first page, covering the occupancy map on the second page subjected to blurring processing;
and acquiring a switching animation generated by performing animation processing on the occupancy map, and playing the switching animation.
4. The method of claim 3, wherein the blurring process is performed for each element in the loaded second page to obtain a blurred second page, comprising:
acquiring a second node set corresponding to the second page and having a hierarchical relationship; wherein each of the second nodes characterizes: a component obtained after disassembling the single element in the second page, wherein the hierarchical relationship is characterized in that: the inclusion relationship among the elements in the second page;
setting the display state of each characterization element of each second node to be a transparent state, and obtaining a corresponding second transparent node set; the second transparent node set characterizes: and the second page is subjected to blurring processing.
5. The method of claim 4, wherein overlaying the occupancy map onto the blurred second page and playing a switching animation generated based on the occupancy map according to a relative position of the occupancy map in the first page comprises:
adding the at least one target node to the second transparent node set based on the hierarchical relationship among the at least one target node to obtain a switching node set; the switching page represented by the switching node set comprises the following components: the second page subjected to blurring processing and the occupancy map covered on the second page;
and acquiring a switching animation generated by performing animation processing on the occupancy map, and playing the switching animation.
6. The method according to any one of claims 1 to 5, further comprising, after the concealing the switching animation after the playing is finished:
hiding the occupancy map, performing defuzzification processing on the second page subjected to the fuzzification processing, and displaying the second page.
7. The method of claim 1, further comprising, after the switching from the first page to a second page:
Responding to page switching back operation triggered by aiming at a second page, and acquiring a switching back animation used for representing reverse play of the switching animation;
and switching back to the first page from the second page, wherein in the switching back process, playing the switching back animation on the second page subjected to blurring processing or the first page subjected to blurring processing, and hiding the switching back animation after the playing is finished.
8. The method of claim 7, wherein playing the switch-back animation on the blurred first page comprises:
loading the first page, and carrying out blurring processing on each element in the first page to obtain a first page subjected to blurring processing;
and acquiring the relative position of the occupancy map in the first page, covering the occupancy map on the first page subjected to the blurring processing based on the relative position, and playing the switching-back animation.
9. The method of any one of claims 7 to 8, further comprising, after hiding the cut-back after the playing is finished:
hiding the occupancy map, performing defuzzification processing on the first page subjected to the fuzzification processing, displaying the first page, and deleting the second page.
10. A page switching apparatus, comprising:
the method comprises the steps that an acquisition unit responds to page switching operation triggered for a first page to acquire a first node set corresponding to the first page and having a hierarchical relationship; wherein each of the first nodes characterizes: a component obtained after disassembling at least one element in the first page, the hierarchical relationship being characterized by: the inclusion relationship among the elements in the first page;
the obtaining unit is used for obtaining display configuration parameters generated after the editing operation of the object to the first node set; the display configuration parameters are at least for: designating presentation elements displayed in a page switching process; selecting at least one target node meeting the user-defined requirement of the use object from the first node set based on the display configuration parameters; obtaining inclusion relationships between elements respectively characterized by the at least one target node based on the hierarchical relationships between the at least one target node; performing off-screen rendering on the elements respectively represented by the at least one target node according to the inclusion relation to obtain a corresponding occupancy map; the occupancy map comprises: presentation elements displayed during page switching;
And the switching unit is used for switching from the first page to the second page, wherein in the switching process, switching animation generated based on the occupancy map is played on the second page subjected to blurring processing, and after the playing is finished, the switching animation is hidden.
11. 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 processor, when executing the computer program, implements the steps of the method of any one of claims 1 to 9.
12. A computer storage medium having stored thereon computer program instructions, characterized in that,
the computer program instructions, when executed by a processor, implement the steps of the method of any one of claims 1 to 9.
13. A computer program product comprising computer program instructions, characterized in that,
the computer program instructions, when executed by a processor, implement the steps of the method of any one of claims 1 to 9.
CN202311016261.8A 2023-08-14 2023-08-14 Page switching method and device, storage medium and electronic equipment Active CN116991528B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311016261.8A CN116991528B (en) 2023-08-14 2023-08-14 Page switching method and device, storage medium and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311016261.8A CN116991528B (en) 2023-08-14 2023-08-14 Page switching method and device, storage medium and electronic equipment

Publications (2)

Publication Number Publication Date
CN116991528A CN116991528A (en) 2023-11-03
CN116991528B true CN116991528B (en) 2024-03-19

Family

ID=88524583

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311016261.8A Active CN116991528B (en) 2023-08-14 2023-08-14 Page switching method and device, storage medium and electronic equipment

Country Status (1)

Country Link
CN (1) CN116991528B (en)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108268294A (en) * 2016-12-30 2018-07-10 腾讯科技(深圳)有限公司 Page switching method and device
CN109710348A (en) * 2018-11-14 2019-05-03 深圳壹账通智能科技有限公司 The method and device of page jump, computer equipment, storage medium
CN113536173A (en) * 2021-07-14 2021-10-22 北京字节跳动网络技术有限公司 Page processing method and device, electronic equipment and readable storage medium
CN114567806A (en) * 2022-02-28 2022-05-31 上海哔哩哔哩科技有限公司 Cross-page switching method and system
CN114722320A (en) * 2022-04-20 2022-07-08 北京字跳网络技术有限公司 Page switching method and device and interaction method of terminal equipment
CN115328600A (en) * 2022-08-22 2022-11-11 百果园技术(新加坡)有限公司 Page switching processing method and device, equipment, medium and product thereof
CN115454553A (en) * 2022-09-15 2022-12-09 杭州米络星科技(集团)有限公司 Method and device for realizing application page switching effect and electronic equipment

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484416B (en) * 2016-09-30 2021-02-05 腾讯科技(北京)有限公司 Information processing method and terminal

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108268294A (en) * 2016-12-30 2018-07-10 腾讯科技(深圳)有限公司 Page switching method and device
CN109710348A (en) * 2018-11-14 2019-05-03 深圳壹账通智能科技有限公司 The method and device of page jump, computer equipment, storage medium
CN113536173A (en) * 2021-07-14 2021-10-22 北京字节跳动网络技术有限公司 Page processing method and device, electronic equipment and readable storage medium
CN114567806A (en) * 2022-02-28 2022-05-31 上海哔哩哔哩科技有限公司 Cross-page switching method and system
CN114722320A (en) * 2022-04-20 2022-07-08 北京字跳网络技术有限公司 Page switching method and device and interaction method of terminal equipment
CN115328600A (en) * 2022-08-22 2022-11-11 百果园技术(新加坡)有限公司 Page switching processing method and device, equipment, medium and product thereof
CN115454553A (en) * 2022-09-15 2022-12-09 杭州米络星科技(集团)有限公司 Method and device for realizing application page switching effect and electronic equipment

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
移动应用开发中间件技术研究与设计;柴林香 等;计算机工程与设计;20160316;第37卷(第03期);第665-669、736页 *

Also Published As

Publication number Publication date
CN116991528A (en) 2023-11-03

Similar Documents

Publication Publication Date Title
JP7013466B2 (en) Application data processing methods, equipment, and computer programs
US11223880B2 (en) Picture generation method and apparatus, device, and storage medium
CN111221530B (en) Mobile terminal Web application interface construction method, web application interface and operation method thereof
CN109154943A (en) Conversion based on server of the automatic broadcasting content to click play content
CN111209422A (en) Image display method, image display device, electronic device, and storage medium
CN108874393A (en) rendering method, device, storage medium and computer equipment
KR20080069646A (en) Method for optimizing the rendering of a multimedia scene, corresponding program, signal, data medium, terminal and receiving method
CN114399437A (en) Image processing method and device, electronic equipment and storage medium
CN111949908A (en) Media information processing method and device, electronic equipment and storage medium
CN114443945A (en) Display method of application icons in virtual user interface and three-dimensional display equipment
CN112035195A (en) Application interface display method and device, electronic equipment and storage medium
CN112035046A (en) List information display method and device, electronic equipment and storage medium
CN111708959A (en) Page display method and device, storage medium and electronic equipment
CN114610428A (en) Information stream display method, device, apparatus, storage medium, and program
CN114205680A (en) Video cover display method and device, equipment, medium and product thereof
CN116991528B (en) Page switching method and device, storage medium and electronic equipment
CN110787452B (en) Game application starting method and device and computer equipment
CN113038225B (en) Video playing method, device, computing equipment and storage medium
CN114466222B (en) Video synthesis method and device, electronic equipment and storage medium
CN117376660A (en) Subtitle element rendering method, device, equipment, medium and program product
CN112800365A (en) Expression package processing method and device and intelligent device
CN108228307B (en) Application display method and device, storage medium and electronic equipment
CN111045674A (en) Interactive method and device of player
CN115037960B (en) Interactive video generation method and device
CN114327464B (en) Component construction method and device and storage medium

Legal Events

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