iOS动画——UIKit动画

iOS动画

iOS有不少动画技术，API主要分布在两个库中，一个是UIKit，另外一个是CoreAnimation，先对UIKit动画作一下总结。

 

UIKit动画

在UIKit中，不少API均可以看到animated参数，表示是否动画显示，其实这是UIKit封装CoreAnimation后的结果。

好比你们确定都写过模态视图和导航控制器，他们在视图展现的时候都会有一个animated参数。

[self.navigationController pushViewController:vc animated:YES];
[self presentViewController:vc animated:YES completion:nil];

这些动画除了系统提供，其实咱们是能够本身定制的，这里先简单提一下，下面在详细说。

 

主要API

UIKit主要API散落在UIView+UIViewAnimationWithBlocks和UIView+UIViewKeyframeAnimations两个分类

@interface UIView(UIViewAnimationWithBlocks)

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray *)views options:(UIViewAnimationOptions)options animations:(void (^)(void))parallelAnimations completion:(void (^)(BOOL finished))completion 

@end

@interface UIView (UIViewKeyframeAnimations)

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);

@end

咱们每一个API挨着看一下

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 

这个是动画的一个经常使用API，用于建立经常使用的动画，参数列表以下

参数	说明
duration	持续时间
delay	延时时间开始
options	动画选项（下面详细解释）
animations	动画block
completion	动画结束后的回调

 

 

 

 

 

 

下面咱们看一个动画例子：

    [UIView animateWithDuration:0.5 delay:1.0 options:UIViewAnimationOptionAutoreverse animations:^{
        CGRect frame = testView.frame;
        frame.origin.y += 100;
        testView.frame = frame;
    } completion:^(BOOL finished) {
        btn.hidden = YES;
    }];

这是在按钮click事件里面的一段代码，btn就是该按钮，testView定义以下

    testView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    testView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:testView];

你们运行代码会发现，1秒后动画开始，运行了0.5秒，视图先向下再向上运动100回到原点，而后忽然跳到100的位置按钮消失。

回到原点的缘由是咱们options写了UIViewAnimationOptionAutoreverse动画选项，该项会在东环正向运行后自动翻转动画运行一遍。

你们应该能开出来options能够设置动画的一些行为

options大致上能够分为三类，分为动画属性，动画线性关系，和动画转场效果。

动画属性：

UIViewAnimationOptionLayoutSubviews	在AutoLayout下，若是修改AutoLayout，那么子视图也会跟着一块儿变化
UIViewAnimationOptionAllowUserInteraction	在动画时，容许用户交互，好比按钮在运动者还能够点击
UIViewAnimationOptionBeginFromCurrentState	从当前状态开始动画
UIViewAnimationOptionRepeat	重复动画
UIViewAnimationOptionAutoreverse	动画执行完毕自动翻转
UIViewAnimationOptionOverrideInheritedDuration	忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve	忽略外层动画线性关系

 

 

 

 

 

 

 

 

动画线性关系

UIViewAnimationOptionShowHideTransitionViews	用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions	忽略嵌套继承的选项
UIViewAnimationOptionCurveEaseInOut	时间曲线函数，由慢到快
UIViewAnimationOptionCurveEaseIn	时间曲线函数，由慢到特别快
UIViewAnimationOptionCurveEaseOut	时间曲线函数，由快到慢
UIViewAnimationOptionCurveLinear	时间曲线函数，匀速

 

 

 

 

 

 

 

动画转场效果

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

 

 

 

 

 

 

 

 

转场动画

转场动画的API以下，是为了控制视图的跳转而使用的

[UIView transitionWithView:subView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        [subView addSubview:testView];
} completion:^(BOOL finished) {
        
}];

运行这段代码能够看到视图被翻转过来的时候添加了testView在上面。

[UIView transitionFromView:subView toView:testView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:nil];

这个方法能够控制一个控制器中的视图切换。

 

关键帧动画：

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
            CGRect frame = testView.frame;
            frame.origin.y += 100 * flag;
            testView.frame = frame;
        }];
        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
            CGRect frame = testView.frame;
            frame.origin.y -= 100 * flag;
            testView.frame = frame;
        }];
        [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
            CGRect frame = testView.frame;
            frame.origin.y += 200 * flag;
            testView.frame = frame;
        }];
    } completion:^(BOOL finished) {
        btn.hidden = YES;
    }];

能够看到，关键帧动画咱们很方便的能够控制动画的整个过程，addKeyframeWithRelativeStartTime:是添加关键帧方法，参数startTime是一个在0~1之间的数字，表示开始时间占总时间的%多少，好比上例中的第一帧就是0，第二针就是25%也就是在0.5秒开始。relativeDuration和开始时间同样，是运行时间占整个时间的百分比。

 

弹簧动画

    [UIView animateWithDuration:0.5 delay:1.0 usingSpringWithDamping:1 initialSpringVelocity:0.1 options:UIViewAnimationOptionAutoreverse animations:^{
        CGRect frame = testView.frame;
        frame.origin.y += 100 * flag;
        testView.frame = frame;
    } completion:^(BOOL finished) {
        btn.hidden = YES;
    }];

弹簧动画的阻尼值，也就是至关于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，若是大道必定程度，会出现弹不动的状况。

弹簧动画的速率，或者说是动力。值越小弹簧的动力越小，弹簧拉伸的幅度越小，反之动力越大，弹簧拉伸的幅度越大。这里须要注意的是，若是设置为0，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。