Target page display method and device, storage medium and electronic equipment

Abstract

The invention discloses a target page display method and device, a storage medium and electronic equipment. The method comprises the steps that the scaling of a target page in a set view and the center point distance between the center point of the target page and the content center point of the set view are determined, and the content center point of the set view is used for indicating the center point of a visible area of the set view; calculating a rotation angle of the target page according to the central point distance and the width of the container of the set view; based on the rotation radius and the rotation angle of the target page, position parameters of a three-dimensional conversion matrix are determined, parameter updating is conducted on the three-dimensional conversion matrix according to the rotation angle and the scaling, the three-dimensional conversion matrix is used for controlling three-dimensional changes of the target page, and the position parameters of the three-dimensional conversion matrix are used for indicating the display position of the target page; and displaying the target page according to the updated three-dimensional conversion matrix. The technical problem that a set view operation method provided by the related technology is single in cell change is solved.

Description

Technical Field

[0001] The present application relates to the technical field of page display, and in particular to a method and device for displaying a target page, a storage medium, and an electronic device. Background Art

[0002] In mobile application development, collection view is a commonly used interface element that can display multiple items or data. In order to improve user experience and attractiveness, developers often want to implement animation effects in collection views, that is, cells can be rotated and scaled. However, in related technologies, collection views cannot directly implement cell rotation and scaling functions on a three-dimensional level. That is, the collection view operation method provided by related technologies has the problem of single cell changes.

[0003] To address the above-mentioned problems, no effective solution has been proposed yet. Summary of the invention

[0004] The embodiments of the present application provide a method and device for displaying a target page, a storage medium, and an electronic device, so as to at least solve the technical problem that the collection view operation method provided by the related art has a single cell change.

[0005] According to one aspect of an embodiment of the present application, a method for displaying a target page is provided, including: determining a zoom ratio of a target page in a collection view, and a center point distance between a center point of the target page and a content center point of the collection view, wherein the content center point of the collection view is used to indicate the center point of a visible area of ​​the collection view; calculating a rotation angle of the target page according to the center point distance and a width of a container of the collection view; determining position parameters of a three-dimensional transformation matrix based on a rotation radius and a rotation angle of the target page, and updating parameters of the three-dimensional transformation matrix according to the rotation angle and the zoom ratio, wherein the three-dimensional transformation matrix is ​​used to control three-dimensional changes of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page; and displaying the target page according to the updated three-dimensional transformation matrix.

[0006] According to another aspect of an embodiment of the present application, a device for displaying a target page is also provided, including: a zoom ratio calculation unit, used to determine the zoom ratio of the target page in a collection view, and the center point distance between the target page and the content center point of the collection view, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view; a rotation angle calculation unit, used to calculate the rotation angle of the target page according to the center point distance and the width of the container of the collection view; a three-dimensional matrix determination unit, used to determine the position parameters of the three-dimensional transformation matrix based on the rotation radius and rotation angle of the target page, and update the parameters of the three-dimensional transformation matrix according to the rotation angle and the zoom ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate the display position of the target page; a layout update unit, used to display the target page according to the updated three-dimensional transformation matrix.

[0007] Optionally, the above-mentioned zoom ratio calculation unit includes: a collection view generation module, which is used to generate multiple cells in the collection view according to an initial parameter set, wherein the target page is any one of the multiple cells; a maximum sliding distance determination module, which is used to determine the sum of the maximum width and the minimum line spacing of the target page as the maximum sliding distance corresponding to the target page under the minimum zoom condition, wherein the maximum width of the target page is used to indicate the width of the target page when the container of the collection view is centered, and the minimum line spacing is used to indicate the minimum distance between adjacent cells; an offset determination module, which is used to determine the absolute value of the difference between the center point of the target page and the center point of the container of the collection view as the offset of the target page.

[0008] Optionally, the above-mentioned zoom ratio calculation unit also includes: a first zoom ratio calculation module, used to determine that the zoom ratio of the target page is the minimum zoom ratio when the offset of the target page is greater than or equal to the maximum sliding distance; a second zoom ratio calculation module, used to determine the ratio of the difference between the maximum sliding distance and the offset of the target page to the maximum sliding distance as a first ratio when the offset of the target page is less than the maximum sliding distance, and determine the zoom ratio of the target page by multiplying the product of the difference between the maximum zoom ratio and the minimum zoom ratio with the first ratio and the sum of the minimum zoom ratio, wherein the maximum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the maximum zoom is applied, and the minimum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the minimum zoom is applied.

[0009] Optionally, the above-mentioned scaling ratio calculation unit also includes: a center coordinate calculation module, used to determine half of the width of the container of the collection view as the x-axis coordinate of the center point of the collection view; a center point distance calculation module, used to determine the center point distance as the sum of the difference between the content offset of the collection view on the x-axis and the x-axis coordinate of the center point of the target page and the x-axis coordinate of the center point of the collection view, wherein the content offset is used to indicate the horizontal offset of the content relative to the origin of the collection view in response to a scrolling operation.

[0010] Optionally, the above-mentioned rotation angle calculation unit includes: a relative distance calculation module, used to determine the ratio of the center point distance to the width of the container of the collection view as the relative distance; a rotation angle calculation module, used to determine the product of the unit rotation angle, the relative distance and the maximum rotation ratio as the rotation angle of the target page, wherein the unit rotation angle is used to indicate the rotation angle corresponding to the unit distance, and the maximum rotation ratio is used to indicate the maximum rotation amplitude of the target page relative to the center point.

[0011] Optionally, the above-mentioned three-dimensional matrix determination unit includes: a cosine calculation module, used to calculate the cosine value corresponding to the rotation angle; a y-axis offset calculation module, used to determine the difference between the rotation radius and the product of the rotation radius and the cosine value as the offset of the target page on the y-axis; a matrix creation module, used to create a three-dimensional transformation matrix at the position of the offset of the target page on the y-axis translated along the y-axis; and a matrix update module, used to update the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio.

[0012] Optionally, the above-mentioned matrix update module is also used to: rotate the three-dimensional transformation matrix around the z-axis according to the rotation angle of the target page; determine the product of the scaling ratio of the target page and the preset translation amount as the translation distance, and translate the three-dimensional transformation matrix on the y-axis by the translation distance; use the scaling ratio of the target page to scale the three-dimensional transformation matrix in the x-axis direction and the y-axis direction to obtain an updated three-dimensional transformation matrix.

[0013] According to another aspect of the embodiments of the present application, a computer-readable storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the above-mentioned method for displaying a target page when running.

[0014] According to another aspect of the embodiments of the present application, a computer program product is provided, the computer program product comprising a computer program / instruction, the computer instruction being stored in a computer-readable storage medium. A processor of a computer device reads the computer program / instruction from the computer-readable storage medium, and the processor executes the computer program / instruction, so that the computer device executes the method for displaying a target page as described above.

[0015] According to another aspect of an embodiment of the present application, there is further provided an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the method for displaying the target page through the computer program.

