The last chapter is the beginning of a hands-on animation, around the animation section of the last chapter, we will continue to achieve the other functions of the login page, we are going to add today is the login click after some effects

Animate the login button

We animated both the head and the input fields, but clicking on the button still didn’t animate, so let’s animate the click button

For the login button, instead of using an effect like the one above, we’ll use a pop-up effect in UIView

Before the button appears, we increase the y value of the button by 50 and set the alpha to 0.0

Alpha = 0.0 loginbtn.center. Y += 30.0Copy the code

We animate him when he is about to appear

UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: { 
    self.loginBtn.center.y -= 30.0
    self.loginBtn.alpha = 1.0
}, completion: nil)Copy the code

This is also a kind of animation that comes with UIView, where usingSpringWithDamping represents the jitter index between 0 and 1. InitialSpringVelocity represents the initial speed at which the animation starts

You can see that the login button has a jitter effect. In order to make the effect more obvious, I deliberately set the value to be very large. In the usual development, it should be discussed with the visual

Button click animation

We put an animation on the button that makes it longer when we click it, with a spring effect

On the button click event, add

Uiview. animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: {self. LoginBtn. Bounds. Size. Width + = 80}, completion: nil) / / change position UIView. The animate (withDuration: 0.33, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0, options: [], animations: { self.loginBtn.center.y += 60 }, completion: nil)Copy the code

And this animation, like the one we just changed the position of the button, is a Spring animation, and this one, if you click again before the animation is finished, it doesn’t execute the animation again from the beginning

Add a chrysanthemum, add a button color change

Spinner. Frame = CGRect(x: -20.0, y: 6.0, width: 20.0, height: 0) Spinner. StartAnimating () spinner. Alpha = 0.0 loginbtn.addSubView (spinner) Display self. The spinner. Center = CGPoint (x: 40.0, y: self. LoginBtn. Frame. The size, height / 2) self. The spinner. Alpha = 1.0Copy the code

We also changed the user name and password of delay used before, and got different effects

Uiview. animate(withDuration: 0.5, delay: 0.3, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: { self.usernameTextFiled.center.x += self.view.bounds.width}, completion: Nil) uiView.animate (withDuration: 0.5, delay: 0.4, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: { self.passwordTextFiled.center.x += self.view.bounds.width}, completion: nil)Copy the code

In fact, we can see that it is not difficult to make simple animation, mainly the use of parameters and methods

Welcome to follow my official account. I will regularly share some solutions to the problems I encounter in the project and some practical skills of iOS. At the present stage, I will mainly sort out some basic knowledge and record it






The post will also be synchronized to my blog: ppsheep.com