Various page view Effects of Various animations in iOS development, and page view of ios development

Various page view Effects of Various animations in iOS development, and page view of ios development

For work reasons, I have not published a blog for a while. Today I am posting a blog to bring you some dry stuff. Do not miss it. The topic introduced today is about animation. It is also useful in previous blogs. Today we will make a good summary of the commonly used animation in iOS development. One of the animations is the concept of affine transformation. I will not go into details about how to transform an affine or how it works in this blog. What we want to share today is what we want to do with animation.

The main animation category used today is CATransition under CALayer. We will not go into details about how to inherit the various animation categories here. The online materials are just a few clicks. Let's talk a little bit about today's topic.

I. encapsulation of animation Methods

1. Use CATransition to encapsulate the animation as follows. For more information about the meaning of each code sentence, see annotations.

1 # pragma CATransition animation implementation 2-(void) transitionWithType :( NSString *) type WithSubtype :( NSString *) subtype ForView: (UIView *) view 3 {4 // create a CATransition object 5 CATransition * animation = [CATransition animation]; 6 7 // set the motion time 8 animation. duration = DURATION; 9 10 // set the motion type11 animation. type = type; 12 if (subtype! = Nil) {13 14 // sets the subclass 15 animation. subtype = subtype; 16} 17 18 // set the motion speed to 19 animation. timingFunction = UIViewAnimationOptionCurveEaseInOut; 20 21 [view. layer addAnimation: animation forKey: @ "animation"]; 22}

Code Description:

Common CATransition attributes are as follows:

Duration: Set the animation time

Type: The following describes the motion types in detail later.

Subtype: Used to match with type to specify the direction of motion. The following describes in detail

TimingFunction: The motion track of an animation. It is used to calculate the interpolation between the starting point and the ending point. The image points indicate that it determines the rhythm of the animation, for example

Even changes (the same amount of changes at the same time) are fast first, slow, fast, slow, and slow.

* There are five presets for the speed of starting and ending an animation ):

* The kCAMediaTimingFunctionLinear is linear, that is, the constant speed.

* KCAMediaTimingFunctionEaseIn is slow and fast

* KCAMediaTimingFunctionEaseOut: fast and slow

* KCAMediaTimingFunctionEaseInEaseOut: Slow down first, then slow again

* The actual effect of kCAMediaTimingFunctionDefault is that the animation is relatively fast.

 

2. Use block callback of UIView to encapsulate animation code

1 # pragma UIView Animation 2-(void) animationWithView: (UIView *) view progress: (effect) transition3 {4 [UIView animateWithDuration: DURATION animations: ^ {5 [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; 6 [UIView setAnimationTransition: transition forView: view cache: YES]; 7}]; 8}

 

3. Change the background image of the View to facilitate observation during switchover.

1 # Add a background image 2-(void) addBgImageWithImageName :( NSString *) imageName3 {4 self. View. backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: imageName]; 5}

 

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

1. we add multiple buttons to the View, set different Tag values for different buttons, bind the same method to the ViewController, and click different buttons to implement different page switching effects. Shows the effect of the control on the storyBoard:

1 typedef enum: NSUInteger {2 Fade = 1, // Fade in and out 3 Push, // Push 4 Reveal, // uncover 5 MoveIn, // cover 6 cubes, // cube 7 SuckEffect, // suck 8 OglFlip, // flip 9 RippleEffect, // ripple 10 PageCurl, // flip 11 PageUnCurl, // flip 12 CameraIrisHollowOpen, // on Camera 13 CameraIrisHollowClose, // off camera 14 CurlDown, // down page 15 CurlUp, // up page 16 FlipFromLeft, // Left flip 17 FlipFromRight, // right flip 18 19} AnimationType;

　　

(2), get the Tag value of the Button:

1     UIButton *button = sender;2     AnimationType animationType = button.tag;

 

(3). Each time you click a button, the value of subtype is changed, 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) {21         _subtype = 0;22     }

 

(4) use the switch and enumeration above to determine which button was clicked.

1 switch (animationType) 2 {3 // various cases, here the code below will give 4}

 

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

(1) fade out the 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 the effect:

1         case Reveal:2             [self transitionWithType:kCATransitionReveal WithSubtype:subtypeString ForView:self.view];3             break;

As follows:

　　　　

 

(4). Coverage 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). Flip 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 turning and reverse page turning

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 opening 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             13         case FlipFromRight:14             [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionFlipFromRight];15             break;

　　

I put the above Demo source code on GitHub, its address: https://github.com/lizelu/CATransitionDemo.git

Today's blog is here first, and content will be updated later. Please stay tuned !!