[0016] In an embodiment of the present application, the zoom ratio of the target page in the collection view and the center point distance between the center point of the target page and the content center point of the collection view are determined, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view; the rotation angle of the target page is calculated according to the center point distance and the width of the container of the collection view; the position parameters of the three-dimensional transformation matrix are determined based on the rotation radius and rotation angle of the target page, and the parameters of the three-dimensional transformation matrix are updated according to the rotation angle and the zoom ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate the display position of the target page; the target page is displayed according to the updated three-dimensional transformation matrix. When the user scrolls the collection view, the transformation parameters of the cell can be determined according to the zoom ratio of the target page in the collection view and the parameters of the collection view, and the 3D transformation matrix can be calculated and applied to achieve dynamic visual effects, and the rotation, zoom and translation effects of the target page are dynamically associated with the position of the target page in the collection view. The above method solves the technical problem that the collection view operation method provided by the related art has a single cell change. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0018] Figure 1 is a schematic diagram of a hardware environment of an optional method for displaying a target page according to an embodiment of the present application;

[0019] Figure 2 is a flowchart of an optional method for displaying a target page according to an embodiment of the present application;

[0020] Figure 3 is a schematic diagram of an optional target page display method according to an embodiment of the present application;

[0021] Figure 4 is a schematic diagram of another optional target page display method according to an embodiment of the present application;

[0022] Figure 5 is a schematic diagram of another optional target page display method according to an embodiment of the present application;

[0023] Figure 6is a schematic diagram of another optional target page display method according to an embodiment of the present application;

[0024] Figure 7 is a schematic diagram of another optional target page display method according to an embodiment of the present application;

[0025] Figure 8 is a schematic diagram of an optional target page display device according to an embodiment of the present application;

[0026] Fig. 9 is a schematic diagram of an optional electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0028] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application 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 data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising 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.

[0029] According to one aspect of the embodiments of the present application, a method for displaying a target page is provided. As an optional implementation, the method for displaying a target page can be applied to, but is not limited to, Figure 1 The target page display system in the hardware environment shown in FIG. The target page display system may include but is not limited to the terminal device 102, the network 110, the server 112, and the database 114. The terminal device 102 runs a target program (such as Figure 1As shown, the target program is a program loaded on the iOS system as an example). The terminal device 102 includes a display 108, a processor 106 and a memory 104. The display 108 can be used to display the target page under different working conditions, etc., and is also used to provide a human-computer interaction interface to receive touch human-computer interaction operations for different information. The processor is used to generate an interaction instruction in response to the above human-computer interaction operation, and send the interaction instruction to the server to obtain an initial parameter set, etc. The memory is used to store data such as image data and text data of the target page displayed by the running client.

[0030] In addition, the server 112 includes a processing engine 116, which is used to perform storage or reading operations on the database 114. Specifically, the processing engine 116 reads an initial parameter set from the database 114.

[0031] Assumptions Figure 1 A program for displaying a collection view is running in the terminal device 102. The specific process of this embodiment is as follows: As in step S102, the terminal device 102 requests an initial parameter set from the server 112 through the network 110. The terminal device 102 may be one or more devices; after receiving the request sent by the terminal device 102, the server 112 obtains the initial parameter set from the database 114 and sends the initial parameter set to the terminal device 102 to create a streaming layout subclass.

[0032] After the terminal device 102 displays the streaming layout (collection view), steps S104-S110 are executed in the terminal device 102 to determine the scaling ratio of the target page in the collection view and the center point distance between the target page and the content center point of the container of the collection view, wherein the content center point of the container of the collection view is used to indicate the center point of the visible area of ​​the collection view; the rotation angle of the target page is calculated according to the center point distance and the width of the container of the collection view; the creation position of the three-dimensional transformation matrix is ​​determined based on the rotation radius and rotation angle of the target page, and the three-dimensional transformation matrix is ​​updated according to the rotation angle and scaling ratio; the updated three-dimensional transformation matrix is ​​applied to the target page to achieve three-dimensional rotation and scaling effects on the target page.

[0033] Optionally, in this embodiment, the terminal device 102 may be a terminal device configured with a target program, and may include but is not limited to at least one of the following: a mobile phone (such as an iOS mobile phone, etc.), a laptop computer, a tablet computer, a PDA, a MID (Mobile Internet Devices), a PAD, a desktop computer, a smart TV, etc. The client may be a client that supports the display task of providing a target page, such as a video client, a game client, or a client that can access the target page. The network may include but is not limited to: a wired network, a wireless network, wherein the wired network includes: a local area network, a metropolitan area network, and a wide area network, and the wireless network includes: Bluetooth, WIFI, and other networks that implement wireless communication. The server may be a single server, or a server cluster consisting of multiple servers, or a cloud server. The above is only an example, and no limitation is made to this in this embodiment.

[0034] Optionally, in this embodiment, the display method of the target page can be applied to, but not limited to, a video client. After monitoring the user's scrolling and touch operations, the rotation angle, scaling ratio, translation distance and other parameters of each cell can be dynamically calculated according to the user's interaction (such as scrolling position, touch point position, etc.), and the corresponding three-dimensional transformation matrix is ​​calculated for each cell using the above parameters. The calculated three-dimensional transformation matrix is ​​applied to the three-dimensional properties of each cell to achieve three-dimensional rotation, scaling and translation effects. It can be periodically updated in the client to reflect the changes in the above cells, and is completed during the processing of the scrolling time to ensure the smoothness and responsiveness of the interface. The cell that the user is currently viewing can be visually highlighted, and the user can be given a better sense of space.

[0035] In an embodiment of the present application, the zoom ratio of the target page in the collection view and the center point distance between the center point of the target page and the content center point of the collection view are determined, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view; the rotation angle of the target page is calculated according to the center point distance and the width of the container of the collection view; the position parameters of the three-dimensional transformation matrix are determined based on the rotation radius and rotation angle of the target page, and the parameters of the three-dimensional transformation matrix are updated according to the rotation angle and the zoom ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate the display position of the target page; the target page is displayed according to the updated three-dimensional transformation matrix. When the user scrolls the collection view, the transformation parameters of the cell can be determined according to the zoom ratio of the target page in the collection view and the parameters of the collection view, and the 3D transformation matrix can be calculated and applied to achieve dynamic visual effects, and the rotation, zoom and translation effects of the target page are dynamically associated with the position of the target page in the collection view. The above method solves the technical problem that the collection view operation method provided by the related art has a single cell change.

[0036] As an optional implementation, Figure 2 As shown, the method for displaying the target page includes the following steps: S202, determining the zoom ratio of the target page in the collection view, and the center point distance between the center point of the target page and the content center point of the collection view, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view;

[0037] It should be noted that in modern mobile application development, providing users with a rich and intuitive visual experience is the key to enhancing the attractiveness of applications. As a widely used interface display component, the core function of collection view (UICollectionView) is to efficiently display and manage interface elements of large amounts of data, such as pictures, text, or complex views. However, the original collection view layout (UICollectionViewFlowLayout) is relatively static in visual effects and lacks dynamic interactive elements.

[0038] UICollectionViewFlowLayout is a subclass of UICollectionViewLayout in iOS development. It provides a flow layout for displaying a series of cells that can be arranged in a grid or linear list, support horizontal or vertical scrolling, and allow developers to customize properties such as spacing between cells, row spacing, and edge spacing.

