16-UIKit（AutoLayout、Animation）

目录：

一、AutoLayout自动布局

二、动画(Animation)

回到顶部

一、AutoLayout自动布局

1.什么是AutoLayout

     从ios6开始引入的新技术，是新版的自动布局技术

2.基本原理

     通过对视图中所有子视图添加各种约束的方式实现布局，约束是一种规则，保存在父视图中，约束(constraint)类似于：

     此子视图相对父视图的左边一定20个点

     此子视图相对父视图的上边一定20个点

     此子视图宽100个点，高30个点。

3.使用AutoLayout

[MX1-AutoLayout]按住ctrl向上下左右托

4.约束的颜色：

     4.1设置约束两大原则    

           1>描述清晰

           2>互不冲突

     4.2颜色的含义

     橘黄色：描述不清楚

     蓝色：满足两大原则

     红色：冲突

5.各种约束

     1>对齐的约束

     2>间距的约束(双击线条可以修改间距)

     3>大小的约束（宽高）

     4>最佳大小

           一些常用控件(或视图)，拥有最佳大小属性，所以即使不添加宽高的约束，也满足两大原则，如UIButton，UILabel，UIStepper，但如果控件没有最佳大小属性，那么在自动布局中就需要设置宽高(托自己)，否则无法满足两大原则中的描述清晰原则，如UIImageView

     5>参考其他控件(托到其他控件)

练习：[MX2]

[MX3]两个按钮在屏幕的上方，左按钮离屏幕左10个点，右按钮离屏幕右10个点，两个按钮间10个点，两个按钮等宽，水平对齐，离状态栏10个点

developer.apple.com

wwdc2013 session 406 AutoLayout

6.用代码方法实现自动布局

[MX4-AutoLayout-Code]

     6.1万能公式

           view1.attr1 = view2.attr2 * multiplier + constant

           如：button.top = self.view.top * 1 + 10

- (void)viewDidLoad
{

    [super viewDidLoad];

    // button布局约束

    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

    [button setBackgroundColor:[UIColor greenColor]];

    CGRect frame = CGRectMake(0, 0, 100, 80);

    button.frame = frame;

    // 1.先加入到父视图

    [self.view addSubview:button];

    // AutoLayout代码应该写在此处，2.在设置约束

    // view1.attr1 = view2.attr2 * multiplier + constant

    // button.top = self.view.top * 1 + 10

    NSLayoutConstraint *topMargin = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:10];

    // button.right = self.view.top * 1 - 10

    NSLayoutConstraint *rightMargin = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-10];

    // button.width = nil + 100;

    NSLayoutConstraint *widthMargin = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1 constant:100];

    // button.height = nil  = 50;

    NSLayoutConstraint *heithtMargin = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:60];

    NSArray *constraints = @[topMargin,rightMargin,widthMargin,heithtMargin];

    [self.view addConstraints:constraints];

    // 解决AutoLayout和AutoResizing之间的冲突，将Autoresizing自动翻译成AutoLayout约束的动作取消

    self.view.translatesAutoresizingMaskIntoConstraints = NO;

    button.translatesAutoresizingMaskIntoConstraints = NO;

}

-(void)viewDidLayoutSubviews{

    // 这儿的代码是纯代码布局时使用，只用来改变子视图的frame

    // 不能在此写AutoLayout布局代码

}

     6.2VFL(Visual Format Language)

     利用以下方法创建多个约束

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

格式化字符串：

|-20-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-20-|  水平方向

V:|-20-[button1]  垂直方向

[MX5-VFL]

- (void)viewDidLoad

{

    [super viewDidLoad];

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];

    [button1 setTitle:@"button1" forState:UIControlStateNormal];

    button1.backgroundColor = [UIColor grayColor];

    [self.view addSubview:button1];

    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];

    [button2 setTitle:@"button2" forState:UIControlStateNormal];

    button2.backgroundColor = [UIColor grayColor];

    [self.view addSubview:button2];

    UIButton *button3 = [UIButton buttonWithType:UIButtonTypeSystem];

    [button3 setTitle:@"button3" forState:UIControlStateNormal];

    button3.backgroundColor = [UIColor grayColor];

    [self.view addSubview:button3];

    // 关掉Autoresizing

    button1.translatesAutoresizingMaskIntoConstraints = NO;

    button2.translatesAutoresizingMaskIntoConstraints = NO;

    button3.translatesAutoresizingMaskIntoConstraints = NO;

    // 创建多个约束

    NSString *formatString = @"|-10-[btn1]-10-[btn2(==btn1)]-10-[btn3(==btn1)]-10-|";// 水平方向

    NSDictionary *views = @{@"btn1" : button1, @"btn2" : button2, @"btn3" : button3};

    NSArray *constranints = [NSLayoutConstraint constraintsWithVisualFormat:formatString options:NSLayoutFormatAlignAllCenterY metrics:nil views:views];

    [self.view addConstraints:constranints];

   

    formatString = @"V:|-20-[btn1]";// 垂直方向

    constranints = [NSLayoutConstraint constraintsWithVisualFormat:formatString options:NSLayoutFormatAlignAllCenterY metrics:nil views:views];

    [self.view addConstraints:constranints];

}

