How does one enable a layered boot animation for an iOS App ?, Iosapp

How does one enable a layered boot animation for an iOS App ?, Iosapp
I. Why should I write this article?

This is an old topic. Two years ago, Sina Weibo began to use multi-layer animations to make boot pages for iOS apps eye-catching (of course, Weibo is not the first issue in history to be discussed, various types of boot pages have emerged one after another. Today, various types of libraries have been available on github, and many apps of colleagues have begun to return to a single static boot page. Although the fashion trend is constantly changing, I have been thinking about the structure of this multi-layer boot guide animation? How hard is it to implement? This article will try to explore this topic.

2. What are we going to do? First, set the goal. What we need to achieve is a multi-level animation in the boot guide screen. Then we need to set an animation subject. We need to express our emotions or lyrical feelings ~ Or touching ~ Or tease ratio ~. Of course, this is mostly the work of designers.
Well, since it's a demo, and I don't understand design, aesthetics, or PS, maybe it's like this ~~~

To sum up, the final goal should be as follows: Key Points:

1 and 4 pages.
2. Each page may have several layers with different animation speeds.
3. The entire slide should be smooth and page-based.

3. What controls are used?
As I mentioned at the beginning, this is to be explored, rather than for implementation. Therefore, it cannot be accomplished by any 3rd library. Maximizing the use of apple's native controls is a solution to the problem.
So, of course we chose UIScrollView ~~~ Unless you are a mobile industrial engineer... We need to use the most basic UIView to implement a UIScrollView with similar sliding effects ....

What? What is UIScrollView ?......

Below are several key attributes of UIScrollView, which I believe you understand. It should be noted that the contentOffset is constantly transformed along with the Left and Right drag of the scrollview. Value Range: (0, 0)-(320*3, 0 ). This attribute is the key value we need to use.

4. What should I do?
I have been talking for a long time and finally told everyone to use UIScrollView. The question is, which excavator technology is strong? No, what should I do? Below is the dry goods ~

1. First, we need to create the scrollView that carries the entire animation scene. As follows, you need to set several key attributes of scrollView: frame, contentSize, alwaysBounceHorizontal, and paginEnabled (if this is NO, the elasticity between pages will be lost ), delegate (you need to set it to get the rolling status of the scrollview.

// Initialize scrollview-(void) initScrollView {CGSize screenSize = [UIScreen mainScreen]. bounds. size; _ scrollView = [[UIScrollView alloc] initWithFrame: CGRectMake (0, 0, screenSize. width, screenSize. height)]; // the frame of our scrollView should be the screen size _ scrollView. contentSize = CGSizeMake (screenSize. width * 4, screenSize. height); // However, we hope that the displayed area of the scrollView is as big as 4 screens. alwaysBounceHorizontal = YES; // you can always drag _ scro LlView. pagingEnabled = YES; // key attribute. Enable page mode. _ ScrollView. delegate = self; _ scrollView. showsHorizontalScrollIndicator = NO; // do not display the scroll bar ~ [Self. view addSubview: _ scrollView];}

Now that we have prepared the animation canvas, add the elements on each page.

2. Add page elements instead of code in full space. Take the first page as an example.
The demo of my previous dashboard shows that on the first page, we need three UILabel and one UIImageView.
Well, we will declare these elements for him.

@ Interface ViewController () <UIScrollViewDelegate> @ property (strong, nonatomic) UIScrollView * scrollView; // This is basic! @ Property (strong, nonatomic) UIImageView * girlImageView; @ property (strong, nonatomic) UILabel * comment; @ property (strong, nonatomic) UILabel * label_page1_2; @ property (strong, nonatomic) UILabel * label_page1_3; @ end

Add the elements on the first page ~

// To facilitate UILabel initialization, I added a simple class method for UILabel. 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 on the first page. Self. label_page1_1 = [UILabel labelWithText: @ "I want to buy iPhone6! "Font: [UIFont systemFontOfSize: 18366f] 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: 18366f] 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: 18366f] 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. Move the first page ~~ When the first page is displayed, we hope that the elements on the first page can have a dynamic effect. After adding the first page element above, we can do the following:

    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);                     }];

We can see that we give the four elements on the first page different horizontal displacement, And then we want it to use 0.7 seconds to move to the location where they were previously init. In this way, the first layer 4 dislocation animation is completed.

Then, we hope that the four elements on the first page can have a layered dislocation animation when sliding the scrollview by fingers. First, we need to get the displacement of the current scrollView, that is, the important contentOffset mentioned above. This value is in

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

.
Specifically, how to do this.

- (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(- 200 * currentX / kScreenWidth, 0);    }}

Haha, isn't it understandable? that's right...

The following explains how to throw two Theorem:

Theorem 1: In the course of scrollview sliding, visually, the moving direction of elements on scrollview is opposite to the sliding direction of the finger, and the moving distance is equal to the sliding distance of the finger. However, the physical location of all elements on scrollview remains unchanged.

Theorem 2: During scrollview sliding, when and only when the physical moving distance of elements on scrollview is equal to the sliding distance of fingers and the moving direction is opposite, the visual position of the scrollview element remains unchanged.

Then we have two requirements,

First, I hope that when the little girl slides her fingers, she does not move her eyes to the left until it disappears, but to the right. When she slides to the second page, she appears on the right of the screen.

We should make it clear that the movement of the girl can only be moved on the scrollview. According to Theorem 2, we know that if the position of the girl remains unchanged visually, the actual physical displacement of the girl on the scrollView should be:

Formula 4.3.1 baseDistance = kScreenWidth: screen width

If we want to move the girl's visual position to the second page to 100 pixels, the actual physical displacement of the girl on the scrollView should be:

Formula 4.3.2 distance = baseDistance + 100

From Page 1 to page 2, the total displacement of scrollView is kScreenWidth, and the current displacement of scrollView is contentOffset. x. We can conclude that the ratio of the current displacement is as follows:

Formula 4.3.3 status = scrollView. contentOffest. x/distance

We can use 4.3.1 4.3.2 4.3.3 To set the girl's displacement method:

        self.girlImageView.transform = CGAffineTransformMakeTranslation((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

The second requirement is to move the second label to the left faster than the other two labels on the first page.
According to Theorem 2, and similar to the above Pushdown (derivation) method, it is also easy to get the displacement method of the second label:

        self.label_page1_2.transform = CGAffineTransformMakeTranslation(- 200 * currentX / kScreenWidth, 0);

V. Summary
To sum up, we know the basic principles of layered animation. If you use more layers, more displacement or angle changes, you can combine more complex layered animations.

We can see that the basic principle of layered animation is not complex, but why do so many people prefer to use 3rd library for implementation? One word, lazy.

Nowadays, the mobile development field has higher and higher requirements on aesthetic and interaction, and the designer's inspiration and efforts become more and more important when developing a beautiful app. As an iOS engineer who is not very aesthetic, it is far more important to keep trying more new functions in an invincible position in the mobile wave.

Finally, a demo running effect is provided:

Click to view demo