Design method of 3D effect carousel graph

Abstract

The invention discloses a design method of a 3D effect carousel graph. The design method comprises the following steps: S1, creating a custom layout class inheriting subclasses of a waterfall flow layout class; s2, rewriting a layout attribute method of elements in a region in the customized layout class created in the step S1 to apply a 3D effect; s3, creating a new waterfall flow element subclass object, and defining the content of the carousel graph in the new waterfall flow element subclass object; s4, creating a view controller containing a waterfall flow class, and using the user-defined layout class as the layout of the view controller; and S5, periodically rolling to the next carousel item by using a timer or other mechanisms, and realizing automatic carousel of the picture by modifying the content offset attribute. The invention aims to solve the limitations of a carousel graph technology in the related technologies, including the defects of a 2D carousel technology and the characteristics of lack of flexibility, tedious integration steps and limited support for image formats and interactive design of an existing 3D carousel technology.

Description

Technical Field

[0001] The present invention relates to the field of Internet and mobile terminal technology, and in particular to a design method for a 3D effect carousel image. Background Art

[0002] In current mobile app development, carousels are a popular visual element, widely used to display product images, advertisements, or news headlines. Traditional 2D carousels are popular with developers due to their simplicity and low resource consumption. However, with the advancement of mobile device graphics processing capabilities and increasing user expectations for user interface experience, 2D carousels are becoming less visually appealing and less interactive. To provide a more immersive and engaging user experience, developers are beginning to experiment with 3D carousel displays.

[0003] Existing 3D carousel implementations often face performance bottlenecks, especially on low-performance mobile devices. Rendering multiple 3D images can easily cause lag and delay, impacting the user experience. Furthermore, many existing 3D carousel solutions lack flexibility, with limited support for image formats and interactive designs, making it difficult for developers to apply these technologies in different scenarios. Due to these limitations, developers often need to compromise between the attractiveness of the carousel and the performance of their applications, which limits the potential for innovation and high-quality applications. Therefore, designing a high-performance, easy-to-integrate 3D carousel that supports a variety of interactive designs has significant practical and commercial value for mobile app developers. Summary of the Invention

[0004] The purpose of this application is to propose a design method for a 3D effect carousel to address the limitations of carousel technology in related technologies, including the shortcomings of 2D carousel technology and the lack of flexibility, cumbersome integration steps, and limited support for image formats and interactive design of existing 3D carousel technology.

[0005] In order to solve the above technical problems, the present application provides a design method for a 3D effect carousel, comprising the following steps:

[0006] S1. Create a custom layout class (CustomFlowLayout) that inherits from the waterfall flow layout class (UICollectionViewFlowLayout);

[0007] S2. In the custom layout class created in step S1, override the layout attribute method (layoutAttributesForElementsInRect) of the elements in the region to apply the 3D effect.

[0008] S3. Create a new waterfall element subclass object and define the content of the carousel in it; for example, pictures.

[0009] S4. Create a view controller that contains a waterfall class and use the custom layout class as its layout;

[0010] S5. Use a timer or other mechanism to periodically scroll to the next carousel item, and implement automatic image rotation by modifying the content offset (contentOffset) property.

[0011] Furthermore, in step S2, a rotation animation (CATransform3D) is used to achieve a 3D rotation effect of the carousel image.

[0012] Furthermore, the specific steps of using rotation animation (CATransform3D) to achieve the 3D rotation effect of the carousel image include:

[0013] S21. Initialize an attributes array to receive the layout attribute arrays of all elements calculated for a given rectangular area (rect) in the parent class;

[0014] S22. Define a visualization area (visibleRect) of a drawing area structure (CGRect), which represents the rectangle of the current visible area of ​​the collectionView object. The origin of the visualization area of ​​the structure is set to the offset of the collectionView object to indicate the current scroll position, and the size of the visualization area of ​​the structure is set to the size of the collectionView object to indicate the size, which is usually the size of the screen visible area.

[0015] S23. traverse each layout attribute in the attribute array;

[0016] S24. Check the size and position of the attribute in the current loop to determine whether it overlaps with the given rectangular area, and ensure that subsequent operations are performed only when this condition is met and overlap occurs immediately;

[0017] S25. Define a floating-point distance to represent the horizontal distance between the x-coordinate of the attribute center point and the x-coordinate of the visible area center point.

[0018] S26. Define a standard distance of floating-point type to standardize the horizontal distance. The specific standardization operation is to divide the horizontal distance by the width of each waterfall element plus the minimum interval between waterfall elements to obtain a standardized distance relative to the width and interval of the waterfall elements.

