iOS-UIViewAnimations使用详解

前言

我们在iOS开发的过程中，如果不想使APP显得太过生硬，往往会使用动画，动画又分为很多种，有CABasicAnimation,CAKeyframeAnimation等组合动画，还有imageview的动画，还有UIBezierPath绘制的动画等等，这里面我主要说说animations，我们常用的简单的小动画。

animations动画主要有以下几种：

    [UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#>]

    [UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

    [UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

    [UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

    [UIView animateKeyframesWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewKeyframeAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

Duration参数

Duration参数就是弹性动画执行动画的时间，也就是说你这个动画花费多少时间来完成，它的单位是秒。

下面我以三个view控件做演示，分别以1.0秒 、2.0秒 、3.0秒让其收回去，如下图：

可以看出，时间越长，收回去的速度越慢。

部分动画代码如下：

- (void)buttonClick:(UIButton *)button{
    NSArray *textArr = @[@"1.0",@"2.0",@"3.0"];
    for (int i = 0; i<_viewArray.count; i++) {
        UIView *view = _viewArray[i];
        [UIView animateWithDuration:[textArr[i] floatValue] animations:^{
            CGRect frame = view.frame;
            frame.size.width = 0;
            view.frame = frame;
        }];
    }
    
    
}

completion参数

completion是个block代码块，主要用于动画执行完成的回调，如下如：

部分代码如下：

[UIView animateWithDuration:[textArr[i] floatValue] animations:^{
            CGRect frame = view.frame;
            frame.size.width = 0;
            view.frame = frame;
        } completion:^(BOOL finished) {
            NSString *meg = [NSString stringWithFormat:@"第%d个动画执行完成",i];
            Alert(meg);
        }];

delay参数

delay参数主要用于延迟动画，设置一个时间，则该动画将在多小秒以后执行，我这里举了一个栗子，在设置相同的Duration动画执行时间以后，设置不同的delay，如下图：

部分代码如下：

- (void)buttonClick:(UIButton *)button{
    [button setTitle:@"已经开始" forState:UIControlStateNormal];
    NSArray *textArr = @[@"1.0",@"2.0",@"3.0"];
    for (int i = 0; i<_viewArray.count; i++) {
        UIView *view = _viewArray[i];
        [UIView animateWithDuration:1.0 delay:[textArr[i] floatValue] options:UIViewAnimationOptionLayoutSubviews animations:^{
            CGRect frame = view.frame;
            frame.size.width = 0;
            view.frame = frame;
        } completion:nil];
    }
}

options参数

options是个枚举类型UIViewAnimationOptions，options这个枚举大概控制的是这几个要素：当前动画嵌套中的动画执行随时间的快慢种类（先快后慢等..）。动画要一直重复吗。如果我使用转场动画那么我用哪种转场效果。还有子动画嵌套在父动画中时我们如何对待父动画中的相同选项等等。它的枚举类型如下：

UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //动画无限重复
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项

//时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快
UIViewAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快
UIViewAnimationOptionCurveEaseOut //时间曲线函数，由快到慢
UIViewAnimationOptionCurveLinear //时间曲线函数，匀速

//转场动画相关的
UIViewAnimationOptionTransitionNone //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转
UIViewAnimationOptionTransitionCurlUp //上卷转场
UIViewAnimationOptionTransitionCurlDown //下卷转场
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转

这里面我选择三个进行演示，UIViewAnimationOptionRepeat，UIViewAnimationOptionAutoreverse，UIViewAnimationOptionCurveEaseInOut，如下图：

部分代码如下：

- (void)buttonClick:(UIButton *)button{
    [button setTitle:@"已经开始" forState:UIControlStateNormal];
    for (int i = 0; i<_viewArray.count; i++) {
        UIView *view = _viewArray[i];
        if(i == 0){
            [UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionRepeat animations:^{
                CGRect frame = view.frame;
                frame.size.width = 0;
                view.frame = frame;
            } completion:nil];
        }else if(i == 1){
            [UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{
                CGRect frame = view.frame;
                frame.size.width = 0;
                view.frame = frame;
            } completion:nil];
        }else if(i == 2){
            [UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                CGRect frame = view.frame;
                frame.size.width = 0;
                view.frame = frame;
            } completion:nil];
        }
    }
}

usingSpringWithDamping参数

usingSpringWithDamping的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。在其他参数都一样的情况下，只改变usingSpringWithDamping的值为：0.1,0.5,1.0，演示效果如下：

可以看出，值越小，弹性效果越明显！

部分代码如下：

- (void)buttonClick:(UIButton *)button{
    [button setTitle:@"已经开始" forState:UIControlStateNormal];
    NSArray *textArr = @[@"0.1",@"0.5",@"1.0"];
    for (int i = 0; i<_viewArray.count; i++) {
        UIView *view = _viewArray[i];
        CGRect oldFrame = view.frame;
        [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:[textArr[i] floatValue] initialSpringVelocity:0 options:UIViewAnimationOptionLayoutSubviews animations:^{
            CGRect frame = view.frame;
            frame.size.width = 0;
            view.frame = frame;
        } completion:^(BOOL finished) {
            view.frame = oldFrame;
        }];
    }
}

initialSpringVelocity参数

initialSpringVelocity则表示初始的速度，数值越大一开始移动越快。下面我演示设置其他参数相同，initialSpringVelocity为：5，25，45时候的不同效果，如下：

可以看见，值越大，初速度越大。

部分代码如下：

- (void)buttonClick:(UIButton *)button{
    [button setTitle:@"已经开始" forState:UIControlStateNormal];
    NSArray *textArr = @[@"5",@"25",@"45"];
    for (int i = 0; i<_viewArray.count; i++) {
        UIView *view = _viewArray[i];
        CGRect oldFrame = view.frame;
        [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:1.0 initialSpringVelocity:[textArr[i] floatValue] options:UIViewAnimationOptionLayoutSubviews animations:^{
            CGRect frame = view.frame;
            frame.size.width = 0;
            view.frame = frame;
        } completion:^(BOOL finished) {
            view.frame = oldFrame;
        }];
    }
}

animateKeyframesWithDuration函数

animateKeyframesWithDuration函数一共有五个参数，参数的意义和上面的一样，我这里还是详细说明一下吧，可能很多初学者不是很会用；

duration：整个动画过程的时间。

delay：延迟多久开始。

options：可选项，比如说重复，倒着来一遍等效果，自己都试试看吧。

animations：需要执行的动画，里面可以是多个UIView.addKeyframeWithRelativeStartTime。
至于这个UIView.addKeyframeWithRelativeStartTime方法，类似于我们提到的第一个UIView.UIView.animateWithDuration，也是一个属性渐变的方法，不过这个方法只能写在他的爸爸 UIView.animateKeyframesWithDuration的animation参数函数块中。

completion：动画执行结束之后执行的代码。

我演示以改变一个view的背景颜色的一个组合动画，效果如下：

相关代码

- (void)runAnimateKeyframes {
    
    /**
     *  relativeDuration  动画在什么时候开始
     *  relativeStartTime 动画所持续的时间
     */
    
    [UIView animateKeyframesWithDuration:6.f
                                   delay:0.0
                                 options:UIViewKeyframeAnimationOptionCalculationModeLinear
                              animations:^{
                                  [UIView addKeyframeWithRelativeStartTime:0.0   // 相对于6秒所开始的时间（第0秒开始动画）
                                                          relativeDuration:1/3.0 // 相对于6秒动画的持续时间（动画持续2秒）
                                                                animations:^{
                                                                    self.view.backgroundColor = [UIColor redColor];
                                                                }];
                                  
                                  [UIView addKeyframeWithRelativeStartTime:1/3.0 // 相对于6秒所开始的时间（第2秒开始动画）
                                                          relativeDuration:1/3.0 // 相对于6秒动画的持续时间（动画持续2秒）
                                                                animations:^{
                                                                    self.view.backgroundColor = [UIColor yellowColor];
                                                                }];
                                  [UIView addKeyframeWithRelativeStartTime:2/3.0 // 相对于6秒所开始的时间（第4秒开始动画）
                                                          relativeDuration:1/3.0 // 相对于6秒动画的持续时间（动画持续2秒）
                                                                animations:^{
                                                                    self.view.backgroundColor = [UIColor greenColor];                                                                }];
                                  
                              }
                              completion:^(BOOL finished) {
                                  [self runAnimateKeyframes];
                              }];
}

转载说明

转载请注明出处：

http://blog.csdn.net/u014220518/article/details/69666883