[iOS UI进阶

A.基本用法

1.CABasicAnimation

//
//  ViewController.m
//  CoreAnimationTest
//
//  Created by hellovoidworld on 15/1/14.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property(nonatomic, strong) CALayer *layer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
   

    CALayer *layer = [[CALayer alloc] init];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.anchorPoint = CGPointZero;
    layer.position = CGPointMake(100, 200);
    layer.backgroundColor = [UIColor redColor].CGColor;
   
    [self.view.layer addSublayer:layer];
   
    self.layer = layer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
//    [self testTransform];
   
//    [self testRotation];
   
//    [self testScale];
   
    [self testTranslate];
}

/** 测试位移转换 */
- (void) testTransform {
    // 1.创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
   
    // 2.设置动画
    anim.duration = 2.0;
    // 动画设置目标属性
    anim.keyPath = @"transform.translation.x";
    // 目标属性值
    anim.toValue = @(150);
   
    // 完成后保留动画
    anim.removedOnCompletion = NO;
    // 定格动画模式为最后一刻
    anim.fillMode = kCAFillModeForwards;
   
    // 3.添加动画到图层
    [self.layer addAnimation:anim forKey:nil];
}

/** 测试旋转 */
- (void) testRotation {
    // 1.创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
   
    // 2.设置动画
    anim.duration = 2.0;
   
    // 动画设置目标属性
//    anim.keyPath = @"transform.rotation";
    anim.keyPath = @"transform";
    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)];
   
    // 目标属性值
//    anim.toValue = @(M_PI_2);
    anim.toValue = value;
   
   
    // 完成后保留动画
    anim.removedOnCompletion = NO;
    // 定格动画模式为最后一刻
    anim.fillMode = kCAFillModeForwards;
   
    // 3.添加动画到图层
    [self.layer addAnimation:anim forKey:nil];
}

/** 测试缩放 */
- (void) testScale {
    // 1.创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
   
    // 2.设置动画
    anim.duration = 2.0;
    // 动画设置目标属性
    anim.keyPath = @"bounds";
   
    // 由于属性是bounds，所以x,y属性是无用的，并且要使用CGRect
    NSValue *fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 0, 0)];
    NSValue *toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
   
    // 目标属性值
    anim.fromValue = fromValue;
    anim.toValue = toValue;
   
    // 完成后保留动画
    anim.removedOnCompletion = NO;
    // 定格动画模式为最后一刻
    anim.fillMode = kCAFillModeForwards;
   
    // 3.添加动画到图层
    [self.layer addAnimation:anim forKey:nil];
}

- (void) testTranslate {
    // 1.创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
   
    // 2.设置动画
    anim.duration = 2.0;
    // 动画设置目标属性
    anim.keyPath = @"position";
   
    // 目标属性值
    NSValue *value = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    // 增减目标属性值，所以一直点击就会一直移动下去
    anim.byValue = value;
   
    // 完成后保留动画
    anim.removedOnCompletion = NO;
    // 定格动画模式为最后一刻
    anim.fillMode = kCAFillModeForwards;
   
    // 3.添加动画到图层
    [self.layer addAnimation:anim forKey:nil];
}


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

 

2.CAKeyframeAnimation

 

//
//  KeyframeViewController.m
//  CoreAnimationTest
//
//  Created by hellovoidworld on 15/1/15.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "KeyframeViewController.h"

@interface KeyframeViewController ()

@property(nonatomic, strong) CALayer *layer;

@end

@implementation KeyframeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    CALayer *layer = [[CALayer alloc] init];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.anchorPoint = CGPointZero;
    layer.position = CGPointMake(200, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
   
    [self.view.layer addSublayer:layer];
   
    self.layer = layer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
//    [self testPath];
 
    [self testMutiValue];
}

- (void) testPath {
    // 创建动画对象
    CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
   
    // 设置动画
    anim.keyPath = @"position";
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.duration = 2.0;
   
    // 设置绘画路径
    CGMutablePathRef path = CGPathCreateMutable();
    // 创建一个圆的轨迹
    CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 200, 200));
    // 设置动画轨迹
    anim.path = path;
    // 释放路径
    CGPathRelease(path);
   
    // 设置动画代理
    anim.delegate = self;
   
    [self.layer addAnimation:anim forKey:nil];
}

- (void) testMutiValue {
    // 创建动画对象
    CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
   
    // 设置动画
    anim.keyPath = @"position";
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.duration = 2.0;
   
    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(300, 200)];
    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(120, 50)];
   
    anim.values = @[v1, v2, v3, v4];
   
    //  设置动画节奏
    // 慢进慢出
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
   
    // 设置动画代理
    anim.delegate = self;
   
    [self.layer addAnimation:anim forKey:nil];
}

#pragma mark - 动画代理方法
/** 动画开始之后 */
- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"animationDidStart");
}