[0039] It should be noted that the scaling ratio refers to the degree to which the target page is enlarged or reduced relative to its original size, which directly affects the visual presentation of the page. The center point distance refers to the straight-line distance from the center point of the target page to the center point of the collection view container content. The content center point usually refers to the geometric center of the visible area of ​​the collection view. It is the key point for calculating the offset of the page relative to the center position, thereby determining the dynamic effects of the page (such as rotation and scaling). The calculation method of the scaling ratio and the center point distance will be explained below and will not be repeated here.

[0040] S204, calculating the rotation angle of the target page according to the center point distance and the width of the container of the collection view;

[0041] It should be noted that the calculation of the rotation angle is based on the relative position of the target page and the center point of the content, as well as the width of the container. Specifically, by analyzing the relationship between the center point distance and the container width, it can be determined at what angle the target page should be rotated to present the best visual effect when the user scrolls the collection view.

[0042] S206, determining position parameters of a three-dimensional transformation matrix based on a rotation radius and a rotation angle of the target page, and updating parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control three-dimensional changes of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page;

[0043] It should be noted that the three-dimensional transformation matrix (CATransform3D) is a powerful tool provided by the Core Animation framework for describing and executing graphic transformations in three-dimensional space, including rotation, scaling, and translation.

[0044] It should be noted that the rotation radius usually refers to the distance from the reference point of the rotation operation to the rotation center. In 3D space, the rotation center is the point around which the rotation operation revolves. For CATransform3D, the rotation center is usually the origin of the coordinate system, but the actual center of rotation can be changed through translation transformation. The rotation radius defines the path radius of the object when it is rotated. It determines the visual effect of the rotation, especially when creating tilt or wrap effects. When implementing a 3D rotation effect, the rotation radius can be used to determine the offset (translateY) of the cell on the Y axis. This offset is calculated based on the rotation angle and radius, and is used to move the cell to the correct position before rotation.

[0045] In an optional embodiment, the three-dimensional transformation matrix can be updated according to the rotation angle and the scaling ratio. The rotation angle determines the degree of page rotation, while the scaling ratio determines the adjustment of the page size. The process of updating the matrix involves a matrix multiplication operation, that is, multiplying the rotation matrix and the scaling matrix with the original matrix to obtain the final transformation effect. The specific method of obtaining the three-dimensional transformation matrix will be described below and will not be repeated here.

[0046] S208: Display the target page according to the updated three-dimensional conversion matrix.

[0047] In an optional implementation, the three-dimensional transformation matrix calculated and updated in the previous steps is directly applied to the layer or view of the target page. Once the matrix is ​​applied, the target page will be transformed in real time according to the calculated rotation angle and scaling ratio, providing users with a smooth and attractive interface effect. During user interaction, such as in the callback of a scroll event, the above parameters and transformation matrix are dynamically updated to achieve a smooth animation effect.

[0048] In an optional implementation, the 3D transformation matrix transform3D can be applied to the transform3D attribute of the layout attribute of the target page to achieve the 3D rotation and scaling effect of the target page. When processing a single view or layer, its transform attribute can be directly set, such as cell.layer.transform=transform3D. The corresponding three-dimensional transformation matrix can be used for each cell in the collection view to achieve the change effect of each cell.

[0049] In an embodiment of the present application, the zoom ratio of the target page in the collection view and the center point distance between the center point of the target page and the content center point of the collection view are determined, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view; the rotation angle of the target page is calculated according to the center point distance and the width of the container of the collection view; the position parameters of the three-dimensional transformation matrix are determined based on the rotation radius and rotation angle of the target page, and the parameters of the three-dimensional transformation matrix are updated according to the rotation angle and the zoom ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate the display position of the target page; the target page is displayed according to the updated three-dimensional transformation matrix. When the user scrolls the collection view, the transformation parameters of the cell can be determined according to the zoom ratio of the target page in the collection view and the parameters of the collection view, and the 3D transformation matrix can be calculated and applied to achieve dynamic visual effects, and the rotation, zoom and translation effects of the target page are dynamically associated with the position of the target page in the collection view. The above method solves the technical problem that the collection view operation method provided by the related art has a single cell change.

[0050] In an optional embodiment, before the above-mentioned determination of the zoom ratio of the target page in the collection view, it includes: generating multiple cells in the collection view according to the initial parameter set, wherein the target page is any one of the multiple cells; determining the sum of the maximum width and the minimum line spacing of the target page as the maximum sliding distance corresponding to the target page under the minimum zoom condition, wherein the maximum width of the target page is used to indicate the width of the target page when the target page is displayed in the center of the container of the collection view, and the minimum line spacing is used to indicate the minimum distance between adjacent cells; determining the absolute value of the difference between the center point of the target page and the center point of the container of the collection view as the offset of the target page.

[0051] It should be noted that when the application is opened or refreshed, the target page in the collection view can be generated according to the preset initial parameter set. The initial parameter value of the flow layout can be obtained from the server. In the iOS system, a CustomCollectionViewFlowLayout subclass can be created based on the system's flow layout class, and the initial parameters of the target page can be defined in it. These parameters are set when the layout is initialized to adapt to specific business needs and visual effects.

[0052] It should be noted that the initial parameter set may include: maximum width and height size (finalItemSize): determines the maximum display size when the page is centered, and this size can be dynamically calculated based on the screen size of the mobile terminal to ensure the best visual effect and space utilization.

[0053] Maximum zoom ratio (maxScale) and minimum zoom ratio (minScale): define the range of page zoom. maxScale is usually 1.0, indicating the original size of the page, while minScale may be less than 1.0 and is used to present the zoom effect of the page when the user scrolls.

[0054] Maximum rotation ratio (rotationRatio): controls the degree of page rotation. It is combined with the scale ratio and offset to define the rotation angle of the page.

[0055] Rotation Radius: Based on the maximum height of the page, it is used to calculate the offset of the page on the Y axis and affect the rotation effect.

[0056] Minimum Line Spacing: The minimum distance between adjacent cells. When it is a negative number, it means that a certain degree of overlap is allowed between pages, which can increase visual appeal in some designs.

[0057] In an example, the following initial values ​​are set in the initialization method of the CustomCollectionViewFlowLayout subclass:

[0058] The maximum width and height size finalItemSize = CGSize(width:300.0,height:450.0), the maximum scaling ratio maxScale = 1.0, the minimum scaling ratio minScale = 0.7, the maximum rotation ratio rotationRatio = 0.5, the rotation radius rotationRadius = finalItemSize.height, and the minimum line spacing minimumLineSpacing = -30.

[0059] Figure 3 is a schematic diagram of an optional target page display method according to an embodiment of the present application; Figure 3 As shown, after the collection view is generated based on the initial parameter set, multiple cells may be generated, and there may be a certain overlap between the cells, such as the overlap of the shaded areas between the target page 302 and the cells 304 on both sides.

[0060] In an optional implementation, after setting the initial parameters of the streaming layout, you can enter the stage of calculating the sliding distance at the minimum zoom of the target page. The target page is the page that the user is currently focused on, which may be any one of multiple cells. The maximum sliding distance (distanceForMinScale) is the distance the user's finger moves when the page is scaled from fully centered to the minimum zoom ratio when the user's finger slides on the screen. The moving distance is the physical distance that the user's finger slides when the user touches the screen, such as the sliding distance in the x-axis direction calculated in pt (point) in iOS. The sliding distance at the minimum zoom is also the maximum effective distance that the user's finger slides.

