CN113010249A - Page switching method, device, equipment and medium - Google Patents

Page switching method, device, equipment and medium Download PDF

Info

Publication number
CN113010249A
CN113010249A CN202110286538.3A CN202110286538A CN113010249A CN 113010249 A CN113010249 A CN 113010249A CN 202110286538 A CN202110286538 A CN 202110286538A CN 113010249 A CN113010249 A CN 113010249A
Authority
CN
China
Prior art keywords
layer
page
background image
display
transparency
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.)
Granted
Application number
CN202110286538.3A
Other languages
Chinese (zh)
Other versions
CN113010249B (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.)
Beijing Zitiao Network Technology Co Ltd
Original Assignee
Beijing Zitiao Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Zitiao Network Technology Co Ltd filed Critical Beijing Zitiao Network Technology Co Ltd
Priority to CN202110286538.3A priority Critical patent/CN113010249B/en
Publication of CN113010249A publication Critical patent/CN113010249A/en
Application granted granted Critical
Publication of CN113010249B publication Critical patent/CN113010249B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Controls And Circuits For Display Device (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The disclosure relates to a page switching method, device, equipment and medium. The page switching method comprises the following steps: displaying a first display page, wherein the first display page comprises a first layer, and the first layer is used for displaying a first background image; when the page switching operation is detected, displaying a dynamic effect in the first layer, wherein the dynamic effect comprises that the first background image is gradually switched into a second background image in a second display page, and the first background image is gradually hidden in the switching process; and when the dynamic effect display is finished, displaying a second display page, wherein the second display interface comprises a second layer, and the second layer is used for displaying a second background image. According to the embodiment of the present disclosure, the versatility of the fade-in and fade-out effect can be improved.

Description

Page switching method, device, equipment and medium
Technical Field
The present disclosure relates to the field of electronic devices, and in particular, to a page switching method, apparatus, device, and medium.
Background
The fade-in and fade-out of the page can be realized by the fade-in and fade-out of the page elements. The process of turning a page element from bright to dark to complete hiding is called fading out, and conversely, the process of turning a page element from dark to bright to complete clearing is called fading in.
In the existing application operation process, when a user wants to switch to a new page or switch between different pages, smooth transition between the two pages can be realized through fade-in and fade-out of the pages. However, the existing fade-in and fade-out effect needs to be realized by adding layers, and if enough layers cannot be added during page switching, the fade-in and fade-out effect cannot be displayed to a user, so that the universality of the fade-in and fade-out effect is reduced.
Disclosure of Invention
In order to solve the technical problems or at least partially solve the technical problems, the present disclosure provides a page switching method, apparatus, device and medium.
In a first aspect, the present disclosure provides a page switching method, including:
displaying a first display page, wherein the first display page comprises a first layer, and the first layer is used for displaying a first background image;
when the page switching operation is detected, displaying a dynamic effect in the first layer, wherein the dynamic effect comprises that the first background image is gradually switched into a second background image in a second display page, and the first background image is gradually hidden in the switching process;
and when the dynamic effect display is finished, displaying a second display page, wherein the second display interface comprises a second layer, and the second layer is used for displaying a second background image.
In a second aspect, the present disclosure provides a page switching apparatus, including:
the first display unit is configured to display a first display page, the first display page comprises a first layer, and the first layer is used for displaying a first background image;
the second display unit is configured to display a dynamic effect in the first layer when the page switching operation is detected, wherein the dynamic effect comprises that the first background image is gradually switched into a second background image in a second display page, and the first background image is gradually hidden in the switching process;
and the third display unit is configured to display a second display page when the dynamic effect display is completed, wherein the second display interface comprises a second layer, and the second layer is used for displaying a second background image.
In a third aspect, the present disclosure provides an electronic device, comprising:
a processor;
a memory for storing executable instructions;
the processor is configured to read an executable instruction from the memory and execute the executable instruction to implement the page switching method according to the first aspect.
In a fourth aspect, the present disclosure provides a computer-readable storage medium storing a computer program, which, when executed by an electronic device, causes the electronic device to implement the page switching method of the first aspect.
Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has the following advantages:
the page switching method, device, equipment and medium of the embodiment of the disclosure can realize the page switching function when the first display page is displayed, displaying a dynamic effect in a first layer of a first presentation page for displaying a first background image during the detection of a page switching operation, and displaying a second presentation page when the dynamic effect display is completed, wherein the dynamic effect may include gradually switching the first background image to a second background image in a second presentation page displayed on a second layer of the second presentation page, and gradually hiding the first background image during the switching, therefore, when the first display page is switched to the second display page, no layer needs to be added, the existing first image layer in the first display page can be directly utilized to realize the fade-in effect of the second background image and the fade-out effect of the first background image, and the universality of the fade-in and fade-out effect is improved.
Drawings
The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale.
Fig. 1 is a schematic diagram of a conventional fade-in/fade-out switching process;
fig. 2 is a schematic flowchart of a page switching method according to an embodiment of the present disclosure;
fig. 3 is a schematic diagram of a cross fade process provided by an embodiment of the present disclosure;
fig. 4 is a schematic diagram of another cross fade process provided by an embodiment of the present disclosure;
fig. 5 is a schematic diagram of another cross fade process provided by an embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of a page switching apparatus according to an embodiment of the disclosure;
fig. 7 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.
It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.
The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.
It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence relationship of the functions performed by the devices, modules or units.
It is noted that references to "a", "an", and "the" modifications in this disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.
The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.
In the existing application operation process, when a user wants to switch to a new page or switch between different pages, smooth transition between the two pages can be realized through fade-in and fade-out of the pages.
Currently, the existing fade-in and fade-out effect needs to be realized by adding layers. For example, in an existing Android operating system, a fade-in and fade-out effect is to make a layer of the fade-out effect as a foreground layer and a layer of the fade-in effect as a background layer, and then make transparency change for the foreground layer to realize the fade-out effect for the foreground layer and the fade-in effect for the background layer, as shown in fig. 1.
Fig. 1 is a schematic diagram illustrating a conventional cross fade switching process. As shown in fig. 1, the electronic device may simultaneously display a foreground layer 101, an intermediate layer 102, and a background layer 103 when exhibiting a cross fade effect. Before showing the fade-in and fade-out effect, the foreground layer 101 is used for displaying a first background image before page switching, the middle layer 102 is used for displaying page content before page switching, and the background layer 103 is used for displaying a second background image after page switching.
In the process of switching fade-in and fade-out, the transparency of the foreground layer 101 is gradually increased from 0, so that the first background image generates a fade-out effect and the second background image generates a fade-in effect, when the transparency of the foreground layer 101 is changed to 1, the first background image is completely hidden, the second background image is completely displayed, and simultaneously, the page content in the middle layer 102 is stopped from being displayed, so that the switch of fade-in and fade-out is completed.
Although the existing cross-fade effect can achieve smooth transition between two pages to some extent, the following problems still exist:
1. if the layer with the fade-out effect is located in the background layer before the page is switched, a foreground layer needs to be added, the layer with the fade-out effect is moved to the foreground layer, and meanwhile, the layer with the fade-in effect is added in the background layer; if the layer with the fade-out effect is located in the foreground layer before the page is switched, the background layer needs to be added, and meanwhile, the layer with the fade-in effect is added in the background layer.
It can be seen that such a cross fade effect needs to be achieved by adding either a foreground layer or a background layer.
In practical application, not all display scenes allow the foreground layer or the background layer to be added at will, so that in some display scenes in which the foreground layer or the background layer cannot be added, the foreground layer and the background layer cannot be used for realizing the fade-in and fade-out effect, the fade-in and fade-out effect cannot be displayed for a user, and the universality of the fade-in and fade-out effect is reduced.
2. As can be seen from fig. 1, when the transparency of the foreground layer is increased to a certain degree, the shielding of the foreground layer on the layer boundary of the middle layer is disabled, so that the foreground layer cannot shield the layer boundary of the middle layer, and then a user can clearly see the layer boundary of the middle layer, which affects the visual experience of the fade-out effect.
In order to solve the above problem, embodiments of the present disclosure provide a page switching method, device, apparatus, and medium.
The following describes a page switching method provided by the embodiment of the present disclosure with reference to fig. 2 to 5. In the embodiment of the present disclosure, the page switching method may be performed by an electronic device. The electronic device can be a mobile phone, a tablet computer, a desktop computer, a notebook computer, a vehicle-mounted terminal, a wearable device, an all-in-one machine, an intelligent household device and other devices with communication functions, and can also be a virtual machine or simulator simulation device.
Fig. 2 shows a flowchart of a page switching method provided by the embodiment of the present disclosure.
As shown in fig. 2, the page switching method may include the following steps.
S210, displaying a first display page, wherein the first display page comprises a first layer, and the first layer is used for displaying a first background image.
In the disclosed embodiments, the electronic device may display a first presentation page with a first background image in the target application.
The first presentation page may be any presentation page in the target application program. The first presentation page may be used to display first page content.
For example, the target application may be a short video platform, the first presentation page may be a user information presentation page in the short video platform, and the first page content may include user information.
Further, the first display page may include a first layer, and the first layer may include a first background image, so that the first layer may be used to display the first background image. Wherein the first background image may be an image including a background pattern for setoff the first page content.
And S220, when the page switching operation is detected, displaying a dynamic effect in the first layer, wherein the dynamic effect comprises that the first background image is gradually switched into a second background image in the second display page, and the first background image is gradually hidden in the switching process.
In the embodiment of the disclosure, when a user wants to switch a first display page to a second display page, a page switching operation for instructing the electronic device to switch from displaying the first display page to displaying the second display page in a target application may be input to the electronic device, so that when the page switching operation is detected by the electronic device, the electronic device switches from displaying the first display page to displaying the second display page, so that the user may view information in the second display page, and in a process of switching from the first display page to the second display page, a dynamic effect that a first background image is gradually switched to a second background image in the second display page and the first background image is gradually hidden in a switching process is displayed in a first layer.
The second presentation page may be any presentation page in the target application program. The second presentation page may be used to display second page content.
For example, the target application may be a short video platform, the second presentation page may be a user work presentation page in the short video platform, and the second page content may include a preview image of the user's short video work.
Specifically, the first display page and the second display page may be arranged according to a designated sequence, and accordingly, the page switching operation input by the user may have a designated switching direction corresponding to the designated sequence, so that when the electronic device receives the page switching operation, it may be determined that the user wants the electronic device to switch from displaying the first display page to displaying the second display page.
In some embodiments, the first presentation page and the second presentation page may be two separate presentation pages. In other embodiments, the first presentation page and the second presentation page may belong to the same complete presentation page, the first presentation page may be a page area of the complete presentation page with the first background image, and the second presentation page may be a page area of the complete presentation page with the second background image. The disclosed embodiments are not so limited.
Optionally, the page switching operation may include a touch operation, a voice control operation, an expression control operation, and the like with a designated switching direction corresponding to the designated sequence, which is not limited herein.
In the case that the page switching operation includes a touch operation having a designated switching direction corresponding to the designated order, the touch operation may include a sliding operation on the first presentation page along a designated sliding direction corresponding to the designated switching direction, a scrolling operation on the first presentation page along a designated scrolling direction corresponding to the designated switching direction, a long-press operation on the first presentation page within a designated page area corresponding to the designated switching direction, and the like.
For example, the target application may be a short video platform, the first display page may be a user information display page in the short video platform, the second display page may be a user work display page in the short video platform, the second display page may be arranged below the first display page, the designated sequence may be a sequence from top to bottom, and the designated switching direction corresponding to the designated sequence may be upward. When the page switching operation includes a sliding operation, the designated sliding direction corresponding to the designated switching direction may be upward, and the page switching operation may specifically be an upward sliding operation performed on the first display page, so as to trigger the electronic device to switch from displaying the first display page to displaying the second display page; when the page switching operation includes a scrolling operation, the designated scrolling direction corresponding to the designated switching direction may be upward, and the page switching operation may specifically be an upward scrolling operation performed on the first display page, so as to trigger the electronic device to switch from displaying the first display page to displaying the second display page; when the page switching operation includes a long-press operation, the designated page area corresponding to the designated switching direction may be a top page area, and the page switching operation may specifically be a long-press operation performed on the top page area of the first display page, so as to trigger the electronic device to switch from displaying the first display page to displaying the second display page.
Further, in order to avoid the problem that the page switching is abrupt when the first display page is directly switched to the second display page, when the electronic device detects the page switching operation, the electronic device does not directly switch and display the second display page, but displays a dynamic effect synchronous with the page switching operation in the first layer, so that the switching between the first background image and the second background image can be performed synchronously with the page switching operation in the first layer, and the first background image is gradually hidden in the switching process, so that the first background image (original background image) gradually disappears, the fade-out effect of the first background image (original background image) is displayed, the second background image (new background image) gradually appears, the fade-in effect of the second background image (new background image) is displayed, and the disappearance of the first background image is synchronous with the appearance of the second background image, and in the process of displaying the dynamic effect, the fadeout first background image and the faded-in second background image jointly form a real-time background image displayed in the first layer in the dynamic effect.
And S230, when the dynamic effect display is finished, displaying a second display page, wherein the second display interface comprises a second layer, and the second layer is used for displaying a second background image.
In the embodiment of the present disclosure, when the first background image completely disappears and the second background image completely appears, the displaying of the dynamic effect is completed, that is, the user completes the page switching operation. When the dynamic effect display is completed, the electronic device may display a second presentation page having a second background image.
Further, the second presentation page may include a second image layer, and the second image layer may include a second background image, so that the second image layer may be used to display the second background image.
In the embodiment of the present disclosure, it is possible to display the first presentation page, during the detection of the page switching operation, displaying a dynamic effect in a first layer of a first presentation page for displaying a first background image, and when displaying the dynamic effect is completed, displaying a second presentation page, wherein the dynamic effect may include gradually switching the first background image to a second background image in a second presentation page displayed on a second layer of the second presentation page, and gradually hiding the first background image during the switching, therefore, when the first display page is switched to the second display page, no layer needs to be added, the existing first image layer in the first display page can be directly utilized to realize the fade-in effect of the second background image and the fade-out effect of the first background image, and the universality of the fade-in and fade-out effect is improved.
In another embodiment of the present disclosure, in order to improve the reliability of the dynamic effect display, S220 may specifically include:
s221, according to the page switching progress corresponding to the page switching operation, determining first transparency information corresponding to the first background image and second transparency information corresponding to the second background image.
In the embodiment of the disclosure, the electronic device may first obtain the real-time operation parameter of the page switching operation, and determine the page switching progress corresponding to the real-time operation parameter.
The page switching progress may represent a progress of switching from the first display page to the second display page, and may be a ratio of a first page content in the first display page to a second page content in the second display page in a display interface of the electronic device, or a moving distance of the first page content in the first display page, or a moving distance of the second page content in the second display page, or a degree of disappearance of the first background image in the first display page, or a degree of appearance of the second background image in the second display page, which is not limited herein.
Taking the example that the page switching operation includes the sliding operation, the real-time operation parameter of the page switching operation may include a real-time sliding distance, and the electronic device may preset a correspondence between the sliding distance and the page switching progress, so that the page switching progress corresponding to the real-time sliding distance may be determined according to the correspondence between the sliding distance and the page switching progress.
Taking the case that the page switching operation comprises the long press operation as an example, the real-time operation parameter of the page switching operation may comprise the real-time long press time, and the electronic device may be preset with a corresponding relationship between the long press time and the page switching progress, so that the page switching progress corresponding to the real-time long press time may be determined according to the corresponding relationship between the long press time and the page switching progress.
In the embodiment of the disclosure, after determining the page switching progress, the electronic device may determine first transparency information of the first background image at the page switching progress and second transparency information of the second background image at the page switching progress.
In some embodiments, the first transparency information may include a real-time transparency of individual pixels of the first background image, and the second transparency information may include a real-time transparency of individual pixels of the second background image.
Optionally, determining, according to the page switching progress corresponding to the page switching operation, the first transparency information corresponding to the first background image and the second transparency information corresponding to the second background image may specifically include:
and determining a first real-time transparency corresponding to the first background image and a second real-time transparency corresponding to the second background image according to the page switching progress.
Specifically, the electronic device may preset a correspondence between a page switching progress and a fading-in transparency and a correspondence between a page switching progress and a fading-out transparency, and the electronic device may use, according to the correspondence between the page switching progress and the fading-out transparency, the fading-out transparency corresponding to the page switching progress corresponding to the page switching operation as a first real-time transparency corresponding to the first background image, and use the fading-in transparency corresponding to the page switching progress corresponding to the page switching operation as a second real-time transparency corresponding to the second background image.
In these embodiments, each pixel of the first background image has the same initial transparency and each pixel of the second background image has the same initial transparency, so that the first real-time transparency corresponding to the first background image can be directly used as the first transparency information corresponding to the first background image, and the second real-time transparency corresponding to the second background image can be used as the second transparency information corresponding to the second background image.
In still other embodiments, the first transparency information may include a real-time composite transparency of individual pixels of the first background image and the second transparency information may include a real-time composite transparency of individual pixels of the second background image.
Optionally, determining, according to the page switching progress corresponding to the page switching operation, the first transparency information corresponding to the first background image and the second transparency information corresponding to the second background image may specifically include:
determining a first real-time transparency corresponding to the first background image and a second real-time transparency corresponding to the second background image according to the page switching progress;
synthesizing the initial transparency information of the first real-time transparency and the first background image to obtain first transparency information;
and synthesizing the second real-time transparency and the initial transparency information of the second background image to obtain second transparency information.
Specifically, the electronic device may preset a correspondence between a page switching progress and a fading-in transparency and a correspondence between a page switching progress and a fading-out transparency, and the electronic device may use, according to the correspondence between the page switching progress and the fading-out transparency, the fading-out transparency corresponding to the page switching progress corresponding to the page switching operation as a first real-time transparency corresponding to the first background image, and use the fading-in transparency corresponding to the page switching progress corresponding to the page switching operation as a second real-time transparency corresponding to the second background image.
In these embodiments, each pixel of the first background image has different initial transparency and each pixel of the second background image has different initial transparency, and therefore, it is necessary to synthesize the first real-time transparency and the initial transparency information of the first background image to obtain first transparency information corresponding to the first background image, and synthesize the second real-time transparency and the initial transparency information of the second background image to obtain second transparency information corresponding to the second background image.
Alternatively, the initial transparency information of the first background image may include an initial transparency of each pixel in the first background image, and the initial transparency information of the second background image may include an initial transparency of each pixel in the second background image.
Further, the electronic device may multiply the first real-time transparency by each of the initial transparencies in the initial transparency information of the first background image, synthesizing the first real-time transparency and the initial transparency information of the first background image to obtain the real-time synthesized transparency of each pixel in the first background image, and the real-time synthesis transparency of each pixel in the first background image is used as the first transparency information corresponding to the first background image, and the second real-time transparency is multiplied with each of the initial transparencies in the initial transparency information of the second background image, synthesizing the second real-time transparency and the initial transparency information of the second background image to obtain the real-time synthesized transparency of each pixel in the second background image, and the real-time synthesized transparency of each pixel in the second background image is used as second transparency information corresponding to the second background image.
S222, according to the first transparency information and the second transparency information, the first background image and the second background image are fused, and a real-time fusion image corresponding to the page switching progress is obtained.
In the embodiment of the disclosure, the electronic device may fuse the first background image and the second background image according to the first transparency information and the second transparency information by using a preset color synthesis algorithm to obtain a real-time fused image.
Specifically, the preset color synthesis algorithm may specifically be: and performing transparency change on the color value of each pixel of the first background image according to the first transparency information, performing transparency change on the color value of each pixel of the second background image according to the second transparency information, and fusing the color value of each pixel in the first background image with the color value of the corresponding pixel in the second background image with the changed transparency to obtain a real-time fusion image, thereby realizing the fading-out effect of the first background image (original background image) and the effect fusion of the fading-in effect of the second background image (new background image).
Optionally, the fusing the first background image and the second background image according to the first transparency information and the second transparency information to obtain a real-time fused image corresponding to the page switching progress may specifically include:
fusing the first transparency information and the first background image to obtain a fused first background image;
fusing the second transparency information with a second background image to obtain a fused second background image;
synthesizing the fused first background image and the fused second background image to obtain a synthesized image;
synthesizing the first transparency information and the second transparency information to obtain synthesized transparency information;
and carrying out transparency stripping aiming at the synthetic transparency information on the synthetic image to obtain a real-time fusion image.
First, the electronic device may fuse the first transparency information with color values of pixels of the first background image to change the transparency of the color values of the pixels of the first background image, to obtain a fused first background image, and fuse the second transparency information with color values of pixels of the second background image to change the transparency of the color values of the pixels of the second background image, to obtain a fused second background image. Then, the electronic device may synthesize the fused first background image and the fused second background image to fuse the color values and the transparency of the first background image and the second background image, so as to obtain a synthesized image having the color feature and the transparency feature of the first background image and the color feature and the transparency feature of the second background image. The electronic device may then synthesize the first transparency information and the second transparency information to obtain synthesized transparency information having both transparency characteristics of the first background image and transparency characteristics of the second background image, and the synthesized transparency information may include real-time synthesized transparency of individual pixels in the synthesized image. Finally, the electronic device may perform transparency stripping on the composite image for the composite transparency information to remove transparency features in the composite image and retain color features in the composite image, resulting in a real-time fused image.
In one example, first, the electronic device may acquire RGB value information of the first background image and RGB value information of the second background image. The RGB value information of the first background image may include R, G, and B values of respective pixels of the first background image, and the RGB value information of the second background image may include R, G, and B values of respective pixels of the second background image. Then, the electronic device may multiply the transparency of each pixel in the first transparency information by the R value, the G value, and the B value of the corresponding pixel in the first background image, respectively, to obtain the R value, the G value, and the B value of each pixel in the fused first background image, and multiply the transparency of each pixel in the second transparency information by the R value, the G value, and the B value of the corresponding pixel in the second background image, respectively, to obtain the R value, the G value, and the B value of each pixel in the fused second background image. Then, the electronic device may perform color synthesis on the R value, the G value, and the B value of each pixel in the fused first background image and the R value, the G value, and the B value of the corresponding pixel in the fused second background image, respectively, to obtain the R value, the G value, and the B value of each pixel in the synthesized image. Then, the electronic device may perform transparency synthesis on the transparency of each pixel in the first transparency information and the transparency of the corresponding pixel in the second transparency information to obtain the transparency of each pixel in the synthesized transparency information corresponding to the synthesized image. Finally, the electronic device may divide the R value, the G value, and the B value of each pixel in the synthesized image by the transparency of the corresponding pixel in the synthesized transparency information, respectively, to obtain the R value, the G value, and the B value of each pixel in the real-time fused image.
Therefore, the electronic equipment can generate a real-time fusion image by using the color synthesis algorithm in the process of realizing the fade-out effect, and the real-time fusion image can embody the real-time fade-in effect of the second background image and the real-time fade-out effect of the first background image.
And S223, displaying the real-time fusion image corresponding to the page switching progress in the first layer.
In the embodiment of the disclosure, the electronic device may display a real-time fusion image obtained by fusing the first background image and the second background image in real time according to the page switching progress in the first layer, so as to display a dynamic effect in the first layer through the real-time fusion image, and further reliably realize a fade-in effect of the second background image and a fade-out effect of the first background image through the existing first layer in the first display page. Meanwhile, the real-time fusion image can show a first background image with a reduced color and a second background image with a deepened color under the page switching progress. Therefore, the displayed first background image can be ensured to be lighter and lighter, the effect that the first background image disappears gradually is achieved, the displayed second background image is darker and darker, the effect that the second background image appears gradually is achieved, the progress of the first background image and the progress of the second background image are consistent with the page switching progress, and synchronization is achieved.
In another embodiment of the present disclosure, in order to further make the page switching process smooth and natural, the first page content in the first presentation page and the second page content in the second presentation page need to be switched smoothly and naturally.
In this embodiment of the disclosure, the first presentation page may further include a first intermediate layer, and the first intermediate layer may be configured to present the first page content when the first presentation page includes the first page content and present the second page content when the second presentation page includes the second page content. The first middle layer may be stacked with the first layer.
Optionally, when the page switching operation is detected, the page switching method may further include:
and moving the first middle layer according to the real-time moving direction indicated by the page switching operation.
In the embodiment of the disclosure, when the electronic device detects a page switching operation, the electronic device may switch from displaying the first display page to displaying the second display page, and in a process of switching from the first display page to the second display page, the electronic device may display a dynamic effect that the first background image is gradually switched to the second background image in the second display page and the first background image is gradually hidden in the switching process in the first layer, and may also move the first middle layer according to a real-time moving direction indicated by the page switching operation.
In one example, the first intermediate image layer may be used to present the first page content when the first presented page includes the first page content and the second presented page does not include the second page content. At this time, the effect of gradually moving out the content of the first page can be realized in the process of switching from the first display page to the second display page.
In another example, the first intermediate image layer may be used to present the second page content when the first presented page does not include the first page content and the second presented page includes the second page content. At this time, in the process of switching from the first display page to the second display page, the effect of gradually moving in the content of the second page can be achieved.
In yet another example, the first intermediate image layer may be used to present the first page content and the second page content when the first presented page includes the first page content and the second presented page includes the second page content. At this time, in the process of switching from the first display page to the second display page, the effect of switching from displaying the content of the first page to displaying the content of the second page can be achieved.
Further, moving the first middle layer according to the real-time moving direction indicated by the page switching operation may specifically include: the electronic equipment can obtain the real-time moving direction indicated by the page switching operation and the real-time operation parameters of the page switching operation, determine the page switching progress according to the real-time operation parameters, determine the real-time moving distance corresponding to the page switching progress according to the preset corresponding relation between the page switching progress and the moving distance, and then move the first middle layer to the real-time moving direction indicated by the page switching operation according to the real-time moving distance, so that the first middle layer is moved in real time synchronously with the page switching progress.
Taking the page switching operation including the sliding operation as an example, the electronic device may use the sliding direction as a real-time moving direction corresponding to the first middle layer, and obtain a real-time sliding distance of the sliding operation, and further determine a page switching progress corresponding to the real-time sliding distance, and determine a real-time moving distance corresponding to the page switching progress according to a preset correspondence between the page switching progress and the moving distance, and further move the first middle layer in the real-time moving direction indicated by the page switching operation according to the real-time moving distance.
Taking the page switching operation including the long press operation as an example, the electronic device may use a moving direction corresponding to a page area operated by the long press operation as a real-time moving direction corresponding to the first middle layer, obtain a real-time long press duration of the long press operation, further determine a page switching progress corresponding to the real-time long press duration, determine a real-time moving distance corresponding to the page switching progress according to a preset correspondence between the page switching progress and the moving distance, and further move the first middle layer in the real-time moving direction indicated by the page switching operation according to the real-time moving distance.
In some embodiments of the present disclosure, when the first presentation page includes the first page content, the first intermediate layer includes a third layer for displaying the first page content; when the second display page comprises second page content, the first middle layer comprises a fourth layer for displaying the second page content.
In one example, when the first presentation page includes first page content and the second presentation page does not include second page content, the first intermediate layer may include a third layer for displaying the first page content.
In another example, the first intermediate image layer may include a fourth image layer for displaying the second page content when the first presentation page does not include the first page content and the second presentation page includes the second page content.
In yet another example, when the first presentation page includes first page content and the second presentation page includes second page content, the first intermediate layer may include a third layer for displaying the first page content and a fourth layer for displaying the second page content.
In this case, the third layer may be stacked above the fourth layer, or may be stacked below the fourth layer, which is not limited herein.
In these embodiments, the third layer and the fourth layer may move synchronously in the real-time moving direction indicated by the page switching operation according to the real-time moving distance.
In some embodiments, the first middle layer may be located above the first layer, that is, the third layer and the fourth layer may be stacked above the first layer.
At this time, the method of moving the third layer and the fourth layer is the same.
Next, referring to fig. 3, taking the first middle layer including the third layer as an example, a fade-in/fade-out switching process is described.
Fig. 3 is a schematic diagram illustrating a cross fade process provided by an embodiment of the present disclosure. As shown in fig. 3, when the electronic device displays the fade-in and fade-out effect, the third layer 301 and the first layer 302 may be displayed at the same time. The third layer 301 is configured to display a first page content, and before showing the fade-in and fade-out effect, the first layer 302 is configured to display a first background image before page switching.
In the process of switching the fade-in and fade-out, a dynamic effect consistent with the page switching progress is displayed in the first image layer 302, and the dynamic effect includes a first background fade-out effect of gradually hiding the first background image and a second background fade-in effect of gradually showing the second background image in the second display page. Meanwhile, the third layer 301 also moves in accordance with the page switching progress. When the first background image is completely hidden and the second background image is completely displayed, the third layer 301 is also completely moved out of the display interface of the electronic device, so that fade-out of the first display page and fade-in switching of the second display page are completed, and smooth switching between the first display page and the second display page is further realized.
Therefore, the electronic equipment can move the first page content in the first display page and the second page content in the second display page according to the page switching progress under the condition that the first middle layer is positioned on the first layer, so that the page switching process is smoother and more natural.
In other embodiments, the first middle layer may be located below the first layer, that is, when the first middle layer includes the third layer, the third layer may be located below the first layer; and when the first middle layer comprises a fourth layer, the fourth layer is positioned below the first layer.
At this time, when the first middle layer includes the third layer, the first layer may include a first perspective region covering a non-layer boundary region of the third layer; when the first middle layer includes the fourth layer, the first layer may include a second perspective region covering a non-layer boundary region of the fourth layer.
The transparency of the first perspective region may be higher than the transparency of the non-perspective region in the first layer, the transparency of the second perspective region may be higher than the transparency of the non-perspective region in the first layer, and the transparency of the non-perspective region in the first layer may be 0, so as to avoid exposing layer boundaries of the third layer and the fourth layer.
Therefore, under the condition that the first middle layer is covered by the first layer, the first layer can be prevented from blocking the first page content and the second page content displayed in the first middle layer through the first perspective area and the second perspective area.
In these embodiments, each pixel of the first background image has different initial transparency, and the initial transparency of each pixel of the first background image may be a real-time transparency of a corresponding pixel of the first layer, respectively; each pixel of the second background image has different initial transparency, and the initial transparency of each pixel of the second background image may be the real-time transparency of the corresponding pixel of the first image layer.
Further, in these embodiments, the dynamic effect may also include moving the first perspective region and the second perspective region in synchronization with the first middle layer.
Specifically, synthesizing the first real-time transparency and the initial transparency information of the first background image, and obtaining the first transparency information may further include: first, the electronic device may determine a real-time moving direction indicated by the page switching operation and a real-time moving distance corresponding to the page switching progress, and then move the first perspective area in the first layer in the real-time moving direction indicated by the page switching operation according to the real-time moving distance of the first middle layer, so as to obtain the first layer after the first perspective area is moved. Then, the electronic device may use the real-time transparency of each pixel of the first layer after the first perspective region is moved as the initial transparency of the corresponding pixel of the first background image, to obtain the initial transparency information of the first background image, and then synthesize the first real-time transparency and the initial transparency information of the first background image, to obtain the first transparency information.
Further, synthesizing the second real-time transparency and the initial transparency information of the second background image, and obtaining the second transparency information may further include: first, the electronic device may determine a real-time moving direction indicated by the page switching operation and a real-time moving distance corresponding to the page switching progress, and then move the second perspective area in the first layer in the real-time moving direction indicated by the page switching operation according to the real-time moving distance of the first middle layer, so as to obtain the first layer after the second perspective area is moved. Then, the electronic device may use the real-time transparency of each pixel of the first layer after the second perspective region is moved as the initial transparency of the corresponding pixel of the second background image, to obtain the initial transparency information of the second background image, and then synthesize the second real-time transparency and the initial transparency information of the second background image, to obtain the second transparency information.
Therefore, the electronic equipment can display the first page content in the first display page and the second page content in the second display page and move according with the page switching progress under the condition that the first middle layer is positioned below the first layer, and the page switching process is smoother and more natural.
In this embodiment of the present disclosure, optionally, the first perspective area may have a first gradually-changed transparency, and the first gradually-changed transparency may be determined according to the layer boundary relative positions of the first layer and the third layer; the second perspective area may have a second gradient transparency, and the second gradient transparency may be determined according to the layer boundary relative positions of the first layer and the fourth layer.
For example, if the width of the third layer is consistent with the width of the first layer, and the top layer boundary of the third layer coincides with the top layer boundary of the first layer, the first gradient transparency of the first perspective region may be specifically a transparency that gradually increases from the top boundary to the bottom boundary of the first perspective region. For another example, if all layer boundaries of the third layer do not coincide with the layer boundaries of the first layer, the first gradual transparency of the first perspective region may be gradually increased from the center of the first perspective region to the boundaries of the first perspective region.
For example, if the width of the fourth layer is consistent with the width of the first layer, and the top layer boundary of the fourth layer coincides with the top layer boundary of the first layer, the second gradient transparency of the second perspective region may be specifically a transparency gradually increasing from the top boundary to the bottom boundary of the second perspective region. For another example, if all layer boundaries of the fourth layer do not coincide with the layer boundaries of the first layer, the second gradual transparency of the second perspective region may be gradually increased from the center of the second perspective region to the boundaries of the second perspective region.
At this time, the method of moving the third layer and the fourth layer is the same.
Next, referring to fig. 4, taking the first middle layer including the third layer as an example, a fade-in/fade-out switching process is described.
Fig. 4 shows a schematic diagram of another cross fade process provided by the embodiment of the present disclosure. As shown in fig. 4, when the electronic device displays the fade-in and fade-out effect, the first layer 401 and the third layer 402 may be displayed at the same time. The third layer 402 is configured to display a first page content, the first layer 401 may have a first perspective region, the first perspective region has a first gradually changing transparency gradually increasing from a top boundary to a bottom boundary of the first perspective region due to the third layer 402 coinciding with a top layer boundary of the first layer 401, and before the fade-in and fade-out effect is displayed, the first layer 401 is configured to display a first background image before page switching, and an initial transparency of each pixel of the first background image is consistent with an initial transparency of each pixel of the first layer 401.
In the fade-in and fade-out switching process, a dynamic effect consistent with the page switching progress is displayed in the first image layer 401, and the dynamic effect includes a first background fade-out effect of gradually hiding the first background image, a second background fade-in effect of gradually showing the second background image in the second displayed page, and a moving effect of the first perspective area consistent with the page switching progress. Meanwhile, the third layer 402 also moves in accordance with the page switching progress. When the first background image is completely hidden and the second background image is completely displayed, the first perspective area is completely moved out of the first layer 401, the third layer 402 is also completely moved out of the display interface of the electronic device, fade-out of the first display page and fade-in switching of the second display page are completed, and smooth switching between the first display page and the second display page is further achieved.
As can be seen from the above figure, since the transparency of the entire first layer 401 is not changed, the problem of the bottom exposure of the third layer 402 caused by the change in the transparency of the first layer 401 can be avoided.
Optionally, before the electronic device displays the first display page, the page switching method may further include determining a first perspective area according to the display parameter of the first layer and the display parameter of the third layer, and determining a first gradual change transparency according to the layer boundary relative positions of the first layer and the third layer.
Further, determining the first perspective area according to the display parameter of the first layer and the display parameter of the third layer may specifically include: first, the electronic device may obtain display parameters of a first layer and display parameters of a third layer, where the display parameters may include a display position and a display size, and the display position may be a position of any layer feature point, such as any vertex of the layer, a layer center point, and the like. Then, the electronic device may determine, according to the display parameter of the first layer and the display parameter of the third layer, an area parameter of a coverage area where the first layer covers the third layer, where the area parameter may include an area position and an area size, and the area position may be a position of any area feature point, such as any vertex of the area, an area center point, and the like. Finally, the electronic device may reduce the size of the coverage area according to a preset reduction ratio to obtain the area parameter of the first perspective area.
Further, determining the first gradient transparency according to the layer boundary relative positions of the first layer and the third layer may specifically include: first, the electronic device may determine whether a layer boundary overlapping the first layer exists in the third layer, and if so, determine a first gradient transparency corresponding to the overlapped image editing according to a preset correspondence between the layer boundary and the gradient transparency, and if not, may determine that the first gradient transparency gradually increases from the center of the first perspective area to the boundary of the first perspective area.
In the embodiment of the present disclosure, the method for determining the second perspective area is similar to the method for determining the first perspective area, and the method for determining the second gradient transparency is similar to the method for determining the first gradient transparency, which is not repeated herein.
In still other embodiments of the present disclosure, when the first presentation page includes the first page content, the first middle layer may include a first layer region for displaying the first page content; when the second presentation page includes the second page content, the first intermediate layer may include a second layer region for displaying the second page content.
In these embodiments, the first layer region and the second layer region may move synchronously with the first middle layer.
Next, referring to fig. 5, taking an example that the first middle layer includes a third layer and a fourth layer, and the third layer and the fourth layer belong to the same layer, a fade-in/fade-out switching process is described.
Fig. 5 is a schematic diagram illustrating a further cross fade process provided by an embodiment of the present disclosure. As shown in fig. 5, when the electronic device displays the fade-in/fade-out effect, the first image layer 501, the third image layer 502, and the fourth image layer 503 may be displayed at the same time. The third layer 502 is used for displaying a first page content, the fourth layer 503 is used for displaying a second page content, the third layer 502 and the fourth layer 503 belong to areas of different layers in the same layer, and the first layer 302 is used for displaying a first background image before page switching before a fade-in and fade-out effect is displayed.
In the process of switching the fade-in and fade-out, a dynamic effect consistent with the page switching progress is displayed in the first image layer 501, and the dynamic effect includes a first background fade-out effect of gradually hiding the first background image and a second background fade-in effect of gradually showing the second background image in the second display page. Meanwhile, the third image layer 502 and the fourth image layer 503 also perform relative movement consistent with the page switching progress in the same image layer. When the first background image is completely hidden and the second background image is completely displayed, the third layer 502 is also completely moved out of the display interface of the electronic device, and the fourth layer 503 is also completely moved into the display interface of the electronic device, so that fade-out of the first display page and fade-in switching of the second display page are completed, and smooth switching between the first display page and the second display page is further realized.
In this embodiment of the present disclosure, optionally, when the second display page includes the second page content, the second display page may further include a second middle layer, and the second middle layer may be used to display the second page content.
Specifically, when the dynamic effect display is completed, the electronic device may display a second display page, the second display interface may include a second layer and a second middle layer, the second layer may be used to display a second background image, and the second middle layer may be used to display second page content.
The second middle layer may be located above the second layer, or below the second layer, which is not limited herein.
Further, the display modes of the second middle layer and the second layer are similar to the display modes of the first middle layer and the first layer, and are not repeated herein.
To sum up, the page switching method provided by the embodiment of the present disclosure can implement, in any display scene, the fade-out effect of the original background and the fade-in effect of the new background only through one layer, so as to improve the applicability of the fade-in and fade-out effect.
The embodiment of the present disclosure further provides a page switching device, which is described below with reference to fig. 6. In the embodiment of the present disclosure, the page switching device may be an electronic device. The electronic device can be a mobile phone, a tablet computer, a desktop computer, a notebook computer, a vehicle-mounted terminal, a wearable device, an all-in-one machine, an intelligent household device and other devices with communication functions, and can also be a virtual machine or simulator simulation device.
Fig. 6 shows a schematic structural diagram of a page switching apparatus provided in an embodiment of the present disclosure.
As shown in fig. 6, the page switching apparatus 600 may include a first display unit 610, a second display unit 620, and a third display unit 630.
The first display unit 610 may be configured to display a first display page, where the first display page includes a first layer, and the first layer is used to display a first background image.
The second display unit 620 may be configured to display a dynamic effect in the first layer when the page switching operation is detected, where the dynamic effect includes gradually switching the first background image into a second background image in the second presentation page, and the first background image is gradually hidden during the switching.
The third display unit 630 may be configured to display a second display page when the dynamic effect display is completed, where the second display interface includes a second layer, and the second layer is used to display a second background image.
In the embodiment of the present disclosure, it is possible to display the first presentation page, during the detection of the page switching operation, displaying a dynamic effect in a first layer of a first presentation page for displaying a first background image, and when displaying the dynamic effect is completed, displaying a second presentation page, wherein the dynamic effect may include gradually switching the first background image to a second background image in a second presentation page displayed on a second layer of the second presentation page, and gradually hiding the first background image during the switching, therefore, when the first display page is switched to the second display page, no layer needs to be added, the existing first image layer in the first display page can be directly utilized to realize the fade-in effect of the second background image and the fade-out effect of the first background image, and the universality of the fade-in and fade-out effect is improved.
In some embodiments of the present disclosure, the second display unit 620 may include a transparency determination subunit, an image fusion subunit, and an image display subunit.
The transparency determination subunit may be configured to determine, according to a page switching progress corresponding to a page switching operation, first transparency information corresponding to the first background image and second transparency information corresponding to the second background image.
The image fusion subunit may be configured to fuse the first background image and the second background image according to the first transparency information and the second transparency information, so as to obtain a real-time fusion image corresponding to the page switching progress.
The image display subunit may be configured to display the real-time fusion image within the first layer.
In some embodiments of the present disclosure, the transparency determination subunit may be further configured to: determining a first real-time transparency corresponding to the first background image and a second real-time transparency corresponding to the second background image according to the page switching progress; synthesizing the initial transparency information of the first real-time transparency and the first background image to obtain first transparency information; and synthesizing the second real-time transparency and the initial transparency information of the second background image to obtain second transparency information.
In some embodiments of the present disclosure, the image fusion subunit may be further configured to: fusing the first transparency information and the first background image to obtain a fused first background image; fusing the second transparency information with a second background image to obtain a fused second background image; synthesizing the fused first background image and the fused second background image to obtain a synthesized image; synthesizing the first transparency information and the second transparency information to obtain synthesized transparency information; and carrying out transparency stripping aiming at the synthetic transparency information on the synthetic image to obtain a real-time fusion image.
In some embodiments of the present disclosure, the first presentation page may further include a first intermediate layer, and the first intermediate layer may be used to present the first page content when the first presentation page includes the first page content and to present the second page content when the second presentation page includes the second page content.
The page switching apparatus 600 may further include a fourth display unit, and the fourth display unit may be configured to, when the page switching operation is detected, move the first middle layer according to the real-time moving direction indicated by the page switching operation.
In some embodiments of the present disclosure, when the first presentation page includes the first page content, the first intermediate layer may include a third layer for displaying the first page content; when the second presentation page includes the second page content, the first intermediate layer may include a fourth layer for displaying the second page content.
In some embodiments of the present disclosure, when the first middle layer includes a third layer, the third layer may be located below the first layer, and the first layer may include a first perspective region covering a non-layer boundary region of the third layer; when the first middle layer includes a fourth layer, the fourth layer may be located below the first layer, and the first layer may include a second perspective region covering a non-layer boundary region of the fourth layer.
Accordingly, the dynamic effect may also include moving the first perspective region and the second perspective region in synchronization with the first middle layer.
In some embodiments of the present disclosure, the first perspective area may have a first gradient transparency, and the first gradient transparency may be determined according to the layer boundary relative positions of the first layer and the third layer; the second perspective area may have a second gradient transparency, and the second gradient transparency may be determined according to the layer boundary relative positions of the first layer and the fourth layer.
In some embodiments of the present disclosure, when the second presentation page includes the second page content, the second presentation page may further include a second intermediate layer, and the second intermediate layer may be used to display the second page content.
It should be noted that the page switching device 600 shown in fig. 6 may execute each step in the method embodiments shown in fig. 2 to fig. 5, and implement each process and effect in the method embodiments shown in fig. 2 to fig. 5, which is not described herein again.
Embodiments of the present disclosure also provide an electronic device that may include a processor and a memory, which may be used to store executable instructions. The processor may be configured to read the executable instructions from the memory and execute the executable instructions to implement the page switching method in the foregoing embodiments.
Fig. 7 shows a schematic structural diagram of an electronic device provided in an embodiment of the present disclosure. Referring now specifically to fig. 7, a schematic diagram of an electronic device 700 suitable for use in implementing embodiments of the present disclosure is shown.
The electronic device 700 in the disclosed embodiment may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet), a PMP (portable multimedia player), a vehicle terminal (e.g., a car navigation terminal), a wearable device, and the like, and a stationary terminal such as a digital TV, a desktop computer, a smart home device, and the like.
It should be noted that the electronic device 700 shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of the application of the embodiments of the present disclosure.
As shown in fig. 7, the electronic device 700 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 701 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)702 or a program loaded from a storage means 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data necessary for the operation of the electronic apparatus 700 are also stored. The processing device 701, the ROM 702, and the RAM 703 are connected to each other by a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
Generally, the following devices may be connected to the I/O interface 705: input devices 706 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; an output device 707 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 708 including, for example, magnetic tape, hard disk, etc.; and a communication device 709. The communication means 709 may allow the electronic device 700 to communicate wirelessly or by wire with other devices to exchange data. While fig. 7 illustrates an electronic device 700 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
The embodiment of the present disclosure also provides a computer-readable storage medium, where a computer program is stored, and when the computer program is executed by an electronic device, the electronic device is enabled to implement the page switching method in the foregoing embodiment.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs.
The embodiments of the present disclosure also provide a computer program product, which may include a computer program, and when the computer program is executed by a processor of an electronic device, the processor is enabled to implement the page switching method in the above embodiments.
For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such embodiments, the computer program may be downloaded and installed from a network via the communication means 709, or may be installed from the storage means 708, or may be installed from the ROM 702. The computer program performs the above-described functions defined in the page switching method of the embodiment of the present disclosure when executed by the processing apparatus 701.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
In some embodiments, the clients, servers may communicate using any currently known or future developed network protocol, such as HTTP, and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.
The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to perform:
displaying a first display page, wherein the first display page comprises a first layer, and the first layer is used for displaying a first background image; when the page switching operation is detected, displaying a dynamic effect in the first layer, wherein the dynamic effect comprises that the first background image is gradually switched into a second background image in a second display page, and the first background image is gradually hidden in the switching process; and when the dynamic effect display is finished, displaying a second display page, wherein the second display interface comprises a second layer, and the second layer is used for displaying a second background image.
In embodiments of the present disclosure, computer program code for carrying out operations of the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of an element does not in some cases constitute a limitation on the element itself.
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the disclosure herein is not limited to the particular combination of features described above, but also encompasses other embodiments in which any combination of the features described above or their equivalents does not depart from the spirit of the disclosure. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.
Further, while operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limitations on the scope of the disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.