/** 动画结束 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"animationDidStop");
}


@end

 

3.控件抖动

 

//
//  ShakeViewController.m
//  CoreAnimationTest
//
//  Created by hellovoidworld on 15/1/15.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "ShakeViewController.h"

@interface ShakeViewController ()

@property(nonatomic, strong) UIImageView *imageView;

@end

@implementation ShakeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"headImage"]];
    imageView.frame = CGRectMake(100, 100, 100, 100);
    self.imageView = imageView;
   
    UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [startButton setTitle:@"开始" forState:UIControlStateNormal];
    startButton.frame = CGRectMake(50, 50, 40, 50);
    [startButton addTarget:self action:@selector(startShake) forControlEvents:UIControlEventTouchUpInside];
   
    UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [stopButton setTitle:@"停止" forState:UIControlStateNormal];
    stopButton.frame = CGRectMake(150, 50, 40, 50);
    [stopButton addTarget:self action:@selector(stopShake) forControlEvents:UIControlEventTouchUpInside];
   
    [self.view addSubview:imageView];
    [self.view addSubview:startButton];
    [self.view addSubview:stopButton];
}

/** 开始摆动 */
- (void) startShake {
    NSLog(@"start shake");
   
    // 创建动画
    CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];
    anim.keyPath = @"transform.rotation";
    anim.repeatCount = MAXFLOAT;
    anim.duration = 0.2;
   
    // 设置摇摆
    anim.values = @[@(- (M_PI/180 * 5)), @((M_PI/180 * 5)), @(- (M_PI/180 * 5))];
  
    // 定格动画
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
   
    // 给view加上动画
    [self.imageView.layer addAnimation:anim forKey:@"shake"];
}

/** 停止摆动 */
- (void) stopShake {
    NSLog(@"stop shake");
   
    [self.imageView.layer removeAnimationForKey:@"shake"];
}
 
@end

 

4.过渡效果

 

//
//  TransitionViewController.m
//  CoreAnimationTest
//
//  Created by hellovoidworld on 15/1/15.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "TransitionViewController.h"

@interface TransitionViewController ()

@property(nonatomic, strong) UIImageView *imageView;

@property(nonatomic, assign) int imageIndex;

@end

@implementation TransitionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    self.imageIndex = 0;
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
    imageView.frame = CGRectMake(80, 50, 160, 240);
    self.imageView = imageView;
   
    UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [startButton setTitle:@"上一张" forState:UIControlStateNormal];
    startButton.frame = CGRectMake(50, 400, 80, 50);
    [startButton addTarget:self action:@selector(preImage) forControlEvents:UIControlEventTouchUpInside];
   
    UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [stopButton setTitle:@"下一张" forState:UIControlStateNormal];
    stopButton.frame = CGRectMake(150, 400, 80, 50);
    [stopButton addTarget:self action:@selector(nextImage) forControlEvents:UIControlEventTouchUpInside];
   
    [self.view addSubview:imageView];
    [self.view addSubview:startButton];
    [self.view addSubview:stopButton];
}

/** 上一张 */
- (void) preImage {
    NSLog(@"preImage");
   
    self.imageIndex--;
    if (self.imageIndex == -1) {
        self.imageIndex = 8;
    }
   
    CATransition *anim = [[CATransition alloc] init];
    anim.duration = 0.5;
    anim.type = @"cube";
    anim.subtype = kCATransitionFromLeft;
   
    [self.imageView.layer addAnimation:anim forKey:nil];
   
    [self changeImage:self.imageIndex];
}

/** 下一张 */
- (void) nextImage {
    NSLog(@"nextImage");
   
    self.imageIndex++;
    if (self.imageIndex == 9) {
        self.imageIndex = 0;
    }
   
    CATransition *anim = [[CATransition alloc] init];
    anim.duration = 0.5;
    anim.type = @"cube";
    anim.subtype = kCATransitionFromRight;
   
    [self.imageView.layer addAnimation:anim forKey:nil];
   
    [self changeImage:self.imageIndex];
}

/** 替换图片 */
- (void) changeImage:(int) imageIndex {
    NSString *imageName = [NSString stringWithFormat:@"%d", self.imageIndex + 1];
    self.imageView.image = [UIImage imageNamed:imageName];
}

@end

 

5.CAAnimationGroup 动画组（组合多种动画）

 

//
//  GroupViewController.m
//  CoreAnimationTest
//
//  Created by hellovoidworld on 15/1/15.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "GroupViewController.h"

@interface GroupViewController ()

@property(nonatomic, strong) UIView *hvwView;

@end

@implementation GroupViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    UIView *hvwView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    hvwView.backgroundColor = [UIColor redColor];
    self.hvwView = hvwView;
   
    [self.view addSubview:hvwView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 平移
    CABasicAnimation *anim1 = [[CABasicAnimation alloc] init];
    anim1.keyPath = @"position";
    anim1.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
   
    // 旋转
    CABasicAnimation *anim2 = [[CABasicAnimation alloc] init];
    anim2.keyPath = @"transform.rotation";
    anim2.toValue = @(M_PI_2);
   
    // 缩放
    CABasicAnimation *anim3 = [[CABasicAnimation alloc] init];
    anim3.keyPath = @"bounds";
    anim3.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
   
    // group动画
    CAAnimationGroup *animGroup = [[CAAnimationGroup alloc] init];
    animGroup.animations = @[anim1, anim2, anim3];
    animGroup.duration = 2.0;
   
    // 定格动画
    animGroup.removedOnCompletion = NO;
    animGroup.fillMode = kCAFillModeForwards;
   
    [self.hvwView.layer addAnimation:animGroup forKey:nil];
}
 
@end