IOS UIView Animation Practice (i): Uncover the mysteries of animation

Objective

In a face-looking society, no matter what, look good can always attract a little more attention. App is no exception, a good face of the app even if the function has been wheel times, will still be bought, the reason is to look pleasing to the eye, so graphic designers more and more attention. Fleeting, earthshaking, people are already not satisfied with the static beauty, so the dynamic user experience came into being, graphic designers are stretched, it is time for our programmers to come.

This article is the first article of UIView animation, starting from the concept of minimalism, for everyone to uncover the mystery of animation. Let's take a login interface as an example. Beautiful sun, graceful clouds, and a few small hill, lying in the middle of the user name, password input box and login button. Before the shelf, this interface may be bright blind nowadays, the dog is too. So our goal is to give this interface vitality.

Note: This article was written based on Swift 2.0 and Xcode 7 Beta 2. All elements in the login interface have been connected to the code (outlet), and in this example we will not use auto layout and sizeclasses.

The Moving input box

Our first scenario should be this way. The user opens the app and displays the login screen after the start screen, where there is no input box for the user name and password, and the next second they are floated from the left side of the screen.

First of all

We need to move the user name and password input boxes to the outside of the screen when the login screen is not yet displayed to the user. Open ViewController.swift , viewWillAppear() Add the following code to the method:

[CPP]View Plaincopy

1. Self.username.center.x-= Self.view.bounds.width
2. Self.password.center.x-= Self.view.bounds.width

These two lines of code use the user name, the password input box to move out of the screen, here can be used in a simple violent way, directly center x minus the screen width.

And then

We viewDidAppear() add the following code to the method:

[CPP]View Plaincopy

1. Uiview.animatewithduration (0.5, animations: {
2. Self.username.center.x + = Self.view.bounds.width
3. Self.password.center.x + = Self.view.bounds.width
4. })

animationWithDuration(_:animations:)is UIView the class method, from the method name can be seen, the method can be made to UIView move up. It has two parameters:

• duration: The duration of the animation.
• animation: Animation closures, in which you can change UIView the various animated properties.

Because the method is a class method, you can change multiple animation properties at the same time in a closure views . So in the above code, the location of the user name and password input boxes is changed. Compile and run, we can see the following effect:

But since two input boxes are sliding from the outside of the screen at the same time, it's a little stiff, so let's use another method to polish it.

At last

viewDidAppear()the code in our update:

[CPP]View Plaincopy

1. Uiview.animatewithduration (0.5, animations: {
2. Self.username.center.x + = Self.view.bounds.width
3. Self.password.center.x + = Self.view.bounds.width
4. })
6. Uiview.animatewithduration (0.5, delay:0.3, options:. allowUserInteraction, animations: {
7. Self.password.center.x + = Self.view.bounds.width
8. }, Completion:nil)

animationWithDuration(_:delay:options:animations:completion:)Method is UIView the same class method, but with 3 more parameters:

• delay: As the name implies, animation delays the execution of time.
• options: Some of the effects of custom animations, such as repeating animations, back and forth motion, and so on. This parameter is described in a later article.
• completion: It is also a closure that executes the logic in the closure after the animation is executed, and can be used to connect the animation, or you need to do some cleanup work after the animation is over.

Now that the compilation runs, you can see the following effect:

The User name input box slides into the screen first, and after a 0.3-second delay, the password input box is immediately followed.

Animation properties

In the previous section, we experienced the simple animation effect of the view, it is not difficult to find that actually caused the view to move the animations code in the closure, that is, the view property changes, and then UIView the class method generated the views of a property between the start value and the ending value of the tween animation. This leads to another concept, that is, the animation properties of the view, admittedly not all of the view properties are animated properties, let us introduce the animation properties of the view.

Location and size

• bounds: Properties that change the location and size of the view content.
• frame: Properties that change the position and size of the view.
• center: Changes the properties of the view position.

Appearance

• backgroundColor: Changes the background color UIKit linearly from the original color to the target color.
• alpha: Changes the transparency to UIKit create a fade effect.

Transformation