[0061] The calculation formula is as follows: let distanceForMinScale = self.finalItemSize.width + self.minimumLineSpacing. This distance is based on the sum of the maximum width of the page and the minimum spacing between adjacent cells. It ensures that even when the page is reduced to the minimum scale, user operations are still valid and the page does not exceed the allowed interactive range.

[0062] Figure 4 is a schematic diagram of another optional target page display method according to an embodiment of the present application; Figure 4As shown, as the user drags, the target page 402 can be scaled according to the scaling ratio, and the centered cell 404 can be the maximum width and height. When the target page 402 is just at the minimum scaling ratio, the corresponding sliding distance can be the maximum sliding distance.

[0063] It should be noted that the offset (absDistance) represents the absolute value of the X-axis distance of the center point of the target page relative to the center point of the collection view container. This parameter reflects the relative position of the page in the collection view and the position change caused by the user's scrolling operation.

[0064] In an optional implementation, the X coordinate of the center point of the container (boundsMidX) can be obtained, and then the X coordinate of the center point of the target page (elementAttribute.center.x) can be obtained. The difference between the two and the absolute value can be obtained to obtain the offset let absDistance = abs(boundsMidX-elementAttribute.center.x). The calculation of the offset ensures that no matter whether the page is on the left or right side of the container, as long as the distance from the center point is equal, its scaling and rotation effects are consistent, thereby ensuring the symmetry and unity of the visual effect.

[0065] Figure 5 is a schematic diagram of another optional target page display method according to an embodiment of the present application; Figure 5 As shown, the distance between the target page center point 508 of the target page 502 and the container center point 506 of the container 504 may be an offset 510 of the target page, which may be regarded as a dragging distance of the target page 502 by the user.

[0066] The above implementation of the present application forms the basis for achieving the automatic rotation and zooming effect of the page. The set initial parameters provide standards for subsequent dynamic calculations; the obtained sliding distance defines the effective range of user operations; the calculated offset is used to accurately calculate the rotation angle and zoom ratio of the page, ensuring that each step of the operation can bring intuitive and consistent visual feedback, improve the user experience, and maintain the performance and response speed of the application.

[0067] In an optional embodiment, the above-mentioned determination of the zoom ratio of the target page in the collection view includes: when the offset of the target page is greater than or equal to the maximum sliding distance, determining the zoom ratio of the target page to be the minimum zoom ratio; when the offset of the target page is less than the maximum sliding distance, determining the ratio of the difference between the maximum sliding distance and the offset of the target page to the maximum sliding distance as a first ratio, and determining the zoom ratio of the target page by multiplying the product of the difference between the maximum zoom ratio and the minimum zoom ratio with the first ratio and the minimum zoom ratio, wherein the maximum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the zoom is maximum, and the minimum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the zoom is minimum.

[0068] As mentioned above, the offset absDistance may be the actual distance that the user currently moves to the target page, and the maximum sliding distance is the maximum effective distance. After exceeding the maximum sliding distance, increasing the offset will no longer change the zoom ratio of the target page.

[0069] It should be noted that when the offset of the target page is greater than or equal to the maximum sliding distance, this usually happens when the user scrolls the page to an extreme position, that is, when the page is at the maximum allowable distance away from the center of the collection view. At this time, the zoom ratio should be fixed to the minimum zoom ratio (minScale) to prevent the page from being further reduced beyond the visually acceptable range, ensuring that the page remains recognizable and readable even in the case of the maximum offset.

[0070] When the offset of the target page is less than the maximum sliding distance, it means that the page is in the visible area of ​​the collection view and the user operation does not reach the extreme position. In this case, the zoom ratio will be adjusted according to the dynamic change of the page position to achieve a more natural and continuous visual effect.

[0071] Figure 6 is a schematic diagram of another optional target page display method according to an embodiment of the present application; Figure 6 As shown, the offset 610 between the target page center point 608 of the target page 602 and the container center point 606 of the container 604 is greater than Figure 5 The offset 510 in the target page 602 is larger, but the zoom ratio of the target page 602 is the same as Figure 5 The zoom ratio of the target page 502 in the same. This is because after the offset is greater than the maximum sliding distance, the zoom ratio of the target page remains unchanged.

[0072] In an optional implementation, in the second case, the calculation process of the scaling ratio is as follows: First, calculate the difference between the maximum sliding distance and the current offset of the target page, and then divide this difference by the maximum sliding distance to obtain a first ratio. This ratio reflects the distance ratio of the page from the current position to the fully zoomed (i.e., minScale) state, and is a key parameter for dynamically adjusting the scaling ratio. Subsequently, multiply the difference between the maximum scaling ratio (maxScale) and the minimum scaling ratio (minScale) by the first ratio, and then add the result to the minimum scaling ratio (minScale). The relationship between the current position of the page and the maximum sliding distance, as well as the preset scaling ratio range, are combined to dynamically determine the scaling ratio of the target page. Specifically, the calculation method is as follows: scale = minScale + (maxScale-minScale) * (1-absDistance / distanceForMinScale)

[0073] Among them, 1-absDistance / distanceForMinScale is actually the first ratio mentioned above, which ensures that the page smoothly transitions from the original size to the minimum zoom ratio without abrupt visual changes. When the page is close to the center point of the collection view, the zoom ratio is close to maxScale, providing a larger and clearer page display; when the page is far away from the center point, the zoom ratio gradually approaches minScale, achieving a natural visual reduction.

[0074] Through the above implementation of the present application, by monitoring the offset of the target page, that is, the relative position of the center point of the page and the center point of the collection view container, the zoom ratio can be adjusted in real time according to the actual position of the page in the collection view, and position-related visual feedback can be achieved. The preset maximum zoom ratio (maxScale) and minimum zoom ratio (minScale) provide upper and lower limits for the zoom effect, ensuring that no matter how the user operates, the page zoom will not exceed these limits, maintaining a good user experience and readability of the interface. The use of ratio calculation ensures that the dynamic change of the zoom ratio is continuous and smooth, avoiding visual mutations and enhancing the smoothness and naturalness of the user's scrolling operation.

[0075] This implementation improves the user's interactive experience when browsing the collection view, and also optimizes the page display effect, making the page zoom more dynamic and natural, and increasing the visual appeal. It implements intelligent dynamic adjustment of the zoom ratio of the target page in the collection view, taking into account the real-time changes in the page position and ensuring the visual comfort and consistency of the zoom effect, providing users with a more immersive and smooth browsing experience.

[0076] In an optional embodiment, the above-mentioned determination of the center point distance between the center point of the target page and the content center point of the collection view includes: determining one-half of the width of the container of the collection view as the x-axis coordinate of the center point of the collection view; determining the center point distance as the sum of the difference between the content offset of the collection view on the x-axis and the x-axis coordinate of the center point of the target page and the x-axis coordinate of the center point of the collection view, wherein the content offset is used to indicate the horizontal offset of the content relative to the origin of the collection view in response to a scrolling operation.

[0077] It should be noted that the center point distance, that is, the horizontal distance between the center point of the target page and the center point of the collection view container content, is an important basis for calculating the page zoom ratio and rotation angle. This distance reflects the relative position of the page in the collection view. Since the center point coordinates of the collection view determine the degree of offset of the page relative to the center, the x-axis coordinate of this center point must be calculated first. Half of the width of the collection view container (i.e. collectionView.bounds.width / 2.0) becomes the x-axis coordinate of the center point of the collection view. This coordinate represents the geometric center point of the visible area of ​​the collection view.

