Advanced imitation of [iOS] transition animation airbnb

Advanced imitation of [iOS] transition animation airbnb

Note: I wrote two articles transition:
1: simple imitation [iOS] system transition animation animation, simple is the analysis of the principle of realizing the system, and explain the coordinates, the absolute coordinate system and relative coordinates, coordinate conversion and other knowledge, second reserve theory. Finally, the file preview animation on Mac is realized.
second: advanced simulation of [iOS] transition animation, airbnb, based on the first theory to implement complex interface transitions, including entering and exiting animations in series. Finally, the implementation of this animation is decoupled from the current interface and encapsulated as a generic (other similar interface is applicable) tool class. These two articles will teach you how to implement a similar transition animation on the airbnb page, and, most importantly, you’ll learn how to analyze similar animations and know how to do them. The GitHub address is here.

Advanced imitation of [iOS] transition animation airbnb
If you don’t read the first one, I suggest you look at the first one, because it’s still difficult to understand without the foundation of the first. Why don’t you go now?.
OK, are you ready? Let’s begin with the second. This article is based primarily on the first theory to implement complex interface transitions, including entering and exiting animations in series. Finally, the implementation of this animation is decoupled from the current interface and encapsulated as a generic (other similar interface is applicable) tool class.

1 the architecture of this interface

Let’s first analyze the architecture of this interface. The window is a UITableViewController scroll up and down, one can slide around the UICollectionView on each UITableViewCell, each UICollectionViewCell layout in a cover image and other elements. The mainstream layout, that’s about it, right?

Advanced imitation of [iOS] transition animation airbnb

2 based on the first article, how should we divide the structure of this animation?

How do you analyze the animation above? What I like heard someone say: “too fast could not see the” good, then I will slow down a bit, you look again.

Advanced imitation of [iOS] transition animation airbnb

See no did not see what only see they have a gently feeling in

Let’s take a look at the picture again. If we have bigger holes and no interface structures, we think of the interface as a plane, then we can partition the animation structure according to the following diagram.

Advanced imitation of [iOS] transition animation airbnb

As you can see, in fact, the animation is divided into three parts, UpAnimationPart + CentreAnimationPart + DownAnimationPart, UpAnimationPart and DownAnimationPart animation can be classified as a class, they simply move up or down. The focus is on the middle CentreAnimationPart, which differs from the rest.

CentreAnimationPart, each picture should be animated as a single individual, rather than animating the entire module in the middle. Why? Because each picture is finally filled with a single control at the top of the next interface. Is that too hard to understand? What if you got the middle area of whole animation, then you get will be the middle picture area covered part, and the right side exposed to the orange picture you will not get this time, when the user clicks on the right side of the picture is just a half exposed picture, not you realize the middle area of the animation.

If you understand what I’m saying, then you’ll understand the subtle differences between the two pictures.

Advanced imitation of [iOS] transition animation airbnb
Advanced imitation of [iOS] transition animation airbnb

The above two pictures, second pictures of the animation structure is correct.

After the end of the animation division structure, you should have a Paodingjieniu feeling. Do you feel like the system animation that was implemented in the first article?. I hope you can sum up the core of the problem from this analysis and training: the most difficult part is our understanding, not the realization.

3 pay attention to

Since the ideas are there, then write the code quickly? Come on, wait, are you really thinking? Can you say what it is?

Never mind, learn something so quickly. This is not comfort, this is the truth of the matter.

Let’s start with two points of knowledge and one point of attention.

Circular reference for 3.1.Block

You may have had realized, the animation has inevitably used block, block has a very difficult “circular references”, you may still do not understand what is “reference ring”, say the problem may have to write an article before, so I’m not going to say this here the problem.

So my advice to you is that wherever you’re not sure if there will be circular references, you write that:

__weak typeof (self) weakSelf = self; self.aBlock = ^{__strong typeof (weakSelf) strongSelf = weakSelf; if (strongSelf! Return); / / other code}...