Claims (12)

1. A page switching method is characterized by comprising the following steps:
displaying a first display page, wherein the first display page comprises a first layer, and the first layer is used for displaying a first background image;
when a page switching operation is detected, displaying a dynamic effect in the first layer, wherein the dynamic effect comprises gradually switching the first background image into a second background image in a second display page, and the first background image is gradually hidden in the switching process;
and when the dynamic effect display is finished, displaying the second display page, wherein the second display interface comprises a second layer, and the second layer is used for displaying the second background image.
2. The method according to claim 1, wherein the displaying the dynamic effect in the first layer comprises:
determining first transparency information corresponding to the first background image and second transparency information corresponding to the second background image according to the page switching progress corresponding to the page switching operation;
fusing the first background image and the second background image according to the first transparency information and the second transparency information to obtain a real-time fusion image corresponding to the page switching progress;
and displaying the real-time fusion image in the first image layer.
3. The method according to claim 2, wherein the determining, according to the page switching progress corresponding to the page switching operation, first transparency information corresponding to the first background image and second transparency information corresponding to the second background image includes:
determining a first real-time transparency corresponding to the first background image and a second real-time transparency corresponding to the second background image according to the page switching progress;
synthesizing the first real-time transparency and the initial transparency information of the first background image to obtain the first transparency information;
and synthesizing the second real-time transparency and the initial transparency information of the second background image to obtain the second transparency information.
4. The method according to claim 2, wherein the fusing the first background image and the second background image according to the first transparency information and the second transparency information to obtain a real-time fused image corresponding to the page switching progress comprises:
fusing the first transparency information and the first background image to obtain a fused first background image;
fusing the second transparency information with the second background image to obtain a fused second background image;
synthesizing the fused first background image and the fused second background image to obtain a synthesized image;
synthesizing the first transparency information and the second transparency information to obtain synthesized transparency information;
and carrying out transparency stripping on the synthesized image according to the synthesized transparency information to obtain the real-time fusion image.
5. The method of claim 1, wherein the first presentation page further comprises a first intermediate layer for presenting the first page content when the first presentation page comprises first page content and presenting the second page content when the second presentation page comprises second page content;
wherein, when detecting a page switching operation, the method further comprises:
and moving the first middle layer according to the real-time moving direction indicated by the page switching operation.
6. The method of claim 5, wherein when the first presentation page includes the first page content, the first middle layer includes a third layer for displaying the first page content; when the second display page comprises the second page content, the first middle layer comprises a fourth layer for displaying the second page content.
7. The method of claim 6, wherein when the first middle layer includes the third layer, the third layer is located below the first layer, and the first layer includes a first see-through region covering a non-layer border region of the third layer; when the first middle layer comprises the fourth layer, the fourth layer is located below the first layer, and the first layer comprises a second perspective area covering a non-layer boundary area of the fourth layer;
wherein the dynamic effect further comprises moving the first perspective region and the second perspective region in synchronization with the first middle layer.
8. The method according to claim 7, wherein the first perspective area has a first gradient transparency, and the first gradient transparency is determined according to the layer boundary relative positions of the first layer and the third layer; the second perspective area has a second gradient transparency, and the second gradient transparency is determined according to the layer boundary relative positions of the first layer and the fourth layer.
9. The method of claim 5, wherein when the second presentation page includes the second page content, the second presentation page further includes a second intermediate layer, and the second intermediate layer is used for displaying the second page content.
10. A page switching apparatus, comprising:
the display device comprises a first display unit, a second display unit and a display unit, wherein the first display unit is configured to display a first display page, the first display page comprises a first layer, and the first layer is used for displaying a first background image;
the second display unit is configured to display a dynamic effect in the first layer when a page switching operation is detected, wherein the dynamic effect comprises that the first background image is gradually switched to a second background image in a second display page, and the first background image is gradually hidden in the switching process;
and the third display unit is configured to display the second display page when the dynamic effect display is completed, wherein the second display interface includes a second layer, and the second layer is used for displaying the second background image.
11. An electronic device, comprising:
a processor;
a memory for storing executable instructions;
wherein the processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the page switching method of any one of claims 1 to 9.
12. A computer-readable storage medium, characterized in that the storage medium stores a computer program which, when executed by an electronic device, causes the electronic device to implement the page switching method of any one of the preceding claims 1 to 9.
CN202110286538.3A 2021-03-17 2021-03-17 Page switching method, device, equipment and medium Active CN113010249B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110286538.3A CN113010249B (en) 2021-03-17 2021-03-17 Page switching method, device, equipment and medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110286538.3A CN113010249B (en) 2021-03-17 2021-03-17 Page switching method, device, equipment and medium