[0019] S27. Compare the absolute value of the horizontal distance, i.e., the absolute distance from the center of the waterfall element to the center of the visible area, with the width of the waterfall object. Only when the absolute distance from the center of the waterfall element to the center of the visible area is less than the width of the waterfall object, perform the subsequent transformation effect.

[0020] S28. Define a scaling factor, where the scaling factor is calculated as follows: 1 minus the difference between the absolute values ​​of the standard horizontal distances, multiplied by 0.3, plus 1. The closer the center of the waterfall element is to the center of the visible area, the closer the scaling factor is to 1.3 (1+0.3); and the waterfall element farther from the center will have a scaling factor closer to 1. It should be understood that the 1.3 mentioned here is not a fixed value, but a rough value that can be adjusted according to the actual usage scenario and display effect.

[0021] S29. Perform a three-dimensional scaling transformation on the layout attribute using the scaling factor value calculated in S28; apply the same scaling factor to both the x and y axes, while leaving the z axis unchanged (maintaining it at 1.0); set the z coordinate value of the layout attribute element to 1 (the default value of the z coordinate is 0) to ensure that the items with the transformed effect are visually located above other items that are not transformed;

[0022] S30. The method returns an array attribute collection containing all processed (possibly applied scaling and z-coordinate) layout attributes; in this way, when the waterfall class uses these attributes, it will layout its waterfall elements according to these attributes.

[0023] Furthermore, the specific steps of creating a new waterfall element subclass object to define the content of the carousel in step S3 include:

[0024] S31. Declare an image display component to display carousel images;

[0025] S32, initializing the new waterfall element object and creating an instance;

[0026] S33. Create an instantiation object of the picture display component class to be used as a control for displaying pictures, and set the size and position parameters of the control for displaying pictures to match the boundary size attributes of the waterfall element subclass object;

[0027] S34, setting the fill mode for the carousel image display and cropping the part that exceeds the boundary;

[0028] S35. Add a control for displaying an image to the view hierarchy. Here, it is added to the contentView property of the waterfall element subclass object to carry custom content.

[0029] S36. Return the initialized waterfall element instance;

[0030] S37. Provide a public interface to set the image in the waterfall element instance. The parameter is an image type object or a link to a network image, and render the image on the image display control.

[0031] Furthermore, the step S4 includes:

[0032] S41. Create and initialize an instantiation object of a custom layout class type;

[0033] S42. Create and initialize an instantiation object of waterfall type, and set the size and position parameters of the waterfall instantiation object based on the current controller view;

[0034] S43, using the custom layout object as the layout basis of the waterfall flow object;

[0035] S44. Use the controller as the data source object and proxy object of the waterfall object, where the controller complies with the protocol of the waterfall object and provides necessary methods for the collection view to query the carousel data to be displayed;

[0036] S45. Register the waterfall element class defined in step S3 to the collection view and set a reuse identifier for reusing cells in the data source method;

[0037] S46: Create a data source array for the carousel image, where the data source array needs to contain information about the carousel images. The carousel images are static images stored locally or online images, and render the images to the image display control in step S3;

[0038] S47. Add the waterfall object created in step S4 to the root view of the controller to ensure that the waterfall object can be rendered and displayed in the view hierarchy of the current view controller.

[0039] Furthermore, the step S5 includes:

[0040] S51. Create and initialize a timer (NSTimer) instantiation object to perform periodic operations;

[0041] Among them, the time interval for the timer to be triggered is 3.0 seconds, which means that the function method of the related scrolling animation is called once every 3.0 seconds. The repeat parameter is set to YES to indicate that the timer will be triggered repeatedly.

[0042] S52, obtaining the horizontal scroll offset (currentOffset.x) of the waterfall instantiated object in step S4;

[0043] S53. Calculate the next offset to be scrolled to, that is, the position of the next element, where the specific value is the current offset plus the width of the collection view;

[0044] S54. Check whether the new offset exceeds the width of the collection view content, that is, determine whether the new offset is behind the last element. If so, reset the offset to 0, so that you can return to the first element;

[0045] S55. Use the setContentOffset method to update the offset of the collection view. The animated parameter (animated) is set to YES to indicate that scrolling will have an animated effect.

[0046] Furthermore, when a sliding start instruction from the user is detected, the timer is cleared; and when a sliding end instruction from the user is detected, the timer is restarted.

