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，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。

posted @ 2015-08-19 10:29  愤怒大熊猫  阅读(1622)  评论(0)  编辑  收藏  举报