正文

iOS动画——UIKit动画

IP云
IP云V管理员/7 阅读
07/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 += ;
testView.frame = frame;
} completion:^(BOOL finished) {
btn.hidden = YES;
}];

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

testView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
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: delay: options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime: relativeDuration:0.25 animations:^{
CGRect frame = testView.frame;
frame.origin.y += * flag;
testView.frame = frame;
}];
[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
CGRect frame = testView.frame;
frame.origin.y -= * flag;
testView.frame = frame;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
CGRect frame = testView.frame;
frame.origin.y += * 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: initialSpringVelocity:0.1 options:UIViewAnimationOptionAutoreverse animations:^{
CGRect frame = testView.frame;
frame.origin.y += * flag;
testView.frame = frame;
} completion:^(BOOL finished) {
btn.hidden = YES;
}];

弹簧动画的阻尼值，也就是相当于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，如果大道一定程度，会出现弹不动的情况。

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