[0047] The beneficial effects of the present invention are: proposing a design method for a 3D effect carousel image, which can manage the image display controls associated with the carousel image component through a singleton mode, realize the image display controls used by the global management of the application, and use a preset number to control the number of image display controls to be created, thereby reducing memory consumption. In addition, the use of a carousel image singleton management class can also avoid problems such as the inability to recycle memory in a timely manner and memory redundancy caused by the frequent creation and destruction of image display controls, thereby enhancing the stability of the application operation. In addition, the carousel image singleton management class runs throughout the life cycle of the application and can be used at any time, which not only improves the display efficiency of the carousel image component, but also simplifies the development process of the carousel image component. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the following drawings only show certain embodiments of the present invention and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without creative work.

[0049] Figure 1 shows a block diagram of an exemplary system 100 in which the present invention may be applied;

[0050] Figure 2 1. A flowchart of a picture display method 200 according to an embodiment of the present invention is shown;

[0051] Figure 3 FIG. 3 is a schematic diagram showing a picture display module 300 according to an embodiment of the present invention. DETAILED DESCRIPTION

[0052] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application belongs; the terms used in the specification of the application are only for the purpose of describing specific embodiments and are not intended to limit this application.

[0053] In order to enable people skilled in the art to better understand the present application, the technical solution in the examples of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0054] Figure 1 The structure of a terminal 100 according to one embodiment of the present invention is shown. The terminal 100 may be a series of terminal devices 101, 102, and 103 based on the iOS operating system, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the terminal devices 101, 102, and 103 and the server 105. The network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0055] Users can establish connections between terminal devices 101, 102, and 103 and server 105 via network 104 to receive information from server 105 or send information to server 105. Various client applications with network functions can be installed on terminal devices 101, 102, and 103, such as audio and video player applications, instant messaging applications, shopping mall applications, news and information applications, etc.

[0056] The terminal devices 101, 102, and 103 in this embodiment can be various devices based on the iOS operating system and equipped with a display screen, such as an iPhone, an iPad tablet, a Mac computer, a WatchOS watch, and the like.

[0057] The server 105 in this embodiment may be a server that provides various services, and here mainly refers to a background server that can provide background information services for the devices 101 , 102 , and 103 .

[0058] It should be noted that the carousel image display method provided in the embodiment of the present application is generally executed by the server and the terminal device in cooperation. Specifically, it means that the background server provides the data source information containing the image to the terminal device, and the client application on the terminal device that integrates the carousel image component displays it.

[0059] It should be noted that Figure 1 The number of terminal devices, networks, and servers is merely an example and can be any number depending on the specific needs of the implementation.

[0060] refer to Figure 2, shows a flow chart of an embodiment of a method for displaying carousel images according to the present application, comprising the following steps:

[0061] Step S201: Create a carousel view instantiation object and initialize the carousel parameters of the instance object.

[0062] In this embodiment, the carousel parameters are pre-configured, including but not limited to the carousel image data source array, layout style, zoom style, fade-in and fade-out style, card 3D effect, and whether to automatically scroll. The data source array includes but is not limited to the carousel image link address, title, copy, jump link, validity period, and copy display style.

[0063] It should be noted that the styles supported by the carousel component of the embodiment of the present application include but are not limited to conventional carousel styles and 3D carousel styles. The layout in the carousel area cell can be customized, and automatic carousel with circular scrolling and manual sliding carousel can be set. The source of displayed images can support the mixed use of network images and local images.

[0064] In this embodiment, the carousel view can be a customized view, which inherits the waterfall class view and is used to carry the display of carousel images. All initialization and data refresh loading of the carousel are completed in this view. This view object is a class exposed to the caller. The caller can display the carousel images by configuring its display size and passing in the parameters required for the carousel images.

[0065] In this embodiment, a method may be constructed in the carousel view to receive carousel parameters input from the outside, and the carousel parameters may be configured by setting different types of properties of the instance object constructed by initialization.

[0066] In step S202 , a carousel display control and a carousel parameter object are created in the carousel view, and the carousel parameter object is loaded into an array of carousel parameters, wherein the array is configured with carousel data of carousel pictures.

[0067] In this embodiment, the carousel component primarily consists of an image display control and a data model object. The image display control is used to display images, while the data model object receives parameters, primarily receiving the incoming data source to display the corresponding information. One data model object corresponds to the information required for one carousel image. If there are multiple carousel images, multiple data model objects must be created.

