iOS编程------动画

//
//  ViewController.h
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIImageView *imageView;

@property (strong, nonatomic) IBOutlet UITextField *textField;
@end










//
//  ViewController.m
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import "ViewController.h"
#import "SecondViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

#pragma mark ---------------- 动画概述 ----------------------

    /* UI23 动画
                                  --> 属性动画
     CALayer 动画 --> UIView 动画  --> 过渡动画
                                  --> 仿射动画

     CALayer 层  核心绘制层

     CAAnimation 核心动画

     */


    //一. UIView 动画
    //1.属性动画
    //UIView 做动画有两种方式, 动画块方式和block方式, 通常我们使用block方式.

    //常用的属性有 背景色, alpha, center, frame, bounds等.



    //二. CALayer 核心 绘画层
    //UIView 和 CALayer 的关系
    //UIView 并不进行渲染和绘画,真正负责渲染的是CALayer
    //UIView可以看做是CALayer的代理,负责展示内容以及用户进行交互.
    //UIView创建的时候带一个CALayer,UIView与绘制和渲染相关的属性其实是CALayer的属性,比如背景颜色.
    //CALayer有很多的属性,UIView可以直接使用只是其中一部分,比如CALayer的圆角等.

    //1.创建一个CALayer对象
    CALayer *layer = [[CALayer alloc] init];

    //2.设置属性
    layer.frame = CGRectMake(200, 50, 100, 100);

    //圆角
    layer.cornerRadius = 50; // 0.5 宽

    //边框宽度
    layer.borderWidth = 2;

    //边框颜色
    layer.borderColor = [UIColor redColor].CGColor;

    //阴影颜色
    layer.shadowColor = [UIColor blueColor].CGColor;

    //阴影透明度,默认为 0
    layer.shadowOpacity = 0.5;

    //阴影偏移量
    layer.shadowOffset = CGSizeMake(10, 10);

    //背景颜色
    layer.backgroundColor = [UIColor yellowColor].CGColor;

    //锚点
    //x , y  0.0 ~ 1.0 之间数
    //默认为 0.5 , 0.5 中心点
    layer.anchorPoint = CGPointMake(0, 0);
    layer.position = CGPointMake(200 + 50, 50 + 50);

    // anchorPoint 默认在视图的中心点，
    // layer 的postion 就是 anchorPoint 在父坐标系中的位置为 x: frame.x + 0.5 * width
    // y: frame.y + 0.5 * height


    // 我们通常设置 如果想要设置position 和 frame 相等。则只要设置 锚点为左上角，则 postion 和 frame 就相等了，但是如果之前设置了frame 会发现 更改锚点后，实际位置会发生变化，这是因为
    // 本来
    // position.x  = frame.x +   0.5 * width

    //      250            200         50

    // position.y = frame.y + 0.5 *height
    //      100           50       50


    // frame 为 200 50  position 为 250 100

    // 设置锚点为0 。0 后，重新绘制了视图 position 和 frame相等
    // 因此frame 变为  200  50  ---->  250 100


    //3.添加到父 layer上
    [self.view.layer addSublayer:layer];


    //需求:设置一张圆角图片,QQ个人头像
    //更改imageView的layer
    //圆角
    _imageView.layer.cornerRadius = 50;
    //边框
    _imageView.layer.borderWidth = 2;

    _imageView.layer.borderColor = [UIColor yellowColor].CGColor;

    //边界马赛克, 边界遮罩
    _imageView.layer.masksToBounds = YES; //显示到边界

    // Do any additional setup after loading the view, typically from a nib.
}

#pragma mark-------- 1.UIView属性动画------------

- (IBAction)propertyAnimation:(id)sender {

    //iOS3.0之前UIView的动画方法都是类方法,需要我们把动画写在一个动画块里面.
    /*
     [UIView beginAnimation:]

     //设置动画属性

     [UIView commitAnimations]
    */

    //1.开始动画
    [UIView beginAnimations:@"动画名称" context:@"传递给代理的参数"];

    //2.设置动画
    //动画持续时间,重复几次,是否反转等等.
    [UIView setAnimationDuration:2]; //动画时间

//    [UIView setAnimationRepeatCount:2];//重复次数

//    [UIView setAnimationRepeatAutoreverses:YES];//反转

    [UIView setAnimationDelegate:self];//默认就是self

    //代理触发的两个方法:
    //动画开始之前触发
    [UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];

    //动画结束之后触发sel方法
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

    //3.设置动画
    _imageView.frame = CGRectMake(275, 50, 100, 100);

    //4.提交动画
    [UIView commitAnimations];


}

