Animation effect 4: exquisite login, animation effect

Animation effect 4: exquisite login, animation effect

The traditional login interface is just a static UI, allowing users to enter their usernames and passwords. However, to increase the user experience, we can add appropriate animation effects to the login interface. The static login interface is as follows:

After an animation is added, the effect is as follows:

I. animation effect analysis:

1. The title and two text boxes are pushed from the left side of the screen and have a sense of attention.

2. the login button is pushed from below and has a spring effect.

3. the clouds in the background are always floating. When the clouds leave the right side of the screen, they will immediately enter the screen again from the left side of the screen.

Ii. Ideas and code

First, let's analyze the first point. To push the title and the two text boxes forward, by default, they should be positioned outside the screen, as shown in

That is, the CenterX = CenterX-screen width of the above element. Taking the title as an example, write the code in viewWillAppear:

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

Then execute the animation operation in viewDidAppear. The idea is actually very simple, that is, restore the x value of username. The Code is as follows:

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

However, when watching the animation, they have a sense of excitement when they come in, so we only need to add a delayed effect to their respective animations. For example, the username animation code is as follows:

[UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{        self.username.centerX += self.view.width;    } completion:nil];

Next, let's analyze the Spring Effect of the login button. In this way, we can add a certain distance (such as 30px) to the y value of the login button and set its transparency to 0. When performing an animation, we can use the Spring Effect to display it, during the animation process, the transparency is gradually set to 1. In this way, the login button has the same spring effect.

Code in viewWillAppear:

self.loginButton.alpha = 0;    self.loginButton.centerY += 30;    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 -= 30;        self.loginButton.alpha = 1.0;    } completion:nil];

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

@property (strong, nonatomic) IBOutletCollection(UIImageView) NSArray *clouds;

I) The positions of clouds are inconsistent, so the time they drift on the screen is also inconsistent.

Cloud drift time calculation (assuming the time required to cross the screen is 60 s ):

1. The distance between the clouds to be moved should be the total width of the screen minus the x value of the clouds: 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?

When the cloud leaves the right side of the screen, that is, when the animation is completed, the animation is immediately called.

It may be a bit obscure, and the code is immediately written:

// Cloud loop-(void) animateCloud :( UIImageView *) cloud {CGFloat flyDuration = (self. view. width-cloud. x)/self. view. width * 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];}

Now, 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. heading. centerX-= self. view. width; self. username. centerX-= self. view. width; self. password. centerX-= self. view. width; // the login button does not display self by default. loginButton. alpha = 0; self. loginButton. centerY + = 30; self. loginButton. layer. cornerRadius = 5;}-(void) viewDidAppear :( BOOL) animated {[super viewDidAppear: animated]; // animate label, textfield (entering the field of view; adding delayed operations, more appealing) [UIView animateWithDuration: 0.5 animations: ^ {self. heading. centerX + = self. view. width;}]; [UIView animateWithDuration: 0.5 delay: 0.3 options: UIViewAnimationOptionCurveEaseInOut animations: ^ {self. username. centerX + = self. view. width;} completion: nil]; [UIView animateWithDuration: 0.5 delay: 0.4 options: UIViewAnimationOptionCurveEaseInOut animations: ^ {self. password. centerX + = self. view. width;} completion: nil]; // animate login button (Spring Effect) [UIView animateWithDuration: 0.5 delay: 0.5 usingSpringWithDamping: 0.5 initialSpringVelocity: 0.0 options: Unknown 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-(void) animateCloud :( UIImageView *) cloud {CGFloat flyDuration = (self. view. width-cloud. x)/self. view. width * 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 Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.