[0068] In this embodiment, the carousel data of the carousel image is configured in the carousel parameter object, and the carousel parameter object is stored in the object data group of the carousel parameter, wherein the object data group contains multiple data objects, and each data object contains all the information of a displayed image, including but not limited to the network image link, image title, image description content, jump link after clicking the image, etc.

[0069] In some implementations, the data model object is typically used as an attribute of a custom waterfall element in the carousel component. Data source parameter objects are parsed into data model objects. The waterfall element directly reads the image link in the data model and renders the corresponding image to the image display control for display, thus displaying the carousel images.

[0070] In step S203, a timer is created and started, and a certain time interval is set to execute cyclically. When the preset time is reached, the corresponding data object in the data source array is obtained and parsed into a data model object.

[0071] In this embodiment, we recommend using a GCD (Multi-Core Programming Timer) instead of the traditional NSTimer. GCD timers are more accurate than NSTimers and can effectively avoid circular references caused by incorrect use of NSTimers, which can lead to memory leaks in the application. When the timer's preset interval is reached, the carousel component's sliding methods can be called to automatically switch the carousel images.

[0072] All information parameters of the carousel images are stored in the data source array, which stores an ordered data set of data objects of the same type. That is, each data object has a corresponding subscript, and the data object can be accessed through the specified subscript of the data source array.

[0073] The subscript of each data object represents the subscript of each image and is the unique identifier of the image information. It should be understood that the order of the subscripts of the data objects in the ordered array represents the order in which the images are displayed in the carousel.

[0074] Step S204: retrieve the carousel data object in the data source array through the carousel component.

[0075] Specifically, the corresponding data object index in the data source array is obtained by calculating the scroll position and view width of the carousel view, thereby obtaining the data object and parsing it into a data model object, and then loading the corresponding image.

[0076] Each carousel image corresponds to a carousel parameter object. When refreshing the page, the index corresponding to the current data source array is determined based on the sliding position, and the corresponding data object in the data source array is retrieved. The data object is further converted into a data model object containing image information and assigned to the current waterfall flow element for data refresh to display the carousel image.

[0077] Step S205 : Rendering the carousel images to the carousel display control for display according to the carousel data in the carousel parameter object.

[0078] Specifically, according to the carousel mode set when creating the instantiation object of the carousel component and the preset animation mode, the image content is rendered to the image display control of the carousel component.

[0079] The carousel display control is used to display images. The preset data of the carousel includes but is not limited to whether to rotate automatically, the carousel animation mode, whether to start the user's sliding operation, whether to enable automatic page jump after clicking the carousel image, and the interval of the carousel component timer.

[0080] This application configures the parameter information of the carousel images to pre-process the display method of the images, avoiding cropping, incomplete display, asymmetrical stretching, freezing during sliding, image duplication, and position confusion during the display process, thereby effectively improving the user experience.

[0081] In this embodiment, when the picture carousel is set to automatic carousel, the specific steps include:

[0082] The carousel images are determined based on the carousel content, and the sliding distance each time the preset time interval is reached is determined based on the width of the waterfall flow element in the carousel component. It should be understood that in this embodiment, the actual width and height of the carousel display control are fixed, and the actual aspect ratio of the image should be consistent with this aspect ratio. If it is inconsistent, the appropriate zoom mode should be selected to display the image.

[0083] When the user manually slides, horizontally, when sliding to the left, the picture to the right of the current picture position should be displayed. The specific implementation method is: the carousel component slides to the middle position of the next picture display control, and reads the picture in the next data object in the data source array for display; similarly, when sliding to the right, the picture to the left of the current picture position should be displayed. The specific implementation method is: the carousel component slides to the middle position of the previous picture display control, and reads the picture in the previous data object in the data source array for display.

[0084] It should be understood that if the current picture is the first one, it should correspond to the data object with subscript 0 in the data source array, then the sliding area of ​​the carousel component should be located at the starting position, and sliding to the right is not supported; if the current picture is the last one, it should correspond to the data object with subscript 1 minus the array length in the data source array, then the sliding area of ​​the carousel component should be located at the end position, and sliding to the left is not supported.

[0085] In this embodiment, the core of achieving the 3D slideshow animation effect is layout, which requires a custom waterfall layout subclass. In this custom layout, the attribute element layout and effective layout methods are rewritten to create a 3D effect.

[0086] Specifically, the PropertyElementLayout method calculates the layout properties for each waterfall element. These properties define the size, position, and transformation of each waterfall element. In the ValidLayout method, when the size of the waterfall object changes (for example, when the user scrolls to view different waterfall elements), a True parameter is returned to indicate that the waterfall object needs to recalculate the layout.

