How do I start a layered boot animation for an iOS app?

Why should I write this article?

This is a very old topic, from two years ago Sina Weibo started using multi-layer animation to make the Launch Guide page of the iOS app (of course, Weibo is not a history of the first question is debatable) after the various types of guide pages in the endless, until now, GitHub also has a variety of forms of the library to choose from, while many apps have slowly started to return to a single static guide page. Although the fashion trend is constantly changing, but I have been thinking, this multi-layer start-guided animation is what is the structure? How hard is it to achieve this? This article will try to explore this topic.

Two. What are we going to look like?

First set the goal, we want to achieve is to start the boot screen of one--multi-level animation. Then we need to set the theme of an animation, we need to express our feelings, or lyrical ~ or moving ~ or tease. Of course, this is mostly the work of designers.
Well, since it is the demo, and I do not understand the design and do not understand the aesthetics and do not understand the PS Dafa, then, it may be made of a such son ~ ~ ~

To summarize the final goal, there are several points:
1, 4 pages.
2, each page may have several layers, the animation speed is different.
3, the whole sliding feel should be smooth and is a page-style.

Three. What controls do you use?

At the beginning I said, this is to explore, not to achieve, so absolutely no use of any 3rd library to complete. Maximizing the use of Apple's native controls is the way to solve the problem.

So, of course we choose Uiscrollview ~ ~ ~ ~ ~ ~ ~ unless you are a hand control ... It is necessary to use the most basic uiview to achieve a similar sliding effect of the uiscrollview.

What? You asked me what Uiscrollview was?

。。。。。。

Here are a few key attributes of Uiscrollview, and I'm sure you understand. It is important to note that, along with the ScrollView drag around, the contentoffset is always changing. Value range: (0,0) – (320 * 3, 0). And this attribute is the key value we need to use.

Four. What do I do?

Above I long-winded, finally told everyone to use Uiscrollview to do, then the problem came, excavator technology which strong? Ah no, what should I do? Here is the dry goods ~

1. First of all, we're going to create the scrollview that we carry throughout the animation scene.

As below, you need to set several key properties of ScrollView: Frame, contentsize, Alwaysbouncehorizontal, paginenabled (if this is no, then the elastic effect between pages is gone), delegate (You need to set up to get the scrolling state of the ScrollView) and so on.

//initialization  scrollview-  (void) initscrollview{     Cgsize screensize = [uiscreen mainscreen].bounds.size;     _ Scrollview = [[uiscrollview alloc] initwithframe:cgrectmake (0, 0,  Screensize.width, screensize.height)];//Our ScrollView frame should be the screen size     _ Scrollview.contentsize = cgsizemake (screensize.width * 4, screensize.height);// But we want our scrollView to be shown in the area of 4 screens that are so big     _scrollview.alwaysbouncehorizontal = yes ;//Horizontal drag     _scrollview.pagingenabled = yes;//key properties to open the page mode.     _scrollview.delegate = self;    _ scrollview.showshorizontalscrollindicator = no;//do not display scroll bars ~         [self.view addsubview:_scrollview];} 

Now that we have the animated canvas ready, let's start by adding the elements to each page.

2. Join the page element

Or do not put the full length of the code, take the first page for example.
The front-of-the-sky Snake-Poo (Me) demo shows that on the first page, we're going to have 3 Uilabel, one uiimageview.
So good, these elements we will declare to him.

@interface Viewcontroller () @property (Strong, nonatomic) Uiscrollview *scrollview;//it's basic! @property (Strong, nonatomic) Uiimageview *girlimageview; @property (Strong, nonatomic) UILabel *label_page1_1;@ Property (Strong, Nonatomic) UILabel *label_page1_2; @property (Strong, nonatomic) UILabel *label_page1_3; @end

Then put the elements of the first page, add in ~

For a more convenient initialization of the Uilabel, I added a simple class method for Uilabel. is to make the code more concise and readable. +  (Instancetype) Labelwithtext: (nsstring *) Text font: (uifont *) Font color: (UIColor  *) Color origin: (cgpoint) Origin{    uilabel *label = [[uilabel  alloc] initwithframe:cgrectmake (origin.x, origin.y, 1000, 20)];     label.text = text;    label.font = font;     label.textcolor = color;    [label sizetofit];     Return label;}  //then we add the elements of the first page.      self.label_page1_1 = [uilabel labelwithtext:@ "I want to buy iphone6! " font:[uifont systemfontofsize:18.0f] color:[uicolor redcolor] origin:cgpointmake ( 140, 200)];    [self.scrollview addsubview:self.label_page1_1];      self.label_page1_2 = [uilabel labelwithtext:@ "I want to see a doctor concert ~ ~ ~"  font:[UIFont systemFontOfSize:18.0f] color:[UIColor  Blackcolor] origin:cgpointmake (140, 240)];    [self.scrollview addsubview: self.label_page1_2];     self.label_page1_3 = [uilabel labelwithtext:@ "I'm going to Dali!" " font:[uifont systemfontofsize:18.0f] color:[uicolor orangecolor] origin:cgpointmake (140, 280)];     [self.scrollView addSubview:self.label_page1_3];         self.girlImageView = [[UIImageView alloc] initWithImage:[UIImage  imagenamed:@ "Image_girl"]];    self.girlimageview.frame = cgrectmake (100,  KSCREENHEIGHT - 200 - 50, 100, 200);   [self.scrollview  AddSubview:self.girlImageView];

