IOS animation-ViewAnimations

IOS animation-ViewAnimations

The animation API in UIKit includes:

UIView. UIView. animateWithDuration

UIView. transitionWithView

UIView. animateKeyframesWithDuration

UIView. addKeyframeWithRelativeStartTime

Today's story will focus on these APIs and describe their past and present.

The UIKit Animation API is very simple and convenient to use. It avoids the complexity of Core Animation, although in fact the underlying layer of the UIKit Animation API uses Core Animation.

First, UIView. UIView. animateWithDuration.

Let's take a look at the function prototype:

Class func evaluate (duration: NSTimeInterval, delay: NSTimeInterval, includampingratio: CGFloat, incluvelocity: CGFloat, options: complete, animations: ()-> Void, completion: (Bool) -> Void )?)

A total of seven parameters:

Duration

Specifies the animation execution time.

Delay

Animation delay time.

UsingSpringWithDamping

Elastic attributes.

InitialSpringVelocity

Initial speed.

Options

Optional, some optional animation effects, including repetition.

Animations

Displays the animated content, including gradient, movement, and scaling of transparency.

Completion

Indicates the content to be executed after the animation is executed.

For these parameters, select a column and try different parameters to better understand the meaning of each parameter.

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 will not be interpreted line by line. The three UIView. animateWithDuration parameters operate on three blocks respectively. The first Square is a mobile animation, the second square is a transparency gradient animation, and the third Square is a combination of mobile and transparency gradient animation, which may not be very clear. I have to say that this animation is really ugly ~~~

UIView. UIView. animateWithDuration is an API that gradually changes a property of UIView, including location, size, transparency, and color.

Let's take a look at UIView. transitionWithView, which is an over-animation used to access or exit a UIView.

Let's take a look at this animation:

9. gif

The animation for banner's right shift disappears uses the UIView. UIView. animateWithDuration mentioned above, and the animation for entry uses the UIView. transitionWithView to be discussed. It looks like a page flip.

Let's take a look at the function prototype.

Class func transitionWithView (view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: ()-> Void, completion: (Bool)-> Void )?)

There are five parameters in total:

View

This is of course the object to be animated.

Duration

Same as above, this parameter specifies the animation duration.

Options

This is an optional parameter. It is optional, but it does not make sense to leave this API blank, because this parameter determines how UIView enters the view. It is up to this parameter to decide whether to flip in like a book page or rotate like a blind shutter. If you have specific options, click here and you will know.

Animations

This option can be understood as the form of UIView after the animation ends.

Completion

The code that runs after the animation ends.

The code is about long.

UIView. transitionWithView (status, duration: 0.33, options:

. CurveEaseOut |. TransitionCurlDown, animations :{

Self. yourView. hidden = false

}, Completion: nil

})

This part of the code has been uploaded to Github. The Github address is at the end of the article.

I believe that you can understand the source code.

Here we will show you an animation, which is also written using the function mentioned above:

Nima ~ The display effect is too bad. I don't know what you see there.

It is similar to 3D effects, and the code is also in the Demo uploaded. You can see it for yourself ~

In the last function, UIView. animateKeyframesWithDuration. Let's take a look at the animation effect.

Small Aircraft ~ Flying and flying ~

We can easily find that this animation has been completed in many stages. Of course we can use the first function UIView we mentioned. UIView. animateWithDuration. But don't you think nested and nested look pretty bad? Of course we have a better way to implement it, that is, what we want to talk about now. Let's first look at the function prototype:

Class func evaluate (duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: ()-> Void, completion: (Bool)-> Void )?)

There are five parameters in total:

Duration: The time of the animation process.

Delay: how long the delay starts.

Options: Optional. For example, repeat and try again.

Animations: the animation to be executed, which can contain multiple UIView. addKeyframeWithRelativeStartTime.

For this UIView. the addKeyframeWithRelativeStartTime method is similar to the first UIView we mentioned. UIView. animateWithDuration is also an attribute gradient method, but this method can only be written in his father's UIView. in the animation Parameter Function Block of addKeyframeWithRelativeStartTime.

Completion: the code executed after the animation is executed.

Let's take a look at how we can implement this small plane ~ Flying and flying ~~ Code:

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 provided in the final source code.

The facts tell us that the animation is designed. You can watch the animation above, but in fact you can write beautiful animations with the same code.