IOS animation effects and Implementations

Animation effects provide a smooth user experience during status or page conversion. In iOS, we do not need to write the animation code by ourselves, core Animation provides a variety of APIs to achieve the Animation effect you need.

UIKit only uses UIView to display animations. animations support these attribute changes under UIView:

• Frame
• Bounds
• Center
• Transform
• Alpha
• BackgroundColor
• ContentStretch

1. Use UIView animation in commitAnimations Mode

-(Void) viewDidLoad {[super viewDidLoad]; UIButton * button = [UIButton buttonWithType: Custom]; [button setTitle: @ "changed" forState: UIControlStateNormal]; button. frame = CGRectMake (10, 10, 60, 40); [button addTarget: self action: @ selector (changeUIView) forControlEvents: UIControlEventTouchUpInside]; [self. view addSubview: button];}-(void) changeUIView {[UIView beginAnimations: @ "animation" context: nil]; [UIView setAnimationDuration: 1.0f]; [UIView setAnimationCurve: birthday]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self. view cache: YES]; [UIView commitAnimations];}

The following figure shows the effect after clicking change (two types ):

There are four types of animation constants:

   UIViewAnimationTransitionNone,   UIViewAnimationTransitionFlipFromLeft,   UIViewAnimationTransitionFlipFromRight,   UIViewAnimationTransitionCurlUp,   UIViewAnimationTransitionCurlDown,

1.2 switch the two view locations in the current view Controller

[Self. view exchangeSubviewAtIndex: 1 withSubviewAtIndex: 0];

Add two views, one redview and one yellowview.

-(Void) viewDidLoad {[super viewDidLoad]; UIView * redView = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] bounds]; redView. backgroundColor = [UIColor redColor]; [self. view addSubview: redView]; UIView * yellowView = [[UIView alloc] initWithFrame: [UIScreen mainScreen] bounds]; yellowView. backgroundColor = [UIColor yellowColor]; [self. view addSubview: yellowView]; UIButton * button = [UIButton buttonWithType: UIButtonTypeRoundedRect]; [button setTitle: @ "change" forState: UIControlStateNormal]; button. frame = CGRectMake (10, 10,300, 40); [button addTarget: self action: @ selector (changeUIView) forControlEvents: UIControlEventTouchUpInside]; [self. view addSubview: button]; UIButton * button1 = [UIButton buttonWithType: callback]; [button1 setTitle: @ "Change 1" forState: UIControlStateNormal]; button1.frame = CGRectMake (10, 60,300, 40); [button1 addTarget: self action: @ selector (changeUIView1) forControlEvents: UIControlEventTouchUpInside]; [self. view addSubview: button1];}

-(Void) changeUIView1 {[UIView beginAnimations: @ "animation" context: nil]; [UIView setAnimationDuration: 1.0f]; [UIView setAnimationCurve: animated]; [UIView progress: animated forView: self. view cache: YES]; // two view locations in the current view controller [self. view exchangeSubviewAtIndex: 1 withSubviewAtIndex: 0]; [UIView commitAnimations];}

This looks like two pages. 1.3. [UIView setAnimationDidStopSelector: @ selector (animationFinish :)];

Before the commitAnimations message, you can set the callback after the animation is completed:

[UIView setAnimationDidStopSelector: @ selector (animationFinish :)];

2. Use: CATransition

- (void)changeUIView2{    CATransition *transition = [CATransition animation];    transition.duration = 2.0f;      transition.type = kCATransitionPush;    transition.subtype = kCATransitionFromTop;    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];    [self.view.layer addAnimation:transition forKey:@"animation"];}

The transition. type can be

Fade, push, uncover, and cover

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;

These four types,

Transition. subtype also has four types

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;

2.2 Private animation types:

Cube, absorption, flip, ripple, flip, on-camera, and off-camera

Animation. type = @ "cube" animation. type = @ "suckEffect"; animation. type = @ "oglFlip"; // no matter whether subType is "fromLeft" or "fromRight", official has only one animation effect. type = @ "rippleEffect"; animation. type = @ "pageCurl"; animation. type = @ "pageUnCurl" animation. type = @ "cameraIrisHollowOpen"; animation. type = @ "cameraIrisHollowClose ";

Is the effect of the first cube:

2.3 The startProgress endProgress attribute of CATransition belongs to the float type.
You can control the animation process and place the animation on a certain animation point. The value ranges from 0.0 to 1.0. EndProgress must be greater than or equal to startProgress. For example, if the above cube is switched to, you can set endProgress = 0.5 to let the animation stay in the normal rotation position. The above private animation effects should be used with caution in practical applications. This is because the app store may reject these animation effects during review. 3. + (void) animateWithDuration :( NSTimeInterval) duration animations :( void (^) (void) animations completion :( void (^) (BOOL finished) completion Method of UIView. This method is supported after iOS4.0. It is simpler and easier to use than the UIView method in 1. Add moveView to DidView.

    moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];    moveView.backgroundColor = [UIColor blackColor];    [self.view addSubview:moveView];

- (void)changeUIView3{    [UIView animateWithDuration:3 animations:^(void){        moveView.frame = CGRectMake(10, 270, 200, 40);    }completion:^(BOOL finished){        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];        label.backgroundColor = [UIColor blackColor];        [self.view addSubview:label];    }];}

Use the UIView animateWithDuration animation to move the animation. After the animation is moved, add a Label.
3.2. nested use of animateWithDuration

- (void)changeUIView3{         [UIView animateWithDuration:2                          delay:0                        options:UIViewAnimationOptionCurveEaseOut animations:^(void){        moveView.alpha = 0.0;    }completion:^(BOOL finished){        [UIView animateWithDuration:1                              delay:1.0                            options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat                         animations:^(void){                             [UIView setAnimationRepeatCount:2.5];                             moveView.alpha = 1.0;                         }completion:^(BOOL finished){                                                      }];            }];}

The effect of this nesting is to first change the view to transparent, from transparent to opaque, and repeat 2.5 transparent to opaque.

Code of the example in this article: AnimateDemo

Rong Fangzhi (http://blog.csdn.net/totogo2010)

This article follows the "signature-non-commercial use-consistency" creation public agreement