Core animations (transition animations and group animations)

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

 8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,assign) int index;13 @propert Y (weak, nonatomic) Iboutlet Uiimageview *iconview;14-(ibaction) Preonclick: (UIButton *) sender;16-(ibaction) NextOnC Lick: (UIButton *) sender;17 @end19 @implementation YYViewController21-(void) viewDidLoad23 {[Super Viewdid Load];25 self.index=1;26}28-(ibaction) Preonclick: (UIButton *) Sender {self.index--;31 if (Self.inde x<1) {self.index=7;33}34 self.iconview.image=[uiimage imagenamed: [NSString stringwithformat:@]%d.j PG ", self.index]];35 36//Create core animation catransition *ca=[catransition animation];38//Tell what to do animation 39//Set over effect 4 0 [email protected] "cube"; 41//Set excessive direction of animation (left) ca.subtype=kcatransitionfromleft;43//Set animation time . duration=2.0;45//Add animation [Self.iconView.layer ADDANIMATION:CA forkey:nil];47}48 49//Next Zhang-(ibaction) nextoncli CK: (UIButton *) Sender {51     self.index++;52 if (self.index>7) {self.index=1;54}55 self.iconview.image=[uiimage ima genamed: [NSString stringwithformat:@ "%d.jpg", self.index]];56 57//1. Creating core animations Catransition *ca=[catransition a     nimation];59 60//1.1 tells you what to do animation 61//1.2 set over effect [email protected] "cube"; 63//1.3 set the excessive direction of animation (right) 64 ca.subtype=kcatransitionfromright;65//1.4 Set animation time ca.duration=2.0;67//1.5 set the starting point of the animation ca.startprogress=0 .5;69//1.6 Set the end of the animation ca.endprogress=0.5;71 72//2. Add animation [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" 2 3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *iconvie W 5 6 @end 7 8 @implementation Njviewcontroller 9-(void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event11 {1 2 13//Panning animation cabasicanimation *a1 = [cabasicanimation animation];15 a1.keypath = @ "Transform.translation . Y "; a1.tovalue = @ (100); 17//Zoom animation cabasicanimation *a2 = [Cabasicanimation animation];19 a2.keypath = @ "Transform.scale"; a2.tovalue = @ (0.0); 21//Rotation animation: cabasicanimation *a3 = [Cabasicanimation animation];2 3 A3.keypath = @ "Transform.rotation", A3.tovalue = @ (m_pi_2), 25 26//Group animation Caanimationgroup *groupa Nima = [Caanimationgroup animation];28 groupanima.animations = @[a1, A2, a3];30 31//Set the time for Group Animation (GRO)      Upanima.duration = 2;33 Groupanima.fillmode = kcafillmodeforwards;34 groupanima.removedoncompletion = NO;35 36 [SELF.ICONVIEW.LAyer Addanimation:groupanima forkey:nil];37}38 @end 

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

Execution effect:

Core animations (transition animations and group animations)