3. Make the first page move up ~ ~

As soon as the first page is shown, we want the element on the first page to have a moving effect. Well, after we've just added the first page element, we can do the following things immediately:

    self.girlimageview.transform = cgaffinetransformmaketranslation ( -200, 0 );     self.label_page1_1.transform = cgaffinetransformmaketranslation (- 100 ,  0);     self.label_page1_2.transform = cgaffinetransformmaketranslation ( 100, 0);     self.label_page1_3.transform = cgaffinetransformmaketranslation (- 120, 0);         [uiview animatewithduration:0.7                       animations:^{                          self.girlimageview.transform =  cgaffinetransformmaketranslation (0, 0);                          self.label_page1_1.transform =  Cgaffinetransformmaketranslation (0, 0);                          self.label_page1_2. Transform = cgaffinetransformmaketranslation (0, 0);                           Self.label_page1_3.transform = cgaffinetransformmaketranslation (0, 0);                      }];

As you can see, we give the first page four elements different horizontal displacements, and then hope it takes 0.7 seconds to move to the position before init them. This completes the first 4-layer dislocation animation.

Then, we hope that when the finger sliding scrollview, the first page of the four elements can have a corresponding layered dislocation animation, then we first need to get the current scrollview displacement, which is mentioned earlier important contentoffset. This value, in:

-(void) Scrollviewdidscroll: (Uiscrollview *) ScrollView

, you can get it in real time.

Specifically, what to do.

-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{cgfloat currentx = scrollview.contentoffset.x;  if (CurrentX <= kscreenwidth) {self.girlImageView.transform = Cgaffinetransformmaketranslation ((kscreenwidth        + 100.0f) * currentx/kscreenwidth, 0);    Self.label_page1_2.transform = cgaffinetransformmaketranslation (-$ * currentx/kscreenwidth, 0); }}

Hehe, is not to understand, that is right ...

As explained below, the first two theorems are thrown:

Theorem one: In the sliding process of scrollview, visually, the elements on the ScrollView move in the opposite direction of the finger, and the distance between them is equal to the distance of the finger slide. But the physical location of all the elements on the ScrollView has not changed.

Theorem two: In the sliding process of the scrollview, the visual position of the ScrollView element remains the same when and only if the physical movement distance of the element on the ScrollView is equal to the finger slip distance and the direction of movement is reversed.

Then we have two requirements:

First, I hope that the little girl to follow the finger slide, the visual not to move to the left until disappear, but to the right to move, to slide to the second page, the little girl appears on the right side of the screen.

We should make it clear that the movement of the little girl can only be moved on the ScrollView position. According to theorem two, we know that the actual physical displacement of the little girl on the ScrollView should be if the little girl is kept visually on the same position:

formula 4.3.1 basedistance = kscreenwidth screen width

So if we want to move to the second page, the girl's visual position is shifted right by 100 pixels, then the actual physical displacement of the little girl on the ScrollView should be:

Formula 4.3.2 Distance = basedistance + 100

The first page to the second page, ScrollView total displacement is kscreenwidth, the current ScrollView displacement is contentoffset.x, can be drawn, the current displacement ratio:

Formula 4.3.3 Status = Scrollview.contentoffest.x/distance

by 4.3.1 4.3.2 4.3.3 available, we set the way for the little girl to shift:

Self.girlImageView.transform = Cgaffinetransformmaketranslation ((kscreenwidth + 100.0f) * currentx/kscreenwidth, 0);

Second requirement, you want the first page, the second label moves to the left faster than the other two labels.

According to theorem two, and similar to the push-down (derivation) method, it is also easy to get a second label displacement mode:

Self.label_page1_2.transform = cgaffinetransformmaketranslation (-$ * currentx/kscreenwidth, 0);

Five. Summary

To sum up, we know the fundamentals of layered animation. If you use more layers, more displacements or angle changes, you can combine more complex layered animations.

As you can see, the basic principle of layered animation is not complicated, but why are so many people inclined to use the 3rd library to achieve it? A word, lazy.

With the growing demand for beauty and interactivity in mobile development today, the inspiration and effort that designers need to create a beautiful app is becoming increasingly important. As an not-so-beautiful iOS engineer who wants to remain invincible in the wave of mobility, it is far more important to try more new possibilities than to achieve more.

At the end of the final, attach a demo running effect:

Click to view Demo

How do I start a layered boot animation for an iOS app?