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

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

First, transition animation simple Introduction

A subclass of Caanimation, used for transition animations, to provide layers with animated effects for moving out of the screen and moving into the screen. iOS has less transition animations than Mac OS X

Uinavigationcontroller is the animation effect of pushing the controller's view into the screen via catransition

Attribute parsing:

Type: Animation transition types

Subtype: Animation transition Direction

Startprogress: Start of Animation (percentage in overall animation)

Endprogress: End of Animation (percentage in overall animation)

Second, the Transition animation code example

1. Interface Construction

2. Implementing the Code

1//2//Yyviewcontroller.m3//13-Transitions Animation4//5//Created by Apple on 14-6-21.6//Copyright (c) 2014 itcase. All rights reserved.7//89#import"YYViewController.h"1011@interfaceYyviewcontroller ()@property (nonatomic,assign)IntIndex@property (Weak, nonatomic) Iboutlet Uiimageview *IconView;14-(Ibaction) Preonclick: (UIButton *) sender;-(Ibaction) Nextonclick: (UIButton *) sender;1718@end1920@implementationYyviewcontroller21st22-(void) Viewdidload23{24[Super Viewdidload];self.index=1;2627}28-(Ibaction) Preonclick: (UIButton *) Sender {self.index--;31if (self.index<1) {self.index=7;33}Self.iconview.image=[uiimage imagenamed: [NSString stringWithFormat:@"%d.jpg", Self.index]];3536//Create a core animationPanax Notoginseng catransition *ca=[Catransition animation];38//Tell me what animations to perform39//Setting over effectsCa.type=@"Cube";41//Set excessive direction of animation (left)Ca.subtype=Kcatransitionfromleft;43//Set the time for the animationca.duration=2.0;45//Add animations46[Self.iconView.layer ADDANIMATION:CA Forkey:nil];47}4849//Next one(ibaction) Nextonclick: (UIButton *) Sender {Wuyi self.index++;52if (self.index>7) {self.index=1;54}Self.iconview.image=[uiimage imagenamed: [NSString stringWithFormat:@"%d.jpg", Self.index]];5657//1. Create a core animationCatransition *ca=[Catransition animation];5960//1.1 Tell what animations to perform61//1.2 Setting over effectsCa.type=@"Cube";63//1.3 Animating the excessive direction (right)Ca.subtype=Kcatransitionfromright;65//1.4 Setting the animation timeca.duration=2.0;67 //1.5 set the starting point of the animation 68 ca.startprogress=0.5;//70 Span style= "color: #008000;" >// ca.endprogress=0.5; 71 72 //2. Add animation 73  [Self.iconView.layer ADDANIMATION:CA Forkey : nil]; 74 }75  @end                 

Click on the previous one, or the next one, to show the corresponding animation effect.

Three, the group animation simple explanation

Caanimation, you can save a group of animated objects, and after the Caanimationgroup object is added to the layer, all the animated objects in the group can run concurrently simultaneously

Attribute parsing:

Animations: A nsarray used to hold a set of animated objects

By default, a set of animated objects runs concurrently, or you can change the start time of an animation by setting the BeginTime property of the animated object

Four, grouping animation code example

Code:

1#import"YYViewController.h"23@interfaceYyviewcontroller ()4 @property (weak, nonatomic) Iboutlet UIView *IconView;56@end78@implementationNjviewcontroller910-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *)Event11{1213//Panning AnimationsCabasicanimation *A1 =[Cabasicanimation animation];A1.keypath =@"Transform.translation.y";A1.tovalue = @ (100);17//Zoom AnimationCabasicanimation *A2 =[Cabasicanimation animation];A2.keypath =@"Transform.scale";A2.tovalue = @ (0.0);21st//Rotate animationCabasicanimation *A3 =[Cabasicanimation animation];A3.keypath =@"Transform.rotation";A3.tovalue =@ (m_pi_2);2526//Group AnimationsCaanimationgroup *groupanima =[Caanimationgroup animation];28Groupanima.animations = @[a1, a2, A3]; 30 31 // Set the group animation time 32 groupanima.duration = ; 33 groupanima.fillmode = Kcafillmodeforwards;34 groupanima.removedoncompletion = No; 36  [Self.iconView.layer Addanimation:groupanima Forkey:nil]; 37 }38 39  @end           

Description: Pan-rotate-zoom executes as a set of animations.

Execution effect:

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