Achieve Twitter-ui effect

After using the ' Twitter ' app, I had the developer's vision and noticed that the coordination between the whole and the parts was a very interesting thing. This aroused my curiosity: How is this done? Let's discuss the layout of this view in detail: Isn't this an elegant effect? It looks as if it should, but you will find more after careful observation. With the ' Scrollview ' offset, the layer overlays, actions, and scale scaling are so smooth and coherent ... Really like this effect. So, let's do it right away. First, let's look at the final effect: # # # Structure Description-before writing the code, I want to give you a simple idea of how to build a UI. Open the ' main.storyboard ' file and within this controller you will find 2 main objects. The first is a view that renders ' Header ' and the second is ' Scrollview ', which contains ' Avatar ' and other information related to the account, such as ' username ' tag and ' follow ' button. There is also a view called ' Sizer ', which is designed to ensure that ' Scrollview ' has a large enough vertical sliding space. As you can see, this structure is very simple. A little notice will reveal that the ' Header ' is placed outside a ' Scrollview ' instead of being placed with other elements. Although this is not strictly the case, it will make the structural changes more flexible. # # # code-If you look closely at the last animation, you will notice that you want to manage 2 different actions: 1. Pull down (when ' Scrollview ' is already docked at the top of the screen) 2. Swipe up or down the second action can be subdivided into 4 small steps: + swipe up, up to the default size of the navigation bar and dock at the top of the screen. + swipe up, ' Avatar ' starts to become smaller. + when ' Header ' is fixed, ' Avatar ' will move to the bottom of it. + When the ' username ' label arrives at the top of the ' header ', a new white ' label ' will be displayed at the bottom of the ' header ' Center. The background image of ' Header ' will be rendered with Gaussian blur. Open ' Viewcontroller ' Let's implement these steps one by one. # # # Build Manager-The first thing to do is to get an offset of ' Scrollview '. We can implement the ' Scrollviewdidscroll ' method through the ' uiscrollviewdelegate ' protocol. The simplest way to animate on a ' View ' is to use ' Core Animation ' to gradually perform a three-dimensional transformation and give ' Layer.transform ' a new value. Refer to this article for ' Core Animation ' http://www.thinkandbuild.it/ Playing-around-with-core-graphics-core-animation-and-touch-events-part-1/These are the first parts of the ' Scrollviewdidscroll: ' method

    CGFloat offset = scrollView.contentOffset.y;    CATransform3D avatarTransform = CATransform3DIdentity;    CATransform3D headerTransform = CATransform3DIdentity;

Here we get a current vertical offset of ' offset ' and initialize 2 ' catransform3d ' variables. # # # Dropdown-The management of pull-down actions:

if (Offset <0) {CGFloat headerscalefactor =-(offset)/header. Bounds. Size. Height;CGFloat headersizevariation = (header. Bounds. Size. Height* (1.0+ headerscalefactor)-header. Bounds. Size. Height) /2.0;Headertransform = Catransform3dtranslate (Headertransform,0, Headersizevariation,0);Headertransform = Catransform3dscale (Headertransform,1.0+ Headerscalefactor,1.0+ Headerscalefactor,0);Header. Layer. Transform= Headertransform;}

First, we check that ' offset ' is a negative number: The user will enter the ' Scrollview ' elastic area during the drop-down process. The rest of the code is simple mathematical logic. The ' Header ' is enlarged because its upper edge is fixed at the top of the screen, while the bottom picture is scaled. ' The transformation is made by scaling and subsequently translating to the top for a value equal to the size variation of The view. ' Actually, move the midpoint of the ' ImageView ' layer to the top and scale it at the same time, you can get the same effect. ' Headerscalefactor ' is a part of the calculation that is used. We want to scale the ' Header ' appropriately with ' offset '. In other words, when ' offset ' is twice times the height of the ' Header ', ' headerscalefactor ' must be 2.0. The second action we need to manage is to swipe up and down. Let's see how you can step through the main elements of the UI to complete the transformation. # # # Head (First stage)-The current ' offset ' should be greater than 0. The ' header ' should be vertically transformed with ' offset ' until its desired height (we'll explain the Gaussian blur of the ' header ' later on).

