Animation display method based on iOS client, storage medium and electronic equipment

Abstract

The invention provides an animation display method based on an iOS client, a storage medium and an electronic device, and the method comprises the steps: loading a plurality of background images through a UIIClection View, and enabling the UIIClection View to serve as a background view; loading a webp animation group in advance by using an SDWebImage framework, wherein each webp animation comprises a plurality of stage animations; the current background image is displayed in the display area of the screen through the UIIColuctionView, and the current background image is displayed in the display area of the screen; a first webp animation is determined from the webp animation set, a standby stage animation of the first webp animation is displayed in a first view, the first view is located on the upper layer of the background view, the size of the first view is smaller than that of a screen display area, and the first view is located in the screen display area; and obtaining a state switching instruction, and switching the animation displayed in the screen display area according to the state switching instruction.

Description

Technical Field

[0001] The present application relates to the field of iOS development technology, and in particular to an iOS client-based animation display method, storage medium, and electronic device. Background Art

[0002] In the development of iOS clients, you will encounter various animation display scenarios, and there will often be a demand for combined animation display. For example, in the social, game and other functional modules of the client App, the interface matching animation is usually designed to be relatively monotonous. In order to make the App interface matching more interactive and improve the user experience, it is necessary to develop a combined animation display that improves interactivity and richness.

[0003] If traditional GIF animation is used, it is not conducive to development and efficient operation due to its color limitation, transparency limitation, compression efficiency and other issues. Therefore, a new combined animation display solution is needed to solve the problem. Summary of the invention

[0004] The purpose of the embodiments of the present application is to provide an animation display method, storage medium and electronic device based on an iOS client, so as to achieve a more efficient and high-quality combined animation display through the combination of webp animation and background view.

[0005] In order to achieve the above purpose, the embodiments of the present application are implemented in the following manner:

[0006] In a first aspect, an embodiment of the present application provides an animation display method based on an iOS client, comprising: loading a number of background images through UICollectionView, wherein UICollectionView serves as a background view and UICollectionView at least covers a screen display area; using an SDWebImage framework to preload a webp animation group, wherein the webp animation group includes at least two webp animations and each webp animation includes multiple stage animations; displaying the current background image in the screen display area through the UICollectionView; determining a first webp animation from the webp animation group and displaying a standby stage animation of the first webp animation in a first view, wherein the first view is located on an upper layer of the background view, the size of the first view is smaller than the screen display area and is located in the screen display area, and each webp animation includes a standby stage animation, a running stage animation, and an end stage animation; obtaining a state switching instruction, and switching the animation displayed in the screen display area according to the state switching instruction.

[0007] In combination with the first aspect, in a first possible implementation method of the first aspect, the state switching instruction includes a first instruction and a second instruction, and the effective time point of the first instruction is earlier than the effective time point of the second instruction. If the state switching instruction is the first instruction, switching the animation displayed in the screen display area includes: starting a timer Timer, performing a setContnetOffset operation on the UICollectionView at a first distance at a set frequency to realize the movement of the background image in the UICollectionView; and switching the running phase animation of the first webp animation in the first view for display.

[0008] In combination with the first possible implementation manner of the first aspect, in a second possible implementation manner of the first aspect, after determining a first webp animation from the webp animation group and displaying a standby phase animation of the first webp animation in a first view, the method further includes: determining a second webp animation from the webp animation group, and displaying a standby phase animation of the second webp animation in a second view, wherein the second view is located on an upper layer of the background view, a size of the second view is smaller than a screen display area, and is located outside the screen display area.

[0009] In combination with the second possible implementation method of the first aspect, in a third possible implementation method of the first aspect, if the state switching instruction is the second instruction, switching the animation displayed in the screen display area includes: calling the background image control strategy and the view approach control strategy of the end period; based on the timer Timer, performing a setContnetOffset operation on the UICollectionView with the background image control strategy, controlling the second view to approach the first view with the view approach control strategy, and at the same time, switching the end stage animation of the first webp animation in the first view for display.

[0010] In combination with the second possible implementation method of the first aspect, in a fourth possible implementation method of the first aspect, the state switching instruction also includes a third instruction, and the effective time point of the third instruction is between the effective time point of the first instruction and the effective time point of the second instruction, each webp animation also includes a speed change phase animation, and if the state switching instruction is the third instruction, switching the animation displayed in the screen display area includes: performing a setContnetOffset operation on the UICollectionView at a second distance at a set frequency to realize the movement of the background image in the UICollectionView; switching the speed change phase animation of the first webp animation in the first view for display.

