Animation effect four: exquisite landing

The traditional landing interface is just a static UI, allowing the user to enter a username and password. However, in order to increase the user experience, we can add animation effect to the landing screen appropriately. The static login interface for the example is as follows:

The effect after adding animations is as follows:

First, the animation effect analysis:

1. Title and two text boxes are pushed from the left side of the screen and have a layered feel.

2. The landing button is pushed up from below and has a spring effect.

3. The clouds in the background are floating all the time, and when the cloud leaves the right side of the screen, it immediately enters the interface again from the left side of the screen.

Second, ideas and code

First of all, to analyze the 1th, to get the title and two text boxes to push over, by default, should make their position outside the screen, as shown in

That is, the CenterX of the above element = centerx-screen width, in the case of title, write code in Viewwillappear:

Self.heading.centerX-= Self.view.width;

Then in the viewdidappear to perform animation operations, the idea is actually very simple, is to username the X-value to restore. The code is as follows:

[UIView animatewithduration:0.5 animations:^{        Self.heading.centerX + = Self.view.width;    }];

However, when watching animations, they come in layered sense, so we just need to add a delay effect to each animation. For example, username's animation code is as follows:

[UIView animatewithduration:0.5 delay:0.3 options:uiviewanimationoptioncurveeaseinout animations:^{        Self.username.centerX + = Self.view.width;    } Completion:nil];

let's analyze the 2nd, the spring effect of the landing button. We can design this by adding a certain distance (such as 30px) to the Y value of the login button and set its transparency to 0, which is displayed by the spring effect when the animation is performed, and the transparency is gradually set to 1 during the animation. This looks like the landing button has a spring effect.

Code in Viewwillappear:

Self.loginButton.alpha = 0;    Self.loginButton.centerY + = +;    Self.loginButton.layer.cornerRadius = 5;

code in Viewdidappear:

[UIView animatewithduration:0.5 delay:0.5 usingspringwithdamping:0.5 initialspringvelocity:0.0 options: Uiviewanimationoptioncurvelinear animations:^{        Self.loginButton.centerY-=;        Self.loginButton.alpha = 1.0;    } Completion:nil];

Finally, we will analyze the floating clouds. Since there are four clouds, you can consider using iboutletcollection directly

@property (Strong, Nonatomic) iboutletcollection (Uiimageview) Nsarray *clouds;

I) The positions of each cloud are inconsistent, so they do not drift on the screen at the same time.

Cloud Drift Time calculation (assuming that the time required to cross the screen is 60s):

1. The distance the cloud needs to drift should be the total screen width minus the x value of the cloud: self.view.width-cloud.x

2. The time required for each cloud drift should be (self.view.width-cloud.x)/self.view.width * 60

II) How to achieve the effect of infinite drift?

It should be when the cloud leaves the right side of the screen, that is, when the animation is complete, call the animation again immediately.

It may be a bit obscure, immediately on the code:

Clouds circulate over-(void) Animatecloud: (Uiimageview *) cloud {    CGFloat flyduration = (self.view.width-cloud.x)/Self.view.wi DTH *;    [UIView animatewithduration:flyduration delay:0.0 options:uiviewanimationoptioncurvelinear animations:^{        cloud.x = Self.view.width;    } completion:^ (BOOL finished) {        cloud.x =-Cloud.width;        [Self Animatecloud:cloud];}    ];}

So far, the code has been analyzed. The complete code is as follows:

-(void) Viewwillappear: (BOOL) animated {[Super viewwillappear:animated]; Move them (Heading,username,password) off of the screen just before your view controller makes an appearance Self.hea    Ding.centerx-= Self.view.width;    Self.username.centerX-= Self.view.width;        Self.password.centerX-= Self.view.width;    The login button does not show Self.loginButton.alpha = 0 by default;    Self.loginButton.centerY + = 30; Self.loginButton.layer.cornerRadius = 5;}        -(void) Viewdidappear: (BOOL) animated {[Super viewdidappear:animated]; Animate Label,textfield (Enter the field of view; Add delay operation, appear more layered sense) [UIView animatewithduration:0.5 animations:^{Self.heading.center    X + = Self.view.width;    }]; [UIView animatewithduration:0.5 delay:0.3 options:uiviewanimationoptioncurveeaseinout animations:^{self.username.c    Enterx + = Self.view.width;        } Completion:nil]; [UIView animatewithduration:0.5 delay:0.4 options:uiviewanimationoptioncurveeaseinout animations:^{self.password.c Enterx+ = Self.view.width;        } Completion:nil]; Animate login button (Spring effect) [UIView animatewithduration:0.5 delay:0.5 usingspringwithdamping:0.5 initialspringveloci        ty:0.0 options:uiviewanimationoptioncurvelinear animations:^{Self.loginButton.centerY-= 30;    Self.loginButton.alpha = 1.0;        } Completion:nil];    Animatecloud (Self.clouds[0]);    For (Uiimageview *cloud in self.clouds) {[Self animatecloud:cloud]; }}//Cloud loop over-(void) Animatecloud: (Uiimageview *) Cloud {cgfloat flyduration = (self.view.width-cloud.x)/Self.view.wi    DTH * 60; [UIView animatewithduration:flyduration delay:0.0 options:uiviewanimationoptioncurvelinear animations:^{cloud.x =    Self.view.width;        } completion:^ (BOOL finished) {cloud.x =-cloud.width;    [Self animatecloud:cloud]; }];}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Animation effect four: exquisite landing