7.自动布局总结

     1>代码自动布局尽量避免

     2>使用自动布局时，尽量在程序中不要直接改变被自动布局的视图的frame

     3>当控件或子视图非常多时，自动布局会发挥更大的作用

     4>如果使用transform，就无法使用自动布局

回到顶部

二、动画(Animation)

1.概念：把一些静态的图片快速切换就会形成动画，每一张静态的图片叫一帧，如果25~30帧/秒，人眼就无法识别帧间切换，感觉起来就是动画了。

cocos2D-X 1/60 FPS帧率(一帧需要多少秒来播放)

2.ios动画

     可以用多种方式实现，一种最简单的方式：

     UIImage类，animatedImageNamed：duration：

     一般用做非常简单，图片比较小，动画过程比较固定的动画

[MX6-Animation-UIImage]

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.imageView.image = [UIImage animatedImageNamed:@"ship-anim" duration:1.0/10 * 5];
}

3.NSTimer定时器

     在指定的时间内向指定对象发送指定的方法，可以设置重复

[mx7-NSTimer]

 

- (IBAction)connect:(UIBarButtonItem *)sender {
    [NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(titleChange:) userInfo:nil repeats:YES];
}
-(void)titleChange:(id)sender{
    if (self.count == 0) {
        self.title = @"连接中.";
    }else if(self.count == 1){
        self.title = @"连接中..";
    }else if(self.count == 2){
        self.title = @"连接中...";
    }else if(self.count == 3){
        self.title = @"连接中....";
    }else if(self.count == 4){
        self.title = @"连接中.....";
    }else if(self.count == 5){
        self.title = @"连接中......";
    }
    
    self.count++;
    self.count %= 6;
}

4.NSTimer制作动画

4.1匀速动画

     在指定时间点向控制对象发消息，从而改变对象的 具体属性.frame .bounds .center .transform .alpha

[MX8- Animation-Timer]

            匀速动画

                当前值  = 开始值 + 当前帧数 * (目标值 - 开始值) / (帧率 * 动画时长)

           

- (IBAction)fadeIn:(UIButton *)sender {
    [NSTimer scheduledTimerWithTimeInterval:1.0 / FPS target:self selector:@selector(fadeInAnimate:) userInfo:nil repeats:YES];
    
}
-(void)fadeInAnimate:(NSTimer *)sender{
    // 结果值 = 开始值 + 当前帧序数 * (结束值 - 开始值)/(帧率 * 动画时长)
    self.times++;
    self.imageView.alpha = 0 + self.times * (1.0 - 0)/(FPS * 3);
    if (self.times >= FPS * 3) {
        [sender invalidate];
        self.times = 0;
    }
    NSLog(@"%d",self.times);
}
- (IBAction)fadeOut:(UIButton *)sender {
    [NSTimer scheduledTimerWithTimeInterval:1.0 / FPS target:self selector:@selector(fadeOutAnimate:) userInfo:nil repeats:YES];
}
-(void)fadeOutAnimate:(NSTimer *)sender{
    self.times--;
    self.imageView.alpha = 1.0 - self.times * (0 - 1.0)/(FPS * 3);
    NSLog(@"%d",self.times);
    if (self.times <= -FPS * 3) {
        [sender invalidate];
        self.times = 0;
    }
}

4.2渐变动画

变速动画

                当前值 = 上一次的值 + （目标值 - 上次值) * 渐近因子

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.startY = self.playView.center.y;
}
- (IBAction)start:(UIButton *)sender {
    [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(animate:) userInfo:nil repeats:YES];
    
}

-(void)animate:(NSTimer *)sender{
    // 匀速动画
    // 当前值 = 开始值 + 当前帧数 * (结束值 - 开始值) / (帧率 * 动画时长)
    self.count++;
    CGPoint center = self.playView.center;
    center.y = self.startY + self.count * (100 - self.startY) * 0.01;
    self.playView.center = center;
    if (self.playView.center.y <= 100) {
        [sender invalidate];
    }
    
}

- (IBAction)start2:(id)sender {
    [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(animate2:) userInfo:Nil repeats:YES];
}
-(void)animate2:(NSTimer *)sender{
    // 变速动画
    // 当前值 = 上次值 + (结束值 - 上次值) * 渐进因子
    CGPoint center = self.playView.center;
    center.y = center.y + (100 - center.y) * 0.1;
    self.playView.center = center;
    if (self.playView.center.y <= 100) {
        [sender invalidate];
    }
}