[0011] In combination with the first possible implementation manner of the first aspect, in a fifth possible implementation manner of the first aspect, each webp animation also includes a coordination phase animation, and if the state switching instruction is a second instruction, the animation displayed in the screen display area is switched, including: determining a second webp animation from the webp animation group for display in the second view, wherein the second view is located on an upper layer of the background view, the size of the second view is smaller than the screen display area, and is located outside the screen display area, and the frame rate of the ending phase animation of the first webp animation is consistent with the coordination phase animation of the second webp animation; based on the positions of the first view and the second view, the ending phase animation of the first webp animation and the coordination phase animation of the second webp animation, a view approach control strategy is generated; a background image control strategy is generated based on the view approach control strategy; based on a timer Timer, a setContnetOffset operation is performed on the UICollectionView with the background image control strategy, and the second view is controlled to approach the first view with the view approach control strategy, and at the same time, the ending phase animation of the first webp animation is switched in the first view for display, and the coordination phase animation of the second webp animation is displayed in the second view.

[0012] In combination with the fifth possible implementation manner of the first aspect, in a sixth possible implementation manner of the first aspect, based on the positions of the first view and the second view, the ending stage animation of the first webp animation, and the matching stage animation of the second webp animation, a view approach control strategy is generated, including: determining a first moving segment from the ending stage animation of the first webp animation, and determining a second moving segment from the matching stage animation of the second webp animation, wherein the first moving segment and the second moving segment have the same number of frames, and the last frame of the first moving segment has a first anchor point, and the last frame of the second moving segment has a second anchor point; based on the position of the first view and the position of the first anchor point in the first view, as well as the position of the second view and the position of the second anchor point in the second view, a moving distance is calculated; based on the moving distance and the number of frames of the second moving segment, a view approach control strategy is generated.

[0013] In combination with the sixth possible implementation method of the first aspect, in the seventh possible implementation method of the first aspect, a background image control strategy is generated based on the view approach control strategy, including: determining the background scrolling distance based on the moving distance; generating the background image control strategy based on the background scrolling distance, the current background scrolling frequency and the frame rate of the coordination stage animation.

[0014] In a second aspect, an embodiment of the present application provides a storage medium, which is arranged in a device and includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the animation display method based on the iOS client as described in the first aspect or any one of the possible implementation methods of the first aspect.

[0015] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory and a processor, wherein the memory is used to store information including program instructions, and the processor is used to control the execution of the program instructions, and the program instructions, when loaded and executed by the processor, implement the steps of the animation display method based on the iOS client as described in the first aspect or any one of the possible implementation methods of the first aspect.

[0016] Beneficial effects:

[0017] 1. Load several background images through UICollectionView, and use the SDWebImage framework to load the webp animation group in advance; display the current background image in the screen display area through UICollectionView, determine the first webp animation from the webp animation group, and display the standby stage animation of the first webp animation in the first view. The first view is located on the upper layer of the background view. The size of the first view is smaller than the screen display area and is located in the screen display area. Each webp animation includes a standby stage animation, a running stage animation, and an end stage animation; obtain a state switching instruction, and switch the animation displayed in the screen display area according to the state switching instruction. In this way, the combined animation can be displayed through the webp image and the background view, and it can be loaded in advance, reducing memory consumption, and realizing a more efficient and high-quality combined animation display. In addition, the display animation can be switched through the state switching instruction, effectively improving interactivity and user experience.

[0018] 2. For the first scenario (i.e., preset animations and wait for the opportunity to further combine, such as matching combination animations without considering personalized dressing and precise matching animations), determine the second webp animation from the webp animation group, and display the standby stage animation of the second webp animation in the second view. The second view is located on the upper layer of the background view, and the size of the second view is smaller than the screen display area and is located outside the screen display area. The state switching instruction includes the first instruction and the second instruction, and the effective time point of the first instruction is earlier than the effective time point of the second instruction. If the state switching instruction is the first instruction, start the timer Timer, and perform the setContnetOffset operation of the first distance on the UICollectionView at the set frequency to realize the movement of the background image in the UICollectionView as part of the background animation; and switch the running stage animation of the first webp animation in the first view for display. If the state switching instruction is the second instruction, the background image control strategy and the view approach control strategy of the end period are called; based on the timer Timer, the background image control strategy is used to perform the setContnetOffset operation on the UICollectionView, and the view approach control strategy is used to control the second view to approach the first view. At the same time, the end stage animation of the first webp animation is switched in the first view for display. It is also possible to consider inserting interactive operations in the middle to achieve a richer animation switching mode. For example, the state switching instruction also includes a third instruction, and the action time point of the third instruction is between the action time point of the first instruction and the action time point of the second instruction. Each webp animation also includes a speed change stage animation. If the state switching instruction is the third instruction, the setContnetOffset operation of the second distance is performed on the UICollectionView at a set frequency to achieve the movement of the background image in the UICollectionView; the speed change stage animation of the first webp animation is switched in the first view for display. This method can achieve a highly interactive combined animation display for this scenario with high display efficiency. The loaded webp animation has higher quality, consumes less resources, and is less difficult to develop. In addition, since the animations are all loaded in advance, there will be no blank or lag in the switching process. The rich instructions and corresponding animation switching can give users a very strong interactive experience.