- (void)animationWillStart:(NSString *)animationID context:(void *)context {

    NSLog(@"动画开始");
    _imageView.backgroundColor = [UIColor yellowColor];
}

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {

    NSLog(@"动画结束");
    //从右边再移动左边
    //1.设置开始
    [UIView beginAnimations:nil context:nil];

    //2.设置动画
    [UIView setAnimationDuration:2];

    [UIView setAnimationDelegate:self];

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

    //3.更改属性
    _imageView.frame = CGRectMake(0, 50, 100, 100);

    //4.提交动画
    [UIView commitAnimations];
}

// 重复动画
- (void)repeatAnimation
{
    [self propertyAnimation:nil];
}



#pragma mark---------- 1.1 block 动画 --------------
- (IBAction)blockAnimation:(id)sender {

    //iOS4.0 使用block封装了 动画块相关的方法,方便我们的使用.
    //block 动画方法也是类方法
//    [UIView animateWithDuration:2 animations:^{
//        _imageView.frame = CGRectMake(275, 50, 100, 100);
//    }];

    [UIView animateWithDuration:2 animations:^{
        _imageView.frame = CGRectMake(275, 50, 100, 100);

    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{

            _imageView.frame = CGRectMake(0, 50, 100, 100);

        } completion:^(BOOL finished) {

                [self blockAnimation:nil];
            }];
        }];

}

#pragma mark ----------- 1.2 过渡动画 ----------
/*
- (IBAction)translateAnimation:(id)sender {

    //1.创建secondVC
    SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];
    secondVC.view.backgroundColor = [UIColor yellowColor];

    //2.父视图
    UIView *superView = self.view.superview;

    //3.过渡动画

    //过渡动画也是类方法
    //1.自己做动画
    //需求, self.view 从父视图上面移除, secondVC.view添加到父视图上
    //因此需要做动画的视图为父视图self.view.superView
    //参数1 容器视图, 需要做动画的视图

    //当block是另一个页面的属性时,页面间传值的时候需要防止重复引用.
    __weak typeof(self) WeakSelf = self;

//    [UIView transitionWithView:self.view.superview duration:0.5 options:UIViewAnimationOptionTransitionCurlUp animations:^{
//        //动画操作 移除当前视图 添加second.view
//        [self.view removeFromSuperview];
//        
//        [superView addSubview:secondVC.view];
//       
//    } completion:nil];

    //方法二. 两个页面间过渡
    [UIView transitionFromView:self.view toView:secondVC.view duration:1 options:(UIViewAnimationOptionTransitionCurlUp) completion:nil];

    //添加子视图
    [self addChildViewController:secondVC];




}
*/

#pragma mark---------- 2. 仿射变换 ------------------
static int k = 10;
- (IBAction)rotationAnimation:(id)sender {

    //仿射变换通常做三种样式的变换
    //1.旋转 2.平移 3.缩放
    //变换时有基于初始状态和基于上一次变换状态的两种
    [UIView animateWithDuration:0.01 animations:^{

        //旋转角度单位 -> 弧度    π -> 180角度对应的弧度
        //弧度π 角度° π = 180°
        //1°对应的弧度 = π / 180°
//        _imageView.transform = CGAffineTransformMakeRotation(M_PI);

       //(2)以上次变化为基准
        CGAffineTransform angle = CGAffineTransformMakeRotation(k * M_PI / 180);
        _imageView.transform = angle;

         //(1)以原始状态为基准
//        _imageView.transform = CGAffineTransformRotate(_imageView.transform, M_PI / 180); //基于上一次状态.

    } completion:^(BOOL finished) {

        k += 10; //每次增加10

        [self rotationAnimation:nil];
    }];

}

