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.M 3//13-Transition Animation 4//5//Created by Apple on 14-6-21. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,assign) int index;13 @pro Perty (Weak, nonatomic) Iboutlet Uiimageview *iconview;14-(ibaction) Preonclick: (UIButton *) sender;16-(ibaction) NEX Tonclick: (UIButton *) sender;17 @end19 @implementation YYViewController21-(void) ViewDidLoad23 {[Super Vie] Wdidload];25 self.index=1;26}28-(ibaction) Preonclick: (UIButton *) Sender {self.index--;31 if (self). index<1) {self.index=7;33}34 self.iconview.image=[uiimage imagenamed: [NSString stringwithformat:@] %d.jpg ", self.index]];35 36//Create core animation PNS catransition *ca=[catransition animation];38//Tell me what to do animation 39//Set over degree effect [email protected] "cube"; 41//Set excessive direction of animation (left) ca.subtype=kcatransitionfromleft;43//Set animation time 44 Ca.duRATION=2.0;45//Add animation [Self.iconView.layer ADDANIMATION:CA forkey:nil];47}48 49//Next Zhang-(ibaction) Nextonclick: (UIButton *) Sender {self.index++;52 if (self.index>7) {self.index=1;54}55 Self.iconv Iew.image=[uiimage imagenamed: [NSString stringwithformat:@ "%d.jpg", self.index]];56 57//1. Creating a core animation CATransiti On *ca=[catransition animation];59 60//1.1 tell what animation to perform 61//1.2 set over effect [email protected] "cube"; 63/ /1.3 Set the over direction of the animation (right) ca.subtype=kcatransitionfromright;65//1.4 set animation time ca.duration=2.0;67//1.5 set the starting point of the animation 68 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:
iOS Development core Animation-transition animations and group animations