[0078] In an optional implementation, the center point distance (distance) between the target page and the center point of the collection view may be calculated by the following formula:

[0079] letdistance=collectionView.contentOffset.x+collectionView.bounds.width / 2.0-elementAttribute.center.x

[0080] Among them, collectionView can indicate an initialized collection view instance, collectionView.bounds.width / 2.0 is used to indicate the x-axis coordinate of the center point of the collection view. contentOffset.x is used to indicate the content offset of the collection view on the x-axis, reflecting the horizontal offset of the collection view content relative to the origin after the user scrolls, which is dynamic. elementAttribute.center.x is used to indicate the x-axis coordinate of the center point of the target page, indicating the center position of the target page itself on the x-axis.

[0081] It should be noted that the horizontal distance of the target page relative to the center of the collection view changes dynamically, because contentOffset.x changes with the user's scrolling operation. The larger the distance value, the farther the target page is from the center of the collection view, which will directly affect the calculation of the scaling ratio and rotation angle in subsequent steps.

[0082] In an optional embodiment, the above process utilizes the geometric characteristics of the collection view container and the effect of the user's scrolling operation on the content offset to accurately calculate the center point distance between the target page and the center point of the collection view. The calculation result of this distance, combined with the preset zoom ratio and rotation angle calculation logic, can ensure that the visual effect of the page is both natural and intuitive. For example, when the distance increases, the page zoom ratio decreases and the rotation angle changes accordingly, thereby simulating an effect of "moving away" from the center of the user's line of sight, enhancing the sense of space and dynamics. Conversely, when the distance decreases, the page gradually enlarges and reduces rotation, providing a visual experience of "close" to the center of the user's line of sight, allowing users to obtain more immersive and continuous visual feedback when browsing the collection view.

[0083] Through the above implementation of the present application, the relative position of the target page in the collection view can be accurately reflected, and based on this information, the visual properties of the page, such as scaling and rotation, can be dynamically adjusted, thereby creating a richer and more interactive user interface.

[0084] In an optional implementation, the above-mentioned calculation of the rotation angle of the target page based on the center point distance and the width of the collection view container includes: determining the ratio of the center point distance to the width of the collection view container as the relative distance; determining the product of the unit rotation angle, the relative distance and the maximum rotation ratio as the rotation angle of the target page, wherein the unit rotation angle is used to indicate the rotation angle corresponding to the unit distance, and the maximum rotation ratio is used to indicate the maximum rotation amplitude of the target page relative to the center point.

[0085] In an optional implementation, the ratio between the center point distance (distance) between the target page and the center point of the collection view container content and the collection view container width (collectionView.bounds.width) needs to be calculated first, which can be defined as a relative distance. The role of the relative distance is to convert the absolute value of the center point distance into a standardized proportional value, so that the total width of the container can be referenced when calculating the rotation angle later, ensuring the rationality and consistency of the rotation effect.

[0086] Then, the rotation angle (degrees) of the target page is calculated using the relative distance, unit rotation angle (rotationDegreesPerUnit) and maximum rotation ratio (rotationRatio). The unit rotation angle is a preset angle value, which indicates the rotation angle corresponding to the unit distance (or unit relative distance). It is used to control the sensitivity of page rotation, such as setting it to -90. The maximum rotation ratio defines the maximum limit of the rotation angle to ensure that the page rotation does not exceed the range expected by the designer, such as setting it to 0.5. The specific calculation formula is as follows:

[0087] letdegrees=rotationDegreesPerUnit*rotationRatio*distance / collectionVie w.bounds.width

[0088] As described in the formula, the multiplication result of the above three factors ensures that the page rotation angle is not only related to the current position of the page, but also based on the preset rotation sensitivity and restrictions. The final target page rotation angle not only meets the design intent, but also can change in real time with user operations, providing smooth and natural visual feedback.

[0089] Through the above implementation of the present application, the center point distance is converted into a relative distance, and the page position information can be standardized based on the container width, ensuring that even for containers of different sizes, the rotation angle of the page can be reasonably and consistently calculated. The setting of the unit rotation angle allows developers to adjust the sensitivity of page rotation according to the specific needs of the application. For example, a smaller unit rotation angle means that the page responds more delicately to scrolling operations and rotates more smoothly, which is suitable for scenarios that require fine control of the rotation effect. The maximum rotation ratio sets an upper limit for the rotation angle to prevent excessive rotation of the page from causing user dizziness or the interface to be difficult to read, ensuring that even in the case of large page offsets, the rotation effect is still within an acceptable range.

[0090] By calculating the relative distance and combining the unit rotation angle with the maximum rotation ratio, this application can intelligently determine the rotation angle of the target page. This not only ensures the natural and smooth page rotation effect, but also provides a highly customizable visual experience through standardized processing and sensitivity control, meeting the different requirements of different application scenarios for page rotation effects, and helping to improve user experience and appeal.

[0091] In an optional implementation, the above-mentioned method determines the position parameters of the three-dimensional transformation matrix based on the rotation radius and rotation angle of the target page, and updates the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, including: calculating the cosine value corresponding to the rotation angle; determining the difference between the rotation radius and the product of the rotation radius and the cosine value as the offset of the target page on the y-axis; creating a three-dimensional transformation matrix at the position of the offset of the target page on the y-axis translated along the y-axis; and updating the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio.

[0092] It should be noted that in three-dimensional space, the rotation of a page involves not only the transformation of angles, but also the positional offset during the rotation process, especially the offset on the Y axis, which is the key to achieving the rotation effect. The cosine function (cos) is used here to calculate the relationship between the page rotation angle and the rotation radius. Specifically, it is an important part of the calculation of the rotation radius and the Y-axis offset of the page during the rotation process. Since trigonometric functions require radians as parameters, the angle needs to be converted from degrees to radians. Therefore, the calculation formula is as follows:

[0093] let cosValue=abs(cos(.pi*(degrees) / 180.0))

[0094] Where degrees is the rotation angle of the target page. The radians corresponding to degrees can be obtained by multiplying π (pi) and the rotation angle and dividing by 180. This is because trigonometric functions in most programming languages ​​expect to receive parameters in radians. The absolute value of the cosine value is taken to ensure that the offset is always positive to avoid unexpected movement directions during rotation. cosValue is a variable used to store the rotation angle degrees converted to radians and calculate the absolute value of its cosine value.

[0095] It should be noted that with the cosine value of the rotation angle, the next goal is to calculate the offset of the target page on the Y axis (translateY). The calculation of this offset involves the rotation radius (RotationRadius) of the target page and the cosine value (CosValue) obtained above. The formula is as follows:

[0096] let translateY=RotationRadius-RotationRadius*CosValue

[0097] The above formula calculates the offset of the page on the Y axis relative to the rotation center point during the rotation process based on the rotation radius and the cosine value of the rotation angle. When the page rotates, its position on the Y axis will change dynamically according to the rotation angle and rotation radius. This calculation ensures that the page rotation effect is both natural and accurate.