transformThe type of the property CGAffineTransform is, it is a struct, CoreGraphics there are several ways to generate different CGAffineTransform structures, so that the view is rotated, scaled, flipped, and so on, we look at how it is used. viewDidAppear()Add the following code to the method:

[CPP]View Plaincopy

1. Let rotation = Cgaffinetransformmakerotation (CGFloat (M_PI))
2. Uiview.animatewithduration (1, animations: {
3. Self.sun.transform = rotation
4. })

First, a rotating structure is created, the parameter is a CGFloat type of angle, here we use predefined constants such as M_PI 3.14 ..., that is, rotating a week, M_PI_2 representing 1.57 ..., that is, rotating half a week.

The animations rotation structure created in the closure is then assigned to the properties of the Sun view on the screen transform . The compile run can see the following effects:

Let's take a look at scaling and viewDidAppear() add the following code to the method:

[CPP]View Plaincopy

1. Let scale = cgaffinetransformmakescale (0.5, 0.5)
2. Uiview.animatewithduration (1, animations: {
3. Self.cloudBig.transform = Scale
4. })

First, a scaled structure is created, the first parameter is the scale of the x-axis, and the second parameter is the y-axis scale. Also animations assign the zoom structure created in the closure to the properties of the cloud view on the screen transform . The compile run can see the following effects:

Animation options

You should remember that we used the animationWithDuration(_:delay:options:animations:completion:) method before, which options was not described in detail at the time, this section will explain this property to you. optionsoptions allow you to customize UIKit how you create your animations. This property requires one or more UIAnimationOptions enumeration types, so let's look at what animation options are available.

Repeating class

• .Repeat: This property allows your animations to run repeatedly.
• .Autoreverse: This property allows your animation to continue to run back after the end of the run, following the opposite behavior. This property can only be .Repeat used with attribute combinations.

Let's take a look at how to use these two properties, we modify the animation of a password input box:

[CPP]View Plaincopy

1. Uiview.animatewithduration (0.5, delay:0.3, options:. Repeat, animations: {
2. Self.password.center.x + = Self.view.bounds.width
3. }, Completion:nil)

Compile and run to see the effect:

You can see that the Password entry box is constantly sliding from left to right. You can try .Autoreverse the effect or the combination effect on your own [.Repeat, .Autoreverse] .

Animation buffering

In real life, almost nothing can suddenly start to move, and then suddenly stop motionless. Objects that can be moving are basically started at a slower speed, gradually accelerating, reaching a steady speed, and then gradually slowing down when it stops, and finally stopping. So to make the animation more realistic, you can also use this way, that is ease-in and ease-out.

• .CurveLinear: This property will neither animate nor slow the animation, just do it with linear motion.
• .CurveEaseIn: This property causes the animation to run faster at the beginning.
• .CurveEaseOut: This property causes the animation to decelerate at the end of the run.
• .CurveEaseInOut: This property combines the two cases to make the animation accelerate at the beginning and slow down at the end.

Here is still the password input box as an example, modify the password input box animation code:

[CPP]View Plaincopy

1. Uiview.animatewithduration (0.5, delay:0.3, Options: [. Repeat,. AutoReverse,. Curveeaseout], animations: {
2. Self.password.center.x + = Self.view.bounds.width
3. }, Completion:nil)

The above code combines three animation options, first making the animation repeat, and then having the animation run again in the opposite direction after one execution, and finally the animation slows down at the end. Compile and run, this time we slow down the speed of the animation to see:

From the above effect, you can see a noticeable slowdown in speed when the password input box slides into the second half of the screen. You can also try a combination of other animation options in your project.

Conclusion

After reading this article, I believe that you have a general understanding of iOS animation, but also learned how to achieve a simple view animation, of course, these are just the tip of the iceberg iOS animation, I will continue to introduce you to iOS animation other knowledge, today first come here.

Author Profile:

Yu Yuxuan (@DevTalking), engaged in Java middleware Development, iOS development. Main host development enterprise-level ETL middleware, BPM Middleware, enterprise-class mobile applications, personal blog address: http://www.devtalking.com.

IOS UIView Animation Practice (i): Uncover the mysteries of animation