[0087] Furthermore, within the custom layout's attribute element layout method, the 3D transformation of each waterfall element is calculated based on its position relative to the center of the waterfall object. 3D transformations can be defined using the 3D transformation structure type (CATransform3D). The specific code is as follows:

[0088] let transform=CATransform3DIdentity

[0089] transform.m34=-1.0 / 500 / / Set perspective effect

[0090] transform = CATransform3DRotate(transform, angle, 0, 1, 0) / / Rotate around the Y axis to achieve a 3D sideways rotation effect

[0091] attributes.transform3D=transform

[0092] Here, m34 is the transform's perspective effect, and -1.0 / 500 is the inverse of the perspective distance. Adjusting this value changes the perspective depth, creating a stronger 3D effect when rotating. Rotation effects around different axes (x, y, z) can be achieved using the 3D transform rotation (CATransform3DRotate) method, allowing you to customize the rotation angle and axis to create different 3D effects.

[0093] It should be understood that the user's sliding instruction has a higher priority. During automatic carousel, if the user's sliding instruction is detected, the timer should be cleared and the carousel content should be determined according to the sliding instruction.

[0094] This application can be used on many devices based on the iOS operating system, such as Mac, iPhone, iPad, Apple Watch, etc.

[0095] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware through computer-readable instructions. The computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes in the above-described method embodiments. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0096] It should be understood that in the accompanying drawings, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. Their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0097] refer to Figure 3 , as a pair Figure 2 The present application provides an embodiment of a carousel display device. Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices based on the iOS system.

[0098] like Figure 3 As shown, the carousel image display device 300 in this embodiment includes: an acquisition module 301, a transmission module 302, a timing module 303, a calling module 304 and a display module 305. Among them:

[0099] The acquisition module 301 is used to configure the carousel parameters of the carousel images, create and instantiate the carousel view component, and configure the initialization parameters;

[0100] The transmission module 302 is used to create a carousel image display control in the carousel view, construct a carousel parameter object, and store the carousel parameter object in a data source array, wherein the carousel parameter object contains information related to image display.

[0101] The timing module 303 is used to create a timer, initialize and set the execution time interval, and start the timer when the preset mode is automatic scrolling.

[0102] The retrieving module 304 is used to retrieve the parameter object with the corresponding index from the data source array according to the current scrolling position of the carousel image each time the image is displayed.

[0103] The display module 305 is used to extract the image data in the parameter object and render it to the image display control for display.

[0104] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented with the help of client applications. Based on this understanding, the technical solution of this application is essentially or the part that contributes to the prior art can be embodied in the form of a client application product, which is stored in a storage medium, such as ROM (read-only memory) / RAM (random access memory), and includes several instructions for enabling a terminal device based on the iOS operating system (which can be a mobile phone, computer, tablet computer, etc.) to execute the methods described in each embodiment of this application.

[0105] Finally, it should be noted that the above-described embodiments are merely specific implementations of the present invention, intended to illustrate the technical solutions of the present invention, rather than to limit them. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the above-described embodiments, those skilled in the art should understand that any person skilled in the art can, within the technical scope disclosed by the present invention, modify or readily conceive of variations to the technical solutions described in the above-described embodiments, or substitute equivalently for some of the technical features thereof. Such modifications, variations, or substitutions do not deviate from the spirit and scope of the technical solutions of the embodiments of the present invention. They should all be encompassed within the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be subject to the scope of protection of the claims.

Claims

1. A design method for a 3D effect carousel image. It is characterized in that The following steps are involved: S1. Create a custom layout class that inherits from the waterfall layout class; S2. In the custom layout class created in step S1, rewrite the layout property method of the elements in the area to apply the 3D effect; S3. Create a new waterfall element subclass object and define the content of the carousel in it; S4. Create a view controller that contains a waterfall class and use a custom layout class as its layout; S5. Use a timer or other mechanism to periodically scroll to the next carousel item, and implement automatic carousel of images by modifying the content offset attribute.

2. A method for designing a 3D effect carousel according to claim 1, Features: In step S2, a rotation animation is used to achieve a 3D rotation effect of the carousel image.