[0098] In an optional embodiment, based on the offset on the Y axis, an initial three-dimensional transformation matrix can be created at the position where the target page needs to be rotated and scaled. This matrix is ​​of type CATransform3D and will be used to transform the page in three-dimensional space, including rotation, scaling and translation. Based on the CATransform3DMakeTranslation function provided by the CATransform3D system library and the offset translateY, an initial 3D transformation matrix object can be created that translates the offset translateY units along the Y axis, that is:

[0099] var transform3D=CATransform3DMakeTranslation(0,translateY,0);

[0100] Through the above implementation of the present application, the offset on the Y axis is calculated by the cosine value, which ensures that the position change of the page during the rotation process accurately reflects the relationship between the rotation angle and the rotation radius. In addition, the use of CATransform3D for matrix operations can make full use of GPU acceleration to achieve efficient and smooth three-dimensional graphics transformation, providing users with an immersive visual experience. The changes in the collection view are effectively used through the parameters of the target page in the collection view to achieve three-dimensional rotation and scaling of the page, thereby providing strong technical support and visual innovation for the dynamic display of pages in the collection view.

[0101] In an optional embodiment, the above-mentioned updating of the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio includes: rotating the three-dimensional transformation matrix around the z-axis according to the rotation angle of the target page; determining the product of the scaling ratio of the target page and the preset translation amount as the translation distance, and translating the three-dimensional transformation matrix on the y-axis by the translation distance; using the scaling ratio of the target page to scale the three-dimensional transformation matrix in the x-axis direction and the y-axis direction to obtain an updated three-dimensional transformation matrix.

[0102] It should be noted that after creating the three-dimensional transformation matrix, in the process of updating the three-dimensional transformation matrix using parameters, the following steps do not have a fixed order, and specific operations may include:

[0103] Rotate the 3D transformation matrix around the z-axis according to the rotation angle of the target page; this step is based on the rotation angle (degrees) of the target page, and uses the CATransform3DRotate function in CATransform3D to rotate the initial 3D transformation matrix. In three-dimensional space, rotation around the z-axis usually changes the position of the page on the X-axis and Y-axis, but does not change its position on the z-axis. In this way, the page will present a "rotating" visual effect in the collection view container as the rotation angle changes, enhancing the user's immersion and interactive experience.

[0104] This can be achieved through the following function:

[0105] transform3D=CATransform3DRotate(transform3D,pi*(degrees) / 180.0,0,0,1)

[0106] As mentioned earlier, transform3D is the 3D transformation matrix to be rotated. In the code, transform3D is a variable of type CATransform3D, which stores the current 3D transformation state. The CATransform3DRotate function performs the rotation operation based on this matrix and then returns a new matrix, which usually overwrites the original transform3D variable to reflect the latest transformation state. pi*(degrees) / 180.0 represents the angle of rotation in radians. As explained before, degrees is the degree representation of the rotation angle, but CATransform3DRotate requires the angle to be entered in radians. Pi is the symbol representing the mathematical constant π (pi), and its value is approximately 3.14159. Therefore, degrees is first converted to radians, and the conversion from degrees to radians is completed by .pi*(degrees) / 180.0. The three numbers 0, 0, and 1 define the rotation axis. CATransform3DRotate allows you to specify an axis and an angle, and then it will rotate the 3D object according to this axis and angle. In this example, 0,0,1 means the rotation axis is the Z axis, which means the object will rotate around the depth direction of the screen. This depth direction is usually perpendicular to the screen, so the page or cell will rotate outward or inward along the screen.

[0107] The product of the target page's scaling ratio and the preset translation amount is determined as the translation distance, and the three-dimensional transformation matrix is ​​translated by the translation distance on the y-axis; the combined use of the scaling ratio (ScaleRatio) and the preset translation amount (scaleOffsetMultiplier) is the key to achieving the page translation and scaling effects in three-dimensional space. Specifically, the scaling ratio reflects the change in size of the page, while the preset translation amount is to cooperate with the rotation effect to ensure that the page can be correctly positioned in its new position after rotation. If scaleOffsetMultiplier = 100, the target page scale value (scale) is moved down by 100pt in the Y-axis direction within the scaling range. By multiplying the scaling ratio by the preset translation amount, the translation distance can be obtained, which represents the specific distance the page needs to move on the Y-axis. Using the CATransform3DTranslate function, the three-dimensional transformation matrix can be translated in the Y-axis direction to ensure that the position of the page is updated after rotation.

[0108] This can be achieved through the following function:

[0109] transform3D=CATransform3DTranslate(transform3D,0,scaleOffsetMultiplier*(1-scale),0)

[0110] The three-dimensional transformation matrix is ​​scaled in the x-axis and y-axis directions using the scaling ratio of the target page to obtain the updated three-dimensional transformation matrix; after rotating and translating the matrix, the three-dimensional transformation matrix can also be scaled according to the scaling ratio (ScaleRatio) of the target page to ensure that the page is visually the correct size. This operation is completed through the CATransform3DScale function, which allows us to specify the scaling factors on the X-axis and Y-axis respectively, so as to adjust the size of the page in two directions. The scaling operation, combined with rotation and translation, jointly determines the position, size and direction of the final page in three-dimensional space, providing users with a more intuitive and natural interactive experience.

[0111] This can be achieved through the following function:

[0112] transform3D=CATransform3DScale(transform3D,scale,scale,1)

[0113] In an optional implementation, after the updated three-dimensional transformation matrix is ​​obtained, it can be applied to the layout attributes of the target page to achieve the three-dimensional rotation and scaling effects of the target page.

[0114] Figure 7 is a schematic diagram of another optional target page display method according to an embodiment of the present application; Figure 7 As shown, in the application, after obtaining the user's touch operation on a cell in the collection view, the operation can be responded to and the cell can be determined as the target page 704, such as Figure 7 As shown in (a), the cell 702 is displayed in the center with the maximum width and height, and the target page 704 is displayed on the side with a corresponding zoom ratio. In response to the drag operation on the target page 704, the target page 704 can be dragged to the left, as shown in FIG. Figure 7 As shown in (b), the rotation angle of the centrally displayed cell is the same as the rotation angle of the target page, so the cell 706 and the target page 708 have the same size. Figure 7 As shown in (c), the target page 712 is displayed in the center and is displayed with the maximum width and height, while the cell 710 is displayed on the left side with a corresponding zoom ratio. Figure 7 In the process (a)-(c) in FIG. 1 , the transformation of the target page and the cell does not change suddenly, but the three-dimensional transformation matrix is ​​periodically calculated and applied to the target page and the cell to dynamically change the display mode of the target page and the cell.

[0115] Through the above implementation of the present application, the CATransform3D matrix can integrate three transformations of rotation, translation and scaling to form an overall three-dimensional space transformation effect. By updating the CATransform3D matrix in steps, we can accurately control the conversion of the page from the original state to the dynamic state, including the rotation angle of the page, the translation distance on the Y axis, and the scaling ratio on the X axis and Y axis. Through the rotation, translation and scaling operations of the matrix, multi-dimensional dynamic control of the page can be achieved, thereby providing a richer and more delicate visual transformation effect. The efficient computing power of CATransform3D enables users to enjoy a smooth and delay-free visual experience even in frequent page switching and dynamic transformation. The dynamic combination of rotation and translation provides users with a more intuitive way of interaction, enhances the spatial sense and dynamic sense of the page in the collection view, and enhances the user's sense of immersion. It is possible to achieve three-dimensional dynamic control of the page in the collection view, bringing users a more vivid, attractive and smooth interactive experience.

