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 //8 9 #import "YYViewController.h"Ten  One @interfaceYyviewcontroller () A@property (nonatomic,assign)intindex; -@property (Weak, nonatomic) Iboutlet Uiimageview *IconView; -  the-(Ibaction) Preonclick: (UIButton *) sender; --(Ibaction) Nextonclick: (UIButton *) sender; -  - @end +  - @implementationYyviewcontroller +  A- (void) Viewdidload at { - [Super Viewdidload]; -self.index=1; -  - } -  in-(Ibaction) Preonclick: (UIButton *) Sender { -self.index--; to     if(self.index<1) { +self.index=7; -     } theSelf.iconview.image=[uiimage imagenamed:[nsstring stringWithFormat:@"%d.jpg", Self.index]]; *      $     //Create a core animationPanax NotoginsengCatransition *ca=[catransition animation]; -     //tell me what animations to perform the     //setting over Effects +Ca.type=@"Cube"; A     //set excessive direction of animation (left) theCa.subtype=Kcatransitionfromleft; +     //set the time for the animation -ca.duration=2.0; $     //Add animations $ [Self.iconView.layer ADDANIMATION:CA forkey:nil]; - } -  the //Next One --(Ibaction) Nextonclick: (UIButton *) Sender {Wuyiself.index++; the     if(self.index>7) { -self.index=1; Wu     } -Self.iconview.image=[uiimage imagenamed:[nsstring stringWithFormat:@"%d.jpg", Self.index]]; About      $     //1. Create a core animation -Catransition *ca=[catransition animation]; -      -     //1.1 Tell what animations to perform A     //1.2 setting over effects +Ca.type=@"Cube"; the     //1.3 Animating the excessive direction (right) -Ca.subtype=Kcatransitionfromright; $     //1.4 Setting the animation time theca.duration=2.0; the     //1.5 Setting the starting point of the animation theca.startprogress=0.5; the     //1.6 Set the end point of the animation - //ca.endprogress=0.5; in      the     //2. Adding animations the [Self.iconView.layer ADDANIMATION:CA forkey:nil]; About } the @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 @interfaceYyviewcontroller ()4@property (Weak, nonatomic) Iboutlet UIView *IconView;5 6 @end7 8 @implementationNjviewcontroller9 Ten- (void) Touchesbegan: (Nsset *) touches withevent: (Uievent *)Event One { A      -     //Panning Animations -Cabasicanimation *A1 =[cabasicanimation animation]; theA1.keypath =@"TRANSFORM.TRANSLATION.Y"; -A1.tovalue = @ ( -); -     //Zoom Animation -Cabasicanimation *A2 =[cabasicanimation animation]; +A2.keypath =@"Transform.scale"; -A2.tovalue = @ (0.0); +     //Rotate Animation ACabasicanimation *A3 =[cabasicanimation animation]; atA3.keypath =@"transform.rotation"; -A3.tovalue =@ (m_pi_2); -      -     //Group Animations -Caanimationgroup *groupanima =[Caanimationgroup animation]; -      inGroupanima.animations =@[a1, a2, A3]; -      to     //set the time for group animation +Groupanima.duration =2; -Groupanima.fillmode =kcafillmodeforwards; theGroupanima.removedoncompletion =NO; *      $ [Self.iconView.layer Addanimation:groupanima forkey:nil];Panax Notoginseng } -  the @end

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

Execution effect:

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