[0019] 3. For the second scenario, consider more personalized animations and matching combination animations of precise matching animations. In this scenario, each wepp animation also includes a matching stage animation. If the state switching instruction is the second instruction, a second wepp animation is determined from the wepp animation group for display in the second view, wherein the second view is located on the upper layer of the background view, the size of the second view is smaller than the screen display area, and is located outside the screen display area, and the ending stage animation of the first wepp animation has the same frame rate as the matching stage animation of the second wepp animation. Here, after the second instruction (usually refers to a successful match) is obtained, the second wepp animation is determined, and the specificity of the matched object can be taken into account, thereby taking into account the personalization of different roles. In order to achieve precise coordination and improve the combination quality of combined matching animations, the first moving segment is determined from the ending stage animation of the first webp animation, and the second moving segment is determined from the matching stage animation of the second webp animation. The first moving segment and the second moving segment have the same number of frames, and the first moving segment has a first anchor point on the last frame, and the second moving segment has a second anchor point on the last frame; based on the position of the first view and the position of the first anchor point in the first view, as well as the position of the second view and the position of the second anchor point in the second view, the moving distance is calculated; based on the moving distance and the number of frames of the second moving segment, a view approach control strategy is generated. In this way, the precise coordination of different webp animations can be taken into account to achieve a better animation combination effect, and different animation states can be taken into account (such as the background scrolling speed after acceleration, and the effect and state of the ending action of the moving segment in different webp animations). Through anchor points (such as the focus of the animation action used to coordinate with each other), high-precision coordination is achieved with low calculation amount, which greatly improves the coordination display effect of the combined animation. Based on the moving distance, the background scrolling distance is determined; based on the background scrolling distance, the current background scrolling frequency and the frame rate of the animation in the matching stage, the background image control strategy is generated. In this way, the motion strategy of the background image (cooperating with the movement of the background animation to set off the motion effect of the webp animation used for the combination) can be further designed based on the moving distance between the webp animations used for the combination, which can further enhance the display effect of the combined animation. Finally, a unified display of the combined animation can be achieved through the timer, avoiding the sense of fragmentation in the display of the combined animation (for example, inconsistent frame rates or display nodes give people a visual fragmentation experience).

[0020] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, preferred embodiments are specifically cited below and described in detail with reference to the attached drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments of the present application will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0022] Figure 1 A flowchart of an iOS client-based animation display method provided in an embodiment of the present application.

[0023] Figure 2 A schematic diagram of the interface layout.

[0024] Icons: 11-UICollectionView; 12-first view; 13-second view. DETAILED DESCRIPTION

[0025] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0026] See also Figure 1 , Figure 1 A flowchart of an iOS client-based animation display method provided in an embodiment of the present application. In this embodiment, the iOS client-based animation display method is applied to an electronic device installed with an iOS client, such as a smart phone, a tablet computer, etc. The iOS client-based animation display method includes step S10, step S20, step S30, step S40, and step S50.

[0027] Before executing step S10, a brief introduction to the interface layout is given here.

[0028] See also Figure 2, it is necessary to design a bottom view. This embodiment selects UICollectionView 11 as the bottom view for displaying the background image. On this basis, it is necessary to lay out the upper view. This embodiment takes the layout of two upper views as an example, but it is not a limitation of this application. The upper views are respectively recorded as the first view 12 and the second view 13, both of which are located in the upper layer of UICollectionView 11. Since this embodiment mainly deals with scenes of matching animations, the first view 12 is located in the screen display area (such as near the bottom center of the screen, or any other position, depending on design requirements) for display, and the second view 13 is located outside the screen display area (for example, maintaining the same height as the first view 12, or without such position restriction, depending on design requirements) for display. The size of the first view 12 and the second view 13 can be smaller than the screen display area. Of course, due to the existence of transparency, this size limitation is not absolute, but means that the size required for displaying the actual animation picture is smaller than the screen display area. This embodiment is limited in a manner that is easy to describe (that is, the size of the first view 12 and the second view 13 is smaller than the screen display area) and should not be regarded as a limitation on the present application.

[0029] Accordingly, the electronic device may execute step S10.

[0030] Step S10: Loading a number of background images through UICollectionView, wherein UICollectionView serves as a background view and UICollectionView at least covers the screen display area.

[0031] In this embodiment, the electronic device can load several background images through UICollectionView 11, for example, load 10,000 street view images, the street view images are animated street views, there is visual continuity between two adjacent street view images (for example, consistent or gradual color tones), or the scenery in the image (such as sidewalks, green belts, etc.) has a certain degree of repetitiveness or continuity. These background images are loaded in advance through UICollectionView 11 as the background view (background animation can be formed by controlling the movement of the street view), and UICollectionView 11 at least covers the screen display area.

