Animation animation ui_22 in iOS

Daily Update Attention :http://weibo.com/hanjunqiang Sina Weibo!

iOS Developer Chat QQ Group: 446310206

The controls we can see in 1.iOS are UIView subclasses, such as UIButton UILabel Uitextfield Uiimageview, etc.

2.UIView can be displayed on the screen is because when creating it automatically add a calayer layer, through this layer on the screen when it will be called a drawrect: the way to complete the drawing, in order to display on the screen

The 3.CALayer itself has a display function, but it does not respond to user interaction events, and if you simply display a graphic, you can use Calayer to create it or create it using UIView, but if the graphic wants to respond to user interaction events, you must use UIView or subclasses

The animation knowledge block diagram is as follows:

 #import " ViewController.h "#import" uitextfield+shake.h "@interface Viewcontroller () @property (retain, nonatomic) Iboutlet Uiimageview *balloon; @property (retain, nonatomic) Iboutlet Uitextfield *tf; @property (retain, nonatomic) Iboutlet UIButton *bounces; @property (retain, nonatomic) Iboutlet UIView *animationview; @property (retain, nonatomic) Iboutlet Uiimageview *cloud, @end <span style= "font-family: ' Stheiti light ';" > @implementation viewcontroller</span> 

-(void) viewdidload {    [super viewdidload];    Take the layer with view from the current View controller    calayer *layer = self.view.layer;//    UIButton *button = [UIButton buttonwithtype: uibuttontypesystem];//    button.layer//button layer    //layer color must be Cgcolor    Self.animationView.layer.backgroundColor = [Uicolor Greencolor]. Cgcolor;}

Create a class for TF:

Uitextfield+shake.h#import <UIKit/UIKit.h> @interface Uitextfield (Shake)-(void) Shake; @endUITextField + Shake.m#import "Uitextfield+shake.h" @implementation Uitextfield (Shake)//Vibration Method-(void) shake{    Cakeyframeanimation *keyframe = [cakeyframeanimation animationwithkeypath:@ "position.x"];    Keyframe.values = @[@ (self.center.x +), @ (self.center.x), @ (self.center.x-10)];    Keyframe.repeatcount = ten;    Keyframe.duration = 0.03;    [Self.layer addanimation:keyframe Forkey:nil];  } @end

Start Animation button click event

-(Ibaction) Handleanimation: (UIButton *) Sender {    //uiview property animation    [self handlepropertyanimation];     UIView Property Animation block Form    [self handleprepertyanimationblock];       UIView's transition animation    [self handletrabsitionanimation];        Calayer animation    [self handlecalayer];        Calayer's basic animation    [self handlebasicanimation];    Calayer Key-Frame animation    [self handlekeyframeanimation];    Uitextfield calls the input vibration frame method    [self. TF shake];        Calayer's transition animation    [self handlelayercatransactionanimation];    Caainmationgroup Group Animation    [self handleanimatongroup];    }

Daily Update Attention :http://weibo.com/hanjunqiang Sina Weibo!

UIView Properties Animate animated Properties: Frame Center bounds Alpha BackgroundColor Transfrom

/ /modify properties to animate, the result of the property modification after the animation is real effect on the view of the animation, cannot revert to the previous look

-(void) handlepropertyanimation{//ios4.0 The animated attribute to be modified must be written between Begin and Commit//Start animation [UIView Beginanimations:nil con    Text:nil];    Agents that specify agent animations do not need to follow the protocol because the agent does not have a protocol [UIView Setanimationdelegate:self];    Set the duration of the animation [UIView setanimationduration:3.0];    Sets the number of repetitions of the animation to the effect of the repetition effect immediately disappears [UIView setanimationrepeatcount:3.0];    Set the inverse effect of the animation [UIView Setanimationrepeatautoreverses:yes];    Set the speed at which the animation changes [UIView setanimationcurve:uiviewanimationcurveeaseinout];        If you want to implement this method, you must set the proxy, which triggers [UIView setanimationdidstopselector: @selector (Makeanimationback)] After the end of the animation.    Modify the properties to animate//1.center Modify the center point of cgpoint Center = self.animationView.center;    Center.y + = 10;    Self.animationView.center =center;    2. Modify the transparency alpha Self.animationView.alpha = 0.0; 3. Deformation tranform//< #CGAffineTransform t#> before the shape variable//rotation angle 180/4 self.animationView.transform = CGAFFINETRANSFO        Rmrotate (Self.animationView.transform, m_pi_4); Self.animationView.transform = cgaffinetransformscalE (self.animationView.transform, 0.5, 0.5); Commit animation [UIView commitanimations];}

Revert to the state before the view

-(void) makeanimationback{//self.animationView.center = Self.view.center;    Self.animationView.alpha = 1.0;    Revert to Tranform initial state, the initial state is in cgaffinetransformidentity record self.animationView.transform = cgaffinetransformidentity; }//uiview Property Animation block form-(void) handleprepertyanimationblock{//ios4.0 after using block form animate __block typeof (self) weak    self = self; The first form of the 1.block//01. The duration of the animation//[UIView animatewithduration:2 animations:^{////1. Modify center point//Cgpoint cent ER = weakself.animationview.center;//center.y + = 50;//WeakSelf.animationView.center = center;////2 . Transparency//WeakSelf.animationView.alpha = 0.0;////3. deform//WeakSelf.animationView.transform = Cgaffinetran        Sformrotate (WeakSelf.animationView.transform, m_pi_4);/}]; The second form of the 2.block [UIView animatewithduration:2 animations:^{//1. Get center point Cgpoint Centre = weakself.animation        View.center;        Change center point center.y + = 50; WeaksElf.animationView.center =center;        2. Transparency WeakSelf.animationView.alpha = 0.0;  3. Deformation modification Transform WeakSelf.animationView.transform = Cgaffinetransformscale (weakSelf.animationView.transform, 0.5,                    0.2);    } completion:^ (BOOL finished) {//returns the state before the animation [Weakself Makeanimationback];        }]; The third form of the 3.block//01: Duration//02: Delay time for animation execution//03: Animating effects//04: Fixed animated properties//05: Block block after animation execution [UIView Animatewi Thduration:3 delay:1 options:uiviewanimationoptionallowanimatedcontent animations:^{//1. Get Center point CGPoint cente        R = WeakSelf.animationView.center;        Change center point center.y + = 50;        WeakSelf.animationView.center =center;        2. Transparency WeakSelf.animationView.alpha = 0.0;  3. Deformation modification Transform WeakSelf.animationView.transform = Cgaffinetransformscale (weakSelf.animationView.transform, 0.5,            0.2); } completion:^ (BOOL finished) {//returns the state before the animation [Weakself MakeanimationbacK];        }]; Block fourth Form//Parameter 1: Animation duration//Parameter 2: Animation delay time//Parameter 3: Set the spring's strength Range (0.0~1.0)//Parameter 4: Set the speed of the spring//parameter 5: Animation effect//parameter 6: Change the animation's genus Sex is written here//Parameter 7: block called when the animation is finished [UIView animatewithduration:2 delay:1 usingspringwithdamping:0.5 initialspringvelocity:5        XX options:uiviewanimationoptioncurveeaseinout animations:^{Cgpoint center = weakSelf.bounces.center;        Center.y + = 10;        WeakSelf.bounces.center = center;    Transform WeakSelf.bounces.transform = Cgaffinetransformscale (WeakSelf.bounces.transform, 1.2, 1.2);        } completion:^ (BOOL finished) {Cgpoint Center = weakSelf.bounces.center;        CENTER.Y-= 10;        WeakSelf.bounces.center = center;            WeakSelf.bounces.transform = cgaffinetransformidentity; }];}

Daily Update Attention :http://weibo.com/hanjunqiang Sina Weibo!

Transition animations for UIView

-(void) handletrabsitionanimation{            __block typeof (self) weakself = self;    01: Which view to add transition animation    //02: Animations are often    //03: Animated effects    [UIView transitionWithView:self.animationView duration:2 Options : uiviewanimationoptionallowanimatedcontent animations:^{                weakSelf.animationView.transform = Cgaffinetransformrotate (WeakSelf.animationView.transform, m_pi_4);            } Completion:nil];    }

Calayer animations, modifying the properties of layer layers to animate and not have a real effect on this view, animation knowledge an illusion

-(void)    handlecalayer{//calyer Animation is to animate the layer//Border Width self.animationView.layer.borderWidth = 10.0; Border color Self.animationView.layer.borderColor = [Uicolor Redcolor].    Cgcolor;    Tangent fillet//Self.animationView.layer.cornerRadius = 100;    Remove extra portion of layer//self.animationView.layer.masksToBounds = YES;    Subtract the extra portion of layer//self.animationView.clipsToBounds = YES; Background image self.animationView.layer.contents = (id) [UIImage imagenamed:@ "wdgj785q{' ckl4j}1{_4{(y.jpg"].            Cgimage; When a view is created, the Anchor Datum Point Center Point three points is coincident//anchor point Anchorpoint determines which point on the layer is the position anchor point is (0.5,0.5), coincident with the center point of the view Self.animationvie    W.layer.anchorpoint = cgpointmake (0.5, 0);        Self.animationView.transform = Cgaffinetransformrotate (Self.animationView.transform, m_pi_4); Datum point Position determines the layer of the current view, in the position of the parent view, whichever is the parent view's coordinate system self.animationView.layer.position = Cgpointmake (184);} 

Calayer's animated base class: Caanimation

Cabasicanimation Basic Animation

-(void) handlebasicanimation{    //ca Animation is based on the principle of KVC, modify the properties of the layer to achieve the effect of animation    cabasicanimation *basic = [ Cabasicanimation animationwithkeypath:@ "position.x"];        Basic.fromvalue = @ ( -80);    Basic.tovalue = @ (+);    Set the duration of the animation    basic.duration = 5.0;    Sets the number of times the animation repeats    basic.repeatcount = +;    [Self.cloud.layer addanimation:basic forkey:nil];}

Cakeyframeanimation Key-Frame animations

-(void) handlekeyframeanimation{    cakeyframeanimation *keyframe = [Cakeyframeanimation animationwithkeypath:@ " Position "];    Cgpoint point1 = self.cloud.center;    Cgpoint Point2 = Cgpointmake (n.);    Cgpoint Point3 = Cgpointmake (SELF.CLOUD.CENTER.Y);        A set of values for the animation needs to be played, in order to put in the array, the effect of the animation will be performed in the array according to the order of the data changes;    Convert point struct Type to object type    nsvalue *value1 = [Nsvalue valuewithcgpoint:point1];    Nsvalue *value2 = [Nsvalue valuewithcgpoint:point2];    Nsvalue *value3 = [Nsvalue valuewithcgpoint:point3];    Keyframe.repeatcount = +;    Keyframe.duration = 15.0;    Keyframe.values = @[value1,value2,value3,value1];    [Self.cloud.layer addanimation:keyframe forkey:nil];}

/ /catransition Calayer's over animation

-(void) handlelayercatransactionanimation{/* Various animation effects which except ' fade ', ' Movein ', ' push ', ' reveal ', other belong to the similar API (I am this          What you think, you can take a look at the note).          *↑↑↑ above four can be used respectively ' kcatransitionfade ', ' Kcatransitionmovein ', ' kcatransitionpush ', ' kcatransitionreveal ' to invoke.                   * @ "cube" cube rollover effect * @ "Movein" New view moved to old view * @ "reveal" Reveal effect (move old view away, show new view below) * @ "Fade" crossfade Transition (transition direction not supported) (default for this effect) * @ "P Agecurl "PAGE Up * @" Pageuncurl "down one page * @" suckeffect "shrinkage effect, Magical effects like system minimized window (no transition direction) * @ "Rippleeffect" drip effect (not supported transition direction) * @ "oglflip" Up/Down Left and right rollover effect * @ "rotate" rotation effect * @ "push" @ "Camerairishollowopen" Camera lens Open effect (no Support transition direction) * @ "Camerairishollowclose" camera lens Close effect (no transition direction supported) *//Create Transition animation object Catransition *transitio n =[Catransition animation];    Configure the style of the animation transition Transition.type = @ "Camerairishollowclose";    Add transition animations to layer [Self.view.layer addanimation:transition forkey:nil]; }

Caainmationgroup Grouping animations

-(void) handleanimatongroup{//1. Create the first keyframe animation, give the balloon a motion trajectory cakeyframeanimation *keyframepath = [Cakeyframeanimation anim    ationwithkeypath:@ "position"];    Bezier curve//1. Specifies the radius of the Bezier curve cgfloat radius = [UIScreen mainscreen].bounds.size.height/2.0; 01: Center//02: Radius//03: Start angle//04: End angle//05: Rotation direction (yes indicates clockwise no for counterclockwise) uibezierpath *path = [Uibezierpath Bezie    Rpathwitharccenter:cgpointmake (0, radius) Radius:radius startangle:-m_pi_2 endangle:m_pi_2 Clockwise:YES]; Keyframepath.path the Bezier curve as a motion trajectory = path.        Cgpath;    2. Create a second set of keyframe animation, so that the hot air balloon in the movement by small---> Large---> Small;    Cakeyframeanimation *keyframescale = [cakeyframeanimation animationwithkeypath:@ "Transform.scale"];    Modify the balloon size by a set of data Keyframescale.values = @[@1.0,@1.2,@1.4,@1.6,@1.8,@1.6,@1.4,@1.2,@1.0];    Create an animated grouping object Caanimationgroup *group = [Caanimationgroup animation];        Add two animation effects to a grouping animation group.animations = @[keyframepath,keyframescale];    Group.duration = 8;      Group.repeatcount = 1000;      [Self.balloon.layer Addanimation:group Forkey:nil]; }

Final effect:

Daily Update Attention :http://weibo.com/hanjunqiang Sina Weibo!

iOS Developer Chat QQ Group: 446310206

Animation animation ui_22 in iOS