Publications (2)

Publication Number Publication Date
CN113010249A true CN113010249A (en) 2021-06-22
CN113010249B CN113010249B (en) 2023-12-19

Family

ID=76409294

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110286538.3A Active CN113010249B (en) 2021-03-17 2021-03-17 Page switching method, device, equipment and medium

Country Status (1)

Country Link
CN (1) CN113010249B (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114245028A (en) * 2021-12-14 2022-03-25 北京字跳网络技术有限公司 Image display method and device, electronic equipment and storage medium
CN115827144A (en) * 2023-02-20 2023-03-21 北京集度科技有限公司 Page display method, system, electronic equipment and computer program product

Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103106039A (en) * 2013-02-19 2013-05-15 广东欧珀移动通信有限公司 Method and device of switching pages of mobile terminals
CN103390053A (en) * 2013-07-26 2013-11-13 贝壳网际(北京)安全技术有限公司 Page switching control method and device of browser and client
US20130321444A1 (en) * 2012-05-31 2013-12-05 Tzahi Efrati Method and apparatus for transitioning between pages on a display screen
US20140033116A1 (en) * 2012-07-25 2014-01-30 Daniel Jakobs Dynamic layering user interface
US20140380375A1 (en) * 2013-06-19 2014-12-25 Tencent Technology (Shenzhen) Company Limited Page turning method, page turning apparatus and terminal as well as computer readable medium
CN104991695A (en) * 2015-06-15 2015-10-21 联想(北京)有限公司 Information processing method and electronic equipment
CN105404489A (en) * 2015-11-30 2016-03-16 天脉聚源(北京)科技有限公司 Display image switching method and apparatus
CN106055191A (en) * 2016-04-19 2016-10-26 乐视控股(北京)有限公司 Terminal equipment and interface display method for same
US20160357375A1 (en) * 2015-06-05 2016-12-08 Apple Inc. Movement between multiple views
CN107295390A (en) * 2017-08-10 2017-10-24 青岛海信电器股份有限公司 Television pages switching method and device
DE102017112040A1 (en) * 2016-12-16 2018-06-21 Logitech Europe S.A. MODIFYING AN EMERGENCY FUNCTION ON A DISPLAY BASED ON THE CONTENT
CN109947506A (en) * 2017-12-20 2019-06-28 阿里巴巴集团控股有限公司 Interface switching method, device and electronic equipment
CN109947521A (en) * 2019-03-28 2019-06-28 北京小米移动软件有限公司 Interface switching method, device and storage medium
CN110018763A (en) * 2019-03-19 2019-07-16 阿里巴巴集团控股有限公司 The method and apparatus of page presentation
CN111291293A (en) * 2020-01-15 2020-06-16 Oppo广东移动通信有限公司 Page transition method and related equipment
CN111787385A (en) * 2020-05-28 2020-10-16 深圳市酷开网络科技有限公司 Interface interaction method and device, computer equipment and storage medium

Patent Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130321444A1 (en) * 2012-05-31 2013-12-05 Tzahi Efrati Method and apparatus for transitioning between pages on a display screen
US20140033116A1 (en) * 2012-07-25 2014-01-30 Daniel Jakobs Dynamic layering user interface
CN103106039A (en) * 2013-02-19 2013-05-15 广东欧珀移动通信有限公司 Method and device of switching pages of mobile terminals
US20140380375A1 (en) * 2013-06-19 2014-12-25 Tencent Technology (Shenzhen) Company Limited Page turning method, page turning apparatus and terminal as well as computer readable medium
CN103390053A (en) * 2013-07-26 2013-11-13 贝壳网际(北京)安全技术有限公司 Page switching control method and device of browser and client
US20160357375A1 (en) * 2015-06-05 2016-12-08 Apple Inc. Movement between multiple views
CN104991695A (en) * 2015-06-15 2015-10-21 联想(北京)有限公司 Information processing method and electronic equipment
CN105404489A (en) * 2015-11-30 2016-03-16 天脉聚源(北京)科技有限公司 Display image switching method and apparatus
CN106055191A (en) * 2016-04-19 2016-10-26 乐视控股(北京)有限公司 Terminal equipment and interface display method for same
DE102017112040A1 (en) * 2016-12-16 2018-06-21 Logitech Europe S.A. MODIFYING AN EMERGENCY FUNCTION ON A DISPLAY BASED ON THE CONTENT
CN107295390A (en) * 2017-08-10 2017-10-24 青岛海信电器股份有限公司 Television pages switching method and device
CN109947506A (en) * 2017-12-20 2019-06-28 阿里巴巴集团控股有限公司 Interface switching method, device and electronic equipment
CN110018763A (en) * 2019-03-19 2019-07-16 阿里巴巴集团控股有限公司 The method and apparatus of page presentation
CN109947521A (en) * 2019-03-28 2019-06-28 北京小米移动软件有限公司 Interface switching method, device and storage medium
CN111291293A (en) * 2020-01-15 2020-06-16 Oppo广东移动通信有限公司 Page transition method and related equipment
CN111787385A (en) * 2020-05-28 2020-10-16 深圳市酷开网络科技有限公司 Interface interaction method and device, computer equipment and storage medium

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
GRANET123: "Transitions On Different Layers", Retrieved from the Internet <URL:https://forum.cyberlink.com/forum/posts/list/41839.page> *
LAURA SCOTT: "Fade out animation on layer", Retrieved from the Internet <URL:https://community.articulate.com/discussions/articulate-storyline/fade-out-animation-on-layer> *
周小舟: "基于用户认知的大数据可视化视觉呈现方法研究", 中国博士学位论文全文数据库 (基础科学辑), no. 12, pages 008 - 5 *
王志良, 张波: "利用VB实现图像的淡入与淡出", 信息技术, no. 04, pages 2 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114245028A (en) * 2021-12-14 2022-03-25 北京字跳网络技术有限公司 Image display method and device, electronic equipment and storage medium
WO2023109842A1 (en) * 2021-12-14 2023-06-22 北京字跳网络技术有限公司 Image presentation method and apparatus, and electronic device and storage medium
CN114245028B (en) * 2021-12-14 2024-02-06 北京字跳网络技术有限公司 Image display method and device, electronic equipment and storage medium
CN115827144A (en) * 2023-02-20 2023-03-21 北京集度科技有限公司 Page display method, system, electronic equipment and computer program product

Also Published As

Publication number Publication date
CN113010249B (en) 2023-12-19

Similar Documents

Publication Publication Date Title
CN110111279B (en) Image processing method and device and terminal equipment
CN112261226B (en) Horizontal screen interaction method and device, electronic equipment and storage medium
CN109275028B (en) Video acquisition method, device, terminal and medium
CN111510645B (en) Video processing method and device, computer readable medium and electronic equipment
CN112486611B (en) Page switching display method and device, storage medium and electronic equipment
CN110620949A (en) Control method, device, medium and electronic equipment for hot spot recommendation popup window
CN112380379A (en) Lyric special effect display method and device, electronic equipment and computer readable medium
CN113010249A (en) Page switching method, device, equipment and medium
CN111258519B (en) Screen split implementation method, device, terminal and medium
US20220283697A1 (en) Video editing and playing method, apparatus, device and medium
CN110898429A (en) Game scenario display method and device, electronic equipment and storage medium
CN110784674B (en) Video processing method, device, terminal and storage medium
CN112423084A (en) Display method and device of hotspot list, electronic equipment and storage medium
CN113342248A (en) Live broadcast display method and device, storage medium and electronic equipment
CN112053449A (en) Augmented reality-based display method, device and storage medium
CN110740261A (en) Video recording method, device, terminal and storage medium
CN113225606A (en) Video barrage processing method and device
CN114610428B (en) Information stream display method, device, apparatus, storage medium, and program
CN114679628B (en) Bullet screen adding method and device, electronic equipment and storage medium
CN112995401A (en) Control display method, device, equipment and medium
CN113365010A (en) Volume adjusting method, device, equipment and storage medium
CN114428660B (en) Page processing method, device, equipment and storage medium
CN115022696A (en) Video preview method and device, readable medium and electronic equipment
CN115880168A (en) Image restoration method, device, equipment, computer readable storage medium and product
CN114860139A (en) Video playing method, video playing device, electronic equipment, storage medium and program product

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