UIView 动画

1、UIView 动画

  • 核心动画 和 UIView 动画 的区别:

    • 核心动画一切都是假象,并不会真实的改变图层的属性值,如果以后做动画的时候,不需要与用户交互,通常用核心动画(转场)。
    • UIView 动画必须通过修改属性的真实值,才有动画效果。

1.1 block 方式

  • 设置控件位置、尺寸、透明度等的代码,放在 animateWithDuration: block 中,将自动以动画的方式改变。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 开始动画,动画持续时间 2 秒
    [UIView animateWithDuration:1.0 animations:^{

    // 设置动画结束后的效果值

    // 改变控件的位置和尺寸,改变后的位置或大小
    self.redView.frame = CGRectMake(150, 50, 50, 50);

    } completion:^(BOOL finished) {

    // 动画完成后的操作

    // 开始一个新的动画
    [UIView animateWithDuration:1.0 animations:^{

    // 改变控件的位置和尺寸,改变后的位置或大小
    self.redView.frame = CGRectMake(50, 150, 80, 80);
    }];
    }];
    • 效果

  • 弹簧效果的动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    [UIView animateWithDuration:1.0
    delay:0
    usingSpringWithDamping:0.2
    initialSpringVelocity:0
    options:UIViewAnimationOptionCurveEaseInOut
    animations:^{

    // SpringWithDamping: 弹性系数,越小弹簧效果越明显

    self.redView.frame = CGRectMake(150, 50, 50, 50);

    } completion:nil];
    • 效果

1.2 动画块方式

  • 设置控件位置、尺寸、透明度等的代码,放在 beginAnimations: 和 commitAnimations 之间,将自动以动画的方式改变。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    // 开始一个动画块
    [UIView beginAnimations:nil context:nil];

    // 动画设置

    // 设置动画时间
    [UIView setAnimationDuration:1.0]; // default = 0.2

    // 设置延时
    [UIView setAnimationDelay:0.0]; // 设置指定的时间后开始执行动画,default = 0.0

    // 设置动画执行节奏
    /*
    UIViewAnimationCurveEaseInOut, // slow at beginning and end 开始和结束慢速,默认
    UIViewAnimationCurveEaseIn, // slow at beginning 开始慢速
    UIViewAnimationCurveEaseOut, // slow at end 结束慢速
    UIViewAnimationCurveLinear // 匀速
    */
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];

    // 设置重复次数
    [UIView setAnimationRepeatCount:MAXFLOAT]; // default = 0.0. May be fractional

    // 设置是否自动返回,以动画的方式返回
    [UIView setAnimationRepeatAutoreverses:YES]; // default = NO. used if repeat count is non-zero

    // 设置是否从当前状态开始动画
    [UIView setAnimationBeginsFromCurrentState:YES]; // default = NO

    // 设置代理
    [UIView setAnimationDelegate:self]; // default = nil

    // 设置动画开始时执行的代理方法,自定义方法
    [UIView setAnimationWillStartSelector:@selector(startAnimations)]; // default = NULL

    // 设置动画结束时执行的代理方法,自定义方法
    [UIView setAnimationDidStopSelector:@selector(stopAnimations)]; // default = NULL

    // 动画之行后效果值

    // 设置透明度,改变后的透明度
    self.redView.alpha = 1.0;

    // 改变控件的位置和尺寸,改变后的位置或大小
    self.redView.frame = CGRectMake(150, 150, 80, 80);

    // 结束一个动画块
    [UIView commitAnimations];

    // 动画开始时执行的代理方法,自定义方法
    - (void)startAnimations {

    NSLog(@"startAnimations");
    }

    // 动画结束时执行的代理方法,自定义方法
    - (void)stopAnimations {

    NSLog(@"stopAnimations");
    }
    • 效果

1.3 形变属性方式

文章目录
  1. 1. 1、UIView 动画
    1. 1.1. 1.1 block 方式
    2. 1.2. 1.2 动画块方式
    3. 1.3. 1.3 形变属性方式
隐藏目录