[0032] And, the electronic device may execute step S20.

[0033] Step S20: Use the SDWebImage framework to load the webp animation group in advance, wherein the webp animation group includes at least two webp animations, and each webp animation includes multiple stage animations.

[0034] In this embodiment, the electronic device can use the SDWebImage framework to load the webp animation group in advance, the webp animation group includes at least two webp animations, and each webp animation includes multiple stage animations.

[0035] For example, for scenario 1: assuming that the main consideration in scenario 1 is the interactivity of the matching animation, that is, the animation status of different stages can be displayed in the matching animation according to the user's operation, and the combined animation (animation combination of the first view 12 and the second view 13) can be displayed according to the matching result (for example, after the match is successful). This scenario does not need to consider user-personalized animations. For example, only two webp animations can be loaded in advance based on the user's gender.

[0036] For another example, for scenario 2: assuming that the interactivity of the matching animation, the specificity of the user animation and the accuracy of the animation combination need to be considered in scenario 2, then, not only can the animation status of different stages be displayed in the matching animation according to the user's operation, but also the personalized factors of the matched target user can be displayed according to the matching result (for example, after the match is successful), and the corresponding webp animation is determined from the multiple webp animations in the webp animation group, and various factors are further considered (such as the movement speed of the background image, the anchor point of the combined animation, the position of the first view 12 and the second view 13, etc.), and the corresponding combined animation control strategy is determined, and the animation is accurately combined to improve the quality of the combined animation. This scenario can not only consider the user's personalized animation, but also the precise combination of animations to improve the user experience.

[0037] Based on the pre-loaded background image and webp animation group, after the user enters the corresponding scene interface (eg, matching interface, pairing interface), the electronic device can run step S30.

[0038] Step S30: Display the current background image in the screen display area through the UICollectionView.

[0039] In this embodiment, the electronic device can display the current background image in the screen display area through UICollectionView 11. Before matching is started, a static street view image can be displayed.

[0040] And, the electronic device may execute step S40.

[0041] Step S40: Determine the first webp animation from the webp animation group, and display the standby stage animation of the first webp animation in the first view, wherein the first view is located on the upper layer of the background view, the size of the first view is smaller than the screen display area, and is located within the screen display area, and each webp animation includes a standby stage animation, a running stage animation, and an end stage animation.

[0042] In this embodiment, each webp animation includes a standby phase animation, a running phase animation, and an end phase animation. Before matching begins, the electronic device can determine a first webp animation from the webp animation group and display the standby phase animation of the first webp animation in the first view 12.

[0043] For example, for scenario 1, assuming that the user is a male, the electronic device can determine the first webp animation (corresponding to a male user) from the pre-loaded webp animation group, and display the standby stage animation of the first webp animation in the first view 12 before matching begins.

[0044] For another example, for scenario 2: the electronic device can determine the first webp animation (the webp animation corresponding to the dress number) from the pre-loaded webp animation group according to the user's dress configuration (for example, with a corresponding dress number), and display the standby stage animation of the first webp animation in the first view 12 before matching begins.

[0045] In scenario 1, there is no need to consider the user's personalized animation, and the matching scenario can determine the animation of the matched user in advance (for example, only matching opposite-sex users, then the second webp animation can be determined in advance from the webp animation group), and in this scenario, there is no need to design a special matching stage animation for each webp animation, but directly load the standby stage animation for display in the second view 13.

[0046] Therefore, after determining the first webp animation from the webp animation group and displaying the standby phase animation of the first webp animation in the first view 12, the electronic device can determine the second webp animation from the webp animation group and display the standby phase animation of the second webp animation in the second view 13, wherein the second view 13 is located on the upper layer of the background view, the size of the second view 13 is smaller than the screen display area, and is located outside the screen display area.

[0047] Afterwards, the electronic device may execute step S50.

[0048] Step S50: Obtain a state switching instruction, and switch the animation displayed in the screen display area according to the state switching instruction.

[0049] In this embodiment, the electronic device can obtain the user's operation instruction and send it to the server. The server returns a state switching instruction. At this time, the electronic device can obtain the state switching instruction and switch the animation displayed in the screen display area according to the state switching instruction. In this embodiment, the user's operation instruction may include: a start matching instruction to start matching, and the server returns a first instruction to this. After matching the corresponding object (for example, a user of the opposite sex), the server can send a second instruction to the electronic device. At this time, the electronic device can obtain the second instruction to complete the matching (matching successful). Of course, in order to provide richer interactive operations, richer operation instructions and animation states, more types of operations such as accelerated matching and stopped matching can be further designed, and corresponding stage animations can be designed in the webp animation.

[0050] Exemplarily, for scenario 1, it is assumed that the state switching instruction includes a first instruction and a second instruction, and the action time point of the first instruction is earlier than the action time point of the second instruction.

