A variety of animation, page cut effect _ios commonly used in IOS development

Today the main use of the animation class is calayer under the catransition as for the various animation class how to inherit in this also do not repeat, online information is a catch a lot. Good nonsense less to cut to the point of today.

　I. Encapsulation Animation method

1. Use Catransition to achieve the packaging method of animation as follows, each code is what meaning, please see the annotation.

#pragma catransition Animation implementation
-(void) Transitionwithtype: (NSString *) type Withsubtype: (NSString *) subtype Forview: (UI View * View
{
//Create Catransition object
catransition *animation = [catransition animation];
Set the movement time
animation.duration = duration;
Sets the motion type
animation.type = type;
if (subtype!= nil) {
//set subclass
Animation.subtype = subtype;
}
Setting motion speed
animation.timingfunction = uiviewanimationoptioncurveeaseinout;
[View.layer addanimation:animation forkey:@ "animation"];

Code Description:

Catransition commonly used properties are as follows:

Duration: Set animation time

Type: A detailed description of the type of motion will be shown later

Subtype: Matches the type using, specifying the direction of the motion, which is described in detail below

Timingfunction: Motion trajectory of the animation, used to calculate the interpolation between the beginning and end of the change, the image point says it determines the rhythm of the animation operation

Uniform changes (the same amount of change in the same time) or first fast after the slow, first slow after the fast or first slow again faster and slower.

* The speed of the beginning and end of the animation, there are five preset respectively (the same below):

* Kcamediatimingfunctionlinear linear, that is, uniform

* Kcamediatimingfunctioneasein first slow and then fast

* Kcamediatimingfunctioneaseout, quick, slow.

* Kcamediatimingfunctioneaseineaseout, slow, fast and slow.

* Kcamediatimingfunctiondefault actual effect is faster in the middle of the animation.

2. Implement code encapsulation of animation with UIView block callback

#pragma uiview Implementation Animation
-(void) Animationwithview: (UIView *) View withanimationtransition: (uiviewanimationtransition ) transition
{
[uiview animatewithduration:duration animations:^{
[UIView setanimationcurve: Uiviewanimationcurveeaseinout];
[UIView setanimationtransition:transition Forview:view cache:yes];}

3. Change the view of the background map, easy to see when switching

#pragma add a background image to view
-(void) Addbgimagewithimagename: (NSString *) imagename
{
Self.view.backgroundColor = [Uicolor colorwithpatternimage:[uiimage imagenamed:imagename]];

　Two. Call the above method to achieve the animation we want

1. We add multiple button on view, set different tag value for different button, then bind the same method in Viewcontroller, click different button to realize different page switch effect. The control effect on the storyboard is shown in the following illustration:

2. Here we begin to write the method of clicking button to callback

(1). Defines an enumeration to indicate the type of animation the button corresponds to, as follows:

typedef enum:nsuinteger {
Fade =,//Fade
push,//push
Reveal,//Uncover
Movein,//overlay
cube,//Cube
suck Effect,//Suck
oglflip,//Flip
rippleeffect,//Ripple
Pagecurl,//Flip
pageuncurl,//Reverse page
Camerairishollowopen,//Open lens
camerairishollowclose,//Turn off lens
curldown,//Page DOWN
curlup,
//Page UP Flipfromleft,//left Flip
flipfromright,//Right Flip

(2), get the tag value of the button:

UIButton *button = sender;

(3). Each click button changes the value of the subtype, including top, left, bottom, right

NSString *subtypestring;
Switch (_subtype) {case
:
subtypestring = kcatransitionfromleft;
break;
Case:
subtypestring = Kcatransitionfrombottom;
break;
Case:
subtypestring = kcatransitionfromright;
break;
Case:
subtypestring = kcatransitionfromtop;
break;
Default: Break
;
}
_subtype + =;
if (_subtype >) {
_subtype =;

(4) The switch combines the above enumeration to determine if the button is clicked

Switch (animationtype)
{
//All kinds of case, the code below will give 
}

3. Call our encapsulated motion method to achieve animation effect

(1), Fade effect

Case Fade:
[self transitionwithtype:kcatransitionfade withsubtype:subtypestring ForView:self.view];
Break

(2). Push effect

Case Push:
[self Transitionwithtype:kcatransitionpush withsubtype:subtypestring ForView:self.view];
Break

The effect is as follows:

　

(3). Uncovering effect:

Case Reveal:
[self transitionwithtype:kcatransitionreveal withsubtype:subtypestring ForView:self.view];

The effect chart is as follows:

　　

(4). Coverage effect

Case Movein:
[self Transitionwithtype:kcatransitionmovein withsubtype:subtypestring ForView:self.view];
Break

The effect chart is as follows:

(5). Cube effect

Case Cube:
[Self transitionwithtype:@ "Cube" withsubtype:subtypestring ForView:self.view];

The effect is as follows:

　　　

(6). Sucking effect

Case Suckeffect:
[Self transitionwithtype:@ "suckeffect" withsubtype:subtypestring ForView:self.view];

The effect is as follows:

(7). Flip Effect

Case Oglflip:
[Self transitionwithtype:@ "oglflip" withsubtype:subtypestring ForView:self.view];

The effect chart is as follows:

8. Ripple Effect

Case Rippleeffect:
[Self transitionwithtype:@ "rippleeffect" withsubtype:subtypestring ForView:self.view];
Break

　

(9). Page and Reverse page effect

Case Pagecurl:
[Self transitionwithtype:@ "Pagecurl" withsubtype:subtypestring ForView:self.view];
break;
Case Pageuncurl:
[Self transitionwithtype:@ "Pageuncurl" withsubtype:subtypestring ForView:self.view];

　　

(10). Camera Open Effect

Case Camerairishollowopen:
[Self transitionwithtype:@ "Camerairishollowopen" withsubtype:subtypestring ForView: Self.view];
break;
Case Camerairishollowclose:
[Self transitionwithtype:@ "camerairishollowclose" withsubtype:subtypestring ForView:self.view];

(11), invoke the second animation method encapsulated above

Case Curldown:
[self AnimationWithView:self.view withanimationtransition:uiviewanimationtransitioncurldown];
break;
Case Curlup:
[self AnimationWithView:self.view withanimationtransition:uiviewanimationtransitioncurlup];
break;
Case Flipfromleft:
[self animationWithView:self.view withanimationtransition: Uiviewanimationtransitionflipfromleft];
break;
Case Flipfromright:
[self animationWithView:self.view withanimationtransition: Uiviewanimationtransitionflipfromright];
Break

The above content is for the development of iOS commonly used in various animation, page cutting effect of the relevant introduction, hope to help you!