=0MAX(-offset_HeaderStop-offset0);

This code is very simple. We just need to define a minimum value where the ' Header ' stops moving. What makes me ashamed is that I am more lazy! So I wrote some dead numbers, like ' offset_headerstop '. In fact, we can get the same effect by calculating the position of the UI element. The next time you are free to change. # # # Avatar-' Avatar ' is scaled as we deal with the logic of pull-down, just in this case, the picture is reaching the bottom instead of the top. This code is similar to the above, except that scaling is reduced by 1.4.

Avatar-----------CGFloat avatarscalefactor = MIN (offset_headerstop, offset)/avatarimage. Bounds. Size. Height/1.4;CGFloat avatarsizevariation = (avatarimage. Bounds. Size. Height* (1.0+ avatarscalefactor)-Avatarimage. Bounds. Size. Height) /2.0;Avatartransform = Catransform3dtranslate (Avatartransform,0, Avatarsizevariation,0);Avatartransform = Catransform3dscale (Avatartransform,1.0-avatarscalefactor,1.0-avatarscalefactor,0);

As you can see, when the ' Header ' stops changing, we use the ' MIN ' function to stop the scaling of ' Avatar '. At this point, we set the topmost layer based on the current ' offset '. Unless ' offset ' is less than or equal to ' offset_headerstop ', the topmost layer is ' Avatar ', otherwise ' Header '.

if (offset <= offset_headerstop) {if (Avatarimage.layer  .zposition  < header .layer  .zposition ) {Header.layer  .zposition  = 0  }} else {if (Avatarimage.layer   >= header.layer  ) {header.layer  .zPo Sition  = 2  ;  } } }

# # # White label-This piece of code is a white ' Label ' animation:

        //  ------------ Label        = CATransform3DMakeTranslation(0MAX(-distance_W_LabelHeader-0);        headerLabel.layer.= labelTransform;

Here are 2 variables that make me ashamed: when ' offset ' equals ' offset_b_labelheader ', the Black ' username ' label just touches the bottom of the ' Header '.

distance_W_LabelHeaderis Header Label the distance between the bottom and the white end point.

The transformation is calculated by this logic: the black Label touches Header , the white Label appears immediately, and Header stops moving when it reaches the midpoint position. So we create values using the following code Y :

MAX(-distance_W_LabelHeader- offset)

Gaussian Blur

The last effect is Header the blur. In order to get the right solution, I used 3 different libraries ... I've also tried to OpenGL ES create a base class, but it's always very slow to update the blur in real time.

Then I realized that I could only calculate the blur once, overlapping the blurred and blurry images, just changing the alpha values. I'm pretty sure that's Twitter the way it is.

In viewDidAppear , we calculate Header the blur value and hide it, setting the alpha value to 0.

 //header-blurred Image  HeaderBlurI Mageview = [[uiimageview  alloc] Initwithframe:header .bounds ]; Headerblurimageview.image  = [uiimage  Imagenamed:@ "HEADER_BG" ] blurredimagewithradius:10  iterations:20  tintcolor:[uicolor  Clearcolor]]; Headerblurimageview.contentmode  = Uiviewcontentmodescaleaspectfill; Headerblurimageview.alpha  = 0.0 ; [Header Insertsubview:headerblurimageview Belowsubview:headerlabel]; Header.clipstobounds  = yes ; 

The fuzzy view is FXBlurView implemented.

In the scrollViewDidScroll: method, we only need to offset set alpha :

//  ------------ Blur        MIN(1.0, (offset - offset_B_LabelHeader) / distance_W_LabelHeader);

The logic behind this calculation is that the alpha maximum value is 1, and when the black touch touches the Label Header blur effect starts to appear, and when the white reaches its final position, it stops blurring.

That's it!

I hope you enjoy this tutorial. Learning how to reproduce this great animated effect is great fun for me.

Swift code:Download Source
OC Code:Download Source

Original: Implementing the TWITTER IOS APP UI

Achieve Twitter-ui effect