[0051] If the state switching instruction is the first instruction, the electronic device can start the timer Timer, and perform the setContnetOffset operation on the UICollectionView 11 at a first distance (e.g., 10dp, i.e., a distance of 10 density-independent pixels) at a set frequency (e.g., 0.01 seconds each time, 0.02 seconds each time, etc.) to realize the movement of the background image in the UICollectionView 11. In addition, the electronic device can switch the running stage animation of the first webp animation in the first view 12 for display. Assuming that the frame rate of each stage animation in the first animation is 50, then, in the screen display area, the moving background animation and the running stage animation of the first webp animation can be displayed under the control of the first instruction (e.g., the background images move to the left on the screen one by one, and the running stage animation of the first webp animation can be used to display the overall motion effect).

[0052] If the state switching instruction is the second instruction (the first instruction needs to be executed first and the second instruction has not been executed), the electronic device can call the background image control strategy and the view approach control strategy for the end period. Since in scene 1, most of the factors that need to be considered in real time are controllable factors, which can be set in advance and do not need to consider the parameters obtained in real time, the background image control strategy and the view approach control strategy during the period from the running stage animation of the first webp animation to the end stage animation until the end of the end stage animation of the first webp animation can be pre-designed. Then, the electronic device can switch the end stage animation of the first webp animation in the first view 12 for display, and use the timer Timer to perform the setContnetOffset operation on the UICollectionView 11 with the background image control strategy (for example, uniform deceleration motion), and use the view approach control strategy to control the second view 13 to approach the first view 12 (for example, the background image movement speed and movement direction in the background image control strategy are consistent), thereby completing the combined display of the background animation, the first webp animation, and the second webp animation. Of course, in order to keep the frame rate consistent, the frame rates of the first webp animation and the second webp animation can be set to 50, and the frequency can be set to 50 times per second.

[0053] Of course, considering richer interactive operations, assuming that the state switching instruction also includes a third instruction (corresponding to accelerated matching), a fourth instruction (corresponding to stopped matching), etc., and the action time point of the third instruction is between the action time point of the first instruction and the action time point of the second instruction (the action time point of the fourth instruction is between the action time point of the first instruction and the action time point of the second instruction), each webp animation also includes a speed change phase animation (or a stop phase animation). If the state switching instruction is the third instruction (or the fourth instruction), the electronic device can perform a setContnetOffset operation of the second distance on UICollectionView 11 at a set frequency (or perform a setContnetOffset operation in which the distance is gradually reduced to zero, such as uniformly reducing to zero, or variable speed reducing to zero, etc., which can be pre-set) to realize the movement of the background image in UICollectionView 11. At the same time, the electronic device can switch the speed change phase animation (or stop phase animation) of the first webp animation in the first view 12 for display.

[0054] The above is an introduction to the combined animation display process of the matching process in scene 1. The following will introduce the combined animation display process of the matching process in scene 2.

[0055] For scenario 2, since the personalization of the user's corresponding animation in the matching animation and the accuracy of the animation combination need to be considered in scenario 2, the animation display scheme involved in scenario 2 will be continued to be introduced after the electronic device executes the first instruction as introduced in the previous article (since the matching user has not been determined, the second webp animation has not been determined).

[0056] In scene 2, each webp animation also includes a coordination phase animation (in scene 1, the standby phase animation of the second webp animation is directly used as the part of the ending phase animation of the first webp animation to perform animation combination). Therefore, in scene 2, the coordination phase animation of the second webp animation is used as the part of the ending phase animation of the first webp animation to perform precise animation combination.

[0057] Exemplarily, if the state switching instruction is a second instruction, the electronic device can determine a second webp animation from the webp animation group for display in the second view 13, wherein the second view 13 is located on the upper layer of the background view, the size of the second view 13 is smaller than the screen display area, and is located outside the screen display area, and the frame rate of the ending stage animation of the first webp animation is consistent with the frame rate of the matching stage animation of the second webp animation. For example, the second instruction carries the dress number of the matched target user, so that the corresponding second webp animation can be determined from the webp animation group.

[0058] In order to achieve accurate combination of animations and improve the quality of combined animations, the electronic device can generate a view approach control strategy based on the positions of the first view 12 and the second view 13, the ending stage animation of the first webp animation and the matching stage animation of the second webp animation.

[0059] Exemplarily, the electronic device can determine the first moving segment from the ending stage animation of the first webp animation, and determine the second moving segment from the matching stage animation of the second webp animation, wherein the first moving segment and the second moving segment have the same number of frames (for example, the first moving segment and the second moving segment are both 100 frames, or 200 frames, etc.), and the last frame of the first moving segment has a first anchor point, and the last frame of the second moving segment has a second anchor point.

[0060] Then, the electronic device may calculate the movement distance based on the position of the first view 12 and the position of the first anchor point in the first view 12 , and the position of the second view 13 and the position of the second anchor point in the second view 13 .

