iOS 8: "Go" ios develop various animations for various page slice effects

Source Address: http://www.cnblogs.com/ludashi/p/4160208.html

Because of work reasons, have not published a blog for some time, today to publish a blog to bring you some dry goods, do not miss Oh. Today's topic is about animation, in the previous blog is also useful to the place of animation, today will be a good summary of iOS development commonly used animation. said that one of the animation is the concept of affine transformation, as to how the affine transformation, the principle of how to do in this blog do not repeat. What we are going to share today is to do what we want to do with animation.

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

I. Packaging animation methods

1. The packaging method for animating with Catransition is as follows: What is the meaning of each code, please see the comment.

1 #pragma catransition Animation implementation 2-(void) Transitionwithtype: (NSString *) type Withsubtype: (NSString *) subtype Forview: (UIV Iew *) View 3 {4     //Create Catransition Object 5     catransition *animation = [catransition animation]; 6      7     //Set motion time 8< c4/>animation.duration = Duration; 9     //Set motion type11     animation.type = type;12     if (subtype! = nil) {+/         /Set Subclass         Animation.subtype = subtype;16     }17     //Set motion speed     animation.timingfunction = Uiviewanimationoptioncurveeaseinout;20     [view.layer addanimation:animation forkey:@ "animation"];22}

Code Description:

The following properties are commonly used by catransition:

Duration: Setting animation time

Type: The type of motion will be described in more detail later

Subtype: Match with type, specify the direction of motion, and the following details

Timingfunction: The motion trajectory of an animation, used to calculate the interpolation between the start and end points of a change, and the image Point says it determines the rhythm of the animation run, as

Uniform changes (same time changes in the same amount) or fast after the slow, first slow or fast or slow before the slow.

* The beginning and end of the animation, there are five presets (same as below):

* Kcamediatimingfunctionlinear linear, i.e. constant speed

* Kcamediatimingfunctioneasein first Slow and fast

* Kcamediatimingfunctioneaseout First and then slow

* Kcamediatimingfunctioneaseineaseout Slow and slow

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

2. Using the UIView block callback to implement the code encapsulation of the animation

1 #pragma uiview implementation animations

2-(void) Animationwithview: (UIView *) View withanimationtransition: (uiviewanimationtransition) Transition3 {4     [U IView animatewithduration:duration animations:^{5         [UIView setanimationcurve:uiviewanimationcurveeaseinout];6         [UIView setanimationtransition:transition forview:view cache:yes];7     }]; 8}

3. Change the view background to make it easier to watch when switching

1 #pragma add a background image to view 2-(void) Addbgimagewithimagename: (NSString *) ImageName3 {4     self.view.backgroundColor = [ Uicolor Colorwithpatternimage:[uiimage Imagenamed:imagename]];5}

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

1. We add multiple buttons on the view, set different tag values for different buttons, and then bind the same method in Viewcontroller, and click on different buttons to achieve different page transitions. The control effect on the storyboard is as follows:

2. Let's start writing a click button to callback method

(1). Define an enumeration to indicate the type of animation that the button corresponds to, as shown in the following code:

1 typedef enum:nsuinteger {2     Fade = 1,                   //Fade 3     Push,/                       /push 4     Reveal,                     //Uncover 5     Movein,                     // Cover 6     Cube,                       //Cube 7     suckeffect,                 //Suck 8     oglflip,                    //Flip 9     rippleeffect,               //Ripple 10     Pagecurl,                   //Flip Page One pageuncurl,//Flip                 page     camerairishollowopen,       //Open lens     Camerairishollowclose,//      off lens     Curldown,                   //Next page     Curlup,                     //Page UP     Flipfromleft,               //Left Flip     Flipfromright,              //Flip right to     animationtype;

　　

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

1     UIButton *button = sender;2     animationtype animationtype = Button.tag;

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

1     nsstring *subtypestring; 2      3     switch (_subtype) {4 case         0:5             subtypestring = Kcatransitionfromleft; 6 Break             , 7 case         1:8             subtypestring = kcatransitionfrombottom, 9             break;10 case         2:11             subtypestring = kcatransitionfromright;12             break;13 case         3:14             subtypestring = kcatransitionfromtop;15             break;16         default:17             break;18     }19     _subtype + = 1;20     if (_subtype > 3) {+         _ Subtype = 0;22     }

(4), using the switch combined with the upper enumeration to determine the button is clicked

1 switch (Animationtype) 2 {3     //Various case, here code below will give  4}

3. Call our encapsulated motion method to achieve the animation effect

(1), Fade effect

1 case         fade:2             [self transitionwithtype:kcatransitionfade withsubtype:subtypestring forview:self.view];3             break;4         

　　

(2). Push effect

1 case         push:2             [self transitionwithtype:kcatransitionpush withsubtype:subtypestring forview:self.view];3             break;4             

The effect is as follows:

　　　

(3). Uncover Effects:

1 case         reveal:2             [self transitionwithtype:kcatransitionreveal withsubtype:subtypestring ForView:self.view]; 3 Break             ;

As follows:

　　　　

(4). Overlay effect

1 case         Movein:2             [self Transitionwithtype:kcatransitionmovein withsubtype:subtypestring ForView:self.view ];3             break;4             

As follows:

　　　　

(5). Cube effect

1 case         cube:2             [self transitionwithtype:@ ' Cube ' withsubtype:subtypestring forview:self.view];3 break             ;

The effect is as follows:

　　　　

(6). Sucking effect

1 case         suckeffect:2             [self transitionwithtype:@ "suckeffect" withsubtype:subtypestring forview:self.view];3 Break             ;

The effect is as follows:

　　

(7). Rollover effect

1 case         oglflip:2             [self transitionwithtype:@ "oglflip" withsubtype:subtypestring forview:self.view];3             Break

The figure is as follows:

　　　　

8. Ripple Effect

1 case         rippleeffect:2             [self transitionwithtype:@ "rippleeffect" withsubtype:subtypestring ForView:self.view ];3 break             ;

　　　　

(9). Page flipping and reverse paging effects

1 case         pagecurl:2             [self transitionwithtype:@ "Pagecurl" withsubtype:subtypestring forview:self.view];3             Break;4             5 Case         pageuncurl:6             [self transitionwithtype:@ "Pageuncurl" withsubtype:subtypestring Forview: Self.view];7 break             ;

　　

(10). Camera Open Effect

1 case         Camerairishollowopen:2             [self transitionwithtype:@ "Camerairishollowopen" withsubtype:subtypestring Forview:self.view];3             break;4             5 case         camerairishollowclose:6             [self transitionwithtype:@] Camerairishollowclose "withsubtype:subtypestring forview:self.view];7 break             ;

(11), call the second animation method encapsulated above

1 case         Curldown:2             [self animationWithView:self.view withanimationtransition: Uiviewanimationtransitioncurldown]; 3 Break             , 4          5 case         curlup:6             [self animationWithView:self.view withanimationtransition: Uiviewanimationtransitioncurlup]; 7 Break             , 8              9 case         flipfromleft:10             [self animationWithView:self.view withanimationtransition: Uiviewanimationtransitionflipfromleft];11             break;12         flipfromright:14             [self AnimationWithView:self.view withanimationtransition:uiviewanimationtransitionflipfromright];15 break             ;

　　

I put the above demo source on GitHub with the address: https://github.com/lizelu/CATransitionDemo.git

Today's blog is first here, there will be time to update the content, please pay attention to Oh!!

iOS 8: "Go" ios develop various animations for various page slice effects