Why do you write like that?

  • The problem of removing cyclic references. __weak is a weak reference and does not refer to the reference counter +1 of self. _strong weakSelf reference counter +1, to keep hold of the weakSelf, but strongSelf is a local variable, at the end of this block of code, strongSelf will automatically release, so the lifting of the possibility of circular references.
  • Prevent the application of ulceration. If (strongSelf!) return; we assume a very common situation, when the self has been released, the block was transferred, and then went to visit a nil zombie object, such as a self property into the dictionary what, this time to the dictionary is inserted into the empty elements. Nature will cause the application to crash, with this line of code, it will not happen again in a similar situation.

3.2. recycling pool

The reason why we use UITableView every day is so good, largely because of the design idea of the recycling pool.

Advanced imitation of [iOS] transition animation airbnb

The design idea of a recycling pool can be summarized as:

  • When you want to use an object, take it from the ReusePool. If there is a cache in the ReusePool, take the cache out, return it to the user, and then remove the object from the ReusePool. If there is no ReusePool, a new object is created and returned to the user.
  • When an object has moved out of view (or does not need to use it), it is added to the ReusePool to wait for a loop.

For this purpose of high performance, we should create a ReusePool for our animation instance of UIImageView.

How does 3.3. test its calculated frame correctly?

Computing frame and moving frame is a tangled thing, and I don’t know if I’m right or not, and if that’s wrong, it’s going to cause animation to go wrong. But if the last time to come back to the tune of animation frame, will be repeated check what frame wrong. It hurts so much.

So I’ll give you a piece of advice. That is, when you have finished a frame, add a placeholder view on this frame to see if it is correct. For example, add a red View like this to the screen to check frame, right?:

UIView *redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; redView.frame = YourFrame; [self.view.window addSubview:redView];

How did 3.4. find the UIImageView on the UICollectionViewCell that showed the cover?

This requires you to bind a tag to this UIImageView when you’re using it so that I can get the UIImageView.

4, specific implementation ideas?

Let us sum up the above analysis, see if we can analyze our specific ideas.

4.1. animated material

  • 4.1.1, when the user clicks on the moment, we should first of all the current window (note, is window Window) screenshot, standby.
  • 4.1.2, we need to have a tool that introduces the cutting point and the type of cut to this tool. It helps us to cut a picture into the style we want. For example, we need only the first half or the lower half of the screenshot.
    Advanced imitation of [iOS] transition animation airbnb
  • 4.1.3, we need to move the picture above the UICollectionViewCell users click on the Frame to the window coordinates, and then calculate the cutting point, finally put the window screenshots and pass this point cut, we do need the animation picture.
  • 4.1.4, now do animation elements we have UpAnimationPart and DownAnimationPart takes pictures, now only need CentreAnimationPart Cell visible in the picture above, the UICollectionView visiableCells can get us through. As a result, the material for the animation is already available.
    Advanced imitation of [iOS] transition animation airbnb

4.2. animation start position

The starting position of animation should be the easiest part of this animation.

  • The starting position of 4.2.1 and UpAnimationPart should be to click on the Y coordinates of the picture of that Cell. If you specify upTailorY as the Y coordinate of the picture that hits that Cell, then CGRect upAnimationImageViewFrame_start = CGRectMake (0, 0, JPScreenWidth, upTailorY);
  • 4.2.2, similarly, if downTailorY is specified as the bottom of the picture of the Cell (the Y coordinates plus the height of the image). Then the starting position of the DownAnimationPart should be: CGRect, downAnimationImageViewFrame_start = CGRectMake (0, downTailorY, JPScreenWidth, JPScreenHeight – downTailorY);
  • 4.2.3, and the initial position of the picture of Cell visible in the middle can be directly obtained by coordinate migration. After that, we also have the animation starting point for each part, so we can add UIImageView to the window later.

4.3. animation endpoint position

The first part of the test of mathematical skills finally came, but still a little excited. In fact, it’s very simple. Just look at a map:

Advanced imitation of [iOS] transition animation airbnb
  • The end point of 4.3.1 and UpAnimationPart is easy, so easy as you can write it directly: CGRect upAnimationImageViewFrame_end = CGRectMake (0, -upTailorY, JPScreenWidth, upTailorY);
  • The end points of 4.3.2 and DownAnimationPart are: CGRect, downAnimationImageViewFrame_end = CGRectMake (0, JPScreenHeight, JPScreenWidth, JPScreenHeight – downTailorY);
  • 4.3.3 and CentreAnimationPart can be a little complicated, but they should be divided into three cases. Specific see below:
    Advanced imitation of [iOS] transition animation airbnb
    4.3.3.1, TapImage it by clicking on the picture, it should be easy to the end point position is determined, filling the top of the screen:
    this is no objection? The other two types need to be positioned in reference to its location. CGRect, tapAnimationImageViewFrame_end = CGRectMake (0, 0, JPScreenWidth, JPScreenWidth*2.0/3.0), 4.3.3.2, TapImage_Left. Look at the picture below. You must know that, don’t you? We know the initial width of TapImage, and TapImage on the left side of the left picture space we can work out the screen width we know now using cross multiplication, we can quickly get the red box value is X, we want the end point position coordinates.
    , Advanced imitation of [iOS] transition animation airbnb,
    , 4.3.3.3, TapImage_Right. Do I have to go over this? Similar to the above.

5 code implementation

I do not intend to paste the code in the article, one, the length has been very long, and then paste the code, it will make some “too long do not see” the students feel a lot of pressure. Second, the code is already on the GitHub, and the code is still a little more comfortable in Xcode. And I put Keynote together too.

6 decoupling and extraction tools class

If you follow this line of thinking, you will find that all the code will be concentrated in one method, resulting in three hundred or four hundred lines of code in this method, very bloated. And enter and exit animation actually coupled together, to decoupling, to smoke tool class, and feel unable to start. This time you should have a ruling courage: “Lao Tzu must send you pumped into tools” determination. With this determination, the rest is to find a way.

There are many parameters to this animation, so you have to make a choice about what is necessary. That is, try to design API for the tool class.

* / *! After /~chinese * UICollectionViewCell @prama indexPath before the user selected the UICollectionViewCell @prama collectionView indexPath. * UICollectionView. * @prama user selected viewController animation window displayed on the viewController. * @prama presentViewController to complete the animation to display in the window on the viewController. * @prama afterPresentedBlock animation to finish in presentViewController do * * @return JPContainIDBlock. Close the animation block. * /

My understanding of decoupling is that before writing the code, there is a sense of “try not to be coupled.”. If the project is special time, you can temporarily don’t ignore these deep coupling, things may require long-term accumulation and to project the overall point of view, these can be the weekend between empty or project when to ponder over the gap.

There is perseverance, and sometimes it may take more time to decouple some class than you spend again. But, to sum up, what are we thinking about over time? Is this time spent on a higher level of transaction than the implementation?

7 about JPNavigationController

The animation was finally presented, and it was inseparable from one of my previous frameworks. That is to say, if there is no framework for my previous foundation, then the animation part of the closure can not be achieved.

Specifically embodied in the interception of pop gestures.

#pragma mark #pragma mark JPNavigationControllerDelegate -------------------------------------------------- - (BOOL) jp_navigationControllerShouldPushRight{[self backBtnClick:nil]; return NO;}

It can be roughly outlined that when the user starts pop, our current controller receives the query of the proxy method and asks if we need to continue the pop behavior. There’s an urgent need to receive this query in our animation, but there is no need to continue pop behavior, so we return NO.


If you want to understand the implementation of this framework, you can see the following three articles:
, first: [iOS]UINavigationController full screen pop, custom UINavigationBar for each controller. This article is mainly about how to implement the custom navigation bar, and all the ideas and implementations are JNTian.
second: [iOS]UINavigationController full screen pop, which adds a bottom linkage view to each controller. This article describes how to add a custom “bottom linkage view” on the existing custom navigation bar”. All the ideas and implementations are my own.
third: [iOS]UINavigationController full screen pop as controller, add left slide push. This time it will tell you how to implement left – click push to bound controllers, and with push animations.
or access my GitHub’s JPNavigationController.


08.GitHub address

The GitHub address is here.

My articles are collected

The following link is a collection of directories for all of my articles. These articles are all involved in the realization of each article has Github address, Github have source code. If you help to an article just in the actual development of you, or provide a way to achieve different, make you feel useful, just look at the words “every point of praise people, 99% are hotties, no single”

My collection index

You can also focus on my own brief book on iOS development. The topic of the article is really dry cargo.
If you have a problem, but at the end of the message, also can give me in micro-blog @ Panpan _HKbuy message, and visit my Github.