[0061] For example, taking the screen display area with a resolution of 1080*1920 in width and height (with the vertex in the upper left corner as the origin) as an example, set the area covered by our UICollectionView 11 to 2160*1920 (covering the screen display area and extending to the right), the position (width and height coordinates) of the first view 12 are: (360, 1040), (360, 1400), (600, 1040), (600, 1400), and the position (width and height coordinates) of the second view 13 are: (1081, 1040), (1081, 1400), (1321, 1040), (1321, 1400), and the units are all dp (density-independent pixels), that is, the dimensions are all 240*360. The position of the first anchor point in the first view 12 is (183, 276), so the position of the first anchor point is (543, 1316); and the position of the second anchor point in the second view 13 is (62, 276), so the position of the second anchor point is (1143, 1316). The consistency of the ordinates (i.e., the consistency of the height coordinates) must be determined when selecting the anchor points in advance, because the two anchor points need to be translated to the same point (overlap) in the width direction. Therefore, the moving distance can be calculated based on the first anchor point and the second anchor point, that is, the width coordinate of the second anchor point minus the width coordinate of the first anchor point, to obtain the moving distance: 1143-543=600dp.

[0062] After calculating the moving distance, the electronic device can generate a view approach control strategy based on the moving distance and the number of frames of the second moving segment (also the number of frames of the first moving segment). For example, taking the number of frames of the first moving segment and the second moving segment as 100, and each frame takes 0.02 seconds to play, then, with 0.02 seconds as a time unit, recorded as t, it takes 100t time for the second view 13 to approach the first view 12. In each time period t, the first moving segment, the second moving segment, and the background animation will play a frame. Then, in this solution, a moving solution of 600dp÷100=6dp / t is used as a view approach control strategy.

[0063] Accordingly, the electronic device may further generate a background image control strategy based on the view approach control strategy.

[0064] Exemplarily, the electronic device may determine the background scrolling distance based on the moving distance, and then generate a background image control strategy based on the background scrolling distance, the current background scrolling frequency, and the frame rate of the animation in the matching stage.

[0065] For example, half of the background scrolling distance is used as the background scrolling distance. Then, in the above example, the background scrolling distance is 300dp. Combined with the frame rate of the stage animation (50 frames per second, and it takes 100t for the second view 13 to approach the first view 12), the background image control strategy can be designed to move at a speed of 300dp÷100=3dp / t, that is, to perform a 3dp setContnetOffset operation on the UICollectionView 11 at a frequency of 0.02 seconds each time. Of course, the running of the background animation can also be performed at a multiple of the frame rate of the webp animation, but the moving distance needs to be changed accordingly, which will not be repeated here.

[0066] After determining the view approach control strategy and the background image control strategy (the moving direction in the background image control strategy and the moving direction of the second view 13 in the view approach control strategy are consistent), the electronic device can perform setContnetOffset operation on UICollectionView 11 based on the timer Timer (determine a unified action time for control) with the background image control strategy, and control the second view 13 to approach the first view 12 with the view approach control strategy. At the same time, the end stage animation of the first webp animation is switched in the first view 12 for display, and the matching stage animation of the second webp animation is displayed in the second view 13. After the animation combination of the moving segment is displayed, the remaining part of the end stage animation of the first webp animation (i.e., the part of the end stage animation of the first webp animation excluding the first moving segment) and the remaining part of the matching stage animation of the second webp animation (i.e., the part of the matching stage animation of the second webp animation excluding the second moving segment) will continue to be displayed, and the movement of the background image in the width part stops. After that, some supplementary animations can also be added for display, prompts, etc., which will not be repeated here.

[0067] An embodiment of the present application also provides a storage medium, which is set in a device and includes a stored program. When the program is running, the device where the storage medium is located is controlled to execute the animation display method based on the iOS client in this embodiment.

[0068] Furthermore, an embodiment of the present application provides an electronic device, including a memory and a processor, wherein the memory is used to store information including program instructions, and the processor is used to control the execution of the program instructions, and when the program instructions are loaded and executed by the processor, the steps of the animation display method based on the iOS client in this embodiment are implemented.

[0069] In summary, the embodiment of the present application provides an animation display method based on an iOS client, which loads several background images through UICollectionView 11, and uses the SDWebImage framework to load the webp animation group in advance; the current background image is displayed in the screen display area through UICollectionView 11, and the first webp animation is determined from the webp animation group, and the standby stage animation of the first webp animation is displayed in the first view 12, the first view 12 is located in the upper layer of the background view, the size of the first view 12 is smaller than the screen display area, and is located in the screen display area, each webp animation includes a standby stage animation, a running stage animation, and an end stage animation; obtain a state switching instruction, and switch the animation displayed in the screen display area according to the state switching instruction. In this way, the display of the combined animation can be realized through the webp image and the background view, and it can be loaded in advance, reduce memory consumption, and realize a more efficient and high-quality combined animation display. In addition, the display animation can be switched through the state switching instruction, which effectively improves interactivity and user experience.

