Page turning method, electronic device and storage medium
By setting the next web page container component when the user turns pages and using dynamic view drawing components to render the mask area and transparent area, the problem of the inability to achieve simulated page turn effect in the prior art is solved, and the effect of covering page turn is achieved, providing a more realistic page turn experience.
Patent Information
- Application Number
- CN202111436591.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-11-29
- Publication Date
- 2025-04-22
- Estimated Expiration
- 2041-11-29
AI Technical Summary
The prior art cannot realize simulated page turning effects, such as overlay page turning effects, and can only achieve simple page switching.
By responding to the user's page turn action, the next web page container component is set at the lower layer of the current web page container component, and the dynamic view drawing component is called to render the foil area and transparent area to achieve the effect of gradually shading the current web page and gradually displaying the next web page.
The overview page turn effect is achieved during the user's page turn process. Through the dynamic view drawing component, the current web page is gradually covered and the next web page is displayed, providing a more realistic page turn experience.
Smart Images

Figure CN114047997B_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of the Internet, and in particular to a page turning method, an electronic device and a storage medium. Background Art
[0002] For the convenience of reading, there are currently many ways to read e-books, such as APP (Application) and web pages. Among them, the client engine can be used on the APP to render the electronic reading page to achieve a better display effect; loading the H5 (Hyper Text Markup Language 5, 5th edition Hypertext Markup Language) page as a reading page in the web page can also realize the reading of e-books.
[0003] However, when a user turns the H5 reading page, he or she can generally turn the page left or right. This page turning method can only achieve a simple page switching effect, and cannot achieve a simulated page turning effect, such as an overlay page turning effect. Summary of the invention
[0004] In order to solve the above technical problem or at least partially solve the above technical problem, an embodiment of the present disclosure provides a page turning method, an electronic device and a storage medium.
[0005] In a first aspect, an embodiment of the present disclosure provides a page turning method. The page turning method includes: in response to a page turning action on a current web page container component, setting a next web page container component located at a lower layer of the current web page container component; calling a dynamic view drawing component to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action on the current web page container component meets a preset page turning condition, hiding the dynamic view drawing component and the current web page container component so that the next web page container component is fully displayed.
[0006] In a second aspect, an embodiment of the present disclosure provides an electronic device. The electronic device is, for example, a server. The electronic device includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; the memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform the following steps: in response to a page turning action for a current web page container component, a next web page container component located at a lower layer of the current web page container component is set; a dynamic view drawing component is called to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action for the current web page container component meets a preset page turning condition, the dynamic view drawing component and the current web page container component are hidden, so that the next web page container component is fully displayed.
[0007] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the setting of the next web page container component located at the lower layer of the current web page container component includes: when the page turning direction in the page turning action is a preset direction, setting a web page container component including a subsequent web page of the current web page at the lower layer of the current web page container component; when the page turning direction in the page turning action is the opposite direction of the preset direction, setting a web page container component including a previous web page of the current web page at the lower layer of the current web page container component.
[0008] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the setting of the next web page container component located at the lower layer of the current web page container component includes: when the page turning direction in the page turning action is a preset direction, setting a web page container component including a subsequent web page of the current web page at the lower layer of the current web page container component; when the page turning direction in the page turning action is the opposite direction of the preset direction, setting a web page container component including a previous web page of the current web page at the lower layer of the current web page container component.
[0009] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the calling of the dynamic view drawing component to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component includes: monitoring the page turning contact points corresponding to the page turning action of the current web page container component; calling the dynamic view drawing component according to the page turning trajectory of the page turning contact points, dynamically increasing the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, or dynamically reducing the masking area for covering the current web page container component and the transparent area for displaying the next web page container component.
[0010] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the method further includes: detecting whether the movement amplitude of the page turning trajectory is greater than a preset amplitude threshold; when the movement amplitude is greater than the preset amplitude threshold, determining that the page turning action of the current web page container component meets the preset page turning condition.
[0011] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the page turning trajectory of the page turning trigger point is used to call a dynamic view drawing component to dynamically increase the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, or dynamically reduce the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, including: detecting a page turning angle between the page turning trajectory and a preset direction; when the angle is greater than a preset angle threshold, tilting the dynamic view drawing component according to the page turning angle; calling the tilted dynamic view drawing component according to the page turning trajectory of the page turning trigger point to dynamically increase the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, or dynamically reduce the masking area for covering the current web page container component and the transparent area for displaying the next web page container component.
[0012] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the dynamic view drawing component and the current web page container component have a position binding relationship, wherein the tilting setting of the dynamic view drawing component according to the page turning angle includes: tilting the current web page container component according to the page turning angle, so that the dynamic view drawing component is tilted in association with the page turning angle.
[0013] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the current web page container component includes a dynamic view drawing component, and the method further includes: after the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component, so that when a page turning request is received again, the fully displayed next web page is used as the current web page, and the step of calling the dynamic view drawing component is executed.
[0014] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the response to the page turning action for the current web page container component includes: obtaining an e-book content web page; formatting the e-book content web page into multiple web page content pages; displaying the web page content page based on the current web page container component to receive and respond to the page turning action for the current web page container component.
[0015] According to an embodiment of the present disclosure, in the page turning method provided in the first aspect or in the electronic device provided in the second aspect, the e-book content web page includes e-book chapter content.
[0016] In a third aspect, an embodiment of the present disclosure provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the page turning method described above is implemented.
[0017] One or more technical solutions in the above embodiments have at least some or all of the following advantages:
[0018] In response to a page turning action on a current web page container component, a next web page container component located at a lower layer of the current web page container component is set; a dynamic view drawing component is called to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action on the current web page container component meets a preset page turning condition, the dynamic view drawing component and the current web page container component are hidden, so that the next web page container component is fully displayed, and in the process of user turning pages, the current web page can be gradually covered and the next web page can be gradually displayed through the dynamic view drawing component, thereby achieving an effect of covering page turning. BRIEF DESCRIPTION OF THE DRAWINGS
[0019] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.
[0020] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or related technical descriptions are briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0021] Figure 1 The flowchart of the page turning method according to the embodiment of the present disclosure is schematically shown;
[0022] Figure 2 The detailed implementation flow chart of step S110 according to the embodiment of the present disclosure is schematically shown;
[0023] Figure 3 The detailed implementation flow chart of step S120 according to the embodiment of the present disclosure is schematically shown;
[0024] Figure 4 The detailed implementation flow chart of step S320 according to the embodiment of the present disclosure is schematically shown;
[0025] Figure 5 A flow chart schematically shows a page turning method according to another embodiment of the present disclosure; and
[0026] Figure 6The structural block diagram of the electronic device provided by the embodiment of the present disclosure is schematically shown. DETAILED DESCRIPTION
[0027] The embodiments of the present disclosure provide a page turning method, an electronic device and a storage medium. The page turning method includes: in response to a page turning action on a current web page container component, setting a next web page container component located at a lower layer of the current web page container component; calling a dynamic view drawing component to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action on the current web page container component meets a preset page turning condition, hiding the dynamic view drawing component and the current web page container component so that the next web page container component is fully displayed.
[0028] The page turning method provided by the embodiments of the present disclosure can be applied to page turning in various scenarios. For example, the displayed content of a web page may include, but is not limited to: book content, news content, advertising content, etc. An exemplary application scenario may be: during the display of the displayed content of the current web page, such as book content, news content, advertising content, etc., the browser, social platform applet or quick application of the terminal device responds to the page turning action for the current web page container component, sets the next web page container component located at the lower layer of the current web page container component; calls the dynamic view drawing component to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action for the current web page container component meets the preset page turning condition, hides the dynamic view drawing component and the current web page container component so that the next web page container component is fully displayed.
[0029] In response to a page turning action on a current web page container component, a next web page container component located at a lower layer of the current web page container component is set; a dynamic view drawing component is called to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action on the current web page container component meets a preset page turning condition, the dynamic view drawing component and the current web page container component are hidden, so that the next web page container component is fully displayed, and in the process of user turning pages, the current web page can be gradually covered and the next web page can be gradually displayed through the dynamic view drawing component, thereby achieving an effect of covering page turning.
[0030] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present disclosure.
[0031] The embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.
[0032] A first exemplary embodiment of the present disclosure provides a page turning method.
[0033] Figure 1 The flowchart of the page turning method according to an embodiment of the present disclosure is schematically shown.
[0034] Reference Figure 1 As shown, the page turning method provided by the embodiment of the present disclosure includes the following steps: S110, S120 and S130. The above steps S110 to S130 can be executed by a browser of a terminal device, a small program of a social platform or a quick application.
[0035] In step S110, in response to a page turning action on the current web page container component, a next web page container component located at a lower layer of the current web page container component is set.
[0036] In the above step S110, the page turning action can be the user's finger sliding in different directions on the touch display screen, for example, sliding to the left, sliding to the right, sliding up, sliding down, sliding to the upper left, sliding to the lower right, sliding to the lower left, sliding to the upper right, etc.
[0037] In one embodiment, the response to the page turning action for the current web page container component includes: obtaining an e-book content web page; formatting the e-book content web page into multiple web page content pages; displaying the web page content page based on the current web page container component to receive and respond to the page turning action for the current web page container component, wherein the e-book content web page contains e-book chapter content.
[0038] In step S120 , the dynamic view drawing component is called to render a masking area for masking the current webpage container component and a transparent area for displaying the next webpage container component.
[0039] In the above step S120, the rendered masked area and transparent area may be set in an upper layer of the current web page container component.
[0040] In one embodiment, the masked area can be a curling effect image or a solid color area. The solid color area is obtained by drawing a view on the canvas that overlaps with the canvas background to achieve a solid color effect, so that the current page below the canvas is masked. The transparent area is obtained by drawing an image on the canvas that overlaps with the canvas background and the current web page to achieve a transparent effect, so that the next web page below the current web page can be displayed.
[0041] In step S130, when it is detected that the page turning action of the current web page container component meets the preset page turning condition, the dynamic view drawing component and the current web page container component are hidden, so that the next web page container component is fully displayed.
[0042] In the above step S130, the next web page is fully displayed in such a way that the entire display interface only displays the next web page, and the masked area and the current web page are invisible.
[0043] In the above step S130, whether the page turning action of the current web page container component meets the preset page turning condition is determined by the following steps: detecting whether the moving amplitude of the page turning trajectory is greater than the preset amplitude threshold; when the moving amplitude is greater than the preset amplitude threshold, determining that the page turning action of the current web page container component meets the preset page turning condition, wherein the moving amplitude of the page turning trajectory can be the sliding distance of the user's finger on the touch display screen, and the preset amplitude threshold can be 1 / 3 or 1 / 2 of the width of the touch display screen.
[0044] In one embodiment, when it is monitored that the page turning action of the current web page container component meets the preset page turning conditions, no matter what the display status on the current display interface is, that is, no matter whether the current display interface displays the unmasked current web page, the masked area and the displayed next web page at the same time, or only displays the masked area and the displayed next web page, the entire display interface is controlled to display only the next page, that is: when it is monitored that the page turning action of the current web page container component meets the preset page turning conditions, the current display interface displays the unmasked current web page, the masked area and the displayed next web page at the same time, then only the next page is displayed by hiding the view and the current web page; when the user stops operating on the touch display screen, only the masked area and the displayed next web page are displayed on the current display interface, then only the next page is displayed by hiding the view.
[0045] Based on the above steps S110 to 130, in response to a page turning action on the current web page container component, a next web page container component located at the lower layer of the current web page container component is set; a dynamic view drawing component is called to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action on the current web page container component meets the preset page turning condition, the dynamic view drawing component and the current web page container component are hidden, so that the next web page container component is fully displayed, and in the process of user turning pages, the dynamic view drawing component can be used to gradually cover the current web page and gradually display the next web page, thereby achieving the effect of covering page turning.
[0046] Figure 2 The detailed implementation flow chart of step S110 according to the embodiment of the present disclosure is schematically shown.
[0047] See also Figure 2 In step S110, the step of setting the next web page container component located at the lower layer of the current web page container component includes:
[0048] S210, when the page turning direction in the page turning action is a preset direction, setting a web page container component including subsequent web pages of the current web page at a lower layer of the current web page container component;
[0049] S220: When the page turning direction in the page turning action is opposite to the preset direction, a web page container component including a previous web page of the current web page is set at a lower layer of the current web page container component.
[0050] In one embodiment, when the preset direction is left, when the page turning direction is left, the next web page is the subsequent web page of the current web page, and when the page turning direction is right, the next web page is the previous web page of the current web page; when the page turning direction is to the upper left, the next web page is the subsequent web page of the current web page, and when the page turning direction is to the lower right, the next web page is the previous web page of the current web page.
[0051] Figure 3 The detailed implementation flow chart of step S120 according to the embodiment of the present disclosure is schematically shown.
[0052] See also Figure 3 In step S120, the calling of the dynamic view drawing component to render a masking area for masking the current web page container component and a transparent area for displaying the next web page container component includes:
[0053] S310, monitoring a page turning contact point corresponding to a page turning action of the current web page container component;
[0054] S320, according to the page turning track of the page turning contact point, call the dynamic view drawing component to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
[0055] In the above step S320, the view including the masked area and the transparent area may be a canvas view.
[0056] In one embodiment, when the page turning track is a sliding track from right to left, the dynamic view drawing component is called to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component; when the page turning track is a sliding track from left to right, the dynamic view drawing component is called to dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
[0057] In one embodiment, when a user slides from right to left on a touch display screen used to display a current page, an unobstructed current web page, a masked area, and a displayed next web page are presented in sequence from left to right on the touch display screen, and as the sliding from right to left continues, the area occupied by the unobstructed current web page becomes smaller and smaller, the masked area moves to the left and occupies an increasingly larger area, and the area occupied by the displayed next web page becomes increasingly larger, until the area occupied by the unobstructed current web page is 0, and the masked area and the next web page each occupy half of the entire display interface.
[0058] In another embodiment, the view including the masked area and the transparent area also includes shadow areas on both sides of the masked area, that is, the view may include a masked area for masking the current web page, a first transparent area for displaying the current web page and a second transparent area for displaying the next web page, a first shadow area as a boundary between the current web page and the masked area, and a second shadow area as a boundary between the masked area and the next web page. As the page turning action continues, the view is dynamically drawn on the upper layer of the current web page, so that the view masks at least a portion of the current web page and displays a portion of the next web page until the current web page is completely masked, that is, as the page turning amplitude increases, the area of the masked area increases from small to large, and the first shadow area increases from small to large. The area of a transparent area changes from large to small, the area of a second transparent area changes from small to large, the area of a first shadow area changes from large to small, and the area of a second shadow area changes from small to large, so that the display area of a current web page changes from large to small, and the display area of a next web page changes from small to large, until the display area of the current web page is 0, wherein, when the page turning action starts and the page turning amplitude is 0, the areas of the first shadow area and the first transparent area are the largest, and the areas of the second shadow area, the second transparent area and the masked area are all 0; when the page turning amplitude is the largest, the areas of the first shadow area and the first transparent area are all 0, and the areas of the second shadow area, the second transparent area and the masked area are all the largest, wherein the shadow areas are all designed based on the principle of light projection.
[0059] Based on the above embodiment, by proportionally scaling all different areas in the view, a display interface including the current page, the first shadow area, the masked area, the second shadow area and the next page is presented, and as the page turning amplitude increases, on the display interface, the display areas respectively occupied by the current page, the first shadow area, the masked area, the second shadow area and the next page are in a changing state, which can achieve the effect of covering the page turning.
[0060] Figure 4 The detailed implementation flow chart of step S320 according to the embodiment of the present disclosure is schematically shown.
[0061] See also Figure 4 In step S320, the dynamic view drawing component is called according to the page turning track of the page turning trigger point to dynamically increase the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, or dynamically reduce the masking area for covering the current web page container component and the transparent area for displaying the next web page container component, including:
[0062] S410, detecting a page turning angle between the page turning trajectory and a preset direction;
[0063] S420, determining whether the angle is greater than a preset angle threshold:
[0064] If yes, execute step S430;
[0065] If not, execute step S440;
[0066] S430, tilting a dynamic view drawing component according to the page turning angle to provide the dynamic view drawing component tilted;
[0067] S440, the dynamic view drawing component remains unchanged, so as to provide the dynamic view drawing component that remains unchanged;
[0068] S450, according to the page turning track of the page turning trigger point, call the provided dynamic view drawing component to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
[0069] In step S410, the preset direction may be a horizontal direction.
[0070] In step S420, the preset angle threshold may be 30°.
[0071] In step S430, the dynamic view drawing component and the current web page container component are in a position binding relationship, and the dynamic view drawing component is tilted according to the page turning angle, including: tilting the current web page container component according to the page turning angle, so that the dynamic view drawing component is tilted in association with the page turning angle.
[0072] In one embodiment, when the preset direction is horizontal, such as left or right, the display direction of the current web page and the view is vertical; when the preset direction is at a certain angle to the horizontal, such as upper left or lower right, the display direction of the current web page and the view is at the angle to the vertical.
[0073] Figure 5 The flowchart of a page turning method according to another embodiment of the present disclosure is schematically shown.
[0074] See also Figure 5 In addition to steps S110 to S130, the method further includes:
[0075] S510, after the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component, so that when a page turning request is received again, the fully displayed next web page is used as the current web page, and the step of calling the dynamic view drawing component is executed.
[0076] In the above step S510, in the container component including the dynamic view drawing component, the view including the masked area and the transparent area is set in the upper layer of the current web page container component.
[0077] In one embodiment, when the displayed content of a web page is a multi-page content, the page turning process for all the content in the multi-page content only needs to include a container component including a dynamic view drawing component and used to display the current web page and a container component for displaying the next web page. During the page turning process, while each current web page is displayed using the container component including a dynamic view drawing component and used to display the current web page, the next web page is loaded into the lower layer of the current web page and displayed using the container component for displaying the next web page, and the drawn view is set on the upper layer of the current web page using the container component including a dynamic view drawing component and used to display the current web page. At the end of each page turning, the next web page is fully displayed by the container component including a dynamic view drawing component and used to display the current web page. At this time, the container component including a dynamic view drawing component and used to display the current web page is used to display the next web page content, so that the next web page is used as the current web page, and the drawn view is set on its upper layer. At the same time, the container component for displaying the next web page continues to load a new web page as the next web page and displays it on its lower layer, preparing for a new page turning process.
[0078] Based on the above step S510, each time the page is turned, the current page is displayed using a container component that includes a dynamic view drawing component and is used to display the current web page, the next web page is loaded into the lower layer of the current web page and displayed using a container component that is used to display the next web page, and the drawn view is set on the upper layer of the current web page using a container component that includes a dynamic view drawing component and is used to display the current web page, in preparation for a new page turning process. The page turning process of all pages can be completed simply and quickly through the coordinated use of the two components.
[0079] The above-mentioned various technical solutions provided by the embodiments of the present disclosure can be implemented in hardware in all or part of the steps, or implemented in software modules running on one or more processors, or implemented in a combination thereof. It should be understood by those skilled in the art that a microprocessor or a digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components in the electronic device according to the embodiments of the present disclosure. The embodiments of the present disclosure can also be implemented as a device or apparatus program (e.g., a computer program and a computer program product) for executing part or all of the methods described herein. The program implementing the embodiments of the present disclosure can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.
[0080] A second exemplary embodiment of the present disclosure provides an electronic device.
[0081] Figure 6 The structural block diagram of the electronic device provided by the embodiment of the present disclosure is schematically shown.
[0082] Reference Figure 6 As shown, the electronic device 1100 provided by the embodiment of the present disclosure includes a processor 1101, a communication interface 1102, a memory 1103 and a communication bus 1104, wherein the processor 1101, the communication interface 1102 and the memory 1103 communicate with each other through the communication bus 1104; the memory 1103 is used to store at least one executable instruction; the processor 1101 is used to implement the page turning method as described above when executing the executable instruction stored in the memory.
[0083] Specifically, when implementing the above-mentioned page turning method, the above-mentioned executable instructions enable the above-mentioned processor to perform the following steps: in response to the page turning action for the current web page container component, set the next web page container component located at the lower layer of the current web page container component; call the dynamic view drawing component to render a masking area for covering the current web page container component and a transparent area for displaying the next web page container component; when it is detected that the page turning action for the current web page container component meets the preset page turning condition, hide the dynamic view drawing component and the current web page container component so that the next web page container component is fully displayed. The detailed implementation process of each of the above-mentioned steps and the steps further included in the above-mentioned page turning method can refer to the description of the first embodiment, which will not be repeated here.
[0084] The above-mentioned application software can be one or more of the following software: e-book reading software (for example, e-book reading software is: a browser that supports web-based e-books, a social platform applet or a quick application), etc.
[0085] The above-mentioned memory 1103 can be an electronic memory such as a flash memory, an EEPROM (electrically erasable programmable read-only memory), an EPROM, a hard disk or a ROM. The memory 1103 has a storage space for program codes for executing any method steps in the above-mentioned method. For example, the storage space for program codes may include various program codes for implementing the various steps in the above method respectively. These program codes can be read from or written into one or more computer program products. These computer program products include program code carriers such as hard disks, compact disks (CDs), memory cards or floppy disks. Such computer program products are usually portable or fixed storage units. The storage unit may have a storage segment or storage space arranged similarly to the memory 1103 in the above-mentioned electronic device. The program code can be compressed, for example, in an appropriate form. Generally, the storage unit includes a program for executing the method steps according to an embodiment of the present disclosure, that is, a code that can be read by a processor such as 1101, which, when run by an electronic device, causes the electronic device to execute the various steps in the method described above.
[0086] The third exemplary embodiment of the present disclosure further provides a computer-readable storage medium, wherein a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the page turning method described above is implemented.
[0087] The computer-readable storage medium may be included in the device / apparatus described in the above embodiment; or it may exist independently without being assembled into the device / apparatus. The above computer-readable storage medium carries one or more programs, and when the above one or more programs are executed, the method according to the embodiment of the present disclosure is implemented.
[0088] According to an embodiment of the present disclosure, a computer-readable storage medium may be a non-volatile computer-readable storage medium, for example, may include but is not limited to: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.
[0089] It should be noted that, in this article, relational terms such as "first" and "second" are only used to distinguish one entity or step from another entity or step, and do not necessarily require or imply any such actual relationship or order between these entities or steps. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "include one..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.
[0090] The foregoing is merely a specific embodiment of the present disclosure, which enables those skilled in the art to understand or implement the present disclosure. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features applied herein.
Claims
1. A page turning method, characterized in that: include: In response to a page turning action on a current web page container component, setting a next web page container component located at a lower layer of the current web page container component; Calling the dynamic view drawing component to render a masking area for masking the current web page container component and a transparent area for displaying the next web page container component; Wherein, when the displayed content of the web page is multiple pages of content, the page turning process for all the content in the multiple pages of content needs to include a dynamic view drawing component and a container component for displaying the current web page and a container component for displaying the next web page. During the page turning process, while each current web page is displayed using the container component including the dynamic view drawing component and used to display the current web page, the next web page is loaded into the lower layer of the current web page and displayed using the container component for displaying the next web page, and the drawn view is set on the upper layer of the current web page using the container component including the dynamic view drawing component and used to display the current web page. At the end of each page turning, the next web page is completely displayed by the container component including the dynamic view drawing component and used to display the current web page, and the container component including the dynamic view drawing component and used to display the current web page is used to display the next web page content, so that the next web page is used as the current web page, and the drawn view is set on its upper layer. At the same time, the container component for displaying the next web page continues to load a new web page as the next web page and displays it on its lower layer, so as to prepare for a new page turning process. After the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component. The container component including the dynamic view drawing component includes views of masked areas and transparent areas, and the views are set on the upper layer of the current web page container component.
2. The method according to claim 1, characterized in that The step of setting a next webpage container component located at a lower layer of the current webpage container component includes: When the page turning direction in the page turning action is a preset direction, a web page container component including subsequent web pages of the current web page is set at a lower layer of the current web page container component; When the page turning direction in the page turning action is opposite to the preset direction, a web page container component including a previous web page of the current web page is arranged at the lower layer of the current web page container component.
3. The method according to claim 1, characterized in that The calling of the dynamic view drawing component to render a masking area for masking the current webpage container component and a transparent area for displaying the next webpage container component includes: Monitoring a page turning contact point corresponding to a page turning action of the current web page container component; According to the page turning track of the page turning contact point, the dynamic view drawing component is called to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
4. The method according to claim 3, characterized in that The method further comprises: Detecting whether the movement amplitude of the page turning track is greater than a preset amplitude threshold; When the movement amplitude is greater than the preset amplitude threshold, it is determined that the page turning action of the current webpage container component meets a preset page turning condition.
5. The method according to claim 3, characterized in that: The method of calling a dynamic view drawing component according to the page turning track of the page turning trigger point, dynamically increasing a masking area for covering the current web page container component and a transparent area for displaying the next web page container component, or dynamically reducing a masking area for covering the current web page container component and a transparent area for displaying the next web page container component, comprises: Detecting a page turning angle between the page turning trajectory and a preset direction; When the angle is greater than a preset angle threshold, a dynamic view drawing component is tilted according to the page turning angle; According to the page turning track of the page turning trigger point, the dynamic view drawing component with tilt setting is called to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
6. The method according to claim 5, characterized in that The dynamic view drawing component and the current web page container component have a position binding relationship, The step of setting the dynamic view drawing component according to the tilt of the page turning angle includes: The current webpage container component is tilted and set according to the page turning angle, so that the dynamic view drawing component is tilted and set in association with the page turning angle.
7. The method according to claim 1, characterized in that The current webpage container component includes a dynamic view drawing component, and the method further includes: After the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component, so that when a page turning request is received again, the fully displayed next web page is used as the current web page, and the step of calling the dynamic view drawing component is executed.
8. The method according to any one of claims 1 to 7, characterized in that The response to the page turning action for the current web page container component includes: Get the e-book content web page; Typesetting the electronic book content webpage into a plurality of webpage content pages; The web page content page is displayed based on the current web page container component to receive and respond to the page turning action for the current web page container component.
9. The method according to claim 8, characterized in that The e-book content webpage includes e-book chapter content.
10. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; The memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform the following steps: In response to a page turning action on a current web page container component, setting a next web page container component located at a lower layer of the current web page container component; Calling the dynamic view drawing component to render a masking area for masking the current web page container component and a transparent area for displaying the next web page container component; Wherein, when the displayed content of the web page is multiple pages of content, the page turning process for all the content in the multiple pages of content needs to include a dynamic view drawing component and a container component for displaying the current web page and a container component for displaying the next web page. During the page turning process, while each current web page is displayed using the container component including the dynamic view drawing component and used to display the current web page, the next web page is loaded into the lower layer of the current web page and displayed using the container component for displaying the next web page, and the drawn view is set on the upper layer of the current web page using the container component including the dynamic view drawing component and used to display the current web page. At the end of each page turning, the next web page is completely displayed by the container component including the dynamic view drawing component and used to display the current web page, and the container component including the dynamic view drawing component and used to display the current web page is used to display the next web page content, so that the next web page is used as the current web page, and the drawn view is set on its upper layer. At the same time, the container component for displaying the next web page continues to load a new web page as the next web page and displays it on its lower layer, so as to prepare for a new page turning process. After the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component. The container component including the dynamic view drawing component includes views of masked areas and transparent areas, and the views are set on the upper layer of the current web page container component.
11. The electronic device according to claim 10, characterized in that: The step of setting a next webpage container component located at a lower layer of the current webpage container component includes: When the page turning direction in the page turning action is a preset direction, a web page container component including subsequent web pages of the current web page is set at a lower layer of the current web page container component; When the page turning direction in the page turning action is opposite to the preset direction, a web page container component including a previous web page of the current web page is arranged at the lower layer of the current web page container component.
12. The electronic device according to claim 10, characterized in that: The calling of the dynamic view drawing component to render a masking area for masking the current webpage container component and a transparent area for displaying the next webpage container component includes: Monitoring a page turning contact point corresponding to a page turning action of the current web page container component; According to the page turning track of the page turning contact point, the dynamic view drawing component is called to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
13. The electronic device according to claim 12, characterized in that: The executable instructions cause the processor to further perform the following steps: Detecting whether the movement amplitude of the page turning track is greater than a preset amplitude threshold; When the movement amplitude is greater than the preset amplitude threshold, it is determined that the page turning action of the current webpage container component meets a preset page turning condition.
14. The electronic device according to claim 12, characterized in that: The method of calling a dynamic view drawing component according to the page turning track of the page turning trigger point, dynamically increasing a masking area for covering the current web page container component and a transparent area for displaying the next web page container component, or dynamically reducing a masking area for covering the current web page container component and a transparent area for displaying the next web page container component, comprises: Detecting a page turning angle between the page turning trajectory and a preset direction; When the angle is greater than a preset angle threshold, a dynamic view drawing component is tilted according to the page turning angle; According to the page turning track of the page turning trigger point, the dynamic view drawing component with tilt setting is called to dynamically increase the masking area used to cover the current web page container component and the transparent area used to display the next web page container component, or dynamically reduce the masking area used to cover the current web page container component and the transparent area used to display the next web page container component.
15. The electronic device according to claim 14, characterized in that: The dynamic view drawing component and the current web page container component have a position binding relationship, The step of setting the dynamic view drawing component according to the tilt of the page turning angle includes: The current webpage container component is tilted and set according to the page turning angle, so that the dynamic view drawing component is tilted and set in association with the page turning angle.
16. The electronic device according to claim 10, characterized in that: The current web page container component includes a dynamic view drawing component, including: After the next web page container component is fully displayed, the container component used to display the next web page is switched to a container component including a dynamic view drawing component, so that when a page turning request is received again, the fully displayed next web page is used as the current web page, and the step of calling the dynamic view drawing component is executed.
17. The electronic device according to any one of claims 10 to 16, characterized in that: The response to the page turning action for the current web page container component includes: Get the e-book content web page; Typesetting the electronic book content webpage into a plurality of webpage content pages; The web page content page is displayed based on the current web page container component to receive and respond to the page turning action for the current web page container component.
18. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page turning method according to any one of claims 1 to 9 is implemented.
Citation Information
Patent Citations
E-book page display method and apparatus, and terminal device
CN108664454A
Simulation page turning method of electronic book, electronic equipment and computer storage medium
CN112433657A