iOS development UI chapter-core animations (transition animations and group animations)

The so-called animation group is the combination of some animation to the layer so that its animation more flexible. It is simple to assign an animated array to its Animations property. [CPP]View Plaincopy

2. -(void) Demoanimationgroup
4. {
6. Static NSString * Const KCAPOSTIONKEYPATH = @"position";
8. Static NSString * Const KCAOPACITYKEYPATH = @"opacity";
10. Static NSString * Const KCAROTATIONKEYPATH = @"transform.rotation";
12. Static NSString * Const KCASCALEKEYPATH = @"Transform.scale";
16. Uibezierpath *path = [Uibezierpath Bezierpath];
18. [Path movetopoint:_demoview.layer.position];
20. [Path Addcurvetopoint:cgpointmake (260) controlpoint1:cgpointmake (0, 460) controlpoint2:cgpointmake (320, 0)];
24. //Path animation
26. Cakeyframeanimation *posanimation = [Cakeyframeanimation Animationwithkeypath:kcapostionkeypath];
28. Posanimation.path = path. Cgpath;
30. Posanimation.timingfunction = [Camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
34. //Transparency Animation
36. Cabasicanimation *opaanimation = [Cabasicanimation Animationwithkeypath:kcaopacitykeypath];
38. Opaanimation.duration = 2.0f;
40. Opaanimation.tovalue = @ (0.3f);
42. opaanimation.autoreverses = YES;
46. //Rotate animation
48. Cabasicanimation *rotanimation = [Cabasicanimation Animationwithkeypath:kcarotationkeypath];
50. Rotanimation.duration = 2.0f;
52. Rotanimation.tovalue = @ (M_PI);
54. rotanimation.autoreverses = YES;
58. //Zoom animation
60. Cabasicanimation *scaanmaiton = [Cabasicanimation Animationwithkeypath:kcascalekeypath];
62. Scaanmaiton.duration = 2.0f;
64. Scaanmaiton.tovalue = @ (1.5f);
66. scaanmaiton.autoreverses = YES;
70. //Set animation group
72. Caanimationgroup *group = [Caanimationgroup animation];
74. Group.animations = @[posanimation, Opaanimation, Rotanimation, Scaanmaiton];
76. Group.duration = 4.0f;
78. Group.removedoncompletion = NO;
80. Group.fillmode = Kcafillmodeforwards;
84. [_demoview.layer Addanimation:group Forkey:nil];
86. }

This animation group adds some simultaneous animations to the layer of the demoview, such as the Bezier path of the double-control point, fade-out of transparency, rotation, and scaling. Catransition transition animations can be found in almost all apps, often for switching between view controllers or for single-view controller page transitions, or for adding animations to custom Uistoryboardsegue. It is also a subclass of Caanimation, which gives the layer an animated effect of moving out of the screen and moving in. Its common properties are subtypes of type transition type subtype transition type, where there are many transition types, initially four versions, and later added, in string format. The first four: Fade,push,movein,reveal later added the effect is more rich and dazzling, there are cube, Oglflip, Suckeffect, Rippleeffect, Pagecurl, Pageuncurl, Camerairishollowopen, Camerairishollowclose. [CPP]View Plaincopy

2. -(void) viewtransition
4. {
6. Static NSString * Const KCATRANSITIONTYPEFLIP = @"Oglflip"; //page Turn effect
10. Catransition *transition = [catransition animation];
12. Transition.type = Kcatransitiontypeflip;
14. Transition.subtype = Kcatransitionfromright;
16. Transition.duration = 1.5f;
18. [_transitionorangeview.layer addanimation:transition Forkey:nil];
22. [Self.view performselector: @selector (sendsubviewtoback:) Withobject:_transitionorangeview afterdelay:1.0f];
24. }

This method is simple to achieve the effect of the view page, of course, the current controller root view only a subview, so the use of Sendsubviewtoback method after the display is still the view, but see the animation effect. Now the UIView transition animation has a more convenient class method + transitionwithview:duration:options:animations:completion:+ Transitonfromview:toview: Duration:options:completion: These two method parameters add Apple's recommended block code, also let the transition animation in a method of processing, also to the end of the animation processing, more convenient to use. [CPP]View Plaincopy

2. -(void) anothertransition
4. {
6. _transitionblueview = [[UIView alloc] initWithFrame:self.view.bounds];
8. _transitionblueview.backgroundcolor = [Uicolor Bluecolor];
12. [UIView Transitionfromview:_transitionorangeview
14. Toview:_transitionblueview
16. duration:1.0f
18. Options:uiviewanimationoptiontransitioncrossdissolve
20. Completion:nil];
22. }

The code is simple and easy to read.  One thing to note, though, is that there are not many parameters here, and I did not load the blue view through Addsubview into Self.view, nor did the Orange view Removefromsuperview, which are encapsulated implicitly in this class method. Demo sample Click to open link

iOS development UI chapter-core animations (transition animations and group animations)