[0070] For the first scenario (i.e., scenario 1, preset animations, waiting for the opportunity for further combination, without considering the matching combination animations of personalized dressing and precise matching animations), determine the second webp animation from the webp animation group, and display the standby stage animation of the second webp animation in the second view 13. The second view 13 is located on the upper layer of the background view. The size of the second view 13 is smaller than the screen display area and is located outside the screen display area. The state switching instruction includes the first instruction and the second instruction, and the effective time point of the first instruction is earlier than the effective time point of the second instruction. If the state switching instruction is the first instruction, start the timer Timer, and perform the setContnetOffset operation of the first distance on UICollectionView 11 at a set frequency to realize the movement of the background image in UICollectionView 11 as part of the background animation; and switch the running stage animation of the first webp animation in the first view 12 for display. If the state switching instruction is the second instruction, the background image control strategy and the view approach control strategy of the end period are called; based on the timer Timer, the background image control strategy is used to perform the setContnetOffset operation on the UICollectionView 11, and the view approach control strategy is used to control the second view 13 to approach the first view 12. At the same time, the end stage animation of the first webp animation is switched in the first view 12 for display. It is also possible to consider inserting interactive operations in the middle to achieve a richer animation switching mode. For example, the state switching instruction also includes a third instruction, and the action time point of the third instruction is between the action time point of the first instruction and the action time point of the second instruction. Each webp animation also includes a speed change stage animation. If the state switching instruction is the third instruction, the setContnetOffset operation of the second distance is performed on the UICollectionView 11 at a set frequency to achieve the movement of the background image in the UICollectionView 11; the speed change stage animation of the first webp animation is switched in the first view 12 for display. This method can achieve a highly interactive combined animation display for this scenario with high display efficiency. The loaded webp animation has higher quality, consumes less resources, and is less difficult to develop. In addition, since the animations are all loaded in advance, there will be no blank or lag in the switching process. The rich instructions and corresponding animation switching can give users a very strong interactive experience.

[0071] For the second scenario (i.e., scenario 2), consider more personalized animations and matching combination animations of precise matching animations. In this scenario, each wepp animation also includes a matching stage animation. If the state switching instruction is a second instruction, a second wepp animation is determined from the wepp animation group for display in the second view 13, wherein the second view 13 is located in the upper layer of the background view, the size of the second view 13 is smaller than the screen display area, and is located outside the screen display area, and the ending stage animation of the first wepp animation is consistent with the frame rate of the matching stage animation of the second wepp animation. Here, after the second instruction (usually refers to a successful match) is obtained, the second wepp animation is determined, and the specificity of the matched object can be taken into account, thereby taking into account the personalization of different roles. In order to achieve precise coordination and improve the combination quality of combined matching animation, the first moving segment is determined from the ending stage animation of the first webp animation, and the second moving segment is determined from the matching stage animation of the second webp animation. The first moving segment and the second moving segment have the same number of frames, and the first moving segment has a first anchor point on the last frame, and the second moving segment has a second anchor point on the last frame; based on the position of the first view 12 and the position of the first anchor point in the first view 12, as well as the position of the second view 13 and the position of the second anchor point in the second view 13, the moving distance is calculated; based on the moving distance and the number of frames of the second moving segment, a view approach control strategy is generated. In this way, the precise coordination of different webp animations can be taken into account to achieve a better animation combination effect, and different animation states can be taken into account (such as the background scrolling speed after acceleration, and the effect and state of the ending action of the moving segment in different webp animations). Through the anchor point (such as the focus of the animation action used to coordinate with each other), high-precision coordination is achieved with low calculation amount, which greatly improves the coordination display effect of the combined animation. Based on the moving distance, the background scrolling distance is determined; based on the background scrolling distance, the current background scrolling frequency and the frame rate of the animation in the matching stage, the background image control strategy is generated. In this way, the motion strategy of the background image (cooperating with the movement of the background animation to set off the motion effect of the webp animation used for the combination) can be further designed based on the moving distance between the webp animations used for the combination, which can further enhance the display effect of the combined animation. Finally, a unified display of the combined animation can be achieved through the timer, avoiding the sense of fragmentation in the display of the combined animation (for example, inconsistent frame rates or display nodes give people a visual fragmentation experience).

[0072] In this document, relational terms such as first and second, etc. are used merely to distinguish one entity or operation from another entity or operation, but do not necessarily require or imply any such actual relationship or order between these entities or operations.