[0116] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0117] According to another aspect of the embodiment of the present application, a target page display device for implementing the target page display method is also provided. Figure 8 As shown, the device comprises:

[0118] A zoom ratio calculation unit 802, used to determine the zoom ratio of the target page in the collection view, and the center point distance between the target page and the content center point of the collection view, wherein the content center point of the collection view is used to indicate the center point of the visible area of ​​the collection view;

[0119] A rotation angle calculation unit 804, used to calculate the rotation angle of the target page according to the center point distance and the width of the container of the collection view;

[0120] A three-dimensional matrix determination unit 806 is used to determine the position parameters of the three-dimensional transformation matrix based on the rotation radius and the rotation angle of the target page, and update the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate the display position of the target page;

[0121] The layout updating unit 808 is configured to display the target page according to the updated three-dimensional conversion matrix.

[0122] Optionally, the above-mentioned zoom ratio calculation unit 802 includes: a collection view generation module, which is used to generate multiple cells in the collection view according to an initial parameter set, wherein the target page is any one of the multiple cells; a maximum sliding distance determination module, which is used to determine the sum of the maximum width and the minimum line spacing of the target page as the maximum sliding distance corresponding to the target page under the minimum zoom condition, wherein the maximum width of the target page is used to indicate the width of the target page when the container of the collection view is centered, and the minimum line spacing is used to indicate the minimum distance between adjacent cells; an offset determination module, which is used to determine the absolute value of the difference between the center point of the target page and the center point of the container of the collection view as the offset of the target page.

[0123] Optionally, the above-mentioned zoom ratio calculation unit 802 also includes: a first zoom ratio calculation module, used to determine that the zoom ratio of the target page is the minimum zoom ratio when the offset of the target page is greater than or equal to the maximum sliding distance; a second zoom ratio calculation module, used to determine the ratio of the difference between the maximum sliding distance and the offset of the target page to the maximum sliding distance as a first ratio when the offset of the target page is less than the maximum sliding distance, and determine the zoom ratio of the target page by multiplying the product of the difference between the maximum zoom ratio and the minimum zoom ratio with the first ratio and the sum of the minimum zoom ratio, wherein the maximum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the maximum zoom is applied, and the minimum zoom ratio is used to indicate the ratio of the page size of the target page to the original size when the minimum zoom is applied.

[0124] Optionally, the above-mentioned zoom ratio calculation unit 802 also includes: a center coordinate calculation module, used to determine half of the width of the container of the collection view as the x-axis coordinate of the center point of the collection view; a center point distance calculation module, used to determine the center point distance as the sum of the difference between the content offset of the collection view on the x-axis and the x-axis coordinate of the center point of the target page and the x-axis coordinate of the center point of the collection view, wherein the content offset is used to indicate the horizontal offset of the content relative to the origin of the collection view in response to a scrolling operation.

[0125] Optionally, the rotation angle calculation unit 804 includes: a relative distance calculation module, used to determine the ratio of the center point distance to the width of the container of the collection view as the relative distance; a rotation angle calculation module, used to determine the product of the unit rotation angle, the relative distance and the maximum rotation ratio as the rotation angle of the target page, wherein the unit rotation angle is used to indicate the rotation angle corresponding to the unit distance, and the maximum rotation ratio is used to indicate the maximum rotation amplitude of the target page relative to the center point.

[0126] Optionally, the above-mentioned three-dimensional matrix determination unit 806 includes: a cosine calculation module, used to calculate the cosine value corresponding to the rotation angle; a y-axis offset calculation module, used to determine the difference between the rotation radius and the product of the rotation radius and the cosine value as the offset of the target page on the y-axis; a matrix creation module, used to create a three-dimensional transformation matrix at the position of the offset of the target page on the y-axis translated along the y-axis; a matrix update module, used to update the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio.

[0127] Optionally, the above-mentioned matrix update module is also used to: rotate the three-dimensional transformation matrix around the z-axis according to the rotation angle of the target page; determine the product of the scaling ratio of the target page and the preset translation amount as the translation distance, and translate the three-dimensional transformation matrix on the y-axis by the translation distance; use the scaling ratio of the target page to scale the three-dimensional transformation matrix in the x-axis direction and the y-axis direction to obtain an updated three-dimensional transformation matrix.

[0128] Optionally, in this embodiment, the embodiments to be implemented by the above-mentioned various unit modules can refer to the above-mentioned various method embodiments, which will not be repeated here.

[0129] According to another aspect of the embodiment of the present application, an electronic device for implementing the above-mentioned target page display method is also provided. The electronic device may be Fig. 9 The terminal device or server shown in the figure. This embodiment is described by taking the electronic device as a terminal device as an example. Fig. 9 As shown, the electronic device includes a memory 902 and a processor 904. The memory 902 stores a computer program, and the processor 904 is configured to execute the steps in any of the above method embodiments through the computer program.

[0130] Optionally, in this embodiment, the electronic device may be located in at least one network device among a plurality of network devices of a computer network.

[0131] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:

[0132] S1, determining a zoom ratio of a target page in a collection view, and a center point distance between a center point of the target page and a content center point of the collection view, wherein the content center point of the collection view is used to indicate a center point of a visible area of ​​the collection view;

[0133] S2, calculate the rotation angle of the target page according to the center point distance and the width of the collection view container;

[0134] S3, determining position parameters of a three-dimensional transformation matrix based on a rotation radius and a rotation angle of the target page, and updating parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control three-dimensional changes of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page;

[0135] S4, displaying the target page according to the updated three-dimensional transformation matrix.

[0136] Alternatively, a person skilled in the art may understand that: Fig. 9The structure shown is for illustration only, and the electronic device may also be a smart phone (such as an iOS phone, etc.), a tablet computer, a PDA, a mobile Internet device (Mobile Internet Devices, MID), a PAD, and other terminal devices. Fig. 9 The electronic device and the electronic equipment described above are not limited in structure. Fig. 9 More or fewer components (such as network interfaces, etc.) as shown in, or with Fig. 9 Different configurations are shown.

[0137] Among them, the memory 902 can be used to store software programs and modules, such as the program instructions / modules corresponding to the method and device for displaying the target page in the embodiment of the present application. The processor 904 executes various functional applications and data processing by running the software programs and modules stored in the memory 902, that is, realizing the above-mentioned method for displaying the target page. The memory 902 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 902 may further include a memory remotely arranged relative to the processor 904, and these remote memories may be connected to the terminal via a network. Examples of the above-mentioned networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Among them, the memory 902 can be specifically, but not limited to, used to store information such as image data and text data. As an example, such as Fig. 9 As shown, the memory 902 may include, but is not limited to, a scaling ratio calculation unit 802, a rotation angle calculation unit 804, a three-dimensional matrix determination unit 806, and a layout update unit 808 in the display device of the target page. In addition, other module units in the display device of the target page may also be included but are not limited to, which will not be repeated in this example.

