iOS animation--viewanimations

In this article we say the animation API in Uikit, the midterm includes:

UIView.UIView.animateWithDuration

Uiview.transitionwithview

Uiview.animatekeyframeswithduration

Uiview.addkeyframewithrelativestarttime

Today's story will revolve around these APIs, explaining his past life and present.

Uikit Animation API is very simple and convenient to use, he avoids the complexity of the core Animation, although in fact Uikit animation API at the bottom of the use of the core Animation.

Come to the first one, UIView.UIView.animateWithDuration.

Let's take a look at the function prototype:

Class Func animatewithduration (Duration:nstimeinterval, Delay:nstimeinterval, usingspringwithdamping dampingRatio: CGFloat, Initialspringvelocity velocity:cgfloat, options:uiviewanimationoptions, animations: ()-> Void, completion : ((Bool)-> Void)?

Altogether seven parameters:

Duration

Represents the animation execution time.

Delay

Animation delay time.

Usingspringwithdamping

Represents a resilient property.

Initialspringvelocity

Initial speed.

Options

Optional, some optional animation effects, including repetition, etc.

Animations

Represents the animated content that is performed, including the opacity gradient, movement, and scaling.

Completion

Represents the content that is executed after the animation has finished.

For these parameters, select a column and try different parameters so that you can better understand the meaning of each parameter.

What a nice, ugly animation.

Self.animationView2.alpha = 0

Self.animationView3.alpha = 0

Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, Options:. Repeat, animations: {()-> Void in

SELF.ANIMATIONVIEW.CENTER.Y + 100

}) {(Bool)-> Void in

println ("Finish")

}

Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, Options:. Repeat, animations: {()-> Void in

Self.animationView2.alpha = 1

}) {(Bool)-> Void in

println ("Finish")

}

Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, Options:. Repeat, animations: {()-> Void in

SELF.ANIMATIONVIEW3.CENTER.Y-= 100

Self.animationView3.alpha = 1

}) {(Bool)-> Void in

println ("Finish")

}

The code is not interpreted line by row, and three uiview.animatewithduration operate three squares respectively. The first box is a moving animation, the second is a transparency gradient animation, the third box is moving the combination of transparency gradient animation, may not see very clearly. I have to say that the animation is really ugly ~ ~ ~

UIView.UIView.animateWithDuration This API is meant to be a gradual change in the properties of UIView, which include: location, size, transparency, color, and so on.

Let's take a look at Uiview.transitionwithview, which is an excessive animation, mainly for UIView to enter or leave the view.

Let's take a look at this animation effect:

9.gif

Where the banner right to disappear animation with the above mentioned UIView.UIView.animateWithDuration, and into the animation is now to speak of the Uiview.transitionwithview. It's like a page of pages flipping down.

Let's take a look at the function prototype

Class Func Transitionwithview (View:uiview, Duration:nstimeinterval, options:uiviewanimationoptions, animations: ()-& Gt void, Completion: ((Bool)-> void)?

Altogether five parameters:

View

This is, of course, the object that specifies the animation.

Duration

Same as above. This parameter specifies the length of the animation time.

Options

This is an optional parameter, although optional, but it doesn't make sense to fill out this API, because UIView how to get into the view is determined by this parameter. In the end is like a page, or like a shutter rotation is determined by this parameter, specific what you can choose, point in to see it.

Animations

This option you can interpret as UIView after the end of the animation.

Completion

Code that runs after the animation ends.

The code probably looks like this.

Uiview.transitionwithview (Status, duration:0.33, options:

. Curveeaseout |. Transitioncurldown, animations: {

Self.yourView.hidden = False

}, Completion:nil

})

This part of the code has been uploaded Github,github address at the end of the article.

I believe that look at the source code, we can understand.

Here is another animation, also used in the previous mentioned functions written:

This show is too bad, I don't know what you see there

Imitation 3D effect, the code is uploaded in the demo, we see it yourself ~

To the last function, Uiview.animatekeyframeswithduration, let's take a look at the animation effect.

Small plane ~ Fly, Fly ~

We can easily find that this animation is done in many stages, We can certainly do it with the first function we mentioned, but don't you think nesting UIView.UIView.animateWithDuration is a bad idea, and we certainly have a better way to do it, which is what we're going to say, first look at the function prototype:

Class Func animatekeyframeswithduration (Duration:nstimeinterval, Delay:nstimeinterval, Options: Uiviewkeyframeanimationoptions, animations: ()-> Void, Completion: ((Bool)-> void)?

Altogether five parameters:

Duration: Time of the entire animation process.

Delay: How long does the delay begin?

Options: Can be an option, such as repetition, upside down to the effect, you try it.

Animations: Animations that need to be executed, which can be multiple uiview.addkeyframewithrelativestarttime.

As for this uiview.addkeyframewithrelativestarttime method, similar to the first UIView.UIView.animateWithDuration we mentioned, it is also a method of attribute gradients, but this method can only be written in his father Uivi Ew.addkeyframewithrelativestarttime in the animation parameter function block.

Completion: Code that executes after the animation finishes execution.

Let's take a look at our code to achieve this small plane ~ Fly ~ ~:

Let Originalcenter = Planeimage.center

Uiview.animatekeyframeswithduration (1.5, delay:0.0, options:. Repeat, animations: {

Add keyframes

Uiview.addkeyframewithrelativestarttime (0.0, relativeduration:0.25, animations: {

Self.planeimage.center.x + 80.0

SELF.PLANEIMAGE.CENTER.Y-= 10.0

})

Uiview.addkeyframewithrelativestarttime (0.1, relativeduration:0.4) {

Self.planeImage.transform = Cgaffinetransformmakerotation (CGFloat (-M_PI_4/2))

}

Uiview.addkeyframewithrelativestarttime (0.25, relativeduration:0.25) {

Self.planeimage.center.x + 100.0

SELF.PLANEIMAGE.CENTER.Y-= 50.0

Self.planeImage.alpha = 0.0

}

Uiview.addkeyframewithrelativestarttime (0.51, relativeduration:0.01) {

Self.planeImage.transform = cgaffinetransformidentity

Self.planeImage.center = Cgpoint (x:0.0, Y:ORIGINALCENTER.Y)

}

Uiview.addkeyframewithrelativestarttime (0.55, relativeduration:0.45) {

Self.planeImage.alpha = 1.0

Self.planeImage.center = Originalcenter

}

}, Completion:nil)

The complete code is in the last source provided.

The facts tell us that the animation is designed, you see the animation above me, but in fact the same code can be used to write very beautiful animation.