[0073] The above description is only an embodiment of the present application and is not intended to limit the protection scope of the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. An animation display method based on iOS client, characterized in that: include: Load several background images through UICollectionView, where UICollectionView is used as the background view and UICollectionView at least covers the screen display area; Use the SDWebImage framework to load the webp animation group in advance, where the webp animation group contains at least two webp animations, and each webp animation includes multiple stage animations; Display the current background image in the screen display area through the UICollectionView; Determine a first webp animation from the webp animation group, and display a standby stage animation of the first webp animation in a first view, wherein the first view is located on an upper layer of a background view, a size of the first view is smaller than a screen display area, and is located within the screen display area, and each webp animation includes a standby stage animation, a running stage animation, and an end stage animation; Get the state switching instruction, and switch the animation displayed in the screen display area according to the state switching instruction.

2. The animation display method based on iOS client according to claim 1 is characterized in that: The state switching instruction includes a first instruction and a second instruction, and the effect time point of the first instruction is earlier than the effect time point of the second instruction. If the state switching instruction is the first instruction, the animation displayed in the switching screen display area includes: Start the timer Timer, perform the setContnetOffset operation of the first distance on the UICollectionView at a set frequency, and realize the movement of the background image in the UICollectionView; And, switching the running phase animation of the first webp animation in the first view for display.

3. The animation display method based on iOS client according to claim 2 is characterized in that: After determining a first webp animation from the webp animation group and displaying a standby phase animation of the first webp animation in a first view, the method further includes: A second webp animation is determined from the webp animation group, and a standby phase animation of the second webp animation is displayed in a second view, wherein the second view is located on an upper layer of the background view, the size of the second view is smaller than the screen display area, and is located outside the screen display area.

4. The animation display method based on iOS client according to claim 3 is characterized in that: If the state switching instruction is the second instruction, the animation displayed in the screen display area is switched, including: Call the background image control strategy and view proximity control strategy for the end period; Based on the timer Timer, the setContnetOffset operation is performed on the UICollectionView using the background image control strategy, and the second view is controlled to approach the first view using the view approach control strategy. At the same time, the ending stage animation of the first webp animation is switched in the first view for display.

5. The animation display method based on iOS client according to claim 3 is characterized in that: The state switching instruction also includes a third instruction, and the action time point of the third instruction is between the action time point of the first instruction and the action time point of the second instruction. Each webp animation also includes a speed change phase animation. If the state switching instruction is the third instruction, the animation displayed in the switching screen display area includes: Performing a setContnetOffset operation on the UICollectionView at a second distance at a set frequency to achieve movement of the background image in the UICollectionView; The speed change phase animation of the first webp animation is switched in the first view for display.

6. The animation display method based on iOS client according to claim 2 is characterized in that: Each webp animation also includes a matching stage animation. If the state switching instruction is the second instruction, the animation displayed in the switching screen display area includes: Determine a second webp animation from the webp animation group for display in a second view, wherein the second view is located on an upper layer of the background view, the size of the second view is smaller than the screen display area, and is located outside the screen display area, and the frame rate of the ending stage animation of the first webp animation is consistent with the frame rate of the matching stage animation of the second webp animation; Generate a view approach control strategy based on the positions of the first view and the second view, the ending phase animation of the first webp animation and the matching phase animation of the second webp animation; Generate a background image control strategy based on the view approach control strategy; Based on the timer Timer, the setContnetOffset operation is performed on the UICollectionView using the background image control strategy, and the second view is controlled to approach the first view using the view approach control strategy. At the same time, the ending stage animation of the first webp animation is switched to be displayed in the first view, and the coordination stage animation of the second webp animation is displayed in the second view.

7. The animation display method based on iOS client according to claim 6 is characterized in that: Based on the positions of the first view and the second view, the ending phase animation of the first webp animation and the matching phase animation of the second webp animation, a view approach control strategy is generated, including: A first moving segment is determined from the ending stage animation of the first webp animation, and a second moving segment is determined from the matching stage animation of the second webp animation, wherein the first moving segment and the second moving segment have the same number of frames, and the last frame of the first moving segment has a first anchor point, and the last frame of the second moving segment has a second anchor point; Calculate a movement distance based on the position of the first view and the position of the first anchor point in the first view, and the position of the second view and the position of the second anchor point in the second view; Based on the moving distance and the second moving segment frame number, a view approach control strategy is generated.

8. The animation display method based on iOS client according to claim 7 is characterized in that: Generate a background image control strategy based on the view approach control strategy, including: Based on the moving distance, determining a background scrolling distance; A background image control strategy is generated based on the background scrolling distance, the current background scrolling frequency and the frame rate of the animation in the matching stage.

9. A storage medium, characterized in that: The storage medium is set in the device, including a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the iOS client-based animation display method described in any one of claims 1 to 8.

10. An electronic device comprising a memory and a processor, wherein the memory is used to store information including program instructions, and the processor is used to control the execution of the program instructions, wherein: When the program instructions are loaded and executed by the processor, the steps of the iOS client-based animation display method described in any one of claims 1 to 8 are implemented.

Images