Transparency adjustment method and device, storage medium, and electronic device
By monitoring the sliding distance of the carousel and adjusting the transparency of the background image, the page flickering problem caused by the abrupt background image switching process is solved, and a smoother background image switching effect is achieved.
Patent Information
- Application Number
- CN202111123101.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-09-24
- Publication Date
- 2025-10-03
- Estimated Expiration
- 2041-09-24
AI Technical Summary
In the prior art, the background image switching method has an abrupt switching process and is prone to page flickering.
By monitoring the sliding distance of the carousel, when the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches the maximum value and the transparency of the second background image reaches the minimum value, thereby achieving smooth switching of background images.
The smoothness of background image switching is improved, the probability of page flickering is reduced, and the user experience is improved.
Smart Images

Figure CN113934419B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of communications, and in particular to a transparency adjustment method and device, a storage medium, and an electronic device. Background Art
[0002] Currently, carousels are the most basic and common front-end functionality in front-end frameworks. Whether it's a web application, a mobile application, or a website platform, a carousel display effect is often set up on the homepage. During the carousel display process, if there are multiple background images on the front-end page, the method of switching between multiple background images is usually achieved by using a timer to display them at a fixed time. This method of switching background images is too abrupt, the switching effect is not smooth, and it is prone to page flickering, which brings a poor user experience.
[0003] Regarding the related art, the background image switching method in the prior art has a relatively abrupt switching process and is prone to problems such as page flickering, and no effective solution has been proposed yet. Summary of the Invention
[0004] The embodiments of the present invention provide a transparency adjustment method and device, a storage medium, and an electronic device to at least solve the problems in the related art, such as the background image switching method in the prior art has a relatively stiff switching process and is prone to page flickering.
[0005] According to an embodiment of the present invention, a method for adjusting transparency is provided, including: monitoring the sliding distance of a carousel image on a target page; when the sliding distance is greater than a preset threshold, increasing the transparency of a first background image according to a first preset interval, and reducing the transparency of a second background image according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is a background image to be disappeared from the target page, the second background image is a background image to be displayed on the target page, and the first background image and the second background image are stacked.
[0006] In an exemplary embodiment, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and before the transparency of the second background image reaches a minimum transparency value, the method further includes: receiving a setting operation of the target object; in response to the setting operation, setting a first preset interval for the first background image, and setting a second preset interval for the second background image.
[0007] In an exemplary embodiment, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, including: obtaining a first proportional relationship between the sliding distance of the carousel image and the transparency of the first background image, and a second proportional relationship between the sliding distance of the carousel image and the transparency of the second background image; when the sliding distance of the current carousel image has been obtained, determining the first initial transparency of the first background image corresponding to the sliding distance according to the above-mentioned first proportional relationship, and determining the second initial transparency of the second background image corresponding to the above-mentioned sliding distance according to the above-mentioned second proportional relationship; based on the above-mentioned first initial transparency, increasing the transparency of the first background image according to the first preset interval, and reducing the transparency of the second background image according to the second preset interval based on the above-mentioned second initial transparency.
[0008] In an exemplary embodiment, monitoring the sliding distance of the carousel on the target page includes: determining the central axis of the above-mentioned second background image; when determining that a sliding operation is performed on the above-mentioned carousel located in a preset sliding area, determining the above-mentioned sliding distance based on the above-mentioned central axis of the above-mentioned second background image and the boundary line of the above-mentioned preset sliding area.
[0009] In an exemplary embodiment, the sliding distance is determined based on the center axis of the second background image and the boundary line of the preset sliding area, including: when the center axis of the second background image does not coincide with the center axis of the preset sliding area, taking the distance between the center axis of the second background image and the center axis of the preset sliding area as a first error value; determining the sliding distance based on the center axis of the second background image, the first error value and the boundary line of the preset sliding area; and determining the sliding distance based on the boundary line of the preset sliding area.
[0010] In an exemplary embodiment, when it is determined that the second background image is in a zoomed state, the distance between the boundary line of the first image and the boundary line of the preset sliding area where the carousel image is located is determined as a second error value; based on the central axis of the first image, the second error value and the boundary line of the preset sliding area determine the sliding distance.
[0011] In an exemplary embodiment, after increasing the transparency of the first background image according to a first preset interval and reducing the transparency of the second background image according to a second preset interval so that the transparency of the first background image reaches a maximum transparency value and the transparency of the second background image reaches a minimum transparency value, the method further includes: receiving a modification operation of the target object; in response to the modification operation, modifying the first preset interval to a third preset interval, and / or modifying the second preset interval to a fourth preset interval.
[0012] According to another embodiment of the present invention, a transparency adjustment device is also provided, including: a monitoring module for monitoring the sliding distance of the carousel image on the target page; a transparency adjustment module for increasing the transparency of the first background image according to a first preset interval and reducing the transparency of the second background image according to a second preset interval when the above-mentioned sliding distance is greater than a preset threshold, so that the transparency of the above-mentioned first background image reaches a maximum transparency value, and the transparency of the above-mentioned second background image reaches a minimum transparency value, wherein the above-mentioned first background image is a background image to be disappeared from the above-mentioned target page, and the above-mentioned second background image is a background image to be displayed on the above-mentioned target page, and the above-mentioned first background image and the above-mentioned second background image are stacked.
[0013] According to another aspect of the embodiments of the present invention, a computer-readable storage medium is provided, in which a computer program is stored. The computer program is configured to execute the above transparency adjustment method when running.
[0014] According to another aspect of an embodiment of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the transparency adjustment method through the computer program.
[0015] In an embodiment of the present invention, by monitoring the sliding distance of the carousel image, when the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value. The above technical solution solves the problems of the background image switching method in the prior art, such as the switching process is relatively stiff and the page is prone to flickering, thereby improving the smoothness of the background image switching and reducing the probability of page flickering. BRIEF DESCRIPTION OF THE DRAWINGS
[0016] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:
[0017] Figure 1 This is a hardware structure block diagram of a computer terminal for a transparency adjustment method according to an embodiment of the present invention;
[0018] Figure 2 is a flowchart of a transparency adjustment method according to an embodiment of the present invention (I);
[0019] Figure 3is a schematic diagram of a method for adjusting transparency according to an embodiment of the present invention;
[0020] Figure 4 is a flowchart (II) of a transparency adjustment method according to an embodiment of the present invention;
[0021] Figure 5 is a schematic diagram of a transparency change process according to an embodiment of the present invention;
[0022] Figure 6 4 is a structural block diagram of a transparency adjustment device according to an embodiment of the present invention. DETAILED DESCRIPTION
[0023] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.
[0024] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0025] The method embodiments provided in the embodiments of the present application can be executed in a computer terminal or similar computing device. Taking running on a computer terminal as an example, Figure 1 FIG. 1 is a hardware structure diagram of a computer terminal according to an embodiment of the present invention, wherein the method for adjusting transparency is provided. Figure 1 As shown, the computer terminal may include one or more ( Figure 1 Only one is shown) a processor 102 (the processor 102 may include but is not limited to a microprocessor MCU or a programmable logic device FPGA and other processing devices) and a memory 104 for storing data. In an exemplary embodiment, the computer terminal may also include a transmission device 106 and an input / output device 108 for communication functions. It will be understood by those skilled in the art that Figure 1The structure shown is only for illustration and does not limit the structure of the above-mentioned computer terminal. For example, the computer terminal may also include Figure 1 More or fewer components than shown, or with Figure 1 Equivalent functions or comparisons shown Figure 1 Shown are different configurations with more functionality.
[0026] The memory 104 can be used to store computer programs, such as software programs and modules of application software, such as the computer program corresponding to the transparency adjustment method in the embodiment of the present invention. The processor 102 executes the computer program stored in the memory 104 to execute various functional applications and data processing, thereby implementing the above-mentioned method. The memory 104 may include high-speed random access memory and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include memory remotely located relative to the processor 102, and such remote memory may be connected to the computer terminal via a network. Examples of such networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0027] The transmission device 106 is used to receive or send data via a network. A specific example of the aforementioned network may include a wireless network provided by a computer terminal's communications provider. In one embodiment, the transmission device 106 includes a network interface controller (NIC), which can be connected to other network devices via a base station to enable communication with the Internet. In another embodiment, the transmission device 106 may be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.
[0028] In this embodiment, a transparency adjustment method is provided, which is applied to the above-mentioned computer terminal. Figure 2 FIG. 1 is a flow chart of a transparency adjustment method according to an embodiment of the present invention (I), the flow comprising the following steps:
[0029] Step S202: monitoring the sliding distance of the carousel on the target page;
[0030] Step S204: when the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is a background image to be disappeared from the target page, and the second background image is a background image to be displayed on the target page, and the first background image and the second background image are layered.
[0031] Through the above steps, by monitoring the sliding distance of the carousel image on the target page; when the above sliding distance is greater than the preset threshold, the transparency of the first background image is increased according to the first preset interval, and the transparency of the second background image is reduced according to the second preset interval, so that the transparency of the above first background image reaches the maximum transparency, and the transparency of the above second background image reaches the minimum transparency. The above technical solution solves the problems of the background image switching method in the prior art that the switching process is relatively stiff and the page is prone to flickering, thereby improving the smoothness of the background image switching and reducing the probability of page flickering.
[0032] In an embodiment of the present invention, by monitoring the sliding distance of the carousel image, as the sliding distance changes from zero to the maximum, the transparency of the previous background image (equivalent to the first background image mentioned above) gradually increases. At the same time, the transparency of the current background image (equivalent to the second background image in the above embodiment, that is, the background image currently to be displayed) gradually decreases until the current background is fully presented and the previous background completely disappears.
[0033] It should be noted that the above-mentioned target page can be understood as a web page that needs to switch the background image, which can include a computer version web page and a mobile version web page.
[0034] It should be noted that the value range of the above transparency is [0,1].
[0035] Optionally, the preset threshold value may be understood as the width value of the first background image or the second background image, for example, 20px, 30px, or 50px.
[0036] Optionally, the first preset interval may be 1%, 2%, or 5%. For example, when the first preset interval is 1%, the transparency of the first background image is increased in increments of 1% to 100%.
[0037] The second preset interval may be the same as or different from the first preset interval, which will not be elaborated in detail in the present invention.
[0038] In an exemplary embodiment, if the width value of the first background image or the second background image is 20px, the sliding distance of the carousel is 5px, the first preset interval is 1%, and the second preset interval is also 1%, then the transparency of the first background image is increased by 1%, and the transparency of the second background image is reduced by 1%, so that the transparency of the first background image reaches the maximum transparency and the transparency of the second background image reaches the minimum transparency.
[0039] The maximum transparency value may be 1, and the minimum transparency value may be 0.
[0040] Optionally, the order in which the first background image and the second background image are stacked can be that the first background image is stacked below the second background image or that the first background image is stacked above the second background image, which is not limited in the present invention.
[0041] In an exemplary embodiment, when it is determined that the first transparency of the above-mentioned first background image and the second transparency of the above-mentioned second background image meet preset conditions, the above-mentioned first background image is updated from being stacked below the above-mentioned second background image to being stacked above the above-mentioned second background image, wherein the above-mentioned preset conditions include at least one of the following: the transparency of the above-mentioned first background image reaches the maximum transparency value; the transparency of the above-mentioned second background image reaches the minimum transparency value.
[0042] In an exemplary embodiment, in order to better understand how the above-mentioned step S204 increases the transparency of the first background image according to the first preset interval, and reduces the transparency of the second background image according to the second preset interval, so that the transparency of the above-mentioned first background image reaches the maximum transparency, and the transparency of the above-mentioned second background image reaches the minimum transparency, it also includes: receiving a setting operation of the target object; in response to the above-mentioned setting operation, setting a first preset interval for the above-mentioned first background image, and setting a second preset interval for the above-mentioned second background image.
[0043] It should be noted that the target object may be a person, a robot, or a manually set running program, and the present invention does not limit this.
[0044] In an exemplary embodiment, in order to better understand how the above-mentioned step S204 increases the transparency of the first background image according to the first preset interval and reduces the transparency of the second background image according to the second preset interval, a technical solution is also provided. The specific steps include: obtaining a first proportional relationship between the sliding distance of the carousel image and the transparency of the first background image, and a second proportional relationship between the sliding distance of the carousel image and the transparency of the second background image; when the sliding distance of the current carousel image has been obtained, determining the first initial transparency of the above-mentioned first background image according to the above-mentioned first proportional relationship and corresponding to the above-mentioned sliding distance, and determining the second initial transparency of the above-mentioned second background image according to the above-mentioned second proportional relationship and corresponding to the above-mentioned sliding distance; based on the above-mentioned first initial transparency, increasing the transparency of the first background image according to the first preset interval, and reducing the transparency of the second background image according to the second preset interval based on the above-mentioned second initial transparency.
[0045] It should be noted that the first proportional relationship may be understood as a linear proportional relationship between the first background image and the first sliding distance, and the first initial transparency may be 0.
[0046] It should be noted that the second proportional relationship may be understood as a linear proportional relationship between the second background image and the second sliding distance, and the second initial transparency may be 1.
[0047] In an exemplary embodiment, in order to better understand how the above-mentioned step S202 monitors the sliding distance of the carousel image on the target page, a technical solution is provided, and the specific steps include: determining the central axis of the above-mentioned second background image; when determining to perform a sliding operation on the above-mentioned carousel image located in the preset sliding area, determining the above-mentioned sliding distance based on the above-mentioned central axis of the above-mentioned second background image and the boundary line of the above-mentioned preset sliding area.
[0048] It should be noted that the above-mentioned preset sliding area can be understood as the display area in the above-mentioned target page, wherein the above-mentioned target page can be a dynamic display page for human-computer interaction or a static display page for displaying a background image.
[0049] It should be noted that the central axis of the second background image can be understood as the axis located at the geometric center of the second background image. For example, if the second background image is circular, the central axis can be one of the diameters of the second background image. If the second background image is square, the central axis can be one of the symmetry axes of the second background image.
[0050] In an exemplary embodiment, a technical solution is provided for determining the sliding distance based on the center axis of the second background image and the boundary line of the preset sliding area. The specific steps include: when the center axis of the second background image does not coincide with the center axis of the preset sliding area, taking the distance between the center axis of the second background image and the center axis of the preset sliding area as a first error value; determining the sliding distance based on the center axis of the second background image, the first error value and the boundary line of the preset sliding area.
[0051] In an exemplary embodiment, a technical solution is also provided, and the specific steps include: when determining that the above-mentioned second background image is in a zoom state, determining the distance between the boundary line of the above-mentioned first image and the boundary line of the preset sliding area where the above-mentioned carousel image is located as a second error value; based on the central axis of the above-mentioned first image, the above-mentioned second error value and the boundary line of the above-mentioned preset sliding area determine the above-mentioned sliding distance.
[0052] It should be noted that the value range of the first error value and the second error value may be [0px, 1px].
[0053] In an exemplary embodiment, a technical solution is provided for increasing the transparency of a first background image according to a first preset interval and reducing the transparency of a second background image according to a second preset interval so that the transparency of the first background image reaches a maximum transparency value and the transparency of the second background image reaches a minimum transparency value. The specific steps include: receiving a modification operation of the target object; in response to the modification operation, modifying the first preset interval to a third preset interval, and / or modifying the second preset interval to a fourth preset interval.
[0054] It should be noted that the value range of the first preset interval, the second preset interval, the third preset interval and the fourth preset interval may be [0px, 20px].
[0055] In order to better understand the process of the above transparency adjustment method, the implementation process of the above transparency adjustment method is described below in combination with an optional embodiment, but it is not intended to limit the technical solution of the embodiment of the present invention.
[0056] In this embodiment, a method for adjusting transparency is provided. Figure 3 Schematic diagram of a method for adjusting transparency according to an embodiment of the present invention. Figure 3 As shown, the details are as follows:
[0057] In the flutter page (equivalent to the target page mentioned above), by monitoring the sliding distance of the carousel image, and when the sliding distance continues to increase, the transparency of the current background image (equivalent to the first background image) is controlled to increase, and the transparency of the previous background image (equivalent to the second background image) is controlled to decrease.
[0058] It should be noted that Flutter is a cross-platform (Android and iOS) mobile development framework. The user interface created using Flutter is the aforementioned Flutter page. The aforementioned Flutter page can be a customizable user interface to better meet user needs and provide a better user experience.
[0059] Figure 4 This is a flow chart of the transparency adjustment method according to an embodiment of the present invention (II). Figure 4 A method for adjusting transparency according to an embodiment of the present invention is described.
[0060] Step 1: Get the sliding operation of the carousel;
[0061] Step 2: Register an account to monitor the sliding distance of the carousel;
[0062] Step 3: Monitor the sliding distance of the carousel;
[0063] Step 4: Set a first preset interval for the previous background image.
[0064] Optionally, the first preset interval may be 1%, 2%, or 5%. For example, when the first preset interval is 1%, the transparency of the previous background image is increased by 1% to 100%.
[0065] In an exemplary embodiment, when the carousel image starts to slide, a second preset interval can be set for the background image to be currently displayed.
[0066] Step 5: When the sliding distance of the carousel image begins to increase, the transparency of the previous background image is increased, and the transparency of the background image to be displayed is reduced;
[0067] Step 6: When the carousel image finishes sliding, the background image to be displayed is completely displayed on the Flutter page, and the previous background image completely disappears from the Flutter page.
[0068] In an exemplary embodiment, the background image switching is determined to be complete when the following conditions are met. The following conditions include:
[0069] 1) The carousel slides the corresponding sliding distance;
[0070] 2) The background image to be displayed is completely displayed on the flutter page;
[0071] 3) The previous background image completely disappears on the Flutter page;
[0072] It should be noted that the condition in step 6 is determined based on the first proportional relationship and the second proportional relationship.
[0073] It should be noted that the first proportional relationship can be understood as a linear proportional relationship between the first background image and the first sliding distance, and the second proportional relationship can be understood as a linear proportional relationship between the second background image and the second sliding distance.
[0074] Figure 5 FIG. 4 is a schematic diagram of a transparency change process according to an embodiment of the present invention. Figure 5 A schematic diagram of the transparency change process when the carousel slides to the right is provided, such as Figure 5 As shown, when the carousel slides to the right, the transparency of the first background image gradually increases, and at the same time, the transparency of the second background image gradually decreases, reaching a minimum transparency value. When the transparency of the first background image reaches a maximum transparency value, the first background image is completely transparent. When the transparency of the second background image reaches a minimum transparency value, the second background image is fully displayed.
[0075] It should be noted that the first background image and the second background image are stacked. Figure 5 As shown, for example, the first background image and the second background image can be arranged in a staggered stacked manner, or the first background image and the second background image can also be arranged in a stacked manner that overlaps vertically, wherein overlapping vertically means that the first background image and the second background image can overlap each other, and the present invention does not limit this.
[0076] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of various embodiments of the present invention.
[0077] Figure 6 is a structural block diagram of a transparency adjustment device according to an embodiment of the present invention; Figure 6Shown, including:
[0078] Monitoring module 62, used to monitor the sliding distance of the carousel on the target page;
[0079] The transparency adjustment module 64 is used to increase the transparency of the first background image according to a first preset interval and reduce the transparency of the second background image according to a second preset interval when the above-mentioned sliding distance is greater than a preset threshold, so that the transparency of the above-mentioned first background image reaches a maximum transparency value and the transparency of the above-mentioned second background image reaches a minimum transparency value, wherein the above-mentioned first background image is the background image to be disappeared from the above-mentioned target page, and the above-mentioned second background image is the background image to be displayed on the above-mentioned target page, and the above-mentioned first background image and the above-mentioned second background image are stacked.
[0080] Through the above-mentioned device, the sliding distance of the carousel image on the target page is monitored; when the above-mentioned sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the above-mentioned first background image reaches a maximum transparency value, and the transparency of the above-mentioned second background image reaches a minimum transparency value, wherein the above-mentioned first background image is a background image to be disappeared from the above-mentioned target page, and the above-mentioned second background image is a background image to be displayed on the above-mentioned target page. The above-mentioned first background image and the above-mentioned second background image are stacked, which solves the problems in the related art that the background image switching method in the existing technology is relatively stiff in the switching process and is prone to page flickering, thereby improving the smoothness of background image switching and reducing the probability of page flickering.
[0081] In an embodiment of the present invention, by monitoring the sliding distance of the carousel image, as the sliding distance changes from zero to the maximum, the transparency of the previous background image (equivalent to the first background image mentioned above) gradually increases. At the same time, the transparency of the current background image (equivalent to the second background image in the above embodiment, that is, the background image currently to be displayed) gradually decreases until the current background is fully presented and the previous background completely disappears.
[0082] It should be noted that the above-mentioned target page can be understood as a web page that needs to switch the background image, which can include a computer version web page and a mobile version web page.
[0083] It should be noted that the value range of the above transparency is [0,1].
[0084] Optionally, the preset threshold value may be understood as the width value of the first background image or the second background image, for example, 20px, 30px, or 50px.
[0085] Optionally, the first preset interval may be 1%, 2%, or 5%. For example, when the first preset interval is 1%, the transparency of the first background image is increased in increments of 1% to 100%.
[0086] The second preset interval may be the same as or different from the first preset interval, which will not be elaborated in detail in the present invention.
[0087] In an exemplary embodiment, if the width value of the first background image or the second background image is 20px, the sliding distance of the carousel is 5px, the first preset interval is 1%, and the second preset interval is also 1%, then the transparency of the first background image is increased by 1%, and the transparency of the second background image is reduced by 1%, so that the transparency of the first background image reaches the maximum transparency and the transparency of the second background image reaches the minimum transparency.
[0088] The maximum transparency value may be 1, and the minimum transparency value may be 0.
[0089] Optionally, the order in which the first background image and the second background image are stacked can be that the first background image is stacked below the second background image or that the first background image is stacked above the second background image, which is not limited in the present invention.
[0090] In an exemplary embodiment, when it is determined that the first transparency of the above-mentioned first background image and the second transparency of the above-mentioned second background image meet preset conditions, the above-mentioned first background image is updated from being stacked below the above-mentioned second background image to being stacked above the above-mentioned second background image, wherein the above-mentioned preset conditions include at least one of the following: the transparency of the above-mentioned first background image reaches the maximum transparency value; the transparency of the above-mentioned second background image reaches the minimum transparency value.
[0091] In an exemplary embodiment, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and before the transparency of the second background image reaches a minimum transparency value, the above-mentioned device also includes: a receiving module for receiving a setting operation of a target object; and a setting module for responding to the above-mentioned setting operation, setting a first preset interval for the above-mentioned first background image, and setting a second preset interval for the above-mentioned second background image.
[0092] It should be noted that the target object may be a person, a robot, or a manually set running program, and the present invention does not limit this.
[0093] In an exemplary embodiment, the transparency adjustment module 64 is also used to obtain a first proportional relationship between the sliding distance of the carousel image and the transparency of the first background image, and a second proportional relationship between the sliding distance of the carousel image and the transparency of the second background image; when the sliding distance of the current carousel image has been obtained, the first initial transparency of the first background image corresponding to the sliding distance is determined according to the above-mentioned first proportional relationship, and the second initial transparency of the second background image corresponding to the above-mentioned sliding distance is determined according to the above-mentioned second proportional relationship; based on the above-mentioned first initial transparency, the transparency of the first background image is increased according to a first preset interval, and based on the above-mentioned second initial transparency, the transparency of the second background image is reduced according to a second preset interval.
[0094] It should be noted that the first proportional relationship may be understood as a linear proportional relationship between the first background image and the first sliding distance, and the first initial transparency may be 0.
[0095] It should be noted that the second proportional relationship may be understood as a linear proportional relationship between the second background image and the second sliding distance, and the second initial transparency may be 1.
[0096] In an exemplary embodiment, the monitoring module 62 is also used to determine the central axis of the above-mentioned second background image; when it is determined that a sliding operation is performed on the above-mentioned carousel image located in the preset sliding area, the above-mentioned sliding distance is determined based on the above-mentioned central axis of the above-mentioned second background image and the boundary line of the above-mentioned preset sliding area.
[0097] It should be noted that the above-mentioned preset sliding area can be understood as the display area in the above-mentioned target page, wherein the above-mentioned target page can be a dynamic display page for human-computer interaction or a static display page for displaying a background image.
[0098] It should be noted that the central axis of the second background image can be understood as the axis located at the geometric center of the second background image. For example, if the second background image is circular, the central axis can be one of the diameters of the second background image. If the second background image is square, the central axis can be one of the symmetry axes of the second background image.
[0099] In an exemplary embodiment, the monitoring module 62 is also used to use the distance between the center axis of the second background image and the center axis of the preset sliding area as a first error value when the center axis of the second background image does not coincide with the center axis of the preset sliding area; the sliding distance is determined based on the center axis of the second background image, the first error value and the boundary line of the preset sliding area.
[0100] In an exemplary embodiment, the above-mentioned device also includes: a sliding distance determination module, which is used to determine that the distance between the boundary line of the above-mentioned first image and the boundary line of the preset sliding area where the above-mentioned carousel image is located is a second error value when it is determined that the above-mentioned second background image is in a zoom state; based on the central axis of the above-mentioned first image, the above-mentioned second error value and the boundary line of the above-mentioned preset sliding area determine the above-mentioned sliding distance.
[0101] It should be noted that the value range of the first error value and the second error value may be [0px, 1px].
[0102] In an exemplary embodiment, after the transparency of the first background image is increased according to a first preset interval and the transparency of the second background image is reduced according to a second preset interval so that the transparency of the first background image reaches a maximum transparency and the transparency of the second background image reaches a minimum transparency, the device further includes: a processing module, which is also used to receive a modification operation of the target object; in response to the modification operation, the first preset interval is modified to a third preset interval, and / or the second preset interval is modified to a fourth preset interval.
[0103] It should be noted that the value range of the first preset interval, the second preset interval, the third preset interval and the fourth preset interval may be [0px, 20px].
[0104] An embodiment of the present invention further provides a storage medium, which includes a stored program, wherein the program executes any of the above methods when it is run.
[0105] Optionally, in this embodiment, the storage medium may be configured to store program codes for executing the following steps:
[0106] S1, monitors the sliding distance of the carousel on the target page;
[0107] S2. When the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is a background image to be disappeared from the target page, and the second background image is a background image to be displayed on the target page, and the first background image and the second background image are stacked.
[0108] An embodiment of the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.
[0109] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.
[0110] Optionally, in this embodiment, the processor may be configured to execute the following steps through a computer program:
[0111] S1, monitors the sliding distance of the carousel on the target page;
[0112] S2. When the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is the background image to be disappeared from the target page, and the second background image is the background image to be displayed on the target page, and the first background image and the second background image are stacked.
[0113] Optionally, in this embodiment, the above-mentioned storage medium may include but is not limited to: a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk, and other media that can store program codes.
[0114] Optionally, specific examples in this embodiment may refer to the examples described in the above embodiments and optional implementation modes, and this embodiment will not be described in detail here.
[0115] Obviously, those skilled in the art will appreciate that the various modules or steps of the present invention described above can be implemented using a general-purpose computing device, centralized on a single computing device, or distributed across a network of multiple computing devices. Alternatively, they can be implemented using program code executable by a computing device, which can then be stored in a storage device and executed by the computing device. In some cases, the steps shown or described can be performed in a different order than that shown, or can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.
[0116] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that various modifications and variations of the present invention are possible. Any modifications, equivalent substitutions, or improvements made within the principles of the present invention are intended to be within the scope of protection of the present invention.
Claims
1. A method for adjusting transparency, characterized in that: include: Monitor the sliding distance of the carousel on the target page; When the sliding distance is greater than a preset threshold, the transparency of the first background image is increased according to a first preset interval, and the transparency of the second background image is reduced according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is a background image to be disappeared from the target page, and the second background image is a background image to be displayed on the target page, and the first background image and the second background image are arranged in a stacked manner; Among them, monitoring the sliding distance of the carousel on the target page includes: determining a central axis of the second background image; When it is determined that a sliding operation is performed on the carousel image located in the preset sliding area, the sliding distance is determined according to the central axis of the second background image and the boundary line of the preset sliding area; The step of determining the sliding distance according to the central axis of the second background image and the boundary line of the preset sliding area includes: In a case where the central axis of the second background image does not coincide with the central axis of the preset sliding area, taking the distance between the central axis of the second background image and the central axis of the preset sliding area as a first error value; The sliding distance is determined according to the central axis of the second background image, the first error value, and a boundary line of the preset sliding area.
2. The method for adjusting transparency according to claim 1, characterized in that: Increasing the transparency of the first background image according to a first preset interval and decreasing the transparency of the second background image according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value and before the transparency of the second background image reaches a minimum transparency value, the method further includes: Receive the target object's set operation; In response to the setting operation, a first preset interval is set for the first background image, and a second preset interval is set for the second background image.
3. The method for adjusting transparency according to claim 2, wherein: Increasing the transparency of the first background image according to a first preset interval, and decreasing the transparency of the second background image according to a second preset interval, includes: Obtaining a first proportional relationship between the sliding distance of the carousel image and the transparency of the first background image, and a second proportional relationship between the sliding distance of the carousel image and the transparency of the second background image; When the sliding distance of the current carousel image has been obtained, determining a first initial transparency of the first background image according to the first proportional relationship and corresponding to the sliding distance, and determining a second initial transparency of the second background image according to the second proportional relationship and corresponding to the sliding distance; Based on the first initial transparency, the transparency of the first background image is increased according to a first preset interval, and based on the second initial transparency, the transparency of the second background image is decreased according to a second preset interval.
4. The method for adjusting transparency according to claim 1, wherein: After increasing the transparency of the first background image according to a first preset interval and decreasing the transparency of the second background image according to a second preset interval so that the transparency of the first background image reaches a maximum transparency value and the transparency of the second background image reaches a minimum transparency value, the method further includes: Receive modification operations on the target object; In response to the modification operation, the first preset interval is modified to a third preset interval, and / or the second preset interval is modified to a fourth preset interval.
5. A transparency adjustment device, characterized in that: include: Monitoring module, used to monitor the sliding distance of the carousel on the target page; a transparency adjustment module, configured to, when the sliding distance is greater than a preset threshold, increase the transparency of a first background image according to a first preset interval, and decrease the transparency of a second background image according to a second preset interval, so that the transparency of the first background image reaches a maximum transparency value, and the transparency of the second background image reaches a minimum transparency value, wherein the first background image is a background image to be disappeared from the target page, the second background image is a background image to be displayed on the target page, and the first background image and the second background image are arranged in a stacked manner; The monitoring module is further configured to determine a central axis of the second background image; and when a sliding operation is performed on the carousel image located in a preset sliding area, determine the sliding distance based on a boundary line between the central axis of the second background image and the preset sliding area. Among them, the monitoring module is also used to use the distance between the center axis of the second background image and the center axis of the preset sliding area as the first error value when the center axis of the second background image does not coincide with the center axis of the preset sliding area; and determine the sliding distance based on the center axis of the second background image, the first error value and the boundary line of the preset sliding area.
6. A computer-readable storage medium, characterized in that The computer-readable storage medium includes a stored program, wherein the program executes the method described in any one of claims 1 to 4 when executed.
7. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to execute the method according to any one of claims 1 to 4 through the computer program.
Citation Information
Patent Citations
Page switching method and device, equipment and medium
CN113010249A