[0138] Optionally, the transmission device 906 is used to receive or send data via a network. Specific examples of the above-mentioned network may include a wired network and a wireless network. In one example, the transmission device 906 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices and routers via a network cable so as to communicate with the Internet or a local area network. In one example, the transmission device 906 is a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0139] In addition, the electronic device further includes: a display 908 for displaying a target page in the interface; and a connection bus 910 for connecting various module components in the electronic device.

[0140] In other embodiments, the terminal device or server may be a node in a distributed system, wherein the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes through network communication. Among them, the nodes may form a peer-to-peer (P2P) network, and any form of computing device, such as a server, terminal or other electronic device, may become a node in the blockchain system by joining the peer-to-peer network.

[0141] According to one aspect of the present application, a computer program product is provided, the computer program product comprising a computer program / instruction, the computer program / instruction comprising a program code for executing the method shown in the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium. When the computer program is executed by a central processing unit, various functions provided by the embodiments of the present application are executed.

[0142] According to one aspect of the present application, a computer-readable storage medium is provided, and a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the above-mentioned method for displaying a target page.

[0143] Optionally, in this embodiment, the computer-readable storage medium may be configured to store a computer program for performing the following steps:

[0144] S1, determining a zoom ratio of a target page in a collection view, and a center point distance between a center point of the target page and a content center point of the collection view, wherein the content center point of the collection view is used to indicate a center point of a visible area of ​​the collection view;

[0145] S2, calculate the rotation angle of the target page according to the center point distance and the width of the collection view container;

[0146] S3, determining position parameters of a three-dimensional transformation matrix based on a rotation radius and a rotation angle of the target page, and updating parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control three-dimensional changes of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page;

[0147] S4, displaying the target page according to the updated three-dimensional transformation matrix.

[0148] Optionally, in this embodiment, a person of ordinary skill in the art may understand that all or part of the steps in the various methods of the above embodiments may be completed by instructing hardware related to the terminal device through a program, and the program may be stored in a computer-readable storage medium, and the storage medium may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, etc.

[0149] If the integrated units in the above embodiments are implemented in the form of software functional units and sold or used as independent products, they can be stored in the above computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling one or more computer devices (which can be personal computers, servers or network devices, etc.) to execute all or part of the steps of the above methods in each embodiment of the present application.

[0150] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0151] In the several embodiments provided in the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0152] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, each functional unit in each embodiment of the present application may be integrated into a processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated units may be implemented in the form of hardware or in the form of software functional units.

[0153] The above are only preferred implementations of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A method for displaying a target page, characterized in that: include: Determine a zoom ratio of a target page in a collection view, and a center point distance between a center point of the target page and a content center point of the collection view, wherein the content center point of the collection view is used to indicate a center point of a visible area of ​​the collection view; Calculate the rotation angle of the target page according to the center point distance and the width of the container of the collection view; Determining position parameters of a three-dimensional transformation matrix based on a rotation radius of the target page and the rotation angle, and updating parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page; The target page is displayed according to the updated three-dimensional transformation matrix.

2. The method according to claim 1, characterized in that Before determining the zoom ratio of the target page in the collection view, including: Generating a plurality of cells in the collection view according to an initial parameter set, wherein the target page is any one of the plurality of cells; Determine the sum of the maximum width and the minimum line spacing of the target page as the maximum sliding distance corresponding to the target page under the condition of minimum zoom, wherein the maximum width of the target page is used to indicate the width of the target page when it is displayed in the center of the container of the collection view, and the minimum line spacing is used to indicate the minimum distance between adjacent cells; An absolute value of a difference between a center point of the target page and a center point of a container of the collection view is determined as an offset of the target page.

3. The method according to claim 2, characterized in that The determining the zoom ratio of the target page in the collection view includes: When the offset of the target page is greater than or equal to the maximum sliding distance, determining the zoom ratio of the target page to be the minimum zoom ratio; In the case that the offset of the target page is less than the maximum sliding distance, the ratio of the difference between the maximum sliding distance and the offset of the target page to the maximum sliding distance is determined as a first ratio, and the sum of the product of the difference between the maximum zoom ratio and the minimum zoom ratio and the first ratio and the minimum zoom ratio is determined as the zoom ratio of the target page, wherein the maximum zoom ratio is used to indicate the ratio of the page size of the target page to the original size under the maximum zoom, and the minimum zoom ratio is used to indicate the ratio of the page size of the target page to the original size under the minimum zoom.

4. The method according to claim 2, characterized in that: Determining a center point distance between a center point of the target page and a content center point of the collection view includes: Determine half of the width of the container of the collection view as the x-axis coordinate of the center point of the collection view; The center point distance is determined as the sum of the difference between the content offset of the collection view on the x-axis and the x-axis coordinate of the center point of the target page and the x-axis coordinate of the center point of the collection view, wherein the content offset is used to indicate the horizontal offset of the content relative to the origin of the collection view in response to a scrolling operation.

5. The method according to claim 4, characterized in that The calculating the rotation angle of the target page according to the center point distance and the width of the container of the collection view includes: Determine a ratio of the center point distance to the width of the container of the collection view as a relative distance; The product of the unit rotation angle, the relative distance and the maximum rotation ratio is determined as the rotation angle of the target page, wherein the unit rotation angle is used to indicate the rotation angle corresponding to the unit distance, and the maximum rotation ratio is used to indicate the maximum rotation amplitude of the target page relative to the center point.

6. The method according to any one of claims 1 to 5, characterized in that The determining the position parameters of the three-dimensional transformation matrix based on the rotation radius of the target page and the rotation angle, and updating the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, includes: Calculate the cosine value corresponding to the rotation angle; Determine the difference between the rotation radius and the product of the rotation radius and the cosine value as the offset of the target page on the y-axis; Creating the three-dimensional transformation matrix at a position where the target page is translated along the y-axis by an offset on the y-axis; The parameters of the three-dimensional transformation matrix are updated according to the rotation angle and the scaling ratio.

7. The method according to claim 6, characterized in that The updating of the parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio includes: Rotate the three-dimensional transformation matrix around the z-axis according to the rotation angle of the target page; The product of the zoom ratio of the target page and the preset translation amount is determined as a translation distance, and the three-dimensional transformation matrix is ​​translated on the y-axis by the translation distance; The three-dimensional transformation matrix is ​​scaled in the x-axis direction and the y-axis direction using the scaling ratio of the target page to obtain the updated three-dimensional transformation matrix.

8. A target page display device, characterized in that: include: a zoom ratio calculation unit, used to determine the zoom ratio of a target page in the collection view, and a center point distance between a center point of the target page and a content center point of the collection view, wherein the content center point of the collection view is used to indicate a center point of a visible area of ​​the collection view; A rotation angle calculation unit, used to calculate the rotation angle of the target page according to the center point distance and the width of the container of the collection view; a three-dimensional matrix determination unit, configured to determine position parameters of a three-dimensional transformation matrix based on a rotation radius of the target page and the rotation angle, and to update parameters of the three-dimensional transformation matrix according to the rotation angle and the scaling ratio, wherein the three-dimensional transformation matrix is ​​used to control the three-dimensional change of the target page, and the position parameters of the three-dimensional transformation matrix are used to indicate a display position of the target page; A layout updating unit is used to display the target page according to the updated three-dimensional conversion matrix.

9. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. 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 7 through the computer program.

Images