3. According to the design method of a 3D effect carousel image according to claim 2, Features: The specific steps of using rotation animation to achieve the 3D rotation effect of the carousel image include: S21. Initialize an attribute array to receive the layout attribute arrays of all elements calculated for a given rectangular area in the parent class; S22, define a visualization area of ​​a drawing area structure, which represents the rectangle of the current visible area of ​​the waterfall object; wherein the origin of the visualization area of ​​the structure is set to the offset of the waterfall object to indicate the current scrolling position, and the size of the visualization area of ​​the structure is set to the size of the waterfall object to indicate the size; S23, traverse each layout attribute in the attribute array; S24, checking the size and position of the attribute in the current loop to determine whether it overlaps with the given rectangular area, and ensuring that subsequent operations are performed only when this condition is met and overlap occurs immediately; S25. Define a floating point distance to represent the horizontal distance between the x-coordinate of the attribute center point and the x-coordinate of the visible area center point; S26. Define a standard distance of floating point type to standardize the horizontal distance. The specific operation of standardization is to divide the horizontal distance by the width of each waterfall element plus the interval between the minimum waterfall elements to obtain a standardized distance relative to the width and interval of the waterfall elements. S27, comparing the absolute value of the horizontal distance, that is, the absolute distance from the center of the waterfall element to the center of the visible area and the width of the waterfall object, and only when the absolute distance from the center of the waterfall element to the center of the visible area is less than the width of the waterfall object, performing subsequent transformation effects; S28. define a scaling factor, wherein the scaling factor is specifically calculated as follows: 1 minus the difference of the absolute value of the standard horizontal distance multiplied by 0.3 plus 1, wherein the closer the center of the waterfall element is to the center of the visible area, the closer the scaling factor is to 1.3; and the waterfall element farther from the center will have a scaling value closer to 1; S29, performing a three-dimensional scaling transformation on the layout attribute using the scaling factor value calculated in S28; applying the same scaling factor on both the x and y axes, and no change on the z axis; setting the z coordinate value of the layout attribute element to 1, ensuring that the items with the transformation effect are visually located above other items that are not transformed; S30. The method returns an array attribute collection containing all processed layout attributes; in this way, when the waterfall class uses these attributes, its waterfall elements will be laid out according to these attributes.

4. According to the design method of a 3D effect carousel image according to claim 3, Features: The specific steps of creating a new waterfall flow element subclass object in step S3 to define the content of the carousel include: S31. Declare an image display component to display carousel images; S32, initializing the new waterfall element object and creating an instance; S33, creating an instantiation object of the picture display component class to be used as a control for displaying pictures, and setting the size and position parameters of the control for displaying pictures to match the boundary size attributes of the waterfall flow element subclass object; S34, setting the fill mode when displaying the carousel images and cropping the parts beyond the border; S35. Add a control for displaying pictures to the view level to carry custom content; S36. Return the initialized waterfall element instance; S37. Provide a public interface to set the image in the waterfall element instance. The parameter is an image type object or a link to a network image, and render the image on the image display control.

5. According to the design method of a 3D effect carousel image according to claim 4, Features: The step S4 comprises: S41. Create and initialize an instantiation object of a custom layout class type; S42, creating and initializing an instantiation object of waterfall type, and setting the size and position parameters of the waterfall instantiation object based on the current controller view; S43, using the custom layout object as a layout basis for the waterfall flow object; S44, using the controller as a data source object and a proxy object of the waterfall object, wherein the controller complies with the protocol of the waterfall object and provides necessary methods for the collection view to query the carousel data to be displayed; S45, registering the waterfall element class defined in step S3 to the collection view and setting a reuse identifier for reusing cells in the data source method; S46, creating a data source array of the carousel image, wherein the data source array needs to contain information of the carousel image, wherein the carousel image is a static image stored locally or a network image, and rendering the image to the image display control in step S3; S47. Add the waterfall object created in step S4 to the root view of the controller to ensure that the waterfall object can be rendered and displayed in the view hierarchy of the current view controller.

6. A method for designing a 3D effect carousel according to claim 5, Features: The step S5 comprises: S51, creating and initializing a timer instantiation object to perform periodic operations; S52, obtaining the horizontal scroll offset of the waterfall flow instantiated object in step S4; S53, calculating the next offset to be scrolled to, that is, the position of the next element, the specific value is the current offset plus the width of the collection view; S54, check whether the new offset exceeds the width of the collection view content, that is, determine whether the new offset is behind the last element. If so, reset the offset to 0 and return to the first element. S55. Use the set offset method to update the offset of the collection view. The animation parameter is set to YES to indicate that the scrolling will have an animation effect.

7. A method for designing a 3D effect carousel according to claim 6, Features: When a sliding start instruction from the user is detected, the timer is cleared; when a sliding end instruction from the user is detected, the timer is restarted.

Images