#pragma mark------------- 3.1 核心 基本动画 --------
- (IBAction)basicAnimation:(id)sender {

    //给某一个属性做动画

    //"opsition"
    //1.创建基本动画对象
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];

    //2.设置起始Value
    basic.fromValue = [NSValue valueWithCGPoint:_imageView.layer.position];

    //3.结束
    basic.toValue = [NSValue valueWithCGPoint:(CGPointMake(325, 100))];

    //4.设置动画
    basic.duration = 2; //2秒

    //5.给layer层添加核心动画 指定做动画的属性
    [_imageView.layer addAnimation:basic forKey:@"position"];

    //动画结束后,更改position
    _imageView.layer.position = CGPointMake(325, 100);


}

#pragma mark--------- 3.2 关键帧动画 -----------
- (IBAction)keyframe:(id)sender {

    _textField.backgroundColor = [UIColor redColor];

    //实现晃动效果
    //1.创建关键帧动画对象,指定属性
    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];

    //2.设置position.x的变化范围
    CGFloat centerX = _textField.layer.position.x;

    //移动到左边的位置
    CGFloat left = centerX - 10;
    //右边
    CGFloat right = centerX + 10;

    //3.创建运动轨迹
    NSNumber *l = [NSNumber numberWithFloat:left];

    NSNumber *c = [NSNumber numberWithFloat:centerX];

    NSNumber *r = [NSNumber numberWithFloat:right];

    //4.添加到帧动画的value数组中
    keyframe.values = @[l, c, r, l, c, r, l, c, r, l, c, r, l, c, r];

    //5.设置动画持续时间
    keyframe.duration = 0.5;

    //6.添加动画
    [_textField.layer addAnimation:keyframe forKey:@"position.x"];



}

#pragma mark-------- 3.3 组动画 -----------------
- (IBAction)groupAnimation:(id)sender {

    //1.创建一个动画组
//    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
    CAAnimationGroup *group = [CAAnimationGroup animation];

    //2.创建基本动画 移动 旋转

    //创建移动动画对象
    CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"position"];

    CGFloat centerX = _imageView.layer.position.x;

    CGFloat endX = 325;

    //起始值value
    move.fromValue = [NSValue valueWithCGPoint:(CGPointMake(centerX, 100))];

    //最终value
    move.toValue = [NSValue valueWithCGPoint:(CGPointMake(endX, 100))];

    //设置move动画时间
    move.duration = 2;

    //创建旋转动画对象
    CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"];

    //fromValue
    rotation.fromValue = [NSValue valueWithCATransform3D:_imageView.layer.transform];

    //toValue
    rotation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 0, 1)];

    //动画时间
    rotation.duration = 2;

    //3.把多个动画对象添加到动画数组里面
    group.animations = @[move, rotation];
    group.duration = 2;

    //4.给layer添加组动画
    [_imageView.layer addAnimation:group forKey:@"group"];



}

#pragma mark---------- 3.4 核心过渡动画 ----------

- (IBAction)translateAnimation:(id)sender {

    //1.创建过渡动画对象
    CATransition *transition = [CATransition animation];

    //2.设置过渡动画类型和动画方式
    transition.type = @"cube"; //立方体

    //动画执行的方式
    transition.subtype = kCATransitionFromRight;

    //动画持续时间
    transition.duration = 0.5;

    //3.添加动画
    [self.view.superview.layer addAnimation:transition forKey:@"立方体效果"];

    //4.移除当前视图 添加secondVC 视图

    SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];
    secondVC.view.backgroundColor = [UIColor whiteColor];

    UIView *superView = self.view.superview;

    [self.view removeFromSuperview];

    [superView addSubview:secondVC.view];

    //添加子视图控制器
    [self addChildViewController:secondVC];

}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end








/






//
//  SecondViewController.h
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface SecondViewController : UIViewController

@end








//
//  SecondViewController.m
//  UI23_Animation
//
//  Created by l on 15/10/7.
//  Copyright (c) 2015年 lon. All rights reserved.
//

#import "SecondViewController.h"

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark----------- 返回上一个页面 ----------
//过渡动画
- (IBAction)backUp:(id)sender {

    [UIView transitionFromView:self.view toView:self.parentViewController.view duration:1 options:(UIViewAnimationOptionTransitionCurlDown) completion:nil];
}


/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end


![animation](